test

src/App.svelte

@@ -511,12 +511,12 @@
         topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length);
         if (key === topic) {
           console.log("[i]", "value " + topic + " updated");
-          if (devLayout[i].widget == "toggle") {
-            if (value == "1") devLayout[i].status = 1;
-            if (value == "0") devLayout[i].status = 0;
-          } else {
-            devLayout[i].status = value;
-          }
+          //if (devLayout[i].widget == "toggle") {
+          //if (value == "1") devLayout[i].status = 1;
+          //if (value == "0") devLayout[i].status = 0;
+          //} else {
+          devLayout[i].status = value;
+          //}
           break;
         }
       }

src/widgets/Toggle.svelte

@@ -1,10 +1,30 @@
 <script>
   import App from "../App.svelte";
+  import { onMount } from "svelte";
+  onMount(async () => {
+    setDefaultValue();
+  });
   export let widget;
-  export let value;
-  value = value;
+
   export let wsPush = (ws, topic, status) => {};
-  //let st = Boolean(widget.status);
+
+  let st = false;
+
+  function setDefaultValue() {
+    if (widget.status == "1") {
+      st = true;
+    } else if (widget.status == "0") {
+      st = false;
+    }
+  }
+
+  function changeValue() {
+    if (st) {
+      widget.status = "1";
+    } else {
+      widget.status = "0";
+    }
+  }
 </script>
 
 <div class="crd-itm-psn">
@@ -15,7 +35,7 @@
   <div class="flex justify-end w-1/3">
     <label for={widget.topic} class="items-center cursor-pointer">
       <div class="relative">
-        <input bind:checked={widget.status} on:change={() => wsPush(widget.ws, widget.topic, widget.status ? 1 : 0)} id={widget.topic} type="checkbox" class="sr-only" />
+        <input bind:checked={st} on:change={() => (changeValue(), wsPush(widget.ws, widget.topic, widget.status))} id={widget.topic} type="checkbox" class="sr-only" />
         <div class="block bg-gray-600 w-10 h-6 rounded-full" />
         <div class="dot {widget['send'] == true ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1  w-4 h-4 rounded-full transition" />
       </div>