From e3f2a4585ffc8e9f39b30edbb9ff9ea9902195c6 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Mon, 23 Jan 2023 13:14:02 +1000 Subject: [PATCH] WIP config update --- .trunk/trunk.yaml | 4 +- src/PageRouter.tsx | 2 +- src/components/DeviceSelector.tsx | 11 ++- src/components/NewDevice.tsx | 10 --- .../PageComponents/AppConfig/Map.tsx | 12 +-- src/components/PageComponents/Channel.tsx | 26 +------ .../PageComponents/Config/Bluetooth.tsx | 4 - .../PageComponents/Config/Device.tsx | 4 - .../PageComponents/Config/Display.tsx | 78 +++++++++---------- src/components/PageComponents/Config/LoRa.tsx | 4 - .../PageComponents/Config/Network.tsx | 4 - .../PageComponents/Config/Position.tsx | 4 - .../PageComponents/Config/Power.tsx | 4 - src/components/PageComponents/Config/User.tsx | 10 --- .../PageComponents/ModuleConfig/Audio.tsx | 8 +- .../ModuleConfig/CannedMessage.tsx | 8 +- .../ModuleConfig/ExternalNotification.tsx | 8 +- .../PageComponents/ModuleConfig/MQTT.tsx | 8 +- .../PageComponents/ModuleConfig/RangeTest.tsx | 4 - .../PageComponents/ModuleConfig/Serial.tsx | 8 +- .../ModuleConfig/StoreForward.tsx | 8 +- .../PageComponents/ModuleConfig/Telemetry.tsx | 8 +- src/components/Widgets/DeviceWidget.tsx | 5 +- src/components/form/Button.tsx | 2 +- src/components/form/Form.tsx | 63 ++------------- src/components/generic/TabbedContent.tsx | 2 +- src/pages/Config/DeviceConfig.tsx | 77 +++++++++++------- 27 files changed, 116 insertions(+), 270 deletions(-) diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml index dfc13ebd..66dd75b1 100644 --- a/.trunk/trunk.yaml +++ b/.trunk/trunk.yaml @@ -13,8 +13,8 @@ lint: - oxipng@8.0.0 - svgo@3.0.2 - git-diff-check - - actionlint@1.6.22 - - gitleaks@8.15.2 + - actionlint@1.6.23 + - gitleaks@8.15.3 runtimes: enabled: - go@1.18.3 diff --git a/src/PageRouter.tsx b/src/PageRouter.tsx index 3e5e617f..d68c8fdd 100644 --- a/src/PageRouter.tsx +++ b/src/PageRouter.tsx @@ -11,7 +11,7 @@ import { PeersPage } from "@pages/Peers.js"; export const PageRouter = (): JSX.Element => { const { activePage } = useDevice(); return ( -
+
{activePage === "messages" && } {activePage === "map" && } {activePage === "extensions" && } diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 88581fd0..945bb5f4 100644 --- a/src/components/DeviceSelector.tsx +++ b/src/components/DeviceSelector.tsx @@ -7,15 +7,15 @@ import { PageNav } from "@app/Nav/PageNav.js"; import { Mono } from "@components/generic/Mono.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { PlusIcon } from "@heroicons/react/24/outline"; +import { MoonIcon, SunIcon } from "@primer/octicons-react"; export const DeviceSelector = (): JSX.Element => { const { getDevices } = useDeviceStore(); - const { selectedDevice, setSelectedDevice, darkMode } = useAppStore(); + const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = useAppStore(); return (
- Connected Devices {getDevices().map((device) => (
{ -
//actions
+
setDarkMode(!darkMode)} className="bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press text-textSecondary hover:text-textPrimary">{ + darkMode ? ( + + ) : ( + + )}
{
- ) : ( - - ), - action: () => setDarkMode(!darkMode) - } - ]} />
); diff --git a/src/components/PageComponents/AppConfig/Map.tsx b/src/components/PageComponents/AppConfig/Map.tsx index f08fe845..94e62bea 100644 --- a/src/components/PageComponents/AppConfig/Map.tsx +++ b/src/components/PageComponents/AppConfig/Map.tsx @@ -49,17 +49,7 @@ export const Map = (): JSX.Element => { // }, [reset, rasterSources]); return ( -
- reset({ - rasterSources - }) - } - dirty={isDirty} - onSubmit={onSubmit} - > +
{fields.map((field, index) => ( diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 2af7e9c8..499ae450 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -105,31 +105,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { }); return ( - - reset({ - enabled: [ - Protobuf.Channel_Role.SECONDARY, - Protobuf.Channel_Role.PRIMARY - ].find((role) => role === channel?.role) - ? true - : false, - ...channel?.settings, - psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)) - }) - } - dirty={isDirty} - onSubmit={onSubmit} - > + {channel?.index !== 0 && ( <> { return ( reset(config.bluetooth)} - dirty={isDirty} onSubmit={onSubmit} > { return ( reset(config.device)} - dirty={isDirty} onSubmit={onSubmit} > { return ( reset(config.lora)} - dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Network.tsx b/src/components/PageComponents/Config/Network.tsx index 6c23b1b0..10606531 100644 --- a/src/components/PageComponents/Config/Network.tsx +++ b/src/components/PageComponents/Config/Network.tsx @@ -85,10 +85,6 @@ export const Network = (): JSX.Element => { return ( reset(config.network)} - dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Position.tsx b/src/components/PageComponents/Config/Position.tsx index 9b349416..88af4f45 100644 --- a/src/components/PageComponents/Config/Position.tsx +++ b/src/components/PageComponents/Config/Position.tsx @@ -108,10 +108,6 @@ export const Position = (): JSX.Element => { return ( reset(config.position)} - dirty={isDirty} onSubmit={onSubmit} > { return ( reset(config.power)} - dirty={isDirty} onSubmit={onSubmit} > { return ( { - reset({ - longName: myNode?.data.user?.longName, - shortName: myNode?.data.user?.shortName, - isLicensed: myNode?.data.user?.isLicensed - }); - }} - dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/Audio.tsx b/src/components/PageComponents/ModuleConfig/Audio.tsx index 60f8d68e..bbc5a815 100644 --- a/src/components/PageComponents/ModuleConfig/Audio.tsx +++ b/src/components/PageComponents/ModuleConfig/Audio.tsx @@ -63,13 +63,7 @@ export const Audio = (): JSX.Element => { }); return ( - reset(moduleConfig.audio)} - dirty={isDirty} - onSubmit={onSubmit} - > + { }); return ( - reset(moduleConfig.cannedMessage)} - dirty={isDirty} - onSubmit={onSubmit} - > + { }); return ( - reset(moduleConfig.externalNotification)} - dirty={isDirty} - onSubmit={onSubmit} - > + { }); return ( - reset(moduleConfig.mqtt)} - dirty={isDirty} - onSubmit={onSubmit} - > + { return ( reset(moduleConfig.rangeTest)} - dirty={isDirty} onSubmit={onSubmit} > { }); return ( - reset(moduleConfig.serial)} - dirty={isDirty} - onSubmit={onSubmit} - > + { }); return ( - reset(moduleConfig.storeForward)} - dirty={isDirty} - onSubmit={onSubmit} - > + { }); return ( - reset(moduleConfig.telemetry)} - dirty={isDirty} - onSubmit={onSubmit} - > + { return (
-
- -
-
+
diff --git a/src/components/form/Button.tsx b/src/components/form/Button.tsx index db071be9..33ee6f62 100644 --- a/src/components/form/Button.tsx +++ b/src/components/form/Button.tsx @@ -16,7 +16,7 @@ export const Button = ({ }: ButtonProps): JSX.Element => { return ( - -
-
-
-
{children}
+ +
{children}
); }; diff --git a/src/components/generic/TabbedContent.tsx b/src/components/generic/TabbedContent.tsx index 3530e5de..9f39e49d 100644 --- a/src/components/generic/TabbedContent.tsx +++ b/src/components/generic/TabbedContent.tsx @@ -28,7 +28,7 @@ export const TabbedContent = ({ actions }: TabbedContentProps): JSX.Element => { return ( - + {tabs.map((entry, index) => ( diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx index 2358f574..294b5259 100644 --- a/src/pages/Config/DeviceConfig.tsx +++ b/src/pages/Config/DeviceConfig.tsx @@ -11,6 +11,9 @@ import { Power } from "@components/PageComponents/Config/Power.js"; import { User } from "@components/PageComponents/Config/User.js"; import { useDevice } from "@core/providers/useDevice.js"; import { Tab } from "@headlessui/react"; +import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline"; +import { Button } from "@app/components/form/Button.js"; +import { CheckIcon } from "@primer/octicons-react"; export const DeviceConfig = (): JSX.Element => { const { hardware } = useDevice(); @@ -52,31 +55,53 @@ export const DeviceConfig = (): JSX.Element => { ]; return ( - - - {configSections.map((Config, index) => ( - - {({ selected }) => ( -
- {Config.label} -
- )} - - ))} - - - {configSections.map((Config, index) => ( - - - - ))} - - +
+
+
    +
  1. + +
    2. + {["Config", "User"].map((breadcrumb, index) => ( +
  2. + + + {breadcrumb} + +
    3. + ))} +
+
+ +
+
+ + + + {configSections.map((Config, index) => ( + + {({ selected }) => ( +
+ {Config.label} + 3 +
+ )} + + ))} + + + {configSections.map((Config, index) => ( + + + + ))} + + +
); };