final

src/App.svelte

@@ -34,7 +34,7 @@
   //******************************************************************************************************************************/
   const debug = true;
   const LOG_MAX_MESSAGES = 100;
-  const reconnectTimeout = 120000; //период проверки соединения с устройством
+  const reconnectTimeout = 60000; //период проверки соединения с устройством
   const waitingAckTimeout = 12000; //время ожидания ответа от устройства
   const rebootingTimeout = 20000;
   const updatingTimeout = 130000;
@@ -43,6 +43,9 @@
   const blobDebug = false;
   const devMode = true;
 
+  let timeout = reconnectTimeout / 1000;
+  let percent;
+
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
   let myip = document.location.hostname;
@@ -149,15 +152,15 @@
       clearData();
     }
 
-    if (currentPageName === "/list" || "/") {
+    currentPageName = currentPageName + "|";
+    console.log("[i]", "user on page:", currentPageName);
+
+    if (currentPageName === "/list|") {
       showDropdown = false;
     } else {
       showDropdown = true;
     }
 
-    currentPageName = currentPageName + "|";
-    console.log("[i]", "user on page:", currentPageName);
-
     if (currentPageName === "/|") {
       sendToAllDevices(currentPageName);
     } else {
@@ -181,7 +184,6 @@
     connectToAllDevices();
     wsTestMsgTask();
     //sortingLayout();
-    ticker();
   });
 
   //****************************************************web sockets section******************************************************/
@@ -582,7 +584,7 @@
       pageReady.connection = true;
     }
 
-    if (currentPageName === "/list|" && parsed.deviceListJson) {
+    if (currentPageName === "/list|" && parsed.deviceListJson && parsed.settingsJson) {
       clearParcedFlags();
       if (debug) console.log("✔✔", "list page parced");
       pageReady.list = true;
@@ -610,7 +612,7 @@
       //при последующих прилетах списка устройств мы переписываем в массиве только то что изменилось
       deviceList = combineArrays(deviceList, incDeviceList);
     }
-    //deviceList = incDeviceList;
+
     firstDevListRequest = false;
     deviceList = deviceList;
     parsed.deviceListJson = true;
@@ -929,25 +931,37 @@
     wsSendMsg(ws, "/control|" + key + "/" + status);
   }
 
-  function wsTestMsgTask() {
+  function scale(number, inMin, inMax, outMin, outMax) {
-    setTimeout(wsTestMsgTask, reconnectTimeout);
+    return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    if (!rebootingUpdatingInProgress) {
+  }
-      if (debug) console.log("[i]", "----timer tick----");
 
-      if (!firstTime) {
+  function wsTestMsgTask() {
-        deviceList.forEach((device) => {
+    setTimeout(wsTestMsgTask, 1000);
-          if (!getDeviceStatus(device.ws)) {
+    timeout--;
-            wsConnect(device.ws);
+    percent = scale(timeout, reconnectTimeout / 1000, 0, 0, 100);
-            wsEventAdd(device.ws);
+    
-          } else {
+    if (timeout <= 0) {
-            wsSendMsg(device.ws, "/tst|");
+      timeout = reconnectTimeout / 1000;
-            ack(device.ws, false);
+      //if (!rebootingUpdatingInProgress) {
-          }
+      if (debug) console.log("[i]", "----timer tick----");
-        });
+      //if (!firstTime) {
-      }
+
-      firstTime = false;
+      deviceList.forEach((device) => {
+        if (!device.status) {
+          wsConnect(device.ws);
+          wsEventAdd(device.ws);
+        } else {
+          wsSendMsg(device.ws, "/tst|");
+          ack(device.ws, false);
+        }
+      });
+      //}
+      //firstTime = false;
+      //} else {
+      //  if (debug) console.log("[i]", "----timer skipped----");
+      //}
     } else {
-      if (debug) console.log("[i]", "----timer skipped----");
+      //console.log("[i]", timeout);
     }
   }
 
@@ -1202,10 +1216,12 @@
   }
 
   function rebootingTask() {
-    clearTimeout(myTimeout);
+    //перезапуск приложения
-    clearData();
+    location.reload();
-    connectToAllDevices();
+    //clearTimeout(myTimeout);
-    rebootingUpdatingInProgress = false;
+    //clearData();
+    //connectToAllDevices();
+    //rebootingUpdatingInProgress = false;
   }
 
   function cancelAlarm(alarmKey) {
@@ -1361,7 +1377,7 @@
     <ul class="menu__main">
       <div class="bg-cover pt-0 px-4">
         {#if !socketConnected && currentPageName != "/|"}
-          <Alarm title="Подключение..." />
+          <Alarm title="Подключение через {timeout} сек." />
         {:else}
           <Route path="/">
             <DashboardPage show={pageReady.dash} layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
@@ -1373,7 +1389,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} showInput={showInput} addDevInList={() => addDevInList()} newDevice={newDevice} sendToAllDevices={(msg) => sendToAllDevices(msg)} saveList={() => saveList()} />
+            <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} />
           </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/List.svelte

@@ -11,9 +11,12 @@
   export let showInput;
   export let newDevice = {};
   export let settingsJson;
+  export let percent;
 
   export let addDevInList = () => {};
   export let saveList = () => {};
+  export let saveSett = () => {};
+  export let rebootEsp = () => {};
 
   export let sendToAllDevices = (msg) => {};
 
@@ -35,7 +38,7 @@
   <div class="my-4">
     <div class="grd-1col1">
       <Card title={settingsJson.udps ? "Список устройств (авто режим)" : "Список устройств (ручной режим)"}>
-        <table class="tbl">
+        <table class="tbl mb-0">
           <thead class="bg-gray-100">
             <tr class="txt-sz txt-pad">
               <th class="tbl-hd">Название устройства</th>
@@ -69,17 +72,40 @@
             {/if}
           </tbody>
         </table>
-        <div class="grd-3col1">
+        <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>
+        </div>
+        <div class={settingsJson.udps ? "grd-2col1" : "grd-3col1"}>
           {#if !settingsJson.udps}
             <button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Добавить" : "Добавить устройство"}</button>
           {/if}
           <button class="btn-lg" on:click={() => saveList()}>{"Сохранить список"}</button>
           <button class="btn-lg" on:click={(msg) => sendToAllDevices("/reboot|")}>{"Перезагрузить все устройства"}</button>
         </div>
+
+        <!--Dev list mode-->
+        <div class="mt-4">
+          <div class="flex mb-2 h-6 items-center">
+            <div class="w-3/4">
+              <p class="pr-4 text-gray-500 font-bold text-sm truncate">Автоматический поиск устройств по UDP</p>
+            </div>
+            <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" />
+                  <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>
+              </label>
+            </div>
+          </div>
+        </div>
       </Card>
     </div>
     <Alarm>
-      <p>Авто режим - список создается автоматически, можно нажать кнопку "сохранить список" что бы использовать его потом в ручном режиме. Ручной режим - используется сохраненный список, возможно ручное добавление удаление устройств. Для переключения режима перейдите на страницу "системные"</p>
+      <p>Авто режим - список создается автоматически, можно нажать кнопку "сохранить список" что бы использовать его потом в ручном режиме. Ручной режим - используется сохраненный список, возможно ручное добавление удаление устройств.</p>
     </Alarm>
   </div>
 {:else}

src/pages/System.svelte

@@ -400,22 +400,6 @@
           </div>
         {/if}
 
-        <!--Dev list mode-->
-        <div class="flex mb-2 h-6 items-center">
-          <div class="w-2/3">
-            <p class="pr-4 text-gray-500 font-bold text-sm truncate">Автоматический поиск устройств по UDP</p>
-          </div>
-          <div class="flex justify-center w-1/3">
-            <label for="udps" class="items-center cursor-pointer">
-              <div class="relative">
-                <input bind:checked={settingsJson.udps} on:change={() => (reboot = true)} 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>
-            </label>
-          </div>
-        </div>
-
         <!--control-->
         <!--<div class="grd-2col1">-->
         {#if paramsBeenChanged}