diff --git a/interface/index.html b/interface/index.html
index 4f115b0e6..602add36a 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -2,7 +2,7 @@
-
+
EMS-ESP
diff --git a/interface/package.json b/interface/package.json
index 1a9a3caea..779215c71 100644
--- 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",
diff --git a/interface/src/project/SettingsScheduler.tsx b/interface/src/project/SettingsScheduler.tsx
index ddf0e740c..31d2ce41d 100644
--- 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([emptySchedule]);
const [scheduleItem, setScheduleItem] = useState();
@@ -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 (
+ <>
+
+ {/* */}
+
+
{text}
+
+ >
);
}
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 = () => {
<>
- {LL.NAME()}
{LL.SCHEDULE()}
{LL.TIME()}
{LL.COMMAND()}
- {LL.VALUE(0)}
+ {LL.VALUE(0)}
+ {LL.NAME()}
{tableList.map((si: ScheduleItem) => (
editScheduleItem(si)}>
- | {si.id} |
{
/>
|
- {
- si.flags = getFlagNumber(flag);
- if (si.flags & ScheduleFlag.SCHEDULE_TIMER) {
- si.flags = ScheduleFlag.SCHEDULE_TIMER;
- }
- setFlags(['']); // forces refresh
- }}
- >
- {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)}
-
+
+
+
+ - {getFlagName(si, ScheduleFlag.SCHEDULE_MON)}
+
+ - {getFlagName(si, ScheduleFlag.SCHEDULE_TUE)}
+
+
+
+
+
+
+ {/* {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)} */}
+
+
|
{si.time} |
{si.cmd} |
{si.value} |
+ {si.name} |
))}
@@ -426,19 +506,38 @@ const SettingsScheduler: FC = () => {
return (