final

2026-03-26 15:02:21 +03:00 · 2023-06-09 01:00:14 +02:00
parent 10cb821fd6
commit 9fd686a9cf
3 changed files with 76 additions and 50 deletions
--- a/src/App.svelte
+++ b/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() {
-    setTimeout(wsTestMsgTask, reconnectTimeout);
-    if (!rebootingUpdatingInProgress) {
-      if (debug) console.log("[i]", "----timer tick----");
+  function scale(number, inMin, inMax, outMin, outMax) {
+    return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  }

-      if (!firstTime) {
-        deviceList.forEach((device) => {
-          if (!getDeviceStatus(device.ws)) {
-            wsConnect(device.ws);
-            wsEventAdd(device.ws);
-          } else {
-            wsSendMsg(device.ws, "/tst|");
-            ack(device.ws, false);
-          }
-        });
-      }
-      firstTime = false;
+  function wsTestMsgTask() {
+    setTimeout(wsTestMsgTask, 1000);
+    timeout--;
+    percent = scale(timeout, reconnectTimeout / 1000, 0, 0, 100);
+    
+    if (timeout <= 0) {
+      timeout = reconnectTimeout / 1000;
+      //if (!rebootingUpdatingInProgress) {
+      if (debug) console.log("[i]", "----timer tick----");
+      //if (!firstTime) {
+
+      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();
-    connectToAllDevices();
-    rebootingUpdatingInProgress = false;
+    //перезапуск приложения
+    location.reload();
+    //clearTimeout(myTimeout);
+    //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} />
--- a/src/pages/List.svelte
+++ b/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}
--- a/src/pages/System.svelte
+++ b/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}