From eea8841907bc72330a05dc44624914078f6c9256 Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Tue, 11 Feb 2020 16:46:52 +0530 Subject: [PATCH 1/5] Created Add_Ride UI [#171205848] --- src/components/Add_Location.js | 58 ++++++++++++ src/components/Add_Ride.js | 158 +++++++++++++++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 src/components/Add_Location.js create mode 100644 src/components/Add_Ride.js diff --git a/src/components/Add_Location.js b/src/components/Add_Location.js new file mode 100644 index 0000000..2fa41d9 --- /dev/null +++ b/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( +
+
+ + + + +
+
+
+ + + + +
+
+
+ + ); +}; + +AddLocation.propTypes = { + idx: PropTypes.number, + CabRoute: PropTypes.array, + handleRouteChange: PropTypes.func, +}; + +export default AddLocation; diff --git a/src/components/Add_Ride.js b/src/components/Add_Ride.js new file mode 100644 index 0000000..61dc680 --- /dev/null +++ b/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 ( +
+
+
+
+

Add Ride for Passengers

+
+
+
+ + + setTimeSlot(e.target.value)} + /> + +
+
+ +
+ Set Route +
+
+ { + cabRoute.map((val, idx) => ( + ) + ) + } +
+ +
+
+ +
+
+
+
+ ); +} + +export default AddRide; From d7da6fd4cefd9d5a8b6f3d5067eb1d4abab9fba4 Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Tue, 11 Feb 2020 18:34:31 +0530 Subject: [PATCH 2/5] Updated Add_Ride UI [#171205848] --- src/components/Add_Location.js | 14 ++++++-------- src/components/Add_Ride.js | 28 +++++++++------------------- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/src/components/Add_Location.js b/src/components/Add_Location.js index 2fa41d9..b333390 100644 --- a/src/components/Add_Location.js +++ b/src/components/Add_Location.js @@ -9,17 +9,16 @@ const AddLocation = ({ idx, cabRoute, handleRouteChange }) => { return(
- - + + @@ -27,16 +26,15 @@ const AddLocation = ({ idx, cabRoute, handleRouteChange }) => {

- - + + { 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',{ + fetch('http://192.168.1.80:3000/cab',{ method: 'GET', headers: { 'Accept': 'application/cab-tab.com; version=1' @@ -94,6 +83,7 @@ function AddRide() { width: 300 }) }; + return (
@@ -103,8 +93,8 @@ function AddRide() {

- - + + Date: Tue, 11 Feb 2020 19:07:00 +0530 Subject: [PATCH 3/5] Updated Add_Ride File --- src/components/Add_Ride.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Add_Ride.js b/src/components/Add_Ride.js index 100237e..553c9b1 100644 --- a/src/components/Add_Ride.js +++ b/src/components/Add_Ride.js @@ -50,7 +50,6 @@ function AddRide() { 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); @@ -73,9 +72,7 @@ function AddRide() { body: JSON.stringify(rides), }).then((response) => { console.log(); }); }; - - - + // CustomStyle for Select Box Width const customStyles = { container: provided => ({ From 328931ae189a825df2d18e96fbc7c4fd7bf4e7d2 Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Wed, 12 Feb 2020 12:43:10 +0530 Subject: [PATCH 4/5] Updated Add_Ride --- src/components/Add_Ride.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/Add_Ride.js b/src/components/Add_Ride.js index 553c9b1..f2cbee7 100644 --- a/src/components/Add_Ride.js +++ b/src/components/Add_Ride.js @@ -11,33 +11,31 @@ function AddRide() { const [cabNumber, setCabNumber] = useState({}); const [timeSlot, setTimeSlot] = useState(''); const [cabRoute, setCabRoute] = useState([{...emptyCabRoute}]); - const options = cabNumberList.map((cab_no) => { return {value: [cab_no.cab_id, cab_no.cab_capacity] , label: cab_no.cab_number }}); - + const options = cabNumberList.map((cab_no) => { return {value: [cab_no.id, cab_no.capacity] , label: cab_no.vehicle_number+" [ Capacity : "+cab_no.capacity+" ]" }}); + const addLocation = () => { setCabRoute([...cabRoute,{...emptyCabRoute}]); } - + // debugger //Hook For Fetching Data Into CabNumberList useEffect(() => { - fetch('http://192.168.1.80:3000/cab',{ + fetch('http://172.60.1.137:3000/cabs',{ 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); + setCabNumberList([...parsedResponse.data]); }) .catch((error)=>{ console.error("Error"); }) }, []); - + //Handler for Managing Chnages Select DropDown const handleCabChange = (selectedOption) => { setCabNumber(selectedOption) @@ -63,7 +61,7 @@ function AddRide() { routes: cabRoute, available_seats: cabNumber.value[1], }; - fetch('http://192.168.1.80:3000/rides', { + fetch('http://172.60.1.137:3000/cabs', { method: 'POST', headers: { Accept: 'application/cab-tab.com; version=1', From dd138e821c5e0759a07780cb862a57ab9c96fbf4 Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Wed, 12 Feb 2020 16:44:57 +0530 Subject: [PATCH 5/5] Updated Add_Ride UI --- src/components/Add_Location.js | 6 +++--- src/components/Add_Ride.js | 18 ++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Add_Location.js b/src/components/Add_Location.js index b333390..e491f09 100644 --- a/src/components/Add_Location.js +++ b/src/components/Add_Location.js @@ -7,8 +7,8 @@ const AddLocation = ({ idx, cabRoute, handleRouteChange }) => { const creditId = `credit-${idx}`; return( -
-
+
+
{

-
+
{ return {value: [cab_no.id, cab_no.capacity] , label: cab_no.vehicle_number+" [ Capacity : "+cab_no.capacity+" ]" }}); @@ -39,7 +39,6 @@ function AddRide() { //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 @@ -81,16 +80,16 @@ function AddRide() { return (
-
+

Add Ride for Passengers


-
+
-
-
+
- Set Route + Set Route

{ @@ -129,10 +128,9 @@ function AddRide() { ) }
- +
-
- +