From 7a06026b37a456426c56303200320e196371a06f Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Tue, 11 Feb 2020 16:39:47 +0530 Subject: [PATCH 1/3] 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 d772450f7a8cd271853b30f71e922f9902574ead Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Tue, 11 Feb 2020 16:43:48 +0530 Subject: [PATCH 2/3] Revert "Created Add Ride UI [#171205848]" This reverts commit 7a06026b37a456426c56303200320e196371a06f. --- src/components/Add_Location.js | 58 ------------ src/components/Add_Ride.js | 158 --------------------------------- 2 files changed, 216 deletions(-) delete mode 100644 src/components/Add_Location.js delete mode 100644 src/components/Add_Ride.js diff --git a/src/components/Add_Location.js b/src/components/Add_Location.js deleted file mode 100644 index 2fa41d9..0000000 --- a/src/components/Add_Location.js +++ /dev/null @@ -1,58 +0,0 @@ -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 deleted file mode 100644 index 61dc680..0000000 --- a/src/components/Add_Ride.js +++ /dev/null @@ -1,158 +0,0 @@ -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 3132dd22512ccc49ae7142c417f7981e0d87e7a5 Mon Sep 17 00:00:00 2001 From: sagar23sj Date: Tue, 11 Feb 2020 18:41:23 +0530 Subject: [PATCH 3/3] Added TextBoxWidth Class --- src/components/component.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/component.css b/src/components/component.css index fb3a502..2c83c1a 100644 --- a/src/components/component.css +++ b/src/components/component.css @@ -3,6 +3,11 @@ margin: 50px 100px; } */ + +.text_box_width { + width: 150px; +} + .link { display: block; font-size: 14px;