From 1548bd0be83e170663a3e1a9022c6a31a0c3aec6 Mon Sep 17 00:00:00 2001 From: SiddharthVarshney Date: Sun, 11 Oct 2020 17:37:49 +0530 Subject: [PATCH 1/3] crete travel mode vs air quality radio grid imcompelte --- src/Components/aqi/AQIPSMain.js | 152 +++++++++++++++++++++++++++++++- 1 file changed, 151 insertions(+), 1 deletion(-) diff --git a/src/Components/aqi/AQIPSMain.js b/src/Components/aqi/AQIPSMain.js index 883c506..2afbc56 100644 --- a/src/Components/aqi/AQIPSMain.js +++ b/src/Components/aqi/AQIPSMain.js @@ -21,6 +21,12 @@ import CardContent from '@material-ui/core/CardContent'; import CardActionArea from '@material-ui/core/CardActionArea'; import aqImpact from "../../assets/icons/aqi/aq_impact.jpg"; import MenuItem from "@material-ui/core/MenuItem"; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; import delhiZones from "../../assets/jsonfile/DelhiDistrictSubDistrict.json" import Gallery from 'react-grid-gallery'; import img1 from "../../assets/icons/aqi/form_images/good.jpg"; @@ -177,6 +183,9 @@ const useStyles = makeStyles(theme => ({ margin: "2vh 10vh 2vh 10vh", backgroundColor: "#bbdefb", borderRadius: 8 + }, + table: { + minWidth: 650, } })); @@ -409,6 +418,67 @@ const useStyles = makeStyles(theme => ({ return date; } + // Air Quality vs Travel mode table + function createData(mode, qualityValue) { + return { mode, qualityValue }; + } + + const rows = [ + createData('Car/Car Sharing',null), + createData('Bus',null), + createData('Metro',null), + createData('2W/2W-Sharing',null), + createData('3W',null), + createData('Bicycle',null), + createData('Walk',null), + ]; + + const [carPref, setCarPrefValue] = React.useState(rows[0].qualityValue); + const [busPref, setBusPref] = React.useState(rows[1].qualityValue); + const [metroPref, setMetroPref] = React.useState(rows[2].qualityValue); + const [twoWheelerPref, setTwoWheelerPref] = React.useState(rows[3].qualityValue); + const [threeWheelerPref, setThreeWheelerPref] = React.useState(rows[4].qualityValue); + const [bicyclePref, setBicyclePref] = React.useState(rows[5].qualityValue); + const [walkPref, setWalkPref] = React.useState(rows[6].qualityValue); + + + const handleModePref = (e) => { + if(e.target.mode === 'Car/Car Sharing'){ + setCarPrefValue(e.target.value); + rows[0].qualityValue = carPref; + } + + if(e.target.mode === 'Bus'){ + setBusPref(e.target.value); + rows[1].qualityValue = busPref; + } + + if(e.target.mode === 'Metro'){ + setMetroPref(e.target.value); + rows[2].qualityValue = metroPref; + } + + if(e.target.mode === "2W/2W-Sharing"){ + setTwoWheelerPref(e.target.value); + rows[3].qualityValue = twoWheelerPref; + } + + if(e.target.mode === "3W"){ + setThreeWheelerPref(e.target.value); + rows[4].qualityValue = threeWheelerPref; + } + + if(e.target.mode === "Bicycle"){ + setBicyclePref(e.target.value); + rows[5].qualityValue = bicyclePref; + } + + if(e.target.mode === "Walk"){ + setWalkPref(e.target.value); + rows[6].qualityValue = walkPref; + } + + } function handleSubmit() { axios.defaults.xsrfCookieName = "csrftoken"; @@ -1050,7 +1120,87 @@ const useStyles = makeStyles(theme => ({
- +
+ + Which Travel Mode do you choose for a different level of Air Quality i.e. + + + + + + + Travel Mode/
Air Quality Level + Good
(0-50) + Satisfactory
(51-100) + Moderate
(101-200) + Poor
(201-300) + Very Poor
(301-400) + Severe
(401-500) + + + + {rows.map((row) => ( + + + {row.mode} + + + + + + + + + + + + + + + + + + + + + ))} + +
+ + +
+
Which of the following are applicable to you for the information about the air pollution exposure during your trip? From 3d6bf2a4fde0430c0247034ea703716693ecc456 Mon Sep 17 00:00:00 2001 From: Amit Agarwal Date: Sun, 11 Oct 2020 20:06:20 +0530 Subject: [PATCH 2/3] getting mode at event handler --- src/Components/aqi/AQIPSMain.js | 36 +++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/Components/aqi/AQIPSMain.js b/src/Components/aqi/AQIPSMain.js index 2afbc56..0352bc5 100644 --- a/src/Components/aqi/AQIPSMain.js +++ b/src/Components/aqi/AQIPSMain.js @@ -26,6 +26,7 @@ import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; +import RadioButtonGroup from '@material-ui/core/RadioGroup' import Paper from '@material-ui/core/Paper'; import delhiZones from "../../assets/jsonfile/DelhiDistrictSubDistrict.json" import Gallery from 'react-grid-gallery'; @@ -440,40 +441,45 @@ const useStyles = makeStyles(theme => ({ const [threeWheelerPref, setThreeWheelerPref] = React.useState(rows[4].qualityValue); const [bicyclePref, setBicyclePref] = React.useState(rows[5].qualityValue); const [walkPref, setWalkPref] = React.useState(rows[6].qualityValue); + + const ConsoleLog = ({ children }) => { + console.log(children); + return false; + }; + const handleModePref = (mode, e) => { - const handleModePref = (e) => { - if(e.target.mode === 'Car/Car Sharing'){ + if(mode === 'Car/Car Sharing'){ setCarPrefValue(e.target.value); rows[0].qualityValue = carPref; } - if(e.target.mode === 'Bus'){ + if(mode === 'Bus'){ setBusPref(e.target.value); rows[1].qualityValue = busPref; } - if(e.target.mode === 'Metro'){ + if(mode === 'Metro'){ setMetroPref(e.target.value); rows[2].qualityValue = metroPref; } - if(e.target.mode === "2W/2W-Sharing"){ + if(mode === "2W/2W-Sharing"){ setTwoWheelerPref(e.target.value); rows[3].qualityValue = twoWheelerPref; } - if(e.target.mode === "3W"){ + if(mode === "3W"){ setThreeWheelerPref(e.target.value); rows[4].qualityValue = threeWheelerPref; } - if(e.target.mode === "Bicycle"){ + if(mode === "Bicycle"){ setBicyclePref(e.target.value); rows[5].qualityValue = bicyclePref; } - if(e.target.mode === "Walk"){ + if(mode === "Walk"){ setWalkPref(e.target.value); rows[6].qualityValue = walkPref; } @@ -1109,7 +1115,7 @@ const useStyles = makeStyles(theme => ({
- Select the current level of preferences (least-highest) for your trip to primary activities (to work/ school/ college) TODO: make grid?]? + Select the current level of preferences (1 as least to 5 as highly preferred) for your trip to primary activities (to work/ school/ college) TODO: make grid?]?
@@ -1147,7 +1153,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="1" name="quality-radio" mode= {row.mode} @@ -1156,7 +1162,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="2" name="quality-radio" /> @@ -1164,7 +1170,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="3" name="quality-radio" /> @@ -1172,7 +1178,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="4" name="quality-radio" /> @@ -1180,7 +1186,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="5" name="quality-radio" /> @@ -1188,7 +1194,7 @@ const useStyles = makeStyles(theme => ({ handleModePref(row.mode,e)} value="6" name="quality-radio" /> From dd59e7c288ecfa2fcae35d8ae0a0838f4d2e6a44 Mon Sep 17 00:00:00 2001 From: Amit Agarwal Date: Sun, 11 Oct 2020 21:36:14 +0530 Subject: [PATCH 3/3] using radio group instead of seperate radio buttons --- src/Components/aqi/AQIPSMain.js | 41 ++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/src/Components/aqi/AQIPSMain.js b/src/Components/aqi/AQIPSMain.js index 0352bc5..0cf8462 100644 --- a/src/Components/aqi/AQIPSMain.js +++ b/src/Components/aqi/AQIPSMain.js @@ -451,37 +451,39 @@ const useStyles = makeStyles(theme => ({ if(mode === 'Car/Car Sharing'){ setCarPrefValue(e.target.value); - rows[0].qualityValue = carPref; + // rows[0].qualityValue = carPref; // TODO it cannot be carPref, it's null. + rows[0].qualityValue = e.target.value; } if(mode === 'Bus'){ setBusPref(e.target.value); - rows[1].qualityValue = busPref; + rows[1].qualityValue = e.target.value; + console.log(rows[1]); } if(mode === 'Metro'){ setMetroPref(e.target.value); - rows[2].qualityValue = metroPref; + rows[2].qualityValue = e.target.value; } if(mode === "2W/2W-Sharing"){ setTwoWheelerPref(e.target.value); - rows[3].qualityValue = twoWheelerPref; + rows[3].qualityValue = e.target.value; } if(mode === "3W"){ setThreeWheelerPref(e.target.value); - rows[4].qualityValue = threeWheelerPref; + rows[4].qualityValue = e.target.value; } if(mode === "Bicycle"){ setBicyclePref(e.target.value); - rows[5].qualityValue = bicyclePref; + rows[5].qualityValue = e.target.value; } if(mode === "Walk"){ setWalkPref(e.target.value); - rows[6].qualityValue = walkPref; + rows[6].qualityValue = e.target.value; } } @@ -1117,6 +1119,7 @@ const useStyles = makeStyles(theme => ({ Select the current level of preferences (1 as least to 5 as highly preferred) for your trip to primary activities (to work/ school/ college) TODO: make grid?]? +
@@ -1133,8 +1136,9 @@ const useStyles = makeStyles(theme => ({ - - + + {/* + Travel Mode/
Air Quality Level Good
(0-50) Satisfactory
(51-100) @@ -1143,20 +1147,31 @@ const useStyles = makeStyles(theme => ({ Very Poor
(301-400) Severe
(401-500) - - + */} {rows.map((row) => ( {row.mode} + + {/* TODO: replace carPref by the mode specific preferences constants*/} + handleModePref(row.mode,e)}> + } label="Good" /> + } label="Satisfactory" /> + } label="Moderate" /> + } label="Poor" /> + } label="Very poor" /> + } label="Severe" /> + + + + {/* handleModePref(row.mode,e)} value="1" name="quality-radio" - mode= {row.mode} /> @@ -1198,7 +1213,7 @@ const useStyles = makeStyles(theme => ({ value="6" name="quality-radio" /> - + */} ))}