Initial 1.3.x rework

2022-07-26 08:52:23 +10:00
parent ff6019098b
commit a2280ab96e
163 changed files with 6383 additions and 14397 deletions
@@ -0,0 +1,82 @@
+import type React from "react";
+import { useState } from "react";
+
+import { Pane, Tab, Tablist } from "evergreen-ui";
+
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Device } from "@components/PageComponents/Config/Device.js";
+import { Display } from "@components/PageComponents/Config/Display.js";
+import { LoRa } from "@components/PageComponents/Config/LoRa.js";
+import { Position } from "@components/PageComponents/Config/Position.js";
+import { Power } from "@components/PageComponents/Config/Power.js";
+import { User } from "@components/PageComponents/Config/User.js";
+import { WiFi } from "@components/PageComponents/Config/WiFi.js";
+
+export const DeviceConfig = (): JSX.Element => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { hardware } = useDevice();
+
+  const configSections = [
+    {
+      label: "User",
+      element: User,
+    },
+    {
+      label: "Device",
+      element: Device,
+    },
+    {
+      label: "Position",
+      element: Position,
+    },
+    {
+      label: "Power",
+      element: Power,
+    },
+    {
+      label: "WiFi",
+      element: WiFi,
+      disabled: !hardware.hasWifi,
+    },
+    {
+      label: "Display",
+      element: Display,
+    },
+    {
+      label: "LoRa",
+      element: LoRa,
+    },
+    // Channels
+    // Interface
+  ];
+
+  return (
+    <Pane display="flex">
+      <Pane flexBasis={150} marginRight={24}>
+        <Tablist>
+          {configSections.map((Config, index) => (
+            <Tab
+              key={index}
+              direction="vertical"
+              isSelected={index === selectedIndex}
+              onSelect={() => setSelectedIndex(index)}
+              disabled={Config.disabled}
+            >
+              {Config.label}
+            </Tab>
+          ))}
+        </Tablist>
+      </Pane>
+      <Pane flex="1">
+        {configSections.map((Config, index) => (
+          <Pane
+            key={index}
+            display={index === selectedIndex ? "block" : "none"}
+          >
+            <Config.element />
+          </Pane>
+        ))}
+      </Pane>
+    </Pane>
+  );
+};
@@ -0,0 +1,78 @@
+import type React from "react";
+import { useState } from "react";
+
+import { Pane, Tab, Tablist } from "evergreen-ui";
+
+import { ExternalNotification } from "@app/components/PageComponents/ModuleConfig/ExternalNotification.js";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
+import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
+import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
+import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
+
+export const ModuleConfig = (): JSX.Element => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const configSections = [
+    {
+      label: "MQTT",
+      element: MQTT,
+    },
+    {
+      label: "Serial",
+      element: Serial,
+    },
+    {
+      label: "External Notification",
+      element: ExternalNotification,
+    },
+    {
+      label: "Store & Forward",
+      element: StoreForward,
+    },
+    {
+      label: "Range Test",
+      element: RangeTest,
+    },
+    {
+      label: "Telemetry",
+      element: Telemetry,
+    },
+    {
+      label: "Canned Message",
+      element: CannedMessage,
+    },
+    // Channels
+    // Interface
+  ];
+
+  return (
+    <Pane display="flex">
+      <Pane flexBasis={150} marginRight={24}>
+        <Tablist>
+          {configSections.map((Config, index) => (
+            <Tab
+              key={index}
+              direction="vertical"
+              isSelected={index === selectedIndex}
+              onSelect={() => setSelectedIndex(index)}
+            >
+              {Config.label}
+            </Tab>
+          ))}
+        </Tablist>
+      </Pane>
+      <Pane flex="1">
+        {configSections.map((Config, index) => (
+          <Pane
+            key={index}
+            display={index === selectedIndex ? "block" : "none"}
+          >
+            <Config.element />
+          </Pane>
+        ))}
+      </Pane>
+    </Pane>
+  );
+};
@@ -0,0 +1,36 @@
+import type React from "react";
+import { useState } from "react";
+
+import { CogIcon, CubeIcon } from "evergreen-ui";
+
+import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
+
+import { DeviceConfig } from "./DeviceConfig.js";
+import { ModuleConfig } from "./ModuleConfig.js";
+
+export const ConfigPage = (): JSX.Element => {
+  const [activeConfig, setActiveConfig] = useState(0);
+
+  const tabs: Tab[] = [
+    {
+      key: 0,
+      name: "Device Config",
+      icon: CogIcon,
+      element: DeviceConfig,
+    },
+    {
+      key: 1,
+      name: "Module Config",
+      icon: CubeIcon,
+      element: ModuleConfig,
+    },
+  ];
+
+  return (
+    <TabbedContent
+      active={activeConfig}
+      setActive={setActiveConfig}
+      tabs={tabs}
+    />
+  );
+};