Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create travel mode vs air quality radio grid #9

Open
wants to merge 3 commits into
base: AQIInfo
Choose a base branch
from
+173 −2
Open

create travel mode vs air quality radio grid #9

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1548bd0
crete travel mode vs air quality radio grid
sidforreal Oct 11, 2020
3d6bf2a
getting mode at event handler
amit2011 Oct 11, 2020
dd59e7c
using radio group instead of seperate radio buttons
amit2011 Oct 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 173 additions & 2 deletions src/Components/aqi/AQIPSMain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ 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 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';
import img1 from "../../assets/icons/aqi/form_images/good.jpg";
Expand Down Expand Up @@ -177,6 +184,9 @@ const useStyles = makeStyles(theme => ({
margin: "2vh 10vh 2vh 10vh",
backgroundColor: "#bbdefb",
borderRadius: 8
},
table: {
minWidth: 650,
}
}));

Expand Down Expand Up @@ -409,6 +419,74 @@ 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 ConsoleLog = ({ children }) => {
console.log(children);
return false;
};

const handleModePref = (mode, e) => {

if(mode === 'Car/Car Sharing'){
setCarPrefValue(e.target.value);
// 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 = e.target.value;
console.log(rows[1]);
}

if(mode === 'Metro'){
setMetroPref(e.target.value);
rows[2].qualityValue = e.target.value;
}

if(mode === "2W/2W-Sharing"){
setTwoWheelerPref(e.target.value);
rows[3].qualityValue = e.target.value;
}

if(mode === "3W"){
setThreeWheelerPref(e.target.value);
rows[4].qualityValue = e.target.value;
}

if(mode === "Bicycle"){
setBicyclePref(e.target.value);
rows[5].qualityValue = e.target.value;
}

if(mode === "Walk"){
setWalkPref(e.target.value);
rows[6].qualityValue = e.target.value;
}

}

function handleSubmit() {
axios.defaults.xsrfCookieName = "csrftoken";
Expand Down Expand Up @@ -1039,8 +1117,9 @@ const useStyles = makeStyles(theme => ({

<div className={classes.divStyle}>
<Typography className={classes.labelStyle}>
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?]?
</Typography>

<hr/>
</div>

Expand All @@ -1050,7 +1129,99 @@ const useStyles = makeStyles(theme => ({
</Typography>
<hr/>
</div>

<div className={classes.divStyle}>
<Typography className={classes.labelStyle}>
Which Travel Mode do you choose for a different level of Air Quality i.e.
</Typography>
<FormControl component="fieldset" className={classes.formControl}>
<Paper>
<Table className={classes.table} aria-label="simple table">
<TableBody>
{/* <TableHead>
<TableRow>
<TableCell>Travel Mode/<br/>Air Quality Level</TableCell>
<TableCell align="right">Good<br/>(0-50)</TableCell>
<TableCell align="right">Satisfactory<br/>(51-100)</TableCell>
<TableCell align="right">Moderate<br/>(101-200)</TableCell>
<TableCell align="right">Poor<br/>(201-300)</TableCell>
<TableCell align="right">Very Poor<br/>(301-400)</TableCell>
<TableCell align="right">Severe<br/>(401-500)</TableCell>
</TableRow>
</TableHead> */}
{rows.map((row) => (
<TableRow key={row.mode}>
<TableCell component="th" scope="row">
{row.mode}
</TableCell>

<TableCell align="right">
{/* TODO: replace carPref by the mode specific preferences constants*/}
<RadioGroup name="quality-radio" value={carPref} className={classes.group} onChange={(e) => handleModePref(row.mode,e)}>
<FormControlLabel value="Good" control={<Radio color="primary" />} label="Good" />
<FormControlLabel value="Satisfactory" control={<Radio color="primary" />} label="Satisfactory" />
<FormControlLabel value="Moderate" control={<Radio color="primary" />} label="Moderate" />
<FormControlLabel value="Poor" control={<Radio color="primary" />} label="Poor" />
<FormControlLabel value="Very poor" control={<Radio color="primary" />} label="Very poor" />
<FormControlLabel value="Severe" control={<Radio color="primary" />} label="Severe" />
</RadioGroup>
</TableCell>

{/* <TableCell align="right">
<Radio
checked={row.qualityValue === '1'}
onChange={(e) => handleModePref(row.mode,e)}
value="1"
name="quality-radio"
/>
</TableCell>
<TableCell align="right">
<Radio
checked={row.qualityValue === '2'}
onChange={(e) => handleModePref(row.mode,e)}
value="2"
name="quality-radio"
/>
</TableCell>
<TableCell align="right">
<Radio
checked={row.qualityValue === '3'}
onChange={(e) => handleModePref(row.mode,e)}
value="3"
name="quality-radio"
/>
</TableCell>
<TableCell align="right">
<Radio
checked={row.qualityValue === '4'}
onChange={(e) => handleModePref(row.mode,e)}
value="4"
name="quality-radio"
/>
</TableCell>
<TableCell align="right">
<Radio
checked={row.qualityValue === '5'}
onChange={(e) => handleModePref(row.mode,e)}
value="5"
name="quality-radio"
/>
</TableCell>
<TableCell align="right">
<Radio
checked={row.qualityValue === '6'}
onChange={(e) => handleModePref(row.mode,e)}
value="6"
name="quality-radio"
/>
</TableCell> */}
</TableRow>
))}
</TableBody>
</Table>
</Paper>
</FormControl>
<hr />
</div>
<div className={classes.divStyle}>
<Typography className={classes.labelStyle}>
Which of the following are applicable to you for the information about the air pollution exposure during your trip?
Expand Down