Created Add_Ride UI [#171205848]

src/components/Add_Location.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {InputGroup, Label, Input} from 'reactstrap';
+
+const AddLocation = ({ idx, cabRoute, handleRouteChange }) => {
+  const locationId = `location-${idx}`;
+  const creditId = `credit-${idx}`;
+
+   return(
+     <div className="row">
+      <div className="col-sm-6" align="left" key={`location-${idx}`}>
+       <Label style={{ width:"120px" }} for="enterLocation">{`Location No : ${idx + 1}`}</Label>
+       <InputGroup style={{ width:"150px" }}>
+         <Input
+          style={{ width:"150px" }}
+          placeholder="Location"
+          type="text"
+          name={locationId}
+          data-idx={idx}
+          data-field='location'
+          id={locationId}
+          className="location"
+          defaultValue={cabRoute[idx].location}
+          onChange={handleRouteChange}
+         />
+       </InputGroup>
+     </div>
+     <br />
+     <div className="col-sm-6" align="right" key={`credit-${idx}`}>
+       <Label style={{ width:"150px" }} for="enterCredit">Associated Credit</Label>
+       <InputGroup style={{ width:"150px" }}>
+       <Input
+         style={{ width:"150px" }}
+         placeholder="Credit"
+         type="text"
+         name={creditId}
+         data-idx={idx}
+         id={creditId}
+         className="credit"
+         data-field='credit'
+         defaultValue={cabRoute[idx].credit}
+         onChange={handleRouteChange}
+       />
+       </InputGroup>
+     </div>
+     <br />
+     </div>
+
+   );
+};
+
+AddLocation.propTypes = {
+  idx: PropTypes.number,
+  CabRoute: PropTypes.array,
+  handleRouteChange: PropTypes.func,
+};
+
+export default AddLocation;

src/components/Add_Ride.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import Select from 'react-select';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './component.css';
+import AddLocation from './Add_Location';
+import {Button, InputGroup, Label, Input} from 'reactstrap';
+
+
+
+function AddRide() {
+
+  const emptyCabRoute = { location: '', credit: '', sequence_id: '' };
+  var [cabNumberList, setCabNumberList] = useState([]);
+  const [cabNumber, setCabNumber] = useState({});
+  const [timeSlot, setTimeSlot] = useState('');
+  const [cabRoute, setCabRoute] = useState([{...emptyCabRoute}]);
+
+  cabNumberList = [
+    { cab_id: 1, cab_number: 'MH15MB1234', cab_capacity: 4 },
+    { cab_id: 2, cab_number: 'MH14MN7896', cab_capacity: 3},
+    { cab_id: 3, cab_number: 'MH15MB7456', cab_capacity: 2}
+  ];
+
+  const options = cabNumberList.map((cab_no) => { return {value: [cab_no.cab_id, cab_no.cab_capacity] , label: cab_no.cab_number }});
+
+
+  const addLocation = () => {
+    setCabRoute([...cabRoute,{...emptyCabRoute}]);
+  }
+
+  //Hook For Fetching Data Into CabNumberList
+  useEffect(() => {
+    fetch('http://192.168.1.80:3000/rides',{
+      method: 'GET',
+      headers: {
+        'Accept': 'application/cab-tab.com; version=1'
+      }
+    })
+    .then((jsonResponse) => {
+    console.log(jsonResponse);
+    return jsonResponse.json();
+    })
+    .then((parsedResponse) => {
+    console.log({parsedResponse});
+    setCabNumberList(parsedResponse);
+    })
+    .catch((error)=>{
+    console.error("Error");
+    })
+  }, []);
+
+  //Handler for Managing Chnages Select DropDown
+  const handleCabChange = (selectedOption) => {
+     setCabNumber(selectedOption)
+     console.log(`Option selected:`, selectedOption);
+  }
+
+  //Handler for Managing Changes in Location and Credit Field
+  const handleRouteChange = (e) => {
+    const updatedRoutes = [...cabRoute];
+    updatedRoutes[e.target.dataset.idx][e.target.dataset.field] = e.target.value;
+    if (e.target.dataset.field === "location")
+    {
+      //updatedRoutes[e.target.dataset.idx][e.target['sequence_id']] = e.target.dataset.idx + 1;
+      updatedRoutes[e.target.dataset.idx]['sequence_id'] = parseInt(e.target.dataset.idx) + 1 ;
+    }
+    setCabRoute(updatedRoutes);
+  };
+
+  // Submit Event for Save Ride Button
+  const submit = () => {
+    const rides = {
+      cab_id: cabNumber.value[0],
+      time: timeSlot,
+      routes: cabRoute,
+      available_seats: cabNumber.value[1],
+    };
+    fetch('http://192.168.1.80:3000/rides', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/cab-tab.com; version=1',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(rides),
+    }).then((response) => { console.log(); });
+  };
+
+
+
+  // CustomStyle for Select Box Width
+  const customStyles = {
+  container: provided => ({
+    ...provided,
+    width: 300
+  })
+  };
+  return (
+    <div>
+      <div className="card col-sm-7">
+        <div className="card__container" >
+          <div>
+            <h1 className="card__title">Add Ride for Passengers</h1>
+          </div>
+          <br />
+          <div className="row" >
+            <Label style={{ width:"150px" }} for="exampleCabNumber">Vehicle Number : </Label>
+            <InputGroup style={{ width:"150px" }} className="col-sm-6">
+              <Select placeholder = {<div>Select Vehicle</div>}
+               styles={customStyles}
+               value={cabNumber}
+                onChange={handleCabChange}
+                options={options}
+              />
+            </InputGroup>
+          </div>
+          <br />
+
+          <div className="row">
+            <Label  style={{ width:"150px" }} for="exampleTimeSlot">Time Slot :  </Label>
+            <InputGroup style={{ width:"150px" }} className="col-sm-6">
+              <Input
+                placeholder="Enter Time Slot"
+                type="time"
+                name="time"
+                value={timeSlot}
+                onChange={(e) => setTimeSlot(e.target.value)}
+              />
+            </InputGroup>
+          </div>
+          <br />
+
+          <div className="row" align="center">
+            <legend>Set Route</legend>
+          </div>
+          <br />
+          {
+            cabRoute.map((val, idx) => (
+              <AddLocation
+                key={`cabRoute-${idx}`}
+                idx={idx}
+                cabRoute={cabRoute}
+                handleRouteChange={handleRouteChange}
+              /> )
+            )
+          }
+          <br />
+            <Button className="add__btn" color="primary" size="sm" onClick={addLocation}>Add More Location</Button>
+          <br />
+          <br />
+          <Button  color="success" size="sm" onClick={submit}>Save Ride</Button>
+          <br />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddRide;