CEC-3514 create can self serve page (#288)
* first push * fix snapshot * remove unused vars * update snap * remove some console logs * Remove snapshot * Update * CEC-3770 Update cert expire text (#282) * CEC-3577: fetch T.Rex log from the cloud (#283) * CEC-3577: fetch T.Rex log from the cloud * tabs? * CSS * smells * fix smells and warnings * suggestions * CEC-3577 Style tweak (#284) * CEC-3577: trex logs (#285) * CEC-3577: trex logs add filtering add progress bar for log fetching always fetch all the logs request canceling * don't hide progress * CEC-3751, CEC-3478 misc window status and invalid location value (#287) * CEC-3751 misc window status CEC-3478 invalid location value * Fix snapshot Update browser list * merge develop update snap * resolve comments * add date and time picker seperately, use checkbox for dropdown * added verification for date and fixed time picker * fix snap * resolve comments * removed small bug * tweak layout * added snap shot test for can signals * small change * Fix test * fix sms snap * change function name * mock can signals api * resolved comments * fix ci * Clean up --------- Co-authored-by: jwu-fisker <jwu@fiskerinc.com> Co-authored-by: John Wu <76966357+jwu-fisker@users.noreply.github.com> Co-authored-by: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>
This commit is contained in:
das31
197
src/components/CANSelfServe/SelfServe/index.jsx
Normal file
197
src/components/CANSelfServe/SelfServe/index.jsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import DateFnsUtils from '@date-io/date-fns';
|
||||
import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
|
||||
import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { CANSignalsExportProvider, useCANSignalsExportContext } from "../../Contexts/CANSignalsExportContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const MainForm = ({ id }) => {
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { busy, canSignals, getCANSignalList, getDynamicColumnCANSignals } = useCANSignalsExportContext();
|
||||
|
||||
const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
|
||||
const [selectedEndDate, setSelectedEndDate] = useState(new Date());
|
||||
const [selectedCanSignals, setSelectedCanSignals] = useState([]);
|
||||
|
||||
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
let timestamp_start = Date.parse(selectedStartDate.toUTCString()) / 1000
|
||||
let timestamp_end = Date.parse(selectedEndDate.toUTCString()) / 1000
|
||||
try {
|
||||
await getDynamicColumnCANSignals(id, timestamp_start, timestamp_end, selectedCanSignals, token)
|
||||
} catch(e){
|
||||
setMessage(e.message);
|
||||
logger.error(e.stack)
|
||||
}
|
||||
};
|
||||
|
||||
const isSubmitDisabled = !selectedStartDate || !selectedEndDate || selectedCanSignals.length === 0;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
await getCANSignalList(token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
const handleDateChange = (value, dateType) => {
|
||||
const newDate = new Date(value);
|
||||
const oldDate = dateType === "start" ? selectedStartDate || new Date() : selectedEndDate || new Date();
|
||||
newDate.setHours(oldDate.getHours());
|
||||
newDate.setMinutes(oldDate.getMinutes());
|
||||
newDate.setSeconds(oldDate.getSeconds());
|
||||
if (dateType === "start") {
|
||||
setSelectedStartDate(newDate);
|
||||
} else {
|
||||
setSelectedEndDate(newDate);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimeFromChange = (value) => {
|
||||
setSelectedStartDate(value);
|
||||
};
|
||||
const handleTimeToChange = (value) => {
|
||||
setSelectedEndDate(value);
|
||||
};
|
||||
|
||||
const handleSelectedItemsChange = (event) => {
|
||||
setSelectedCanSignals(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
<Grid item xs={12}>
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item xs={6} md={3}>
|
||||
<KeyboardDatePicker
|
||||
required
|
||||
disableToolbar
|
||||
variant="inline"
|
||||
format="MM/dd/yyyy"
|
||||
margin="normal"
|
||||
id="date-picker-inline"
|
||||
label="Date From"
|
||||
value={selectedStartDate}
|
||||
onChange={(value) => handleDateChange(value, "start")}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change date',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<KeyboardTimePicker
|
||||
required
|
||||
margin="normal"
|
||||
variant="inline"
|
||||
id="time-picker"
|
||||
label="Time From"
|
||||
value={selectedStartDate}
|
||||
onChange={handleTimeFromChange}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change time',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<KeyboardDatePicker
|
||||
required
|
||||
disableToolbar
|
||||
variant="inline"
|
||||
format="MM/dd/yyyy"
|
||||
margin="normal"
|
||||
id="date-picker-inline"
|
||||
label="Date To"
|
||||
value={selectedEndDate}
|
||||
onChange={(value) => handleDateChange(value, "end")}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change date',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<KeyboardTimePicker
|
||||
required
|
||||
margin="normal"
|
||||
id="time-picker"
|
||||
variant="inline"
|
||||
label="Time To"
|
||||
value={selectedEndDate}
|
||||
onChange={handleTimeToChange}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change time',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MuiPickersUtilsProvider>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth required>
|
||||
<InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
|
||||
<Select
|
||||
labelId="select-can-signals-label"
|
||||
id="select-can-signals"
|
||||
multiple
|
||||
value={selectedCanSignals}
|
||||
onChange={handleSelectedItemsChange}
|
||||
fullWidth
|
||||
inputvariant="outlined"
|
||||
renderValue={(selected) => (
|
||||
<div className={classes.chips}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} className={classes.chip} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{canSignals.map((signal) => (
|
||||
<MenuItem key={signal.signal_name} value={signal.signal_name}>
|
||||
<Checkbox checked={selectedCanSignals.indexOf(signal.signal_name) > -1} />
|
||||
<ListItemText primary={signal.signal_name} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitDisabled || busy}
|
||||
fullWidth
|
||||
>
|
||||
{busy ? <CircularProgress size={24} /> : "Submit"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CANSignalExport = (props) => (
|
||||
<CANSignalsExportProvider>
|
||||
<MainForm {...props} />
|
||||
</CANSignalsExportProvider>
|
||||
);
|
||||
|
||||
export default CANSignalExport;
|
||||
Reference in New Issue
Block a user