список устройств

src/App.svelte

@@ -6,6 +6,8 @@
    +43 67761588253
   */
 
+  //6+49 кб 09/06/2023
+
   //******************************************************import section*********************************************************/
   //*****************************************************************************************************************************/
   import { onMount } from "svelte";
@@ -41,7 +43,7 @@
   let opened = false;
   let preventMove = false;
   const blobDebug = false;
-  const devMode = true;
+  const devMode = false;
 
   let timeout = reconnectTimeout / 1000;
   let percent;
@@ -58,7 +60,6 @@
   let showDropdown = true;
 
   let rebootingUpdatingInProgress = false;
-  let myTimeout = undefined;
 
   //dashboard
   let pages = [];
@@ -73,8 +74,6 @@
     dev: false,
   };
 
-  let systemReady = false;
-
   //update esp
   let versionsList = {};
   let choosingVersion = undefined;
@@ -116,8 +115,6 @@
     paramsJson: false,
   };
 
-  let chartJsonFlag = {};
-  let layoutJsonFlag = {};
   //===============================================
 
   //web sockets
@@ -125,46 +122,42 @@
   let socketConnected = false;
   let selectedDeviceData = undefined;
   let selectedWs = 0;
+  let originalWs = 0;
 
-  let firstTime = true;
   let newDevice = {};
   let coreMessages = [];
 
-  let timeOut;
-
-  let parcedEvent = 0;
-
   //***********************************************************navigation********************************************************/
   let currentPageName = undefined;
 
-  //var chartJsonBlobArray = [];
-  //let chartTopic = "";
-  //var chartJsonBlob = new MyBlobBuilder();
-  //var layoutJsonBlobArray = [];
-
   router.subscribe(handleNavigation);
 
   function handleNavigation() {
     currentPageName = $router.path.toString();
+    currentPageName = currentPageName + "|";
+
+    console.log("[i]", "user on page:", currentPageName);
 
     //не нужно очищать переменные когда переходим на страницу разработчика
-    if (currentPageName != "/dev") {
+    if (currentPageName != "/dev|") {
       clearData();
     }
 
-    currentPageName = currentPageName + "|";
+    //если мы на странице dashboard то рассылаем всем устройствам запрос данных
-    console.log("[i]", "user on page:", currentPageName);
-
-    if (currentPageName === "/list|") {
-      showDropdown = false;
-    } else {
-      showDropdown = true;
-    }
-
     if (currentPageName === "/|") {
       sendToAllDevices(currentPageName);
+      showDropdown = false;
+      //в остальных случаях шлем только выбранному устройству запрос данных
     } else {
-      sendCurrentPageName();
+      //если мы перешли на страницу списка устройств то всегда запрашиваем список только этого устройства
+      if (currentPageName === "/list|") {
+        showDropdown = false;
+        selectedWs = 0;
+        wsSendMsg(selectedWs, currentPageName);
+      } else {
+        sendCurrentPageName();
+        showDropdown = true;
+      }
     }
   }
 
@@ -177,7 +170,7 @@
   //*******************************************************initialisation********************************************************************/
   onMount(async () => {
     console.log("[i]", "mounted");
-    whenDeviceListWasUpdated();
+    selectedDeviceDataRefresh();
     //флаг первого запроса списка устройств
     firstDevListRequest = true;
     //вначале подключимся к известному нам ip этого устройства
@@ -251,7 +244,7 @@
         }
       }
     });
-    whenDeviceListWasUpdated();
+    selectedDeviceDataRefresh();
     deviceList = deviceList;
   }
 
@@ -259,16 +252,6 @@
     layoutJson = layoutJson.filter((item) => item.ws !== ws);
   }
 
-  function getDeviceStatus(ws) {
-    let ret = false;
-    deviceList.forEach((device) => {
-      if (ws === device.ws) {
-        ret = device.status;
-      }
-    });
-    return ret;
-  }
-
   function wsConnect(ws) {
     let ip = getIP(ws);
     if (ip === "error") {
@@ -431,7 +414,7 @@
         incDeviceList = out.json;
         parsed.incDeviceList = true;
         if (blobDebug) console.log("[✔]", "incDeviceList: ", incDeviceList);
-        handleDeviseList();
+        initDevList();
       } else {
         parsed.incDeviceList = false;
         if (blobDebug) console.log("[e]", "incDeviceList parse error");
@@ -568,8 +551,6 @@
 
   async function onParced() {
     if (currentPageName === "/|") {
-      //clearParcedFlags();
-      //if (debug) console.log("✔", "dashboard data received");
       pageReady.dash = true;
     }
 
@@ -604,25 +585,50 @@
     }
   }
 
-  function handleDeviseList() {
+  function initDevList() {
+    //при первом запросе листа устройств запишем его целеком
     if (firstDevListRequest) {
-      deviceList = incDeviceList;
+      devListOverride();
-      deviceList[0].status = true;
     } else {
       //при последующих прилетах списка устройств мы переписываем в массиве только то что изменилось
-      deviceList = combineArrays(deviceList, incDeviceList);
+      devListCombine();
     }
-
     firstDevListRequest = false;
     deviceList = deviceList;
     parsed.deviceListJson = true;
     if (blobDebug) console.log("[✔]", "deviceList parced");
     onParced();
-    whenDeviceListWasUpdated();
+    selectedDeviceDataRefresh();
-    console.log("[✔]", deviceList);
     //затем подключимся к всему полученному списку устройств
     connectToAllDevices();
   }
+  //перезапись листа устройств
+  function devListOverride() {
+    deviceList = incDeviceList;
+    sortList(deviceList);
+    //if (deviceList.length >= 1) deviceList[0].status = true;
+    console.log("[i]", "[devlist]", "devlist overrided");
+  }
+  //добавление только новых элементов в лист устройств (если такого ip не было)
+  function devListCombine() {
+    deviceList = combineArrays(deviceList, incDeviceList);
+    sortList(deviceList);
+    console.log("[i]", "[devlist]", "devlist combined");
+  }
+
+  function sortList(list) {
+    let firstDev = list.shift();
+    list.sort(function (a, b) {
+      if (a.name < b.name) {
+        return -1;
+      }
+      if (a.name > b.name) {
+        return 1;
+      }
+      return 0;
+    });
+    list.unshift(firstDev);
+  }
 
   //***********************************************************dashboard***************************************************************/
 
@@ -835,8 +841,6 @@
           let widget = Object.assign({}, widgetsJson[w]);
           widget.page = config.page;
           widget.descr = config.descr;
-          //widget.id = config.id;
-          //widget.ws = selectedWs;
 
           widget.topic = settingsJson.root + "/" + config.id;
           if (setWidget !== "nil") layout.push(widget);
@@ -876,8 +880,6 @@
     return layout;
   }
 
-  function layoutOrderForMobileApp() {}
-
   function clearData() {
     itemsJson = [];
     widgetsJson = [];
@@ -889,15 +891,7 @@
     layoutJson = [];
     paramsJson = {}; //?
 
-    //deviceList = [
+    //incDeviceList = [];
-    //  {
-    //    name: "--",
-    //    id: "--",
-    //    ip: myip,
-    //    ws: 0,
-    //    status: false,
-    //  },
-    //];
 
     for (const [key, value] of Object.entries(pageReady)) {
       pageReady[key] = false;
@@ -1013,19 +1007,26 @@
     return output;
   }
 
-  function whenDeviceListWasUpdated() {
+  //всякий раз когда список устройств был обновлен
+  function selectedDeviceDataRefresh() {
+    //запишем в переменную selectedDeviceData выбранное устройство, что бы в коде было известно выбранное устройство
     getSelectedDeviceData(selectedWs);
     socketConnected = selectedDeviceData.status;
   }
 
   function devicesDropdownChange() {
-    whenDeviceListWasUpdated();
+    if (currentPageName === "/list|") {
-    clearData();
+      console.log("[i]", "user change dropdown on list page!!!");
-    handleNavigation();
+    } else {
-    //sendCurrentPageName();
+      selectedDeviceDataRefresh();
-    if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name);
+      clearData();
-    if (selectedDeviceData.ip === myip) {
+      //запускаем навигацию что дать контроллеру запрос данных
-      if (debug) console.log("[i]", "user selected original device", selectedDeviceData.name);
+      handleNavigation();
+      if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name);
+      if (selectedDeviceData.ip === myip) {
+        originalWs = selectedWs;
+        if (debug) console.log("[i]", "user selected original device", selectedDeviceData.name);
+      }
     }
   }
 
@@ -1041,18 +1042,20 @@
   }
 
   function addDevInList() {
-    //createDefaultDevice();
     if (!showInput) {
       if (newDevice.name !== undefined && newDevice.ip !== undefined && newDevice.id !== undefined) {
         newDevice.status = false;
-        deviceList.push(newDevice);
+        newDevice.ws = deviceList.length;
-        deviceList = deviceList;
+        incDeviceList.push(newDevice);
-        newDevice = {};
+        devListCombine();
-        whenDeviceListWasUpdated();
+        //onParced();
+        //selectedDeviceDataRefresh();
         connectToAllDevices();
         if (debug) console.log("[i]", "selected device:", selectedDeviceData);
+        return true;
       } else {
         if (debug) console.log("[e]", "wrong data");
+        return false;
       }
     }
   }
@@ -1217,11 +1220,11 @@
 
   function rebootingTask() {
     //перезапуск приложения
-    location.reload();
+    //location.reload();
-    //clearTimeout(myTimeout);
+    clearTimeout(myTimeout);
-    //clearData();
+    clearData();
-    //connectToAllDevices();
+    connectToAllDevices();
-    //rebootingUpdatingInProgress = false;
+    rebootingUpdatingInProgress = false;
   }
 
   function cancelAlarm(alarmKey) {
@@ -1308,11 +1311,6 @@
     console.log(json);
     wsSendMsg(selectedWs, "/order|" + JSON.stringify(json));
   }
-
-  function test() {
-    //wsSendMsg(selectedWs, "/test|");
-    //console.log("[i]", "test");
-  }
 </script>
 
 <div class="flex flex-col h-screen bg-gray-50">
@@ -1389,7 +1387,7 @@
             <ConnectionPage show={pageReady.connection} rebootEsp={() => rebootEsp()} ssidClick={() => ssidClick()} saveSett={() => saveSett()} saveMqtt={() => saveMqtt()} settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} />
           </Route>
           <Route path="/list">
-            <ListPage show={pageReady.list} deviceList={deviceList} settingsJson={settingsJson} saveSett={() => saveSett()} rebootEsp={() => rebootEsp()} showInput={showInput} addDevInList={() => addDevInList()} newDevice={newDevice} sendToAllDevices={(msg) => sendToAllDevices(msg)} saveList={() => saveList()} percent={percent} />
+            <ListPage show={pageReady.list} deviceList={deviceList} settingsJson={settingsJson} saveSett={() => saveSett()} rebootEsp={() => rebootEsp()} showInput={showInput} addDevInList={() => addDevInList()} newDevice={newDevice} sendToAllDevices={(msg) => sendToAllDevices(msg)} saveList={() => saveList()} percent={percent} devListOverride={() => devListOverride()} />
           </Route>
           <Route path="/system">
             <SystemPage show={pageReady.system} errorsJson={errorsJson} settingsJson={settingsJson} saveSett={() => saveSett()} rebootEsp={() => rebootEsp()} cleanLogs={() => cleanLogs()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} versionsList={versionsList} bind:choosingVersion={choosingVersion} startUpdate={() => startUpdate()} coreMessages={coreMessages} />

src/pages/Config.svelte

@@ -290,7 +290,7 @@
         <button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
         <button class="btn-lg" on:click={() => createExportFile()}>{"Экспорт конфигурации"}</button>
         <label on:click={() => reset()} class="btn-lg cursor-pointer select-none">
-          <input bind:files accept="application/JSON" type="file" id="formFile" />
+          <input bind:files={files} accept="application/JSON" type="file" id="formFile" />
           {"Импорт конфигурации"}
         </label>
       </div>

src/pages/List.svelte

@@ -16,8 +16,6 @@
   export let addDevInList = () => {};
   export let saveList = () => {};
   export let saveSett = () => {};
-  export let rebootEsp = () => {};
-
   export let sendToAllDevices = (msg) => {};
 
   let debug = true;
@@ -32,6 +30,49 @@
       }
     }
   }
+
+  function onModeChange() {
+    show = false;
+    saveSett();
+    location.reload();
+  }
+
+  function onSaveList() {
+    //если ручной режим
+    if (!settingsJson.udps) {
+      //если открыли поля для заполнения
+      if (showInput) {
+        //если поля были заполнены
+        if (addDevInList()) {
+          show = false;
+          saveList();
+          showInput = false;
+          //window.alert("Устройство было добавленно");
+          setTimeout(() => {
+            location.reload();
+          }, 1000);
+        } else {
+          showInput = false;
+        }
+        //если не открыли поля для заполнения
+      } else {
+        show = false;
+        saveList();
+        //window.alert("Список устройств сохранен на ESP");
+        setTimeout(() => {
+          location.reload();
+        }, 1000);
+      }
+      //если авторежим
+    } else {
+      saveList();
+      window.alert("Список устройств сохранен в память ESP. Перейдите в ручной режим для использования сохраненного списка");
+      show = false;
+      setTimeout(() => {
+        location.reload();
+      }, 1000);
+    }
+  }
 </script>
 
 {#if show}
@@ -41,6 +82,7 @@
         <table class="tbl mb-0">
           <thead class="bg-gray-100">
             <tr class="txt-sz txt-pad">
+              <th class="tbl-hd w-7">№</th>
               <th class="tbl-hd">Название устройства</th>
               <th class="tbl-hd">IP адрес</th>
               <th class="tbl-hd">Идентификатор</th>
@@ -52,11 +94,13 @@
           <tbody class="bg-white">
             {#each deviceList as device, i}
               <tr class="txt-sz txt-pad">
+                <td class="tbl-bdy-lg ipt-lg w-full">{device.ws + 1}</td>
                 <td class="tbl-bdy-lg ipt-lg w-full">{device.name}</td>
                 <td class="tbl-bdy-lg ipt-lg w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
                 <td class="tbl-bdy-lg ipt-lg w-full">{device.id}</td>
                 <td class="tbl-bdy-lg ipt-lg w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
                 <td class="tbl-bdy-lg ipt-lg w-full">{device.ping ? device.ping : "-"}</td>
+
                 {#if i > 0}
                   <td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
                 {/if}
@@ -64,9 +108,10 @@
             {/each}
             {#if showInput}
               <tr class="txt-sz txt-pad">
-                <td class="tbl-bdy-lg"><input bind:value={newDevice.name} class="ipt-lg w-full" type="text" /></td>
+                <td class="tbl-bdy-lg" />
-                <td class="tbl-bdy-lg"><input bind:value={newDevice.ip} class="ipt-lg w-full" type="text" /></td>
+                <td class="tbl-bdy-lg"><input bind:value={newDevice.name} class="ipt-lg w-full m-0" type="text" /></td>
-                <td class="tbl-bdy-lg"><input bind:value={newDevice.id} class="ipt-lg w-full" type="text" /></td>
+                <td class="tbl-bdy-lg"><input bind:value={newDevice.ip} class="ipt-lg w-full m-0" type="text" /></td>
+                <td class="tbl-bdy-lg"><input bind:value={newDevice.id} class="ipt-lg w-full m-0" type="text" /></td>
                 <td class="tbl-bdy-lg" />
               </tr>
             {/if}
@@ -74,15 +119,15 @@
         </table>
         <div class="mb-4">
           <div class="w-full bg-gray-200 rounded-full h-0.5 dark:bg-gray-700">
-            <div class="bg-green-200 h-0.5 rounded-full" style="width: {percent}%" />
+            <div class="bg-green-300 h-0.5 rounded-full" style="width: {percent}%" />
           </div>
         </div>
         <div class={settingsJson.udps ? "grd-2col1" : "grd-3col1"}>
-          {#if !settingsJson.udps}
+          {#if !settingsJson.udps && !showInput}
-            <button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Добавить" : "Добавить устройство"}</button>
+            <button class="btn-lg" on:click={() => (showInput = !showInput)}>{"Добавить устройство"}</button>
           {/if}
-          <button class="btn-lg" on:click={() => saveList()}>{"Сохранить список"}</button>
+          <button class="btn-lg" on:click={() => onSaveList()}>{"Сохранить"}</button>
-          <button class="btn-lg" on:click={(msg) => sendToAllDevices("/reboot|")}>{"Перезагрузить все устройства"}</button>
+          <button class="btn-lg" on:click={(msg) => (sendToAllDevices("/reboot|"), window.alert("Все устройства будут перезагружены"))}>{"Перезагрузить все устройства"}</button>
         </div>
 
         <!--Dev list mode-->
@@ -94,7 +139,7 @@
             <div class="flex justify-end w-1/4">
               <label for="udps" class="items-center cursor-pointer">
                 <div class="relative">
-                  <input bind:checked={settingsJson.udps} on:change={() => (window.alert("Для данного действия необходима перезагрузка"), saveSett(), rebootEsp())} id="udps" type="checkbox" class="sr-only" />
+                  <input bind:checked={settingsJson.udps} on:change={() => onModeChange()} id="udps" type="checkbox" class="sr-only" />
                   <div class="block {settingsJson.udps ? 'bg-blue-600' : 'bg-gray-600'} w-10 h-6 rounded-full shadow-lg" />
                   <div class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
                 </div>