test

2025-12-06 07:49:52 +03:00 · 2023-03-04 19:14:25 +01:00
parent dd200f6d34
commit a41dc71965
12 changed files with 373 additions and 136 deletions
--- a/interface/index.html
+++ b/interface/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1" />
+    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="/css/roboto.css" />
    <link rel="manifest" href="/app/manifest.json" />
    <title>EMS-ESP</title>
--- a/interface/package.json
+++ b/interface/package.json
@@ -27,7 +27,7 @@
    "@remix-run/router": "^1.3.3",
    "@table-library/react-table-library": "4.0.29",
    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.14.5",
+    "@types/node": "^18.14.6",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-router-dom": "^5.3.3",
@@ -38,17 +38,19 @@
    "lodash-es": "^4.17.21",
    "mime-types": "^2.1.35",
    "notistack": "^2.0.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "latest",
+    "react-dom": "latest",
    "react-dropzone": "^14.2.3",
    "react-icons": "^4.8.0",
    "react-router-dom": "^6.8.2",
    "sockette": "^2.0.6",
+    "styled-components": "^5.3.8",
    "typesafe-i18n": "^5.24.2",
    "typescript": "^4.9.5"
  },
  "devDependencies": {
    "@types/mime-types": "^2",
+    "@types/styled-components": "^5",
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "@vitejs/plugin-react-swc": "^3.2.0",
--- a/interface/src/project/SettingsScheduler.tsx
+++ b/interface/src/project/SettingsScheduler.tsx
@@ -5,6 +5,8 @@ import {
  Button,
  Typography,
  Box,
+  Stack,
+  Paper,
  Dialog,
  DialogActions,
  DialogContent,
@@ -19,6 +21,11 @@ import {
  FormControlLabel
 } from '@mui/material';

+// import { styled } from '@mui/material/styles';
+
+import styled from 'styled-components';
+
+
 import { useTheme } from '@table-library/react-table-library/theme';
 import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';

@@ -52,6 +59,31 @@ import { useI18nContext } from 'i18n/i18n-react';

 import * as EMSESP from './api';

+interface ItemProps {
+  enabled: boolean;
+}
+
+const Item = styled(Paper)(({ color, theme }) => ({
+  // backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+  ...theme.typography.body2,
+  textAlign: 'center',
+  // color: ${({enabled}) => enabled ? 'red' : 'green'};
+  fontSize: 10,
+  padding: '6px 12px',
+  border: '1px solid',
+  lineHeight: 1.5,
+  backgroundColor: '#1A2027',
+  borderColor: '#1A2027',
+  // color: theme.palette.text.secondary,
+}));
+
+const Item2 = styled.paper`
+fontSize: 10;
+color: ${props => props.enabled ? 'red' : 'green'};
+`;
+
+
+
 const SettingsScheduler: FC = () => {
  const { LL, locale } = useI18nContext();

@@ -68,8 +100,8 @@ const SettingsScheduler: FC = () => {
    time: '12:00',
    cmd: '',
    value: '',
-    description: '',
-    o_id: ''
+    name: '',
+    o_name: ''
  };
  const [schedule, setSchedule] = useState<ScheduleItem[]>([emptySchedule]);
  const [scheduleItem, setScheduleItem] = useState<ScheduleItem>();
@@ -97,7 +129,7 @@ const SettingsScheduler: FC = () => {

  const schedule_theme = useTheme({
    Table: `
-      --data-table-library_grid-template-columns: 152px 36px 324px 72px 240px repeat(1, minmax(100px, 1fr));
+      --data-table-library_grid-template-columns: 36px 324px 72px 240px repeat(1, minmax(100px, 1fr)) 152px;
    `,
    BaseRow: `
      font-size: 14px;
@@ -106,12 +138,12 @@ const SettingsScheduler: FC = () => {
      }
    `,
    BaseCell: `
-      &:nth-of-type(1) {
-        padding: 8px;
-      }
      &:nth-of-type(2) {
        text-align: center;
      }
+      &:nth-of-type(1) {
+        text-align: center;
+      }
    `,
    HeaderRow: `
      text-transform: uppercase;
@@ -171,7 +203,7 @@ const SettingsScheduler: FC = () => {
        o_time: si.time,
        o_cmd: si.cmd,
        o_value: si.value,
-        o_description: si.description
+        o_name: si.name
      }))
    );
  };
@@ -216,7 +248,7 @@ const SettingsScheduler: FC = () => {
  function hasScheduleChanged(si: ScheduleItem) {
    return (
      si.id !== si.o_id ||
-      (si?.description || '') !== (si?.o_description || '') ||
+      (si?.name || '') !== (si?.o_name || '') ||
      si.active !== si.o_active ||
      si.deleted !== si.o_deleted ||
      si.flags !== si.o_flags ||
@@ -247,7 +279,7 @@ const SettingsScheduler: FC = () => {
                time: condensed_si.time,
                cmd: condensed_si.cmd,
                value: condensed_si.value,
-                description: condensed_si.description
+                name: condensed_si.name
              };
            })
        });
@@ -263,6 +295,35 @@ const SettingsScheduler: FC = () => {
    }
  };

+  function getFlagName(si: ScheduleItem, flag: number) {
+    let text = '';
+    if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) {
+      return dow[1];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_TUE) === ScheduleFlag.SCHEDULE_TUE) {
+      return dow[2];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_WED) === ScheduleFlag.SCHEDULE_WED) {
+      return dow[3];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_THU) === ScheduleFlag.SCHEDULE_THU) {
+      return dow[4];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_FRI) === ScheduleFlag.SCHEDULE_FRI) {
+      return dow[5];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_SAT) === ScheduleFlag.SCHEDULE_SAT) {
+      return dow[6];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_SUN) === ScheduleFlag.SCHEDULE_SUN) {
+      return dow[0];
+    }
+    if ((flag & ScheduleFlag.SCHEDULE_TIMER) === ScheduleFlag.SCHEDULE_TIMER) {
+      return LL.TIMER();
+    }
+    return "";
+  }
+
  function showFlag(si: ScheduleItem, flag: number) {
    let text = '';
    if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) {
@@ -291,15 +352,24 @@ const SettingsScheduler: FC = () => {
    }

    return (
+      <>
+
+      {/* <Button size="small" disabled variant="outlined" color="success">
+        {text}
+      </Button> */}
+
+
      <Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & flag) === flag ? 'primary' : 'grey'}>
        {text}
      </Typography>
+
+      </>
    );
  }

  const editScheduleItem = (si: ScheduleItem) => {
-    if (si.description === undefined) {
-      si.description = '';
+    if (si.name === undefined) {
+      si.name = '';
    }
    setCreating(false);
    setScheduleItem(si);
@@ -315,7 +385,7 @@ const SettingsScheduler: FC = () => {
      time: '12:00',
      cmd: '',
      value: '',
-      description: ''
+      name: ''
    });
  };

@@ -339,20 +409,19 @@ const SettingsScheduler: FC = () => {
          <>
            <Header>
              <HeaderRow>
-                <HeaderCell stiff>{LL.NAME()}</HeaderCell>
                <HeaderCell stiff>
                  <CheckIcon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
                </HeaderCell>
                <HeaderCell stiff>{LL.SCHEDULE()}</HeaderCell>
                <HeaderCell stiff>{LL.TIME()}</HeaderCell>
                <HeaderCell stiff>{LL.COMMAND()}</HeaderCell>
-                <HeaderCell>{LL.VALUE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.NAME()}</HeaderCell>
              </HeaderRow>
            </Header>
            <Body>
              {tableList.map((si: ScheduleItem) => (
                <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
-                  <Cell>{si.id}</Cell>
                  <Cell stiff>
                    <Checkbox
                      size="small"
@@ -364,31 +433,42 @@ const SettingsScheduler: FC = () => {
                    />
                  </Cell>
                  <Cell stiff>
-                    <ToggleButtonGroup
-                      size="small"
-                      color="secondary"
-                      value={getFlagString(si.flags)}
-                      onChange={(event, flag) => {
-                        si.flags = getFlagNumber(flag);
-                        if (si.flags & ScheduleFlag.SCHEDULE_TIMER) {
-                          si.flags = ScheduleFlag.SCHEDULE_TIMER;
-                        }
-                        setFlags(['']); // forces refresh
-                      }}
-                    >
-                      <ToggleButton value="2">{showFlag(si, ScheduleFlag.SCHEDULE_MON)}</ToggleButton>
-                      <ToggleButton value="4">{showFlag(si, ScheduleFlag.SCHEDULE_TUE)}</ToggleButton>
-                      <ToggleButton value="8">{showFlag(si, ScheduleFlag.SCHEDULE_WED)}</ToggleButton>
-                      <ToggleButton value="16">{showFlag(si, ScheduleFlag.SCHEDULE_THU)}</ToggleButton>
-                      <ToggleButton value="32">{showFlag(si, ScheduleFlag.SCHEDULE_FRI)}</ToggleButton>
-                      <ToggleButton value="64">{showFlag(si, ScheduleFlag.SCHEDULE_SAT)}</ToggleButton>
-                      <ToggleButton value="1">{showFlag(si, ScheduleFlag.SCHEDULE_SUN)}</ToggleButton>
-                      <ToggleButton value="128">{showFlag(si, ScheduleFlag.SCHEDULE_TIMER)}</ToggleButton>
-                    </ToggleButtonGroup>
+
+                  <Stack spacing={1} direction="row"
+                  >
+
+                     <Item backgroundColor="#0063cc" variant="outlined"> {getFlagName(si, ScheduleFlag.SCHEDULE_MON)} </Item>
+                     
+                     <Item color="secondary">{getFlagName(si, ScheduleFlag.SCHEDULE_TUE)} </Item>
+
+                     <Button disabled size="small" variant="contained" color="primary">
+                     <Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON ? 'primary' : 'grey'}>
+                        {getFlagName(si, ScheduleFlag.SCHEDULE_MON)}
+                     </Typography>
+                     </Button>
+
+                     <Button disabled size="small" variant="outlined" >
+                     <Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & ScheduleFlag.SCHEDULE_TUE) === ScheduleFlag.SCHEDULE_TUE ? 'primary' : 'grey'}>
+                        {getFlagName(si, ScheduleFlag.SCHEDULE_TUE)}
+                     </Typography>
+                     </Button>
+
+
+                      {/* {showFlag(si, ScheduleFlag.SCHEDULE_MON)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_TUE)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_WED)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_THU)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_FRI)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_SAT)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_SUN)}
+                      {showFlag(si, ScheduleFlag.SCHEDULE_TIMER)} */}
+                      </Stack>
+
                  </Cell>
                  <Cell>{si.time}</Cell>
                  <Cell>{si.cmd}</Cell>
                  <Cell>{si.value}</Cell>
+                  <Cell>{si.name}</Cell>
                </Row>
              ))}
            </Body>
@@ -426,19 +506,38 @@ const SettingsScheduler: FC = () => {
      return (
        <Dialog open={!!scheduleItem} onClose={() => closeDialog()}>
          <DialogTitle>
-            {creating ? LL.ADD(0) + ' ' + LL.NEW() + ' ' + LL.SCHEDULE() : LL.EDIT() + " '" + scheduleItem.id + "'"}
+            {creating ? LL.ADD(0) : LL.EDIT()}&nbsp;{LL.SCHEDULE()}
          </DialogTitle>
          <DialogContent dividers>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
-              name="id"
-              label={LL.NAME()}
-              value={scheduleItem.id}
-              fullWidth
-              margin="normal"
-              sx={{ width: '60ch' }}
-              onChange={updateValue(setScheduleItem)}
-            />
+
+          <ToggleButtonGroup
+                      size="small"
+                      color="secondary"
+                      value={getFlagString(scheduleItem.flags)}
+                      onChange={(event, flag) => {
+                        const flags = getFlagNumber(flag);
+                        if (flags & ScheduleFlag.SCHEDULE_TIMER) {
+                          console.log('timer');
+                          scheduleItem.flags = ScheduleFlag.SCHEDULE_TIMER;
+                        } else {
+                          console.log("daily");
+                          scheduleItem.flags = getFlagNumber(flag) & 127;
+                          console.log( scheduleItem.flags);
+                        }
+                        setFlags(['']); // forces refresh
+                      }}
+                    >
+                      <ToggleButton value="2">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_MON)}</ToggleButton>
+                      <ToggleButton value="4">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TUE)}</ToggleButton>
+                      <ToggleButton value="8">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_WED)}</ToggleButton>
+                      <ToggleButton value="16">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_THU)}</ToggleButton>
+                      <ToggleButton value="32">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_FRI)}</ToggleButton>
+                      <ToggleButton value="64">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SAT)}</ToggleButton>
+                      <ToggleButton value="1">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SUN)}</ToggleButton>
+                      <ToggleButton value="128">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TIMER)}</ToggleButton>
+                    </ToggleButtonGroup>
+
+
            {creating ? (
              <RadioGroup
                row
@@ -462,10 +561,11 @@ const SettingsScheduler: FC = () => {
                {LL.TYPE()}:&nbsp;{scheduleItem.flags & ScheduleFlag.SCHEDULE_TIMER ? LL.TIMER() : LL.WEEKLY()}
              </Typography>
            )}
-            <TextField
-              name="description"
-              label={LL.ENTITY_NAME()}
-              value={scheduleItem.description}
+                        <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="name"
+              label={LL.NAME()}
+              value={scheduleItem.name}
              fullWidth
              margin="normal"
              sx={{ width: '60ch' }}
--- a/interface/src/project/types.ts
+++ b/interface/src/project/types.ts
@@ -305,14 +305,14 @@ export enum DeviceEntityMask {
 }

 export interface ScheduleItem {
-  id: string; // unique index which is name
+  id: string; // unique index
  active: boolean;
  deleted?: boolean; // optional
  flags: number;
  time: string;
  cmd: string;
  value: string;
-  description?: string; // optional
+  name?: string; // optional
  o_id?: string;
  o_active?: boolean;
  o_deleted?: boolean;
@@ -320,7 +320,7 @@ export interface ScheduleItem {
  o_time?: string;
  o_cmd?: string;
  o_value?: string;
-  o_description?: string;
+  o_name?: string;
 }

 export interface Schedule {
@@ -328,12 +328,12 @@ export interface Schedule {
 }

 export enum ScheduleFlag {
+  SCHEDULE_SUN = 1,
  SCHEDULE_MON = 2,
  SCHEDULE_TUE = 4,
  SCHEDULE_WED = 8,
  SCHEDULE_THU = 16,
  SCHEDULE_FRI = 32,
  SCHEDULE_SAT = 64,
-  SCHEDULE_SUN = 1,
  SCHEDULE_TIMER = 128
 }
--- a/interface/src/project/validators.ts
+++ b/interface/src/project/validators.ts
@@ -87,14 +87,13 @@ export const createSettingsValidator = (settings: Settings) =>

 export const schedulerItemValidation = (schedule: ScheduleItem[], o_id: string) =>
  new Schema({
-    id: [
-      { required: true, message: 'Name is required' },
+    name: [
      {
        type: 'string',
        pattern: /^[a-zA-Z0-9_\\.]{1,15}$/,
        message: "Must be 1-15 characters: alpha numeric, '_' or '.'"
      },
-      ...[uniqueIDValidator(schedule, o_id)]
+      ...[uniqueNameValidator(schedule, o_id)]
    ],
    cmd: [
      { required: true, message: 'Command is required' },
@@ -102,9 +101,9 @@ export const schedulerItemValidation = (schedule: ScheduleItem[], o_id: string)
    ]
  });

-export const uniqueIDValidator = (schedule: ScheduleItem[], o_id: string) => ({
-  validator(rule: InternalRuleItem, id: string, callback: (error?: string) => void) {
-    if (id && o_id !== id && schedule.find((si) => si.id === id)) {
+export const uniqueNameValidator = (schedule: ScheduleItem[], o_name: string) => ({
+  validator(rule: InternalRuleItem, name: string, callback: (error?: string) => void) {
+    if (name && o_name !== name && schedule.find((si) => si.name === name)) {
      callback('Name already in use');
    } else {
      callback();
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -66,6 +66,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/helper-annotate-as-pure@npm:^7.16.0":
+  version: 7.18.6
+  resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
+  dependencies:
+    "@babel/types": ^7.18.6
+  checksum: 88ccd15ced475ef2243fdd3b2916a29ea54c5db3cd0cfabf9d1d29ff6e63b7f7cd1c27264137d7a40ac2e978b9b9a542c332e78f40eb72abe737a7400788fc1b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.20.7":
  version: 7.20.7
  resolution: "@babel/helper-compilation-targets@npm:7.20.7"
@@ -107,7 +116,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6":
  version: 7.18.6
  resolution: "@babel/helper-module-imports@npm:7.18.6"
  dependencies:
@@ -222,7 +231,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/traverse@npm:^7.21.0, @babel/traverse@npm:^7.21.2":
+"@babel/traverse@npm:^7.21.0, @babel/traverse@npm:^7.21.2, @babel/traverse@npm:^7.4.5":
  version: 7.21.2
  resolution: "@babel/traverse@npm:7.21.2"
  dependencies:
@@ -290,7 +299,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@emotion/is-prop-valid@npm:^1.2.0":
+"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.0":
  version: 1.2.0
  resolution: "@emotion/is-prop-valid@npm:1.2.0"
  dependencies:
@@ -367,6 +376,20 @@ __metadata:
  languageName: node
  linkType: hard

+"@emotion/stylis@npm:^0.8.4":
+  version: 0.8.5
+  resolution: "@emotion/stylis@npm:0.8.5"
+  checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.7.4":
+  version: 0.7.5
+  resolution: "@emotion/unitless@npm:0.7.5"
+  checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.8.0":
  version: 0.8.0
  resolution: "@emotion/unitless@npm:0.8.0"
@@ -1201,6 +1224,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/hoist-non-react-statics@npm:*":
+  version: 3.3.1
+  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
+  dependencies:
+    "@types/react": "*"
+    hoist-non-react-statics: ^3.3.0
+  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.9":
  version: 7.0.11
  resolution: "@types/json-schema@npm:7.0.11"
@@ -1238,10 +1271,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/node@npm:^18.14.5":
-  version: 18.14.5
-  resolution: "@types/node@npm:18.14.5"
-  checksum: 415fb0edc132baa9580f1b7a381a3f10b662f5d7a7d11641917fa0961788ccede3272badc414aadc47306e9fc35c5f6c59159ac470b46d3f3a15fb0446224c8c
+"@types/node@npm:^18.14.6":
+  version: 18.14.6
+  resolution: "@types/node@npm:18.14.6"
+  checksum: 2f88f482cabadc6dbddd627a1674239e68c3c9beab56eb4ae2309fb96fd17fc3a509d99b0309bafe13b58529574f49ecf3a583f2ebe2896dd32fe4be436dc96e
  languageName: node
  linkType: hard

@@ -1332,6 +1365,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/styled-components@npm:^5":
+  version: 5.1.26
+  resolution: "@types/styled-components@npm:5.1.26"
+  dependencies:
+    "@types/hoist-non-react-statics": "*"
+    "@types/react": "*"
+    csstype: ^3.0.2
+  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.54.0":
  version: 5.54.0
  resolution: "@typescript-eslint/eslint-plugin@npm:5.54.0"
@@ -1488,10 +1532,11 @@ __metadata:
    "@table-library/react-table-library": 4.0.29
    "@types/lodash-es": ^4.17.6
    "@types/mime-types": ^2
-    "@types/node": ^18.14.5
+    "@types/node": ^18.14.6
    "@types/react": ^18.0.28
    "@types/react-dom": ^18.0.11
    "@types/react-router-dom": ^5.3.3
+    "@types/styled-components": ^5
    "@typescript-eslint/eslint-plugin": ^5.54.0
    "@typescript-eslint/parser": ^5.54.0
    "@vitejs/plugin-react-swc": ^3.2.0
@@ -1512,13 +1557,14 @@ __metadata:
    notistack: ^2.0.8
    npm-run-all: ^4.1.5
    prettier: ^2.8.4
-    react: ^18.2.0
-    react-dom: ^18.2.0
+    react: latest
+    react-dom: latest
    react-dropzone: ^14.2.3
    react-icons: ^4.8.0
    react-router-dom: ^6.8.2
    rollup-plugin-visualizer: ^5.9.0
    sockette: ^2.0.6
+    styled-components: ^5.3.8
    typesafe-i18n: ^5.24.2
    typescript: ^4.9.5
    vite: ^4.1.4
@@ -1792,6 +1838,28 @@ __metadata:
  languageName: node
  linkType: hard

+"babel-plugin-styled-components@npm:>= 1.12.0":
+  version: 2.0.7
+  resolution: "babel-plugin-styled-components@npm:2.0.7"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.16.0
+    "@babel/helper-module-imports": ^7.16.0
+    babel-plugin-syntax-jsx: ^6.18.0
+    lodash: ^4.17.11
+    picomatch: ^2.3.0
+  peerDependencies:
+    styled-components: ">= 2"
+  checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147
+  languageName: node
+  linkType: hard
+
+"babel-plugin-syntax-jsx@npm:^6.18.0":
+  version: 6.18.0
+  resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
+  checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
  version: 1.0.2
  resolution: "balanced-match@npm:1.0.2"
@@ -1898,6 +1966,13 @@ __metadata:
  languageName: node
  linkType: hard

+"camelize@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "camelize@npm:1.0.1"
+  checksum: 91d8611d09af725e422a23993890d22b2b72b4cabf7239651856950c76b4bf53fe0d0da7c5e4db05180e898e4e647220e78c9fbc976113bd96d603d1fcbfcb99
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001449":
  version: 1.0.30001458
  resolution: "caniuse-lite@npm:1.0.30001458"
@@ -2092,6 +2167,24 @@ __metadata:
  languageName: node
  linkType: hard

+"css-color-keywords@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "css-color-keywords@npm:1.0.0"
+  checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408
+  languageName: node
+  linkType: hard
+
+"css-to-react-native@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
+  dependencies:
+    camelize: ^1.0.0
+    css-color-keywords: ^1.0.0
+    postcss-value-parser: ^4.0.2
+  checksum: 263be65e805aef02c3f20c064665c998a8c35293e1505dbe6e3054fb186b01a9897ac6cf121f9840e5a9dfe3fb3994f6fcd0af84a865f1df78ba5bf89e77adce
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2, csstype@npm:^3.1.1":
  version: 3.1.1
  resolution: "csstype@npm:3.1.1"
@@ -3250,7 +3343,7 @@ __metadata:
  languageName: node
  linkType: hard

-"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
  version: 3.3.2
  resolution: "hoist-non-react-statics@npm:3.3.2"
  dependencies:
@@ -3822,6 +3915,13 @@ __metadata:
  languageName: node
  linkType: hard

+"lodash@npm:^4.17.11":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
  version: 1.4.0
  resolution: "loose-envify@npm:1.4.0"
@@ -4469,7 +4569,7 @@ __metadata:
  languageName: node
  linkType: hard

-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
  version: 2.3.1
  resolution: "picomatch@npm:2.3.1"
  checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -4492,6 +4592,13 @@ __metadata:
  languageName: node
  linkType: hard

+"postcss-value-parser@npm:^4.0.2":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.21":
  version: 8.4.21
  resolution: "postcss@npm:8.4.21"
@@ -4575,7 +4682,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-dom@npm:^18.2.0":
+"react-dom@npm:latest":
  version: 18.2.0
  resolution: "react-dom@npm:18.2.0"
  dependencies:
@@ -4685,7 +4792,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react@npm:^18.2.0":
+"react@npm:latest":
  version: 18.2.0
  resolution: "react@npm:18.2.0"
  dependencies:
@@ -4962,6 +5069,13 @@ __metadata:
  languageName: node
  linkType: hard

+"shallowequal@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "shallowequal@npm:1.1.0"
+  checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^1.2.0":
  version: 1.2.0
  resolution: "shebang-command@npm:1.2.0"
@@ -5242,6 +5356,28 @@ __metadata:
  languageName: node
  linkType: hard

+"styled-components@npm:^5.3.8":
+  version: 5.3.8
+  resolution: "styled-components@npm:5.3.8"
+  dependencies:
+    "@babel/helper-module-imports": ^7.0.0
+    "@babel/traverse": ^7.4.5
+    "@emotion/is-prop-valid": ^1.1.0
+    "@emotion/stylis": ^0.8.4
+    "@emotion/unitless": ^0.7.4
+    babel-plugin-styled-components: ">= 1.12.0"
+    css-to-react-native: ^3.0.0
+    hoist-non-react-statics: ^3.0.0
+    shallowequal: ^1.1.0
+    supports-color: ^5.5.0
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+    react-is: ">= 16.8.0"
+  checksum: 60148083f4057cd0dd4ad555e82800ec4ec4b8822fd81645f084e9beebf91420f4c9c75875b44933755d32ec97c46be6b79ca0c23578e5a731e3399e6ea0d901
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.1.3":
  version: 4.1.3
  resolution: "stylis@npm:4.1.3"
--- a/mock-api/server.js
+++ b/mock-api/server.js
@@ -603,40 +603,40 @@ const emsesp_devicedata_4 = {
 let emsesp_schedule = {
  schedule: [
    {
-      id: 'hc1_on',
+      id: '1',
      active: true,
-      flags: 31,
+      flags: 6,
      time: '07:30',
      cmd: 'hc1/mode',
      value: 'day',
-      description: 'Turn on central heating in morning'
+      name: 'day_mode'
    },
    {
-      id: 'hc1_off',
+      id: '2',
      active: true,
      flags: 31,
      time: '23:00',
      cmd: 'hc1/mode',
      value: 'night',
-      description: 'Turn off central heating for the night'
+      name: 'night_mode'
    },
    {
-      id: 'set_roomtemp',
+      id: '3',
      active: true,
-      flags: 128,
-      time: '00:01',
+      flags: 10,
+      time: '00:00',
      cmd: 'thermostat/hc2/seltemp',
      value: '20',
-      description: 'Force thermostat temperature to 20 degrees every minute'
+      name: 'temp_20'
    },
    {
-      id: 'restart',
+      id: '4',
      active: false,
      flags: 1,
      time: '04:00',
      cmd: 'system/restart',
      value: '',
-      description: 'auto restart EMS-EPS at 4am every Sunday'
+      name: 'auto_restart'
    }
  ]
 };
--- a/pio_local.ini_example
+++ b/pio_local.ini_example
@@ -1,12 +1,15 @@
 ; example custom platformio.ini file for EMS-ESP

 [common]
-; custom build flags
-; options are: EMSESP_DEBUG, EMSESP_UART_DEBUG, EMSESP_DEBUG_SENSOR, EMSESP_WIFI_TWEAK, EMSESP_DEFAULT_BOARD_PROFILE, EMSESP_TEST
-; my_build_flags = -DEMSESP_DEBUG -DEMSESP_DEFAULT_BOARD_PROFILE=\"NODEMCU\" ; hard code the default board name
-; my_build_flags = -DEMSESP_DEBUG_SENSOR ; additional debug for the dallas sensors
-; my_build_flags = -DEMSESP_DEBUG -DCORE_DEBUG_LEVEL=5 ; verbose debugging 5=verbose, 4=debug, 3=info
-; my_build_flags = -DEMSESP_DEBUG ; enables DEBUG to the log. Will generate a lot of traffic on Console and Syslog
+; custom build flags:
+;  -DEMSESP_WIFI_TWEAK ; experimental WiFi tweaks for stability
+;  -DEMSESP_UART_DEBUG ; debugging UART
+;  -DEMSESP_DEBUG ; enables DEBUG to the log. Will generate a lot of extra traffic on Console and Syslog
+;  -DEMSESP_DEFAULT_BOARD_PROFILE=\"NODEMCU\" ; hard code the default board name
+;  -DEMSESP_DEBUG_SENSOR ; additional debug for the dallas sensors
+;  -DCORE_DEBUG_LEVEL=5 ; verbose core level debugging 5=verbose, 4=debug, 3=info
+;  -DEMSESP_TEST ; enable the tests. EN language only
+; my_build_flags = -DEMSESP_DEBUG

 [env:esp32_4M]
 ; if using OTA enter your details below
@@ -21,8 +24,6 @@ upload_port = /dev/ttyUSB*

 ; override arduino espressif core
 ; platform = espressif32 ; take latest
-; platform = espressif32@6.0.1
-; platform = espressif32@5.3.0
 ; platform = espressif32@5.2.0

 extra_scripts =
--- a/src/system.cpp
+++ b/src/system.cpp
@@ -1071,7 +1071,7 @@ bool System::check_upgrade(bool factory_settings) {

        // if we're coming from 3.4.4 or 3.5.0b14 then we need to apply new settings
        if (missing_version) {
-            LOG_DEBUG("Setting MQTT ID Entity to v3.4 format");
+            LOG_DEBUG("Setting MQTT Entity ID format to v3.4 format");
            EMSESP::esp8266React.getMqttSettingsService()->update(
                [&](MqttSettings & mqttSettings) {
                    mqttSettings.entity_format = 0; // use old Entity ID format from v3.4
--- a/src/version.h
+++ b/src/version.h
@@ -1 +1 @@
-#define EMSESP_APP_VERSION "3.6.0-dev.2"
+#define EMSESP_APP_VERSION "3.6.0-dev.3"
--- a/src/web/WebSchedulerService.cpp
+++ b/src/web/WebSchedulerService.cpp
@@ -37,14 +37,14 @@ void WebSchedulerService::begin() {
 void WebScheduler::read(WebScheduler & webScheduler, JsonObject & root) {
    JsonArray schedule = root.createNestedArray("schedule");
    for (const ScheduleItem & scheduleItem : webScheduler.scheduleItems) {
-        JsonObject si     = schedule.createNestedObject();
-        si["id"]          = scheduleItem.id; // name, is unqiue
-        si["active"]      = scheduleItem.active;
-        si["flags"]       = scheduleItem.flags;
-        si["time"]        = scheduleItem.time;
-        si["cmd"]         = scheduleItem.cmd;
-        si["value"]       = scheduleItem.value;
-        si["description"] = scheduleItem.description;
+        JsonObject si = schedule.createNestedObject();
+        si["id"]      = scheduleItem.id; // name, is unqiue
+        si["active"]  = scheduleItem.active;
+        si["flags"]   = scheduleItem.flags;
+        si["time"]    = scheduleItem.time;
+        si["cmd"]     = scheduleItem.cmd;
+        si["value"]   = scheduleItem.value;
+        si["name"]    = scheduleItem.name;
    }
 }

@@ -53,8 +53,8 @@ void WebScheduler::read(WebScheduler & webScheduler, JsonObject & root) {
 StateUpdateResult WebScheduler::update(JsonObject & root, WebScheduler & webScheduler) {
 #ifdef EMSESP_STANDALONE
    // invoke some fake data for testing
-    const char * json = "{[{\"id\":\"test1\",\"active\":true,\"flags\":31,\"time\": \"07:30\",\"cmd\": \"hc1/mode\",\"value\": \"day\",\"description\": \"turn "
-                        "on central heating\"}]}";
+    const char * json =
+        "{[{\"id\":\"01\",\"active\":true,\"flags\":31,\"time\": \"07:30\",\"cmd\": \"hc1/mode\",\"value\": \"day\",\"name\": \"turn on central heating\"}]}";
    StaticJsonDocument<500> doc;
    deserializeJson(doc, json);
    root = doc.as<JsonObject>();
@@ -65,7 +65,7 @@ StateUpdateResult WebScheduler::update(JsonObject & root, WebScheduler & webSche
 #endif

    for (ScheduleItem & scheduleItem : webScheduler.scheduleItems) {
-        Command::erase_command(EMSdevice::DeviceType::SCHEDULER, scheduleItem.description.c_str());
+        Command::erase_command(EMSdevice::DeviceType::SCHEDULER, scheduleItem.name.c_str());
    }
    webScheduler.scheduleItems.clear();

@@ -73,26 +73,25 @@ StateUpdateResult WebScheduler::update(JsonObject & root, WebScheduler & webSche
        for (const JsonObject schedule : root["schedule"].as<JsonArray>()) {
            // create each schedule item, overwriting any previous settings
            // ignore the id (as this is only used in the web for table rendering)
-            auto si        = ScheduleItem();
-            si.id          = schedule["id"].as<std::string>();
-            si.active      = schedule["active"];
-            si.flags       = schedule["flags"];
-            si.time        = schedule["time"].as<std::string>();
-            si.cmd         = schedule["cmd"].as<std::string>();
-            si.value       = schedule["value"].as<std::string>();
-            si.description = schedule["description"].as<std::string>();
+            auto si   = ScheduleItem();
+            si.active = schedule["active"];
+            si.flags  = schedule["flags"];
+            si.time   = schedule["time"].as<std::string>();
+            si.cmd    = schedule["cmd"].as<std::string>();
+            si.value  = schedule["value"].as<std::string>();
+            si.name   = schedule["name"].as<std::string>();

            // calculated elapsed minutes
            si.elapsed_min = Helpers::string2minutes(si.time);
            si.retry_cnt   = 0xFF; // no starup retries

            webScheduler.scheduleItems.push_back(si); // add to list
-            if (!webScheduler.scheduleItems.back().description.empty()) {
+            if (!webScheduler.scheduleItems.back().name.empty()) {
                Command::add(
                    EMSdevice::DeviceType::SCHEDULER,
-                    webScheduler.scheduleItems.back().description.c_str(),
+                    webScheduler.scheduleItems.back().name.c_str(),
                    [webScheduler](const char * value, const int8_t id) {
-                        return EMSESP::webSchedulerService.command_setvalue(value, webScheduler.scheduleItems.back().description);
+                        return EMSESP::webSchedulerService.command_setvalue(value, webScheduler.scheduleItems.back().name);
                    },
                    FL_(schedule_cmd),
                    CommandFlag::ADMIN_ONLY);
@@ -111,7 +110,7 @@ bool WebSchedulerService::command_setvalue(const char * value, const std::string
    }
    EMSESP::webSchedulerService.read([&](WebScheduler & webScheduler) { scheduleItems = &webScheduler.scheduleItems; });
    for (ScheduleItem & scheduleItem : *scheduleItems) {
-        if (scheduleItem.description == name) {
+        if (scheduleItem.name == name) {
            if (scheduleItem.active == v) {
                return true;
            }
@@ -148,20 +147,20 @@ void WebSchedulerService::publish(const bool force) {
    }
    if (Mqtt::publish_single() && force) {
        for (const ScheduleItem & scheduleItem : *scheduleItems) {
-            publish_single(scheduleItem.description.c_str(), scheduleItem.active);
+            publish_single(scheduleItem.name.c_str(), scheduleItem.active);
        }
    }

    DynamicJsonDocument doc(EMSESP_JSON_SIZE_XLARGE);
    for (const ScheduleItem & scheduleItem : *scheduleItems) {
-        if (!scheduleItem.description.empty() && !doc.containsKey(scheduleItem.description)) {
+        if (!scheduleItem.name.empty() && !doc.containsKey(scheduleItem.name)) {
            if (EMSESP::system_.bool_format() == BOOL_FORMAT_TRUEFALSE) {
-                doc[scheduleItem.description] = scheduleItem.active;
+                doc[scheduleItem.name] = scheduleItem.active;
            } else if (EMSESP::system_.bool_format() == BOOL_FORMAT_10) {
-                doc[scheduleItem.description] = scheduleItem.active ? 1 : 0;
+                doc[scheduleItem.name] = scheduleItem.active ? 1 : 0;
            } else {
                char result[12];
-                doc[scheduleItem.description] = Helpers::render_boolean(result, scheduleItem.active);
+                doc[scheduleItem.name] = Helpers::render_boolean(result, scheduleItem.active);
            }

            // create HA config
@@ -173,21 +172,21 @@ void WebSchedulerService::publish(const bool force) {

                char val_obj[50];
                char val_cond[65];
-                snprintf(val_obj, sizeof(val_obj), "value_json['%s']", scheduleItem.description.c_str());
+                snprintf(val_obj, sizeof(val_obj), "value_json['%s']", scheduleItem.name.c_str());
                snprintf(val_cond, sizeof(val_cond), "%s is defined", val_obj);
                config["val_tpl"] = (std::string) "{{" + val_obj + " if " + val_cond + "}}";

                char uniq_s[70];
-                snprintf(uniq_s, sizeof(uniq_s), "scheduler_%s", scheduleItem.description.c_str());
+                snprintf(uniq_s, sizeof(uniq_s), "scheduler_%s", scheduleItem.name.c_str());

                config["obj_id"]  = uniq_s;
                config["uniq_id"] = uniq_s; // same as object_id
-                config["name"]    = scheduleItem.description.c_str();
+                config["name"]    = scheduleItem.name.c_str();

                char topic[Mqtt::MQTT_TOPIC_MAX_SIZE];
                char command_topic[Mqtt::MQTT_TOPIC_MAX_SIZE];
-                snprintf(topic, sizeof(topic), "switch/%s/scheduler_%s/config", Mqtt::basename().c_str(), scheduleItem.description.c_str());
-                snprintf(command_topic, sizeof(command_topic), "%s/scheduler/%s", Mqtt::basename().c_str(), scheduleItem.description.c_str());
+                snprintf(topic, sizeof(topic), "switch/%s/scheduler_%s/config", Mqtt::basename().c_str(), scheduleItem.name.c_str());
+                snprintf(command_topic, sizeof(command_topic), "%s/scheduler/%s", Mqtt::basename().c_str(), scheduleItem.name.c_str());
                config["cmd_t"] = command_topic;
                if (EMSESP::system_.bool_format() == BOOL_FORMAT_TRUEFALSE) {
                    config["pl_on"]  = true;
@@ -220,7 +219,7 @@ bool WebSchedulerService::has_commands() {
        return false;
    }
    for (const ScheduleItem & scheduleItem : *scheduleItems) {
-        if (!scheduleItem.description.empty()) {
+        if (!scheduleItem.name.empty()) {
            return true;
        }
    }
--- a/src/web/WebSchedulerService.h
+++ b/src/web/WebSchedulerService.h
@@ -29,14 +29,14 @@ namespace emsesp {

 class ScheduleItem {
  public:
-    std::string id; // unqiue id, is the name
+    std::string id; // unqiue id
    boolean     active;
    uint8_t     flags;
    uint16_t    elapsed_min; // total mins from 00:00
    std::string time;        // HH:MM
    std::string cmd;
    std::string value;
-    std::string description;
+    std::string name;
    uint8_t     retry_cnt;
 };