SolarEnergy/central_frontend/src/dialogs/SelectForcedStateDurationDialog.tsx

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  TextField,
} from "@mui/material";
import { DeviceRelay } from "../api/DeviceApi";
import React from "react";

export function SelectForcedStateDurationDialog(p: {
  relay: DeviceRelay;
  forcedState: string;
  onCancel: () => void;
  onSubmit: (duration: number) => void;
}): React.ReactElement {
  const [duration, setDuration] = React.useState(60);

  return (
    <Dialog open onClose={p.onCancel}>
      <DialogTitle>Set forced relay state</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Please specify the number of minutes the relay <i>{p.relay.name}</i>{" "}
          will remain in forced state <i>{p.forcedState}</i>:
        </DialogContentText>

        <TextField
          label="Duration (min)"
          variant="standard"
          value={Math.floor(duration / 60)}
          onChange={(e) => {
            const val = Number.parseInt(e.target.value);
            setDuration((Number.isNaN(val) ? 1 : val) * 60);
          }}
          fullWidth
          style={{ marginTop: "5px" }}
        />

        <p>Equivalent in seconds: {duration} secs</p>
        <p>Equivalent in hours: {duration / 3600} hours</p>
      </DialogContent>
      <DialogActions>
        <Button onClick={p.onCancel}>Cancel</Button>
        <Button onClick={() => p.onSubmit(duration)} autoFocus>
          Start timer
        </Button>
      </DialogActions>
    </Dialog>
  );
}