ota-admin-portal/src/components/Controls/SendCommand/Commands.jsx

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;