107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
|
|
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
|
import clsx from "clsx";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { Permissions } from "../../../utils/roles";
|
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
import { useUserContext } from "../../Contexts/UserContext";
|
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
|
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
|
import OptionsDropdown from "../../Controls/OptionsDropdown";
|
|
import { RoleWrap } from "../../Controls/RoleWrap";
|
|
import SearchField from "../../Controls/SearchField";
|
|
import useStyles from "../../useStyles";
|
|
|
|
const MainForm = () => {
|
|
const classes = useStyles();
|
|
const [search, setSearch] = useState("");
|
|
const [online, setOnline] = useState(false);
|
|
const [onlineHMI, setOnlineHMI] = useState(false);
|
|
const { setTitle, setSitePath } = useStatusContext();
|
|
const {
|
|
token: {
|
|
idToken: { jwtToken: token },
|
|
},
|
|
groups,
|
|
providers,
|
|
} = useUserContext();
|
|
|
|
const handleSearch = (query) => {
|
|
setSearch(query);
|
|
};
|
|
|
|
const handleOnline = (event) => {
|
|
setOnline(event.target.checked);
|
|
};
|
|
|
|
const handleOnlineHMI = (event) => {
|
|
setOnlineHMI(event.target.checked);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setTitle("Vehicles");
|
|
setSitePath([]);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return (
|
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
|
<Grid container className={classes.root} spacing={2}>
|
|
<Grid item md={4} className={classes.textJustifyAlign}>
|
|
<RoleWrap
|
|
groups={groups}
|
|
providers={providers}
|
|
rolesPerProvider={Permissions.FiskerDelete}
|
|
>
|
|
<Link to="/vehicle-add">
|
|
<AddCircleIcon fontSize="large" />
|
|
</Link>
|
|
</RoleWrap>
|
|
</Grid>
|
|
<Grid item md={4} className={classes.textCenterAlign}>
|
|
<SearchField classes={classes} onSearch={handleSearch} />
|
|
</Grid>
|
|
<Grid item md={2} className={classes.textJustifyAlign}>
|
|
<OptionsDropdown listId="filter-menu">
|
|
<MenuItem>
|
|
<FormControlLabel
|
|
control={<Checkbox checked={online} onChange={handleOnline} />}
|
|
label="Only online"
|
|
/>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
|
|
}
|
|
label="Only online HMI"
|
|
/>
|
|
</MenuItem>
|
|
</OptionsDropdown>
|
|
</Grid>
|
|
<Grid item md={2} className={classes.textRightAlign} />
|
|
</Grid>
|
|
<CarSelectionTable
|
|
classes={classes}
|
|
token={token}
|
|
multiSelect={false}
|
|
search={{
|
|
search,
|
|
online: online ? true : null,
|
|
online_hmi: onlineHMI ? true : null,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const VehiclesList = () => (
|
|
<VehicleProvider>
|
|
<MainForm />
|
|
</VehicleProvider>
|
|
);
|
|
|
|
export default VehiclesList;
|