Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
(1) From time from array of select. (2) To time from array of select. (3) select interval with 30 min or 1 hr..

Depending on that need to generate array of time-slots with from-time :to-time with the interval we have selected, but the array of time-slots are not getting rendered..

result should be like this:-

from : 8:00 am to 8:30 am from : 8:30 am to 9:00 am So any help will be highly appreciated.


What I have tried:

<pre>import React, { Fragment, useState, useEffect } from "react";
import { HalfHourlyTimeSlotsList } from "../../../../utils/HalfHourlyTimeSlotsList";
import { HourlyTimeSlotsList } from "../../../../utils/HourlyTimeSlotsList";
import { TimeInterval } from "../../../../utils/timeInterval";
import { TimeSlotsList15Minutes } from "../../../../utils/TimeSlotsList15Minutes";
import {
  Formik,
  FieldArray,
  Form as Formformik,
  Field,
  ErrorMessage,
} from "formik";
import { Form, Col, Row, FormGroup, Button, Table } from "react-bootstrap";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { TextField, MenuItem, select } from "@material-ui/core";
import classes from "../../../../../css/TimeSlots.module.css";
import { Spinners } from "../../../../components/UI/Spinners";
import { shallowEqual, useSelector } from "react-redux";
import moment from "moment";

const TimeSlotsEditForm = (props) => {
  const [isloading, setIsLoading] = useState(false);
  const [vehicle_type, setVehicleType] = useState("");
  const [endTime, setEndtime] = useState("");
  const [startTime, setStartTime] = useState("");
  const [showTimeSlots, setshowTimeSlots] = useState(false);
  const [array_time, SetArrayTime] = useState([]);
  // const [intervals, SetInervals] =useState([]);

  const { timeslotForEdit } = props;

  const onReportSubmit = async (e) => {
    if (e) e.preventDefault();
    setshowTimeSlots(false);
    setshowTimeSlots(true);
    console.log();
  };

  let value = {
    interval: vehicle_type,
    startTime: startTime,
    endTime: endTime,
  };

  console.log("1", value.startTime);
  console.log("2", value.endTime);
  console.log("3", moment(vehicle_type, "H:mm").format("H:m:ss"));
  

  const doArrayChunks = () => {
   
    var inputDataFormat = "HH:mm a";
    var outputFormat = "HH:mm a";
    var tmp = moment(vehicle_type, inputDataFormat);
    var dif = tmp - moment().startOf("day");

    var startIntervalTime = moment(startTime, inputDataFormat).add(-dif, "ms");
    var endIntervalTime = moment(startTime, inputDataFormat);
    var finishTime = moment(endTime, inputDataFormat);
    
    var intervals = [];
    while (startIntervalTime < finishTime) {
      endIntervalTime.format(outputFormat);
     
      let obj = {
        from: startIntervalTime.format(outputFormat),
        to: endIntervalTime.format(outputFormat),
      };
      intervals.push(obj);
      startIntervalTime.add(dif, "ms");
      endIntervalTime.add(dif, "ms");
      
    SetArrayTime((prev_array_time) => {
      let newArray = [...prev_array_time];
      newArray.push(intervals);
      return newArray;
    });
  };

  

  const renderTbody = (arr) => {
    arr.map((di, vi) => {
      <div key={vi}>{di.from}</div>;
    });
  };

  return (
    <>
      <Fragment>
        {isloading ? <Spinners /> : ""}
        <Form onSubmit={onReportSubmit}>
          <Row className="mb-6">
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="Start-time*"
                  name="Start-time"
                  value={startTime ? startTime : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setStartTime(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  {HourlyTimeSlotsList &&
                    HourlyTimeSlotsList.map((data, index) => (
                      <MenuItem key={index} value={data.time_name}>
                        {data.time_name}
                      </MenuItem>
                    ))}
                </TextField>
              </Form.Group>
            </Col>
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="End-time*"
                  name="End-time"
                  value={endTime ? endTime : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setEndtime(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  {HourlyTimeSlotsList &&
                    HourlyTimeSlotsList.map((data, index) => (
                      <MenuItem key={index} value={data.time_name}>
                        {data.time_name}
                      </MenuItem>
                    ))}
                </TextField>
              </Form.Group>
            </Col>
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="Time interval*"
                  name="Time-slot interval"
                  value={vehicle_type ? vehicle_type : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setVehicleType(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  <MenuItem value={"00:15:00"}>15 minutes</MenuItem>
                  <MenuItem value={"00:30:00"}>30 minutes</MenuItem>
                  <MenuItem value={"01:00:00"}>1 hour</MenuItem>
                </TextField>
              </Form.Group>
            </Col>
          </Row>
          <Button
            variant="primary"
            type="submit"
            onClick={() => doArrayChunks()}
          >
            Generate
          </Button>
        </Form>
      </Fragment>

      <div>{renderTbody(array_time)}</div>

      <Formik
        // initialValues={initialValues}
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      >
        {({ values }) => (
          <Formformik>
            <fieldset
              className="form-group p-3 shadow p-3 mb-5 mt-5 bg-white"
              style={{ border: "1px solid #76b3f1" }}
            >
              <legend className="w-auto px-2">
                <h4>Time-slots:</h4>
              </legend>
              {/* <FieldArray name="friends">
                  {({ insert, remove, push }) => (
                    <div>
                      {values.friends.length > 0 &&
                        values.friends.map((friend, index) => (
                          <div className="row" key={index}>
                            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
                              <Form.Group as={Col} style={{ padding: "0px" }}>
                                <TextField
                                  select
                                  label="From*"
                                  name={`friends.${index}.name`}
                                  value={vehicle_type ? vehicle_type : ""}
                                  defaultValue=""
                                  onChange={(event) => {
                                    setVehicleType(event.target.value);
                                  }}
                                  margin="normal"
                                  variant="outlined"
                                >
                                  <MenuItem value="">
                                    None
                                  </MenuItem>
                                  <MenuItem value={"15 minutes"}>
                                    15 minutes
                                  </MenuItem>
                                  <MenuItem value={"30 minutes"}>
                                    30 minutes
                                  </MenuItem>
                                  <MenuItem value={"1 hour"}>1 hour</MenuItem>
                                </TextField>
                              </Form.Group>
                            </Col>
                            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
                              <Form.Group as={Col} style={{ padding: "0px" }}>
                                <TextField
                                  select
                                  label="To*"
                                  name={`friends.${index}.email`}
                                  value={endTime ? endTime : ""}
                                  defaultValue=""
                                  onChange={(event) => {
                                    setEndtime(event.target.value);
                                  }}
                                  margin="normal"
                                  variant="outlined"
                                >
                                  <MenuItem value="">
                                    None
                                  </MenuItem>
                                  {HourlyTimeSlotsList &&
                                    HourlyTimeSlotsList.map((data, index) => (
                                      <MenuItem
                                        key={index}
                                        value={data.time_name}
                                      >
                                        {data.time_name}
                                      </MenuItem>
                                    ))}
                                </TextField>
                              </Form.Group>
                            </Col>
                            <Button
                              variant="secondary"
                              type="submit"
                              onClick={() => remove(index)}
                              style={{ margin: "1.1em 0", lineHeight: "1.8em" }}
                            >
                              Remove
                            </Button>
                          </div>
                        ))}
                      <Button
                        variant="primary"
                        type="button"
                        onClick={() => push({ name: "", email: "" })}
                      >
                        Add
                      </Button>
                    </div>
                  )}
                </FieldArray> */}
              {/* {JSON.stringify(array_time, null, 2)}; */}
             
            </fieldset>
          </Formformik>
        )}
      </Formik>
      
      <table className="table table-bordered">
        <thead className="thead text-center">
          <tr>
            <th scope="col">From</th>
            <th scope="col">To</th>
          </tr>
        </thead>
        <tbody>
          {array_time?.map((d, i) => (
            <tr key={i}>
              <td>
                {d.from}-{d.to}
              </td>
              <td></td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default TimeSlotsEditForm;
Posted
Updated 30-Aug-22 18:51pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900