добавлена кнопка перезагрузки

2026-03-26 23:12:34 +03:00 · 2022-02-08 16:47:26 +01:00
parent 274832dc2e
commit b0d66cb776
4 changed files with 90 additions and 27 deletions
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,7 +6,7 @@
  router.mode.hash();

  import Alarm from "./components/Alarm.svelte";
-  //import Progress from "./components/Progress.svelte";
+  import Progress from "./components/Progress.svelte";

  import Modal from "./components/Modal.svelte";
  import DashboardPage from "./pages/Dashboard.svelte";
@@ -24,13 +24,14 @@
  let debug = true;
  let LOG_MAX_MESSAGES = 10;
  let reconnectTimeout = 30000;
+  let rebootingTimeout = 20000;
  let opened = false;
  let preventMove = false;

  //****************************************************variable section**********************************************************/
  //******************************************************************************************************************************/
-  //let myip = document.location.hostname;
-  let myip = "192.168.88.235";
+  let myip = document.location.hostname;
+  //let myip = "192.168.88.235";

  //Flags
  let showInput = false;
@@ -62,6 +63,9 @@
  let settingsJsonFlag = false;
  let settingsJsonParced = false;

+  let errorsJson = {};
+  let errorsJsonParced = false;
+
  let ssidJson = {};
  let ssidJsonParced = false;

@@ -130,9 +134,11 @@
    sendCurrentPageName();
  }

+  //отправляем запрос данных для данной страницы и запрос данных для всех страниц - /all
  function sendCurrentPageName() {
    if (selectedWs !== undefined) {
      wsSendMsg(selectedWs, currentPageName);
+      wsSendMsg(selectedWs, "/all");
    }
  }

@@ -232,7 +238,7 @@
              let statusJson = JSON.parse(data);
              udatelayoutJson(statusJson);
              wigetsUpdate();
-              if (debug) console.log("[i]", "statusJson parced: ", statusJson);
+              if (debug) console.log("✔", "statusJson parced");
            }
          }
          //сборщик paramsJson сообщений======================================
@@ -241,7 +247,7 @@
              let paramsJson = JSON.parse(data);
              //udatelayoutJson(statusJson);
              //wigetsUpdate();
-              if (debug) console.log("[i]", "paramsJson parced: ", paramsJson);
+              if (debug) console.log("✔", "paramsJson parced");
            }
          }
          //сборщик ssidJson сообщений======================================
@@ -251,7 +257,7 @@
              delete ssidJson.ssid;
              ssidJson = ssidJson;
              ssidJsonParced = true;
-              if (debug) console.log("[i]", "ssidJson parced");
+              if (debug) console.log("✔", "ssidJson parced");
            }
          }
          //сборщик deviceList сообщений======================================
@@ -265,7 +271,18 @@
              deviceList = deviceList;
              whenDeviceListWasUpdated();
              connectToAllDevices();
-              if (debug) console.log("[i]", "incDeviceList json parced", incDeviceList);
+              if (debug) console.log("✔", "incDeviceList json parced");
+            }
+          }
+          //сборщик errorsJson сообщений======================================
+          if (data.includes("errors")) {
+            if (IsJsonParse(data)) {
+              errorsJson = JSON.parse(data);
+              delete errorsJson.errors;
+              errorsJson = errorsJson;
+              errorsJsonParced = true;
+              handleErrors();
+              if (debug) console.log("✔", "errorsJson json parced");
            }
          }
          //сборщик configJson пакетов========================================
@@ -285,7 +302,7 @@
                configJson = JSON.parse(configJsonResult);
                configJson = configJson;
                configJsonParced = true;
-                if (debug) console.log("[ii]", "configJson parced!");
+                if (debug) console.log("✔", "configJson parced");
              }
            };
          }
@@ -306,7 +323,7 @@
                widgetsJson = JSON.parse(widgetsJsonResult);
                widgetsJson = widgetsJson;
                widgetsJsonParced = true;
-                if (debug) console.log("[ii]", "widgetsJson parced!");
+                if (debug) console.log("✔", "widgetsJson parced");
              }
            };
          }
@@ -327,7 +344,7 @@
                itemsJson = JSON.parse(itemsJsonResult);
                itemsJson = itemsJson;
                itemsJsonParced = true;
-                if (debug) console.log("[ii]", "itemsJson parced!");
+                if (debug) console.log("✔", "itemsJson parced");
              }
            };
          }
@@ -349,7 +366,7 @@
                layoutJson = layoutJson;
                wigetsUpdate();
                layoutJsonParced = true;
-                if (debug) console.log("[ii]", "layoutJson parced!");
+                if (debug) console.log("✔", "layoutJson parced");
              }
            };
          }
@@ -372,7 +389,7 @@
                wigetsUpdate();
                settingsJsonParced = true;
                updateThisDeviceInList();
-                if (debug) console.log("[ii]", "settingsJson parced!");
+                if (debug) console.log("✔", "settingsJson parced");
              }
            };
          }
@@ -406,6 +423,7 @@
  }

  function saveSettings() {
+    console.log("[i]", settingsJson);
    wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson));
    clearData();
    sendCurrentPageName();
@@ -464,6 +482,8 @@
    settingsJson = {};
    settingsJsonBlob.clear();

+    errorsJson = {};
+
    configJsonParced = false;
    widgetsJsonParced = false;
    itemsJsonParced = false;
@@ -749,6 +769,29 @@
    wsSendMsg(selectedWs, "/scan");
  }

+  let wsClientsError = false;
+
+  function handleErrors() {
+    if (errorsJson.wscle === 1) {
+      wsClientsError = true;
+    }
+  }
+
+  let rebootingInProgress = false;
+  const myTimeout = undefined;
+
+  function rebootEsp() {
+    if (debug) console.log("[i]", "reboot...");
+    wsSendMsg(selectedWs, "/reboot");
+    rebootingInProgress = true;
+    myTimeout = setTimeout(rebootingTask, rebootingTimeout);
+  }
+
+  function rebootingTask() {
+    clearTimeout(myTimeout);
+    connectToAllDevices();
+    rebootingInProgress = false;
+  }
  //*******************************************************initialisation********************************************************************/
  onMount(async () => {
    console.log("[i]", "mounted");
@@ -760,11 +803,15 @@
 </script>

 <div class="flex flex-col h-screen bg-gray-50">
-  <Modal show={showModalFlag} />
-
+  {#if wsClientsError}
+    <Modal header={"Ошибка"} text={"Слишком много клиентов было открыто. Допускается не более четырех. Для исчезновения ошибки перезагрузите устройство"} />
+  {/if}
+  {#if rebootingInProgress}
+    <Progress />
+  {/if}
  <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 ">
+      <div class="px-15 py-1">
        <select class="border border-indigo-500 border-4" bind:value={selectedWs} on:change={() => devicesDropdownChange()}>
          {#each deviceList as device}
            <option value={device.ws}>
@@ -823,7 +870,7 @@
            <ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} />
          </Route>
          <Route path="/connection">
-            <ConnectionPage settingsJson={settingsJson} ssidJson={ssidJson} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
+            <ConnectionPage settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} rebootEsp={() => rebootEsp()} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
          </Route>
          <Route path="/utilities">
            <UtilitiesPage />
@@ -858,7 +905,7 @@
      @apply grid grid-cols-1 justify-items-center;
    }
    .grd-2col1 {
-      @apply grid gap-4 grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center;
+      @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center;
    }
    .grd-2col2 {
      @apply grid gap-4 grid-cols-2 justify-items-center;
@@ -924,14 +971,14 @@
    }
    /*====================================================buttons=====================================================*/
    .btn-lg {
-      @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-xxs sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-4 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded;
+      @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded;
    }
    .btn-tbl {
      @apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300;
    }
    /*====================================================select=====================================================*/
    .slct-lg {
-      @apply flex w-full justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-xxs sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-4 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 mb-0 border border-gray-300 rounded;
+      @apply flex w-full justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 mb-0 border border-gray-300 rounded;
    }
  }

--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,7 +1,8 @@
 <script>
-  export let show;
+  export let show = true;
  export let header = "header";
  export let text = "text";
+  let onlyCloseButton = true;
 </script>

 <div class="modal">
@@ -24,8 +25,10 @@
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button>
-            <button on:click={() => (show = false)} type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> Cancel </button>
+            {#if !onlyCloseButton}
+              <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button>
+            {/if}
+            <button on:click={() => (show = false)} type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Закрыть</button>
          </div>
        </div>
      </div>
--- a/src/components/Progress.svelte
+++ b/src/components/Progress.svelte
@@ -1,5 +1,11 @@
-<div class="flex h-screen justify-center items-center">
-  <div class="m-auto">
-    <div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
+<script>
+</script>
+
+<div class="z-50">
+  <div class="fixed inset-0 bg-gray-200 bg-opacity-75 transition-opacity" aria-hidden="true" />
+  <div class="flex h-screen justify-center items-center">
+    <div class="m-auto">
+      <div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
+    </div>
  </div>
 </div>
--- a/src/pages/Connection.svelte
+++ b/src/pages/Connection.svelte
@@ -3,9 +3,11 @@
  import Alarm from "../components/Alarm.svelte";

  export let settingsJson;
+  export let errorsJson;
  export let ssidJson;
  export let ssidDropdownClick = () => {};
  export let saveSettings = () => {};
+  export let rebootEsp = () => {};
 </script>

 <div class="grd-2col1">
@@ -56,12 +58,12 @@
        <input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
      </div>
    </div>
-    {#if settingsJson.pass_status === 1}
+    {#if errorsJson.passer === 1}
      <div class="grd-1col1">
        <Alarm title="Введен неправильный пароль" />
      </div>
    {/if}
-    <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button>
+    <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
  </Card>
  <Card title="Подключение к MQTT брокеру">
    <div class="crd-itm-psn">
@@ -107,3 +109,8 @@
    <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
  </Card>
 </div>
+<div class="grd-1col1">
+  <Card title="Дополнительные опции">
+    <button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
+  </Card>
+</div>