финальная версия

src/App.svelte

@@ -29,7 +29,8 @@
 
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
-  let myip = document.location.hostname;
+  //let myip = document.location.hostname;
+  let myip = "192.168.88.235";
 
   //Flags
   let showInput = false;
@@ -68,25 +69,26 @@
   let socket = [];
   let socketConnected = false;
   let selectedDeviceData = undefined;
-  let deviceList = [];
+  let selectedWs = 0;
+
   let flag = true;
   let newDevice = {};
   let coreMessages = [];
-  let wsSelected = undefined;
 
   let oneOfJsonPackageError = false;
 
+  let deviceList = [];
   deviceList = [
     {
-      name: "Устройство",
+      name: "--",
-      id: "123456789",
+      id: "--",
-      ip: "192.168.88.235",
+      ip: myip,
-      //ip: myip,
       status: false,
     },
   ];
 
-  let deviceListParced = false;
+  let incDeviceList = [];
+  let incDeviceListParced = false;
 
   //***********************************************************blob**************************************************************/
   var MyBlobBuilder = function () {
@@ -129,8 +131,8 @@
   }
 
   function sendCurrentPageName() {
-    if (wsSelected !== undefined) {
+    if (selectedWs !== undefined) {
-      wsSendMsg(wsSelected, currentPageName);
+      wsSendMsg(selectedWs, currentPageName);
     }
   }
 
@@ -138,6 +140,7 @@
   function connectToAllDevices() {
     //closeAllConnection();
     //socket = [];
+    getSelectedDeviceData(selectedWs);
     let ws = 0;
     deviceList.forEach((device) => {
       //if (debug) console.log("[i]", device.name, ws, device.ip, device.id);
@@ -149,7 +152,7 @@
       ws++;
     });
     deviceList = deviceList;
-    socketConnected = selectedDeviceData.status;
+    //socketConnected = selectedDeviceData.status;
   }
 
   function closeAllConnection() {
@@ -173,6 +176,7 @@
       }
     });
     deviceList = deviceList;
+    getSelectedDeviceData(selectedWs);
     socketConnected = selectedDeviceData.status;
   }
 
@@ -223,14 +227,14 @@
           let data = event.data;
           //if (debug) console.log("[i]", getIP(ws), "msg received", data); //
           //сборщик statusJson сообщений======================================
-          //if (data.includes("status")) {
+          if (data.includes("status")) {
-          //  if (IsJsonParse(data)) {
+            if (IsJsonParse(data)) {
-          //    let statusJson = JSON.parse(data);
+              let statusJson = JSON.parse(data);
-          //    udatelayoutJson(statusJson);
+              udatelayoutJson(statusJson);
-          //    wigetsUpdate();
+              wigetsUpdate();
-          //    if (debug) console.log("[i]", "status json parced: ", statusJson);
+              if (debug) console.log("[i]", "status json parced: ", statusJson);
-          //  }
+            }
-          //}
+          }
           //сборщик ssidJson сообщений======================================
           if (data.includes("ssid")) {
             if (IsJsonParse(data)) {
@@ -244,12 +248,15 @@
           //сборщик deviceList сообщений======================================
           if (data.includes("devicelist")) {
             if (IsJsonParse(data)) {
-              deviceList = JSON.parse(data);
+              incDeviceList = JSON.parse(data);
-              delete deviceList.devicelist;
+              delete incDeviceList.devicelist;
+              incDeviceList = incDeviceList;
+              incDeviceListParced = true;
+              deviceList = combineArrays(deviceList, incDeviceList);
               deviceList = deviceList;
-              deviceListParced = true;
+              whenDeviceListWasUpdated();
-              //connectToAllDevices();
+              connectToAllDevices();
-              if (debug) console.log("[i]", "devicelist json parced", deviceList);
+              if (debug) console.log("[i]", "incDeviceList json parced", incDeviceList);
             }
           }
           //сборщик configJson пакетов========================================
@@ -355,6 +362,7 @@
                 settingsJson = settingsJson;
                 wigetsUpdate();
                 settingsJsonParced = true;
+                updateThisDeviceInList();
                 if (debug) console.log("[ii]", "settingsJson parced!");
               }
             };
@@ -382,14 +390,14 @@
   }
 
   function saveConfig() {
-    wsSendMsg(wsSelected, "/tuoyal" + JSON.stringify(generateLayout()));
+    wsSendMsg(selectedWs, "/tuoyal" + JSON.stringify(generateLayout()));
-    wsSendMsg(wsSelected, "/gifnoc" + JSON.stringify(configJson));
+    wsSendMsg(selectedWs, "/gifnoc" + JSON.stringify(configJson));
     clearData();
     sendCurrentPageName();
   }
 
   function saveSettings() {
-    wsSendMsg(wsSelected, "/cennoc" + JSON.stringify(settingsJson));
+    wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson));
     clearData();
     sendCurrentPageName();
   }
@@ -406,7 +414,7 @@
           widget.page = config.page;
           widget.descr = config.descr;
           //widget.id = config.id;
-          //widget.ws = wsSelected;
+          //widget.ws = selectedWs;
           widget.topic = settingsJson.root + "/" + config.id;
           layout.push(widget);
           error = false;
@@ -542,36 +550,20 @@
   };
 
   //***********************************************************dev list******************************************************************/
-  function createDefaultDevice() {
+
-    let find = false;
+  function combineArrays(A, B) {
-    let device;
+    var ids = new Set(A.map((d) => d.ip));
-    if (debug) console.log("[i]", "original dev ip (js): ", myip);
+    let output = [...A, ...B.filter((d) => !ids.has(d.ip))];
-    if (debug) console.log("[i]", "original dev ip (esp): ", settingsJson.ip);
+    return output;
-    for (let i = 0; i < deviceList.length; i++) {
-      device = deviceList[i];
-      if (debug) console.log("[i]", "start checking dev no: ", i, device.ip);
-      if (device.ip === settingsJson.ip) {
-        if (debug) console.log("[i]", "found ", device.ip);
-        device.name = settingsJson.name;
-        device.id = settingsJson.id;
-        find = true;
-        break;
   }
-    }
+
-    if (!find) {
+  function whenDeviceListWasUpdated() {
-      if (debug) console.log("[i]", "not found, add to the end");
+    getSelectedDeviceData(selectedWs);
-      deviceList.push({
+    socketConnected = selectedDeviceData.status;
-        ip: settingsJson.ip,
-        name: settingsJson.name,
-        id: settingsJson.id,
-      });
-    }
-    deviceList = deviceList;
   }
 
   function devicesDropdownChange() {
-    socketConnected = selectedDeviceData.status;
+    whenDeviceListWasUpdated();
-    wsSelected = selectedDeviceData.ws;
     clearData();
     sendCurrentPageName();
     if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name);
@@ -580,6 +572,16 @@
     }
   }
 
+  function getSelectedDeviceData(ws) {
+    for (let i = 0; i < deviceList.length; i++) {
+      let device = deviceList[i];
+      if (device.ws === ws) {
+        selectedDeviceData = device;
+        break;
+      }
+    }
+  }
+
   function devListSave() {
     //createDefaultDevice();
     if (!showInput) {
@@ -588,16 +590,27 @@
         deviceList.push(newDevice);
         deviceList = deviceList;
         newDevice = {};
+        whenDeviceListWasUpdated();
         connectToAllDevices();
         if (debug) console.log("[i]", "selected device:", selectedDeviceData);
-        //socketConnected = selectedDeviceData.status;
-        //socketConnected = socketConnected;
       } else {
         if (debug) console.log("[e]", "wrong data");
       }
     }
   }
 
+  function updateThisDeviceInList() {
+    for (let i = 0; i < deviceList.length; i++) {
+      let device = deviceList[i];
+      if (device.ip === myip) {
+        device.name = settingsJson.name;
+        device.id = settingsJson.id;
+        settingsJson = settingsJson;
+        break;
+      }
+    }
+  }
+
   //****************************************************************json******************************************************************/
   function getJsonObject(array, number) {
     let num = 0;
@@ -724,7 +737,7 @@
   //************************************************elements and presets dropdown************************************************************/
 
   function ssidDropdownClick() {
-    wsSendMsg(wsSelected, "/scan");
+    wsSendMsg(selectedWs, "/scan");
   }
 
   //*******************************************************initialisation********************************************************************/
@@ -732,8 +745,7 @@
     console.log("[i]", "mounted");
     connectToAllDevices();
     wsTestMsgTask();
-    socketConnected = selectedDeviceData.status;
+    whenDeviceListWasUpdated();
-    devicesDropdownChange();
     findNewPage();
   });
 </script>
@@ -744,9 +756,9 @@
   <header class="h-10 w-full bg-gray-100 overflow-auto shadow-md">
     <div class="flex content-center items-center justify-end">
       <div class="px-15 py-1 z-50 ">
-        <select class="border border-indigo-500 border-4" bind:value={selectedDeviceData} on:change={() => devicesDropdownChange()}>
+        <select class="border border-indigo-500 border-4" bind:value={selectedWs} on:change={() => devicesDropdownChange()}>
           {#each deviceList as device}
-            <option value={device}>
+            <option value={device.ws}>
               {device.name}
             </option>
           {/each}

src/components/Alarm.svelte

@@ -15,11 +15,11 @@
   @tailwind utilities;
 
   @layer components {
+    .alm {
+      @apply mb-2 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
+    }
     .alm-hdr {
       @apply text-center text-base text-red-500 pb-0;
     }
-    .alm {
-      @apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
-    }
   }
 </style>

src/components/Card.svelte

@@ -16,7 +16,7 @@
 
   @layer components {
     .crd {
-      @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white  shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
+      @apply w-full mb-2 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
     }
     .crd-hdr {
       @apply text-center text-lg text-gray-500 font-bold pb-4;

src/pages/List.svelte

@@ -1,5 +1,6 @@
 <script>
   import Card from "../components/Card.svelte";
+  import Alarm from "../components/Alarm.svelte";
 
   import CrossIcon from "../svg/Cross.svelte";
   import OpenIcon from "../svg/Open.svelte";
@@ -58,4 +59,7 @@
     </table>
     <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
   </Card>
+  <Alarm>
+    <p>Список устройств будет обновляться автоматически. Подключенные к одному роутеру устройства будут появляться в списке в течении двух минут. Ручное добавление сделано в целях проверки для разработчика.</p>
+  </Alarm>
 </div>

src/pages/Utilities.svelte

@@ -1,5 +1,6 @@
 <script>
   import Card from "../components/Card.svelte";
+  import Alarm from "../components/Alarm.svelte";
   import Chart from "svelte-frappe-charts";
 
   let datachart = {
@@ -10,8 +11,43 @@
       },
     ],
   };
+
+  //объединение двух массивов с удалением дубликатов полностью
+  let a = [
+    { item: "1", description: "lorem" },
+    { item: "2", description: "impsum" },
+  ];
+  let b = [
+    { item: "2", description: "dolor" },
+    { item: "4", description: "enum" },
+  ];
+  function joinWithoutDupes(A, B) {
+    let output = [];
+    const a = new Set(A.map((x) => x.item));
+    const b = new Set(B.map((x) => x.item));
+    output = [...A.filter((x) => !b.has(x.item)), ...B.filter((x) => !a.has(x.item))];
+    console.log(output);
+  }
+  //объединение двух массивов с удалением дубликатов, оставляя один из дубликатов
+  let c = [
+    { ID: "1", description: "lorem" },
+    { ID: "2", description: "impsum" },
+  ];
+  let d = [
+    { ID: "2", description: "dolor" },
+    { ID: "4", description: "enum" },
+  ];
+  function joinWithoutDupesAndRmooving(A, B) {
+    var ids = new Set(A.map((d) => d.ID));
+    let output = [...A, ...B.filter((d) => !ids.has(d.ID))];
+    console.log(output);
+  }
 </script>
 
-<Card title={"Пример графика"}>
+<Alarm>
+  <button class="btn-lg" on:click={() => joinWithoutDupesAndRmooving(c, d)}>{"Проверить"}</button>
+</Alarm>
+
+<Alarm>
   <Chart data={datachart} type="line" />
-</Card>
+</Alarm>