управление ошибками

src/App.svelte

@@ -23,7 +23,7 @@
 
   //****************************************************constants section*********************************************************/
   //******************************************************************************************************************************/
-  let version = 400;
+  let version = 401;
   let debug = true;
   let LOG_MAX_MESSAGES = 10;
   let reconnectTimeout = 30000;
@@ -133,6 +133,8 @@
   function handleNavigation() {
     clearData();
     currentPageName = $router.path.toString();
+    //название страницы служит заголовком, поэтому отметим конец заголовка "|"
+    currentPageName = currentPageName + "|";
     console.log("[i]", "user on page:", currentPageName);
     sendCurrentPageName();
   }
@@ -141,7 +143,7 @@
   function sendCurrentPageName() {
     if (selectedWs !== undefined) {
       wsSendMsg(selectedWs, currentPageName);
-      wsSendMsg(selectedWs, "/all");
+      wsSendMsg(selectedWs, "/all|");
     }
   }
 
@@ -241,7 +243,7 @@
               let statusJson = JSON.parse(data);
               udatelayoutJson(statusJson);
               wigetsUpdate();
-              if (debug) console.log(statusJson);
+              //if (debug) console.log(statusJson);
               if (debug) console.log("✔", "statusJson parced");
             }
           }
@@ -258,7 +260,7 @@
           if (data.includes("ssid")) {
             if (IsJsonParse(data)) {
               ssidJson = JSON.parse(data);
-              delete ssidJson.ssid;
+              //delete ssidJson.ssid;
               ssidJson = ssidJson;
               ssidJsonParced = true;
               if (debug) console.log("✔", "ssidJson parced");
@@ -268,7 +270,7 @@
           if (data.includes("devicelist")) {
             if (IsJsonParse(data)) {
               incDeviceList = JSON.parse(data);
-              delete incDeviceList.devicelist;
+              //delete incDeviceList.devicelist;
               incDeviceList = incDeviceList;
               incDeviceListParced = true;
               deviceList = combineArrays(deviceList, incDeviceList);
@@ -282,7 +284,7 @@
           if (data.includes("errors")) {
             if (IsJsonParse(data)) {
               errorsJson = JSON.parse(data);
-              delete errorsJson.errors;
+              //delete errorsJson.errors;
               errorsJson = errorsJson;
               errorsJsonParced = true;
               if (debug) console.log("✔", "errorsJson json parced");
@@ -419,15 +421,15 @@
   }
 
   function saveConfig() {
-    wsSendMsg(selectedWs, "/tuoyal" + JSON.stringify(generateLayout()));
+    wsSendMsg(selectedWs, "/tuoyal|" + JSON.stringify(generateLayout()));
-    wsSendMsg(selectedWs, "/gifnoc" + JSON.stringify(configJson));
+    wsSendMsg(selectedWs, "/gifnoc|" + JSON.stringify(configJson));
     clearData();
     sendCurrentPageName();
   }
 
   function saveSettings() {
     console.log("[i]", settingsJson);
-    wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson));
+    wsSendMsg(selectedWs, "/sgnittes|" + JSON.stringify(settingsJson));
     clearData();
     sendCurrentPageName();
   }
@@ -512,7 +514,7 @@
           wsConnect(device.ws);
           wsEventAdd(device.ws);
         } else {
-          wsSendMsg(device.ws, "tst");
+          wsSendMsg(device.ws, "/tst|");
         }
       });
     }
@@ -770,7 +772,7 @@
   //************************************************elements and presets dropdown************************************************************/
 
   function ssidDropdownClick() {
-    wsSendMsg(selectedWs, "/scan");
+    wsSendMsg(selectedWs, "/scan|");
   }
 
   let rebootingInProgress = false;
@@ -778,7 +780,7 @@
 
   function rebootEsp() {
     if (debug) console.log("[i]", "reboot...");
-    wsSendMsg(selectedWs, "/reboot");
+    wsSendMsg(selectedWs, "/reboot|");
     rebootingInProgress = true;
     myTimeout = setTimeout(rebootingTask, rebootingTimeout);
   }
@@ -788,6 +790,17 @@
     connectToAllDevices();
     rebootingInProgress = false;
   }
+
+  function cancelAlarm(alarmKey) {
+    console.log("[x]", alarmKey);
+    if ((alarmKey = "wscle")) {
+      errorsJson.wscle = 0;
+    }
+    if ((alarmKey = "bver")) {
+      errorsJson.bver = 0;
+    }
+    wsSendMsg(selectedWs, "/rorre|" + JSON.stringify(errorsJson));
+  }
   //*******************************************************initialisation********************************************************************/
   onMount(async () => {
     console.log("[i]", "mounted");
@@ -872,7 +885,7 @@
             <ConnectionPage settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} rebootEsp={() => rebootEsp()} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
           </Route>
           <Route path="/system">
-            <SystemPage settingsJson={settingsJson} errorsJson={errorsJson} rebootEsp={() => rebootEsp()} version={version} />
+            <SystemPage settingsJson={settingsJson} errorsJson={errorsJson} rebootEsp={() => rebootEsp()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} version={version} />
           </Route>
 
           <!--<Route path="/utilities">-->

src/components/Alarm.svelte

@@ -1,10 +1,22 @@
 <script>
+  import CrossIcon from "../svg/Cross.svelte";
   export let title;
+  export let showCloseBtn = true;
+  export let close = () => {};
 </script>
 
 <div class="alm">
   {#if title}
-    <h1 class="alm-hdr">{title}</h1>
+    <div class="flex items-center">
+      <div class="w-11/12">
+        <h1 class="alm-hdr">{title}</h1>
+      </div>
+      <div class="flex justify-end w-1/12">
+        {#if showCloseBtn}
+          <CrossIcon click={() => close()} />
+        {/if}
+      </div>
+    </div>
   {/if}
   <slot />
 </div>

src/pages/Config.svelte

@@ -87,7 +87,7 @@
             <td class="tbl-bdy-lg"><input bind:value={element.page} class="ipt-lg w-full" type="text" /></td>
             <td class="tbl-bdy-lg"><input bind:value={element.descr} class="ipt-lg w-full" type="text" /></td>
             <td class="tbl-bdy-lg"><OpenIcon click={() => (hideAllSubParams = !hideAllSubParams)} /></td>
-            <td class="tbl-bdy-lg"><CrossIcon i={i} click={(i) => deleteLineFromConfig(i)} /></td>
+            <td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromConfig(i)} /></td>
           </tr>
           {#if !hideAllSubParams}
             {#each Object.entries(element) as [key, param]}

src/pages/List.svelte

@@ -44,7 +44,7 @@
             <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"><CrossIcon i={i} click={(i) => deleteLineFromDevlist(i)} /></td>
+            <td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
           </tr>
         {/each}
         {#if showInput}

src/pages/System.svelte

@@ -4,6 +4,8 @@
   export let version;
   export let errorsJson;
   export let rebootEsp = () => {};
+
+  export let cancelAlarm = (alarmKey) => {};
 </script>
 
 <div class="grd-2col1">
@@ -70,20 +72,20 @@
     </div>
   </Card>
   <Card title="Системные ошибки">
-    <div class="grd-3col1">
+    <div class="grd-2col1">
       {#if errorsJson.wscle === 1}
-        <Alarm title={"Ошибка web sockets"}>
+        <Alarm title={"Ошибка web sockets"} close={() => cancelAlarm("wscle")}>
-          <p>Слишком много клиентов было открыто. Допускается не более четырех. Для исчезновения ошибки перезагрузите устройство</p>
+          <p class="break-words text-center">Слишком много клиентов было открыто. Допускается не более четырех. Для исчезновения ошибки перезагрузите устройство</p>
         </Alarm>
       {/if}
       {#if errorsJson.bver != version}
-        <Alarm title={"Ошибка версии"}>
+        <Alarm title={"Ошибка версии"} close={() => cancelAlarm("bver")}>
-          <p>Версия файловой системы не совпадает с версией прошивки</p>
+          <p class="break-words text-center">Версия файловой системы не совпадает с версией прошивки. Вероятно произошла ошибка во время обновления устройства по воздуху.</p>
         </Alarm>
       {/if}
       {#if errorsJson.rssi < 3 && errorsJson.rssi > 0}
         <Alarm title={"WiFi"}>
-          <p>Уровень сигнала WiFi предельно низкий, веб интерфейс может работать со сбоями и потерей данных, рекомендуется переместить устройство ближе к роутеру</p>
+          <p class="break-words text-center">Уровень сигнала WiFi предельно низкий, веб интерфейс может работать со сбоями и потерей данных, рекомендуется переместить устройство ближе к роутеру</p>
         </Alarm>
       {/if}
     </div>

src/svg/Cross.svelte

@@ -1,6 +1,15 @@
 <script>
-  export let i;
+  export let click = () => {};
-  export let click = (i) => {};
 </script>
 
-<svg on:click={click(i)} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg>
+<svg
+  on:click={click()}
+  class="h-6 w-6 text-red-400 cursor-pointer"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round">
+  <line x1="18" y1="6" x2="6" y2="18" />
+  <line x1="6" y1="6" x2="18" y2="18" /></svg>