CEC-2291 Remote Commands (#194)
This commit is contained in:
arpanetus
251
src/components/Controls/SendCommand/Commands.jsx
Normal file
251
src/components/Controls/SendCommand/Commands.jsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import {Grid, Slider, Switch} from "@material-ui/core";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
|
||||
...Array.from({length: 26}, (_, i) => {
|
||||
return {value: i + 2, label: `${i + 15}°C`}
|
||||
})];
|
||||
|
||||
const valuetext = (value) => {
|
||||
return `${value}`;
|
||||
}
|
||||
|
||||
const highMidLowOffMarks = [{
|
||||
value: 3, label: "High",
|
||||
}, {
|
||||
value: 2, label: "Mid",
|
||||
}, {
|
||||
value: 1, label: "Low",
|
||||
}, {
|
||||
value: 0, label: "Off",
|
||||
},]
|
||||
|
||||
const precondMarks = [
|
||||
{value: 0, label: "Battery"},
|
||||
{value: 1, label: "All"},
|
||||
{value: 2, label: "Climate"},
|
||||
{value: 3, label: "Stop"},
|
||||
]
|
||||
|
||||
const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
|
||||
|
||||
const labelRemoved = (marks) => Array.from(marks).map((mark) => {
|
||||
return {value: mark.value}
|
||||
})
|
||||
|
||||
const Commands = [
|
||||
{value: "doors_lock", label: "Lock doors"},
|
||||
{value: "doors_unlock", label: "Unlock doors"},
|
||||
{value: "vent_windows", label: "Vent windows"},
|
||||
{value: "close_windows", label: "Close windows"},
|
||||
{value: "flash_headlights", label: "Flash headlights"},
|
||||
{value: "trunk_close", label: "Close trunk"},
|
||||
{value: "alert", label: "Alert"},
|
||||
{
|
||||
value: "precondition", label: "Precondition", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="precondition-slider" gutterBottom>
|
||||
Set driver seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(precondMarks)}
|
||||
getAriaValueText={labelFunc(precondMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="precondition-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={precondMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
},
|
||||
{
|
||||
value: "california_mode", label: "California mode", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="california_mode-slider" gutterBottom>
|
||||
Set California mode
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
},
|
||||
}, {
|
||||
value: "trunk_open", label: "Open trunk", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="trunk_open-slider" gutterBottom>
|
||||
Set trunk's openness level
|
||||
</Typography>
|
||||
<Slider
|
||||
defaultValue={1}
|
||||
value={val}
|
||||
getAriaValueText={valuetext}
|
||||
aria-label="Open trunk"
|
||||
aria-labelledby="trunk_open-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={1}
|
||||
marks
|
||||
size="small"
|
||||
min={1}
|
||||
max={5}
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
return <span>
|
||||
<Typography id="temp_cabin-slider" gutterBottom>
|
||||
Set cabin temperature
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(tempMarks)}
|
||||
getAriaValueText={labelFunc(tempMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="temp_cabin-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={1}
|
||||
min={0}
|
||||
max={27}
|
||||
marks={labelRemoved(tempMarks)}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
}
|
||||
}, {
|
||||
value: "defrost", label: "Defrost", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="defrost-slider" gutterBottom>
|
||||
Set defrost
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}, {
|
||||
value: "driver_seat_preheat", label: "Driver seat preheat", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="driver_seat_preheat-slider" gutterBottom>
|
||||
Set driver seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(highMidLowOffMarks)}
|
||||
getAriaValueText={labelFunc(highMidLowOffMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="driver_seat_preheat-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={highMidLowOffMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="passenger_seat_preheat-slider" gutterBottom>
|
||||
Set passenger seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(highMidLowOffMarks)}
|
||||
getAriaValueText={labelFunc(highMidLowOffMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="passenger_seat_preheat-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={highMidLowOffMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
|
||||
return <span>
|
||||
<Typography id="steering_wheel_preheat-slider" gutterBottom>
|
||||
Set steering wheel preheat on/off
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}, {
|
||||
value: "charging", label: "Charging", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="charging-slider" gutterBottom>
|
||||
Set charging on/off
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}]
|
||||
|
||||
export default Commands;
|
||||
Reference in New Issue
Block a user