updates

.env

@@ -1,2 +1,4 @@
 CLIENTS='["10.10.10.100","10.10.10.101","10.10.10.102","10.10.10.103"]'
-NAMES='["Stage","Yellow Tower","Blue Tower","Red Tower"]'
+NAMES='["Stage","Yellow Tower","Blue Tower","Red Tower"]'
+# CLIENTS='["192.168.1.121"]'
+# NAMES='["POC"]'

app/components/Management.js

@@ -12,7 +12,7 @@ import {
   ScrollIndicator,
   Slider,
   SplitButton,
-  Transfer
+  Transfer,
 } from "tiny-ui";
 import WLED from "./WLED.js";
 
@@ -180,7 +180,7 @@ const InstanceManagement = ({
   presets,
   onCopy,
   onPreset,
-  onDelete
+  onDelete,
 }) => {
   if (!presets) return null;
   return Object.keys(presets)?.map((o, i) => (
@@ -231,88 +231,84 @@ const InstanceManagement = ({
   ));
 };
 
-const StateMangement = ({ client, onPower, onSync, onBrightness, current }) => {
+const StateMangement = ({
+  client,
+  setPurge,
+  setUpload,
+  setCopy,
+  onPower,
+  onSync,
+  onBrightness,
+  onPreset,
+  current,
+  ...props
+}) => {
   if (!current) return null;
   return (
     <Row>
-      <Col>
+      <Col span={12}>
+        <Button
+          btnType={current?.on ? "primary" : "outline"}
+          icon={<Icon name="switch" />}
+          round
+          onClick={() =>
+            onPower({ clients: [client], value: current?.on ? "off" : "on" })
+          }
+        >
+          Lights {current?.on ? "on" : "off"}
+        </Button>
+        <PopConfirm
+          title="Are you sure you want to make enable sync?"
+          onConfirm={() => onSync({ clients: [client], value: "enable" })}
+        >
+          <Button btnType="outline" round disabled={current?.udpSync?.send}>
+            Enable sync
+          </Button>
+        </PopConfirm>
+        <PopConfirm
+          title="Are you sure you want to disable sync?"
+          onConfirm={() => onSync({ clients: [client], value: "disable" })}
+        >
+          <Button btnType="outline" round disabled={!current?.udpSync?.send}>
+            Disable sync
+          </Button>
+        </PopConfirm>
+        <PopConfirm
+          title="Are you sure you want to reboot?"
+          onConfirm={() => onPower({ clients: [client], value: "reboot" })}
+        >
+          <Button icon={<Icon name="loader" />} btnType="danger" round>
+            Reboot
+          </Button>
+        </PopConfirm>
+      </Col>
+      <Col span={12} style={{ textAlign: "right" }}>
         <Button.Group round>
           <Button
-            btnType="bordered"
-            icon={<Icon name="switch" />}
+            btnType="secondary"
+            icon={<Icon name="arrow-left" />}
+            title="Previous preset"
             round
-            onClick={() =>
-              onPower({ clients: [client], value: current?.on ? "off" : "on" })
-            }
-          >
-            {current?.on ? "Lights off" : "Lights on"}
-          </Button>
-          <PopConfirm
-            title="Are you sure you want to reboot?"
-            onConfirm={() => onPower({ clients: [client], value: "reboot" })}
-          >
-            <Button icon={<Icon name="loader" />} btnType="bordered" round>
-              Reboot
-            </Button>
-          </PopConfirm>
-        </Button.Group>
-        <Button.Group round>
-          <PopConfirm
-            title="Are you sure you want to make enable sync?"
-            onConfirm={() => onSync({ clients: [client], value: "enable" })}
-          >
-            <Button btnType="bordered" round disabled={current?.udpSync?.send}>
-              Enable sync
-            </Button>
-          </PopConfirm>
-          <PopConfirm
-            title="Are you sure you want to disable sync?"
-            onConfirm={() => onSync({ clients: [client], value: "disable" })}
-          >
-            <Button btnType="bordered" round disabled={!current?.udpSync?.send}>
-              Disable sync
-            </Button>
-          </PopConfirm>
+            onClick={() => {
+              onPreset({ clients: [client], value: 249 });
+            }}
+          />
+          <Button
+            btnType="secondary"
+            icon={<Icon name="arrow-right" />}
+            title="Next preset"
+            round
+            onClick={() => {
+              onPreset({ clients: [client], value: 250 });
+            }}
+          />
         </Button.Group>
-      </Col>
-      <Col>
-        <Slider
-          defaultValue={from255(current?.brightness)}
-          onChange={(v) => {
-            onBrightness({ clients: [client], value: to255(v) });
-          }}
-        />
-      </Col>
-    </Row>
-  );
-};
 
-const Management = ({
-  key,
-  itemKey,
-  clientName,
-  onCopy,
-  onDelete,
-  onSync,
-  ...props
-}) => {
-  const [copy, setCopy] = useState(null);
-  const [purge, setPurge] = useState(null);
-  const [upload, setUpload] = useState(null);
-  return (
-    <Panel
-      key={key}
-      itemKey={itemKey}
-      header={
-        <>
-          {clientName} ({props?.client})
-        </>
-      }
-      extra={
         <SplitButton
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
+            window.open(`http://${client}`);
           }}
           overlay={
             <StyledMenu>
@@ -320,7 +316,7 @@ const Management = ({
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
-                  window.open(`http://${props?.client}`);
+                  window.open(`http://${client}`);
                 }}
               >
                 <Icon name="eye" />
@@ -366,7 +362,7 @@ const Management = ({
                   e.stopPropagation();
                   setPurge({
                     clients: [props?.client],
-                    value: Object.keys(props?.presets)
+                    value: Object.keys(props?.presets),
                   });
                 }}
               >
@@ -375,12 +371,52 @@ const Management = ({
               </Menu.Item>
             </StyledMenu>
           }
+          round
         >
           <Icon name="setting" />
         </SplitButton>
+      </Col>
+      <Col>
+        <Slider
+          defaultValue={from255(current?.brightness)}
+          onChange={(v) => {
+            onBrightness({ clients: [client], value: to255(v) });
+          }}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+const Management = ({
+  key,
+  itemKey,
+  clientName,
+  onCopy,
+  onDelete,
+  onSync,
+  ...props
+}) => {
+  const [copy, setCopy] = useState(null);
+  const [purge, setPurge] = useState(null);
+  const [upload, setUpload] = useState(null);
+  return (
+    <Panel
+      key={key}
+      itemKey={itemKey}
+      header={
+        <>
+          {clientName} ({props?.client})
+        </>
       }
     >
-      <StateMangement onSync={onSync} {...props} />
+      <StateMangement
+        setPurge={setPurge}
+        setCopy={setCopy}
+        setUpload={setUpload}
+        onSync={onSync}
+        {...props}
+      />
       <InstanceManagement
         {...props}
         onDelete={(e) => {

app/components/Menu.js

@@ -11,7 +11,7 @@ const Menu = ({ page, ...rest }) => {
     </_Menu.Item>
   ));
   if (!items) return null;
-  return <_Menu>{items}</_Menu>;
+  return <_Menu theme="dark">{items}</_Menu>;
 };
 
 export default Menu;

app/globals.scss

@@ -1,3 +1,51 @@
-$primary-color: #172b4d;
+$prefix: "ty" !default;
 
-@import "~tiny-ui/dist/styles/index.min.css";
+// Color
+$primary-color: #002e5d !default;
+
+$white-color: #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default;
+$gray-700: #525f7f !default;
+$gray-800: #32325d !default;
+$gray-900: #212529 !default;
+$black-color: #000 !default;
+
+$red-color: #dc3545 !default;
+$orange-color: #fd7e14 !default;
+$yellow-color: #fadb14 !default;
+$green-color: #52c41a !default;
+$teal-color: #20c997 !default;
+$cyan-color: #17a2b8 !default;
+$blue-color: #0d6efd !default;
+$indigo-color: #6610f2 !default;
+$purple-color: #6f42c1 !default;
+$magenta-color: #eb2f96 !default;
+
+// @import "~tiny-ui/dist/styles/index.min.css";
+@import "~tiny-ui/components/style/index.scss";
+
+body {
+  background: $gray-500;
+  .ty-layout-header {
+    height: auto;
+  }
+  .ty-layout-content {
+    background-color: $gray-500;
+  }
+  .ty-layout-footer {
+    background-color: $gray-500;
+  }
+  .ty-menu_dark {
+    .ty-menu-item {
+      color: $white-color;
+      a {
+        color: $white-color;
+      }
+    }
+  }
+}