first try

interface/src/app/main/Commands.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useState } from 'react';
+import { useBlocker } from 'react-router';
+import { toast } from 'react-toastify';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, Typography } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { updateState, useRequest } from 'alova/client';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { useInterval } from 'utils';
+
+import { readCommands, writeCommands } from '../../api/app';
+import CommandsDialog from './CommandsDialog';
+import type { CommandItem, Commands as CommandsType } from './types';
+import { commandItemValidation } from './validators';
+
+const INTERVAL_DELAY = 30000;
+const MIN_ID = -100;
+const MAX_ID = 100;
+
+const DEFAULT_COMMAND_ITEM: Omit<CommandItem, 'id'> = {
+  cmd: '',
+  value: '',
+  name: '',
+  deleted: false
+};
+
+const commandsTheme = {
+  Table: `
+    --data-table-library_grid-template-columns: repeat(1, minmax(100px, 1fr)) repeat(1, minmax(100px, 1fr)) 160px;
+  `,
+  BaseRow: `
+    font-size: 14px;
+    .td {
+      height: 32px;
+    }
+  `,
+  BaseCell: `
+  &:nth-of-type(1) {
+    padding: 8px;
+  }
+  `,
+  HeaderRow: `
+    text-transform: uppercase;
+    background-color: black;
+    color: #90CAF9;
+    .th {
+      border-bottom: 1px solid #565656;
+      height: 36px;
+    }
+  `,
+  Row: `
+    background-color: #1e1e1e;
+    position: relative;
+    cursor: pointer;
+    .td {
+      border-bottom: 1px solid #565656;
+    }
+    &:hover .td {
+      background-color: #177ac9;
+    }
+  `
+};
+
+const CommandsPage = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+  const [selectedItem, setSelectedItem] = useState<CommandItem>();
+  const [creating, setCreating] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  useLayoutTitle(LL.COMMANDS());
+
+  const {
+    data: commands,
+    send: fetchCommands,
+    error
+  } = useRequest(readCommands, {
+    initialData: []
+  });
+
+  const { send: updateCommands } = useRequest(
+    (data: CommandsType) => writeCommands(data),
+    { immediate: false }
+  );
+
+  const hasChanged = (ci: CommandItem) =>
+    ci.id !== ci.o_id ||
+    (ci.name || '') !== (ci.o_name || '') ||
+    ci.cmd !== ci.o_cmd ||
+    ci.value !== ci.o_value ||
+    ci.deleted !== ci.o_deleted;
+
+  useInterval(() => {
+    if (numChanges === 0) {
+      void fetchCommands();
+    }
+  }, INTERVAL_DELAY);
+
+  const theme = useTheme(commandsTheme);
+
+  const saveCommands = async () => {
+    try {
+      await updateCommands({
+        commands: commands
+          .filter((ci: CommandItem) => !ci.deleted)
+          .map((ci: CommandItem) => ({
+            id: ci.id,
+            cmd: ci.cmd,
+            value: ci.value,
+            name: ci.name
+          }))
+      });
+      toast.success(LL.UPDATED_OF(LL.COMMANDS(1)));
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(message);
+    } finally {
+      await fetchCommands();
+      setNumChanges(0);
+    }
+  };
+
+  const editItem = (ci: CommandItem) => {
+    setCreating(false);
+    setSelectedItem(ci);
+    setDialogOpen(true);
+    if (ci.o_name === undefined) {
+      ci.o_name = ci.name;
+    }
+  };
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const onDialogCancel = async () => {
+    await fetchCommands().then(() => {
+      setNumChanges(0);
+    });
+  };
+
+  const onDialogSave = (updatedItem: CommandItem) => {
+    setDialogOpen(false);
+    void updateState(readCommands(), (data: CommandItem[]) => {
+      const new_data = creating
+        ? [...data, updatedItem]
+        : data.map((ci) =>
+            ci.id === updatedItem.id ? { ...ci, ...updatedItem } : ci
+          );
+      setNumChanges(new_data.filter((ci) => hasChanged(ci)).length);
+      return new_data;
+    });
+  };
+
+  const addItem = () => {
+    setCreating(true);
+    const newItem: CommandItem = {
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      ...DEFAULT_COMMAND_ITEM
+    };
+    setSelectedItem(newItem);
+    setDialogOpen(true);
+  };
+
+  const filteredCommands = commands.filter((ci: CommandItem) => !ci.deleted);
+
+  const renderCommands = () => {
+    if (!commands) {
+      return (
+        <FormLoader onRetry={fetchCommands} errorMessage={error?.message || ''} />
+      );
+    }
+
+    return (
+      <Table
+        data={{ nodes: filteredCommands }}
+        theme={theme}
+        layout={{ custom: true }}
+      >
+        {(tableList: CommandItem[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell stiff>{LL.COMMAND(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.NAME(0)}</HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((ci: CommandItem) => (
+                <Row key={ci.id} item={ci} onClick={() => editItem(ci)}>
+                  <Cell>{ci.cmd}</Cell>
+                  <Cell>{ci.value}</Cell>
+                  <Cell>{ci.name}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
+        {LL.COMMANDS_HELP_1()}.
+      </Typography>
+      {renderCommands()}
+
+      {selectedItem && (
+        <CommandsDialog
+          open={dialogOpen}
+          creating={creating}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedItem}
+          validator={commandItemValidation(commands, selectedItem)}
+        />
+      )}
+
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Box sx={{ flexGrow: 1 }}>
+          {numChanges !== 0 && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={onDialogCancel}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                variant="contained"
+                color="info"
+                onClick={saveCommands}
+              >
+                {LL.APPLY_CHANGES(numChanges)}
+              </Button>
+            </ButtonRow>
+          )}
+        </Box>
+        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
+          <ButtonRow>
+            <Button
+              startIcon={<AddIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={addItem}
+            >
+              {LL.ADD(0)}
+            </Button>
+          </ButtonRow>
+        </Box>
+      </Box>
+    </SectionContent>
+  );
+};
+
+export default CommandsPage;

interface/src/app/main/CommandsDialog.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DoneIcon from '@mui/icons-material/Done';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField
+} from '@mui/material';
+
+import { callAction } from '@/api/app';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { updateValue } from 'utils';
+import { ValidationError, validate } from 'validators';
+
+import type { CommandItem } from './types';
+
+interface CommandsDialogProps {
+  open: boolean;
+  creating: boolean;
+  onClose: () => void;
+  onSave: (ci: CommandItem) => void;
+  selectedItem: CommandItem;
+  validator: Schema;
+}
+
+const CommandsDialog = ({
+  open,
+  creating,
+  onClose,
+  onSave,
+  selectedItem,
+  validator
+}: CommandsDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<CommandItem>(selectedItem);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const updateFormValue = updateValue(
+    setEditItem as unknown as React.Dispatch<
+      React.SetStateAction<Record<string, unknown>>
+    >
+  );
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const handleSave = async (itemToSave: CommandItem) => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, itemToSave);
+      onSave(itemToSave);
+    } catch (error) {
+      setFieldErrors((error as ValidationError).fieldErrors);
+    }
+  };
+
+  const save = async () => {
+    await handleSave(editItem);
+  };
+
+  const { send: executeCommand } = useRequest(
+    (id: string) => callAction({ action: 'executeCommand', param: id }),
+    { immediate: false }
+  )
+    .onSuccess(() => {
+      toast.success(LL.EXECUTE_COMMAND_SENT());
+    })
+    .onError((error) => {
+      toast.error(String(error.error?.message || 'An error occurred'));
+    });
+
+  const execute = async () => {
+    await executeCommand(editItem.name);
+  };
+
+  const remove = () => {
+    onSave({ ...editItem, deleted: true });
+  };
+
+  const handleClose = (
+    _event: React.SyntheticEvent,
+    reason: 'backdropClick' | 'escapeKeyDown'
+  ) => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {creating ? `${LL.ADD(1)} ${LL.NEW(0)}` : LL.EDIT()}&nbsp;
+        {LL.COMMAND(1)}
+      </DialogTitle>
+      <DialogContent dividers>
+        <ValidatedTextField
+          fieldErrors={fieldErrors || {}}
+          name="cmd"
+          label={LL.COMMAND(0)}
+          multiline
+          fullWidth
+          value={editItem.cmd}
+          margin="normal"
+          onChange={updateFormValue}
+        />
+        <TextField
+          name="value"
+          label={LL.VALUE(0)}
+          multiline
+          margin="normal"
+          fullWidth
+          value={editItem.value}
+          onChange={updateFormValue}
+        />
+        <ValidatedTextField
+          fieldErrors={fieldErrors || {}}
+          name="name"
+          label={LL.NAME(0)}
+          value={editItem.name}
+          fullWidth
+          margin="normal"
+          onChange={updateFormValue}
+        />
+      </DialogContent>
+
+      <DialogActions>
+        {!creating && (
+          <Box sx={{ flexGrow: 1 }}>
+            <Button
+              startIcon={<RemoveIcon />}
+              variant="outlined"
+              color="warning"
+              onClick={remove}
+            >
+              {LL.REMOVE()}
+            </Button>
+          </Box>
+        )}
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={creating ? <AddIcon /> : <DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {creating ? LL.ADD(0) : LL.UPDATE()}
+        </Button>
+        {!creating && editItem.cmd !== '' && (
+          <Button
+            startIcon={<PlayArrowIcon />}
+            variant="outlined"
+            onClick={execute}
+            color="success"
+          >
+            {LL.EXECUTE()}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CommandsDialog;

interface/src/app/main/Dashboard.tsx

@@ -180,6 +180,8 @@ const Dashboard = memo(() => {
           return LL.ANALOG_SENSORS();
         case DeviceType.TEMPERATURESENSOR:
           return LL.TEMP_SENSORS();
+        case DeviceType.COMMAND:
+          return LL.COMMANDS();
         case DeviceType.SCHEDULER:
           return LL.SCHEDULER();
         default:

interface/src/app/main/DeviceIcon.tsx

@@ -38,6 +38,7 @@ const deviceIconLookup: Record<DeviceType, IconType | null> = {
   [DeviceType.CUSTOM]: MdPlaylistAdd,
   [DeviceType.UNKNOWN]: MdOutlineSensors,
   [DeviceType.SYSTEM]: null,
+  [DeviceType.COMMAND]: MdPlaylistAdd,
   [DeviceType.SCHEDULER]: MdMoreTime,
   [DeviceType.GENERIC]: MdOutlineSensors,
   [DeviceType.VENTILATION]: PiFan

interface/src/app/main/DevicesDialog.tsx

@@ -64,12 +64,12 @@ const DevicesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const { send: executeSchedule } = useRequest(
-    (id: string) => callAction({ action: 'executeSchedule', param: id }),
+  const { send: executeCommand } = useRequest(
+    (id: string) => callAction({ action: 'executeCommand', param: id }),
     { immediate: false }
   )
     .onSuccess(() => {
-      toast.success(LL.EXECUTE_SCHEDULE_SENT());
+      toast.success(LL.EXECUTE_COMMAND_SENT());
     })
     .onError((error) => {
       toast.error(String(error.error?.message || 'An error occurred'));
@@ -79,7 +79,7 @@ const DevicesDialog = ({
     try {
       setFieldErrors(undefined);
       if (editItem.v === undefined && editItem.c !== undefined) {
-        await executeSchedule(editItem.c);
+        await executeCommand(editItem.c);
       } else {
         await validate(validator, editItem);
       }

interface/src/app/main/Scheduler.tsx

@@ -29,7 +29,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';
 
-import { readSchedule, writeSchedule } from '../../api/app';
+import { readCommands, readSchedule, writeSchedule } from '../../api/app';
 import SettingsSchedulerDialog from './SchedulerDialog';
 import { ScheduleFlag } from './types';
 import type { Schedule, ScheduleItem } from './types';
@@ -54,14 +54,13 @@ const DEFAULT_SCHEDULE_ITEM: Omit<ScheduleItem, 'id' | 'o_id'> = {
   deleted: false,
   flags: FLAG_ALL_DAYS,
   time: '',
-  cmd: '',
-  value: '',
+  cmd_name: '',
   name: ''
 };
 
 const scheduleTheme = {
   Table: `
-    --data-table-library_grid-template-columns: 36px 210px 100px 192px repeat(1, minmax(100px, 1fr)) 160px;
+    --data-table-library_grid-template-columns: 36px 220px repeat(1, minmax(20px, 1fr)) 192px 160px;
   `,
   BaseRow: `
     font-size: 14px;
@@ -70,11 +69,8 @@ const scheduleTheme = {
     }
   `,
   BaseCell: `
-    &:nth-of-type(2) {
-      text-align: center;
-    }
     &:nth-of-type(1) {
-      text-align: center;
+      text-align: 8px;
     }
   `,
   HeaderRow: `
@@ -100,7 +96,6 @@ const scheduleTheme = {
 };
 
 const scheduleTypeLabels: Record<number, string> = {
-  [ScheduleFlag.SCHEDULE_IMMEDIATE]: 'Immediate',
   [ScheduleFlag.SCHEDULE_TIMER]: 'Timer',
   [ScheduleFlag.SCHEDULE_CONDITION]: 'Condition',
   [ScheduleFlag.SCHEDULE_ONCHANGE]: 'On Change'
@@ -125,6 +120,11 @@ const Scheduler = () => {
     initialData: []
   });
 
+  const { data: commandNames } = useRequest(readCommands, {
+    initialData: [],
+    initializing: true
+  });
+
   const { send: updateSchedule } = useRequest(
     (data: Schedule) => writeSchedule(data),
     {
@@ -140,8 +140,7 @@ const Scheduler = () => {
       si.deleted !== si.o_deleted ||
       si.flags !== si.o_flags ||
       si.time !== si.o_time ||
-      si.cmd !== si.o_cmd ||
-      si.value !== si.o_value
+      si.cmd_name !== si.o_cmd_name
     );
   };
 
@@ -177,8 +176,7 @@ const Scheduler = () => {
             active: condensed_si.active,
             flags: condensed_si.flags,
             time: condensed_si.time,
-            cmd: condensed_si.cmd,
-            value: condensed_si.value,
+            cmd_name: condensed_si.cmd_name,
             name: condensed_si.name
           }))
       });
@@ -289,7 +287,6 @@ const Scheduler = () => {
                 <HeaderCell stiff>{LL.SCHEDULE(0)}</HeaderCell>
                 <HeaderCell stiff>{LL.TIME(0)}/Cond.</HeaderCell>
                 <HeaderCell stiff>{LL.COMMAND(0)}</HeaderCell>
-                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
                 <HeaderCell stiff>{LL.NAME(0)}</HeaderCell>
               </HeaderRow>
             </Header>
@@ -297,12 +294,10 @@ const Scheduler = () => {
               {tableList.map((si: ScheduleItem) => (
                 <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
                   <Cell stiff>
-                    {si.flags !== ScheduleFlag.SCHEDULE_IMMEDIATE && (
-                      <CircleIcon
-                        color={si.active ? 'success' : 'error'}
-                        sx={{ fontSize: ICON_SIZE, verticalAlign: 'middle' }}
-                      />
-                    )}
+                    <CircleIcon
+                      color={si.active ? 'success' : 'error'}
+                      sx={{ fontSize: ICON_SIZE, verticalAlign: 'middle' }}
+                    />
                   </Cell>
                   <Cell stiff>
                     <Stack spacing={0.5} direction="row">
@@ -322,8 +317,7 @@ const Scheduler = () => {
                     </Stack>
                   </Cell>
                   <Cell>{si.time}</Cell>
-                  <Cell>{si.cmd}</Cell>
-                  <Cell>{si.value}</Cell>
+                  <Cell>{si.cmd_name}</Cell>
                   <Cell>{si.name}</Cell>
                 </Row>
               ))}
@@ -351,6 +345,7 @@ const Scheduler = () => {
           selectedItem={selectedScheduleItem}
           validator={schedulerItemValidation(schedule, selectedScheduleItem)}
           dow={dow}
+          commandNames={commandNames.map((ci) => ci.name)}
         />
       )}
 

interface/src/app/main/SchedulerDialog.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
 
 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
 import {
   Box,
@@ -15,15 +13,14 @@ import {
   DialogContent,
   DialogTitle,
   Grid,
+  MenuItem,
   TextField,
   ToggleButton,
   ToggleButtonGroup,
   Typography
 } from '@mui/material';
 
-import { callAction } from '@/api/app';
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
@@ -77,6 +74,7 @@ interface SchedulerDialogProps {
   selectedItem: ScheduleItem;
   validator: Schema;
   dow: string[];
+  commandNames: string[];
 }
 
 const SchedulerDialog = ({
@@ -86,7 +84,8 @@ const SchedulerDialog = ({
   onSave,
   selectedItem,
   validator,
-  dow
+  dow,
+  commandNames
 }: SchedulerDialogProps) => {
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
@@ -103,12 +102,6 @@ const SchedulerDialog = ({
     if (open) {
       setFieldErrors(undefined);
       setEditItem(selectedItem);
-      // Set the flags based on type when page is loaded:
-      // 0-127 is day schedule
-      // 128 is timer
-      // 129 is on change
-      // 130 is on condition
-      // 132 is immediate
       setScheduleType(
         selectedItem.flags <= SCHEDULE_TYPE_THRESHOLD
           ? ScheduleFlag.SCHEDULE_DAY
@@ -131,21 +124,6 @@ const SchedulerDialog = ({
     await handleSave(editItem);
   };
 
-  const { send: executeSchedule } = useRequest(
-    (id: string) => callAction({ action: 'executeSchedule', param: id }),
-    { immediate: false }
-  )
-    .onSuccess(() => {
-      toast.success(LL.EXECUTE_SCHEDULE_SENT());
-    })
-    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
-    });
-
-  const execute = async () => {
-    await executeSchedule(editItem.name);
-  };
-
   const remove = () => {
     onSave({ ...editItem, deleted: true });
   };
@@ -197,7 +175,6 @@ const SchedulerDialog = ({
 
   const isDaySchedule = scheduleType === ScheduleFlag.SCHEDULE_DAY;
   const isTimerSchedule = scheduleType === ScheduleFlag.SCHEDULE_TIMER;
-  const isImmediateSchedule = scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE;
   const needsTimeField = isDaySchedule || isTimerSchedule;
 
   const dowFlags = getFlagDOWstring(editItem.flags);
@@ -214,7 +191,6 @@ const SchedulerDialog = ({
     if (scheduleType === ScheduleFlag.SCHEDULE_TIMER) return LL.TIMER(1);
     if (scheduleType === ScheduleFlag.SCHEDULE_CONDITION) return LL.CONDITION();
     if (scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE) return LL.ONCHANGE();
-    if (scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE) return LL.IMMEDIATE();
     return LL.TIME(1);
   })();
 
@@ -269,14 +245,6 @@ const SchedulerDialog = ({
               {LL.CONDITION()}
             </Typography>
           </ToggleButton>
-          <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
-            <Typography
-              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
-              color={isImmediateSchedule ? 'primary' : 'grey'}
-            >
-              {LL.IMMEDIATE()}
-            </Typography>
-          </ToggleButton>
         </ToggleButtonGroup>
 
         {isDaySchedule && (
@@ -294,74 +262,66 @@ const SchedulerDialog = ({
           </ToggleButtonGroup>
         )}
 
-        {!isImmediateSchedule && (
-          <>
-            <Grid container>
-              <BlockFormControlLabel
-                control={
-                  <Checkbox
-                    checked={editItem.active}
-                    onChange={updateFormValue}
-                    name="active"
-                  />
-                }
-                label={LL.ACTIVE()}
+        <Grid container>
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                checked={editItem.active}
+                onChange={updateFormValue}
+                name="active"
               />
-            </Grid>
-            <Grid container>
-              {needsTimeField ? (
-                <>
-                  <TextField
-                    name="time"
-                    type="time"
-                    label={timeFieldLabel}
-                    value={timeFieldValue}
-                    margin="normal"
-                    onChange={updateFormValue}
-                  />
-                  {isTimerSchedule && (
-                    <Typography
-                      sx={{ ml: 2, mt: 4 }}
-                      color="warning"
-                      variant="body2"
-                    >
-                      {LL.SCHEDULER_HELP_2()}
-                    </Typography>
-                  )}
-                </>
-              ) : (
-                <TextField
-                  name="time"
-                  label={timeFieldLabel}
-                  multiline
-                  fullWidth
-                  value={timeFieldValue}
-                  margin="normal"
-                  onChange={updateFormValue}
-                />
+            }
+            label={LL.ACTIVE()}
+          />
+        </Grid>
+        <Grid container>
+          {needsTimeField ? (
+            <>
+              <TextField
+                name="time"
+                type="time"
+                label={timeFieldLabel}
+                value={timeFieldValue}
+                margin="normal"
+                onChange={updateFormValue}
+              />
+              {isTimerSchedule && (
+                <Typography
+                  sx={{ ml: 2, mt: 4 }}
+                  color="warning"
+                  variant="body2"
+                >
+                  {LL.SCHEDULER_HELP_2()}
+                </Typography>
               )}
-            </Grid>
-          </>
-        )}
-        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
-          name="cmd"
-          label={LL.COMMAND(0)}
-          multiline
-          fullWidth
-          value={editItem.cmd}
-          margin="normal"
-          onChange={updateFormValue}
-        />
+            </>
+          ) : (
+            <TextField
+              name="time"
+              label={timeFieldLabel}
+              multiline
+              fullWidth
+              value={timeFieldValue}
+              margin="normal"
+              onChange={updateFormValue}
+            />
+          )}
+        </Grid>
         <TextField
-          name="value"
-          label={LL.VALUE(0)}
-          multiline
-          margin="normal"
+          name="cmd_name"
+          label={LL.COMMAND(0)}
+          value={editItem.cmd_name}
           fullWidth
-          value={editItem.value}
+          select
+          margin="normal"
           onChange={updateFormValue}
-        />
+        >
+          {commandNames.map((name) => (
+            <MenuItem key={name} value={name}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
         <ValidatedTextField
           fieldErrors={fieldErrors || {}}
           name="name"
@@ -402,16 +362,6 @@ const SchedulerDialog = ({
         >
           {creating ? LL.ADD(0) : LL.UPDATE()}
         </Button>
-        {isImmediateSchedule && !creating && editItem.cmd !== '' && (
-          <Button
-            startIcon={<PlayArrowIcon />}
-            variant="outlined"
-            onClick={execute}
-            color="success"
-          >
-            {LL.EXECUTE()}
-          </Button>
-        )}
       </DialogActions>
     </Dialog>
   );

interface/src/app/main/types.ts

@@ -354,16 +354,14 @@ export interface ScheduleItem {
   deleted?: boolean;
   flags: number;
   time: string; // also used for Condition and On Change
-  cmd: string;
-  value: string;
+  cmd_name: string; // references a named Command
   name: string;
   o_id?: number;
   o_active?: boolean;
   o_deleted?: boolean;
   o_flags?: number;
   o_time?: string;
-  o_cmd?: string;
-  o_value?: string;
+  o_cmd_name?: string;
   o_name?: string;
 }
 
@@ -371,6 +369,23 @@ export interface Schedule {
   readonly schedule: readonly ScheduleItem[];
 }
 
+export interface CommandItem {
+  id: number;
+  cmd: string;
+  value: string;
+  name: string;
+  deleted?: boolean;
+  o_id?: number;
+  o_cmd?: string;
+  o_value?: string;
+  o_name?: string;
+  o_deleted?: boolean;
+}
+
+export interface Commands {
+  readonly commands: readonly CommandItem[];
+}
+
 export interface ModuleItem {
   id: number; // unique index
   key: string;
@@ -401,8 +416,7 @@ export enum ScheduleFlag {
   SCHEDULE_DAY = 0, // no bits set
   SCHEDULE_TIMER = 128, // bit 8
   SCHEDULE_ONCHANGE = 129, // bit 1
-  SCHEDULE_CONDITION = 130, // bit 2
-  SCHEDULE_IMMEDIATE = 132 // bit 3
+  SCHEDULE_CONDITION = 130 // bit 2
 }
 
 export interface EntityItem {
@@ -445,6 +459,7 @@ export const enum DeviceType {
   ANALOGSENSOR = 2,
   SCHEDULER = 3,
   CUSTOM = 4,
+  COMMAND = 5,
   BOILER,
   THERMOSTAT,
   MIXER,

interface/src/app/main/validators.ts

@@ -4,6 +4,7 @@ import { IP_OR_HOSTNAME_VALIDATOR } from 'validators/shared';
 
 import type {
   AnalogSensor,
+  CommandItem,
   DeviceValue,
   EntityItem,
   ScheduleItem,
@@ -237,6 +238,24 @@ export const schedulerItemValidation = (
       NAME_PATTERN_REQUIRED,
       uniqueNameValidator(schedule, scheduleItem.o_name)
     ],
+    cmd_name: [
+      { required: true, message: 'Command is required' }
+    ]
+  });
+
+export const uniqueCommandNameValidator = (commands: CommandItem[], o_name?: string) =>
+  createUniqueNameValidator(commands, o_name);
+
+export const commandItemValidation = (
+  commands: CommandItem[],
+  commandItem: CommandItem
+) =>
+  new Schema({
+    name: [
+      { required: true, message: 'Name is required' },
+      NAME_PATTERN_REQUIRED,
+      uniqueCommandNameValidator(commands, commandItem.o_name)
+    ],
     cmd: [
       { required: true, message: 'Command is required' },
       {