Overhaul (#83)

* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
2023-02-12 15:31:25 +11:00
parent c184c5add6
commit e59fe138f1
121 changed files with 5358 additions and 4701 deletions
@@ -1,34 +1,69 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  Cog8ToothIcon,
-  CubeTransparentIcon,
-  WindowIcon
-} from "@heroicons/react/24/outline";
-import { AppConfig } from "@pages/Config/AppConfig.js";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { PageLayout } from "@app/components/Topbar.js";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { useState } from "react";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@app/components/UI/Button.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";

 export const ConfigPage = (): JSX.Element => {
-  const { connection, pendingSettingsChanges } = useDevice();
+  const { workingConfig, workingModuleConfig, connection } = useDevice();
+  const [activeConfigSection, setActiveConfigSection] = useState<
+    "device" | "module"
+  >("device");

-  const tabs: TabType[] = [
-    {
-      label: "Device Config",
-      icon: <Cog8ToothIcon className="h-4" />,
-      element: DeviceConfig
-    },
-    {
-      label: "Module Config",
-      icon: <CubeTransparentIcon className="h-4" />,
-      element: ModuleConfig
-    },
-    {
-      label: "App Config",
-      icon: <WindowIcon className="h-4" />,
-      element: AppConfig
-    }
-  ];
+  return (
+    <>
+      <Sidebar>
+        <SidebarSection label="Config Sections">
+          <SidebarButton
+            label="Device Config"
+            active={activeConfigSection === "device"}
+            onClick={() => setActiveConfigSection("device")}
+            icon={SettingsIcon}
+          />
+          <SidebarButton
+            label="Module Config"
+            active={activeConfigSection === "module"}
+            onClick={() => setActiveConfigSection("module")}
+            icon={BoxesIcon}
+          />
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label={
+          activeConfigSection === "device" ? "Device Config" : "Module Config"
+        }
+        actions={[
+          {
+            icon: SaveIcon,
+            async onClick() {
+              if (activeConfigSection === "device") {
+                workingConfig.map(
+                  async (config) => await connection?.setConfig(config)
+                );
+              } else {
+                workingModuleConfig.map(
+                  async (config) => await connection?.setModuleConfig(config)
+                );
+              }

-  return <TabbedContent tabs={tabs} />;
+              await connection?.commitEditSettings();
+            }
+          }
+        ]}
+      >
+        <div className="p-3">
+          {activeConfigSection === "device" ? (
+            <DeviceConfig />
+          ) : (
+            <ModuleConfig />
+          )}
+        </div>
+      </PageLayout>
+    </>
+  );
 };