diff --git a/interface/package.json b/interface/package.json index 779215c71..67039aa61 100644 --- a/interface/package.json +++ b/interface/package.json @@ -44,7 +44,6 @@ "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" }, diff --git a/interface/src/i18n/de/index.ts b/interface/src/i18n/de/index.ts index 73a54d5b3..c3140937b 100644 --- a/interface/src/i18n/de/index.ts +++ b/interface/src/i18n/de/index.ts @@ -311,10 +311,10 @@ const de: Translation = { LEAVE: 'Verlassen', SCHEDULER: 'Planer', SCHEDULER_HELP_1: 'Fügen Sie eigene, geplante Befehle zur Automatisierung hinzu. Vergeben Sie einen Entitätsnamen um die Aktivierung über API/Mqtt zu steuern', + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Zeitplan', TIME: 'Zeit', TIMER: 'Timer', - WEEKLY: 'Wöchentlich', SCHEDULE_SAVED: 'Plan gespeichert', SCHEDULE_TIMER_1: 'beim Start', SCHEDULE_TIMER_2: 'jede Minute', diff --git a/interface/src/i18n/en/index.ts b/interface/src/i18n/en/index.ts index 6daa59ad8..7b9d37afa 100644 --- a/interface/src/i18n/en/index.ts +++ b/interface/src/i18n/en/index.ts @@ -311,10 +311,10 @@ const en: Translation = { LEAVE: 'Leave', SCHEDULER: 'Scheduler', SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', SCHEDULE: 'Schedule', TIME: 'Time', TIMER: 'Timer', - WEEKLY: 'Weekly', SCHEDULE_SAVED: 'Schedule updated', SCHEDULE_TIMER_1: 'on startup', SCHEDULE_TIMER_2: 'every minute', diff --git a/interface/src/i18n/fr/index.ts b/interface/src/i18n/fr/index.ts index 001b8d880..560624f7a 100644 --- a/interface/src/i18n/fr/index.ts +++ b/interface/src/i18n/fr/index.ts @@ -311,10 +311,10 @@ const fr: Translation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/i18n/nl/index.ts b/interface/src/i18n/nl/index.ts index e24c33c63..8b5ff209f 100644 --- a/interface/src/i18n/nl/index.ts +++ b/interface/src/i18n/nl/index.ts @@ -311,10 +311,10 @@ const nl: Translation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/i18n/no/index.ts b/interface/src/i18n/no/index.ts index aeee08059..81bfa7a9b 100644 --- a/interface/src/i18n/no/index.ts +++ b/interface/src/i18n/no/index.ts @@ -311,10 +311,10 @@ const no: Translation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/i18n/pl/index.ts b/interface/src/i18n/pl/index.ts index b963a93ef..529b3d536 100644 --- a/interface/src/i18n/pl/index.ts +++ b/interface/src/i18n/pl/index.ts @@ -311,10 +311,10 @@ const pl: BaseTranslation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/i18n/sv/index.ts b/interface/src/i18n/sv/index.ts index 23ecddf6c..88914c749 100644 --- a/interface/src/i18n/sv/index.ts +++ b/interface/src/i18n/sv/index.ts @@ -311,10 +311,10 @@ const sv: Translation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/i18n/tr/index.ts b/interface/src/i18n/tr/index.ts index 35ea50a16..5b69acfad 100644 --- a/interface/src/i18n/tr/index.ts +++ b/interface/src/i18n/tr/index.ts @@ -311,10 +311,10 @@ const tr: Translation = { LEAVE: 'Leave', // TODO translate SCHEDULER: 'Scheduler', // TODO translate SCHEDULER_HELP_1: 'Add custom scheduled commands to automate EMS-ESP. Add entity name to control activation by api/mqtt', // TODO translate + SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate SCHEDULE: 'Schedule', // TODO translate TIME: 'Time', // TODO translate TIMER: 'Timer', // TODO translate - WEEKLY: 'Weekly', // TODO translate SCHEDULE_SAVED: 'Schedule updated', // TODO translate SCHEDULE_TIMER_1: 'on startup', // TODO translate SCHEDULE_TIMER_2: 'every minute', // TODO translate diff --git a/interface/src/project/SettingsScheduler.tsx b/interface/src/project/SettingsScheduler.tsx index 31d2ce41d..a3e05211b 100644 --- a/interface/src/project/SettingsScheduler.tsx +++ b/interface/src/project/SettingsScheduler.tsx @@ -6,26 +6,17 @@ import { Typography, Box, Stack, - Paper, Dialog, DialogActions, DialogContent, DialogTitle, ToggleButton, - MenuItem, ToggleButtonGroup, Checkbox, TextField, - Radio, - RadioGroup, - FormControlLabel + Divider } 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'; @@ -59,31 +50,18 @@ import { useI18nContext } from 'i18n/i18n-react'; import * as EMSESP from './api'; -interface ItemProps { - enabled: boolean; +function makeid() { // TODO finish this! + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const charactersLength = characters.length; + let counter = 0; + while (counter < 4) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + counter += 1; + } + return result; } -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(); @@ -295,8 +273,7 @@ const SettingsScheduler: FC = () => { } }; - function getFlagName(si: ScheduleItem, flag: number) { - let text = ''; + function getFlagName(flag: number) { if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) { return dow[1]; } @@ -321,51 +298,25 @@ const SettingsScheduler: FC = () => { if ((flag & ScheduleFlag.SCHEDULE_TIMER) === ScheduleFlag.SCHEDULE_TIMER) { return LL.TIMER(); } - return ""; + return ''; } - function showFlag(si: ScheduleItem, flag: number) { - let text = ''; - if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) { - text = dow[1]; - } - if ((flag & ScheduleFlag.SCHEDULE_TUE) === ScheduleFlag.SCHEDULE_TUE) { - text = dow[2]; - } - if ((flag & ScheduleFlag.SCHEDULE_WED) === ScheduleFlag.SCHEDULE_WED) { - text = dow[3]; - } - if ((flag & ScheduleFlag.SCHEDULE_THU) === ScheduleFlag.SCHEDULE_THU) { - text = dow[4]; - } - if ((flag & ScheduleFlag.SCHEDULE_FRI) === ScheduleFlag.SCHEDULE_FRI) { - text = dow[5]; - } - if ((flag & ScheduleFlag.SCHEDULE_SAT) === ScheduleFlag.SCHEDULE_SAT) { - text = dow[6]; - } - if ((flag & ScheduleFlag.SCHEDULE_SUN) === ScheduleFlag.SCHEDULE_SUN) { - text = dow[0]; - } - if ((flag & ScheduleFlag.SCHEDULE_TIMER) === ScheduleFlag.SCHEDULE_TIMER) { - text = LL.TIMER(); - } + const dayBox = (si: ScheduleItem, flag: number) => ( + <> + + + {getFlagName(flag)} + + + + + ); - return ( - <> - - {/* */} - - - - {text} - - - - ); - } + const showFlag = (si: ScheduleItem, flag: number) => ( + + {getFlagName(flag)} + + ); const editScheduleItem = (si: ScheduleItem) => { if (si.name === undefined) { @@ -409,9 +360,7 @@ const SettingsScheduler: FC = () => { <>
- - - + {LL.SCHEDULE()} {LL.TIME()} {LL.COMMAND()} @@ -422,48 +371,19 @@ const SettingsScheduler: FC = () => { {tableList.map((si: ScheduleItem) => ( editScheduleItem(si)}> + {si.active && } - { - si.active = !si.active; - setFlags(['']); // forces refresh - }} - /> - - - - - - {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)} */} - - + + + {dayBox(si, ScheduleFlag.SCHEDULE_MON)} + {dayBox(si, ScheduleFlag.SCHEDULE_TUE)} + {dayBox(si, ScheduleFlag.SCHEDULE_WED)} + {dayBox(si, ScheduleFlag.SCHEDULE_THU)} + {dayBox(si, ScheduleFlag.SCHEDULE_FRI)} + {dayBox(si, ScheduleFlag.SCHEDULE_SAT)} + {dayBox(si, ScheduleFlag.SCHEDULE_SUN)} + {dayBox(si, ScheduleFlag.SCHEDULE_TIMER)} + {si.time} {si.cmd} @@ -503,65 +423,61 @@ const SettingsScheduler: FC = () => { const renderEditSchedule = () => { if (scheduleItem) { + const isTimer = scheduleItem.flags === ScheduleFlag.SCHEDULE_TIMER; return ( closeDialog()}> - {creating ? LL.ADD(0) : LL.EDIT()} {LL.SCHEDULE()} + {creating ? (LL.ADD(0)+" "+LL.NEW()) : LL.EDIT()} {LL.SCHEDULE()} - - { - 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 - }} - > - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_MON)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TUE)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_WED)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_THU)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_FRI)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SAT)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SUN)} - {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TIMER)} - - - - {creating ? ( - { - if ((event.target as HTMLInputElement).value === 't') { - scheduleItem.flags = ScheduleFlag.SCHEDULE_TIMER; - scheduleItem.time = '01:00'; - } else { - scheduleItem.flags = 0; - } - updateValue(setScheduleItem); - setFlags(['']); // refresh screen - }} - > - } label={LL.WEEKLY()} /> - } label={LL.TIMER()} /> - - ) : ( - - {LL.TYPE()}: {scheduleItem.flags & ScheduleFlag.SCHEDULE_TIMER ? LL.TIMER() : LL.WEEKLY()} - - )} - + + { + scheduleItem.flags = getFlagNumber(flag) & 127; + setFlags(['']); // forces refresh + }} + > + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_MON)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TUE)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_WED)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_THU)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_FRI)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SAT)} + {showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SUN)} + + + + {isTimer ? ( + + ) : ( + + )} + + + { control={} label={LL.ACTIVE()} /> - - {(scheduleItem.flags & ScheduleFlag.SCHEDULE_TIMER) === ScheduleFlag.SCHEDULE_TIMER ? ( - - {LL.SCHEDULE_TIMER_1()} - {LL.SCHEDULE_TIMER_2()} - {LL.SCHEDULE_TIMER_3()} - - ) : ( - + + {isTimer && ( + + {LL.SCHEDULER_HELP_2()} + )} = 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" @@ -1966,13 +1920,6 @@ __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" @@ -2167,24 +2114,6 @@ __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" @@ -3343,7 +3272,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": +"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: @@ -3915,13 +3844,6 @@ __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" @@ -4569,7 +4491,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -4592,13 +4514,6 @@ __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" @@ -5069,13 +4984,6 @@ __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" @@ -5356,28 +5264,6 @@ __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"