From 4b10fffc88698c11b3993ea1608ca5edfc32b41c Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <67171972+IoTManagerProject@users.noreply.github.com>
Date: Tue, 22 Nov 2022 15:07:41 +0100
Subject: [PATCH] 123

---
 public/index.html           |  2 +-
 src/App.svelte              | 17 +++++-----
 src/pages/Connection.svelte | 24 +++++++-------
 src/pages/Dashboard.svelte  | 17 ++++++++--
 src/pages/System.svelte     | 64 ++++++++++++++++++++++++-------------
 5 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9f21ca7..f58d837 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>IoT Manager 4.4.1</title>
+    <title>IoT Manager 4.4.2</title>
 
     <link rel="icon" type="image/png" href="/favicon.ico" />
     <link rel="stylesheet" href="/build/bundle.css?441" />
diff --git a/src/App.svelte b/src/App.svelte
index be1312a..66343cb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -33,14 +33,14 @@
   //******************************************************************************************************************************/
   const debug = true;
   const LOG_MAX_MESSAGES = 100;
-  const reconnectTimeout = 20000;
+  const reconnectTimeout = 30000;
   const waitingAckTimeout = 5000;
-  const rebootingTimeout = 18000;
-  const updatingTimeout = 120000;
+  const rebootingTimeout = 20000;
+  const updatingTimeout = 130000;
   let opened = false;
   let preventMove = false;
   const blobDebug = false;
-  const devMode = true;
+  const devMode = false;
 
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
@@ -1156,6 +1156,7 @@
   function rebootEsp() {
     if (debug) console.log("[i]", "reboot...");
     wsSendMsg(selectedWs, "/reboot|");
+    markDeviceStatus(selectedWs, false);
     rebootingUpdatingInProgress = true;
     myTimeout = setTimeout(rebootingTask, rebootingTimeout);
   }
@@ -1306,7 +1307,7 @@
     <ul class="menu__main">
       <div class="bg-cover pt-0 px-4">
         {#if !socketConnected && currentPageName != "/|"}
-          <Alarm title="Нет соединения" />
+          <Alarm title="Подключение..." />
         {:else}
           <Route path="/">
             <DashboardPage show={pageReady.dash} layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
@@ -1379,10 +1380,10 @@
       @apply table-fixed w-full select-none my-2;
     }
     .tbl-hd {
-      @apply text-center px-1 break-words text-gray-500 font-bold;
+      @apply text-center px-1 break-words text-gray-500 font-bold truncate;
     }
     .tbl-bdy-lg {
-      @apply text-center px-1 break-words;
+      @apply text-center px-1 break-words truncate;
     }
     .tbl-bdy-sm {
       @apply px-1 break-words;
@@ -1412,7 +1413,7 @@
     }
     /*====================================================buttons=====================================================*/
     .btn-lg {
-      @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;
+      @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 truncate;
     }
     .btn-tbl {
       @apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300;
diff --git a/src/pages/Connection.svelte b/src/pages/Connection.svelte
index 4b3cac8..58241a2 100644
--- a/src/pages/Connection.svelte
+++ b/src/pages/Connection.svelte
@@ -19,7 +19,7 @@
     <Card title="Подключение к WiFi">
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Название устройства</p>
+          <p class="wgt-dscr-stl truncate">Название устройства</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -27,7 +27,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Точка доступа</p>
+          <p class="wgt-dscr-stl truncate">Точка доступа</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -35,7 +35,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Пароль точки доступа</p>
+          <p class="wgt-dscr-stl truncate">Пароль точки доступа</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -43,7 +43,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Название wifi сети</p>
+          <p class="wgt-dscr-stl truncate">Название wifi сети</p>
         </div>
         <div class="flex justify-end w-3/6">
           <select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
@@ -57,7 +57,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Пароль</p>
+          <p class="wgt-dscr-stl truncate">Пароль</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -65,7 +65,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Сервер обновления</p>
+          <p class="wgt-dscr-stl truncate">Сервер обновления</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.serverip} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -83,7 +83,7 @@
     <Card title="Подключение к MQTT">
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Состояние подключения</p>
+          <p class="wgt-dscr-stl truncate">Состояние подключения</p>
         </div>
         <div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
           {#if errorsJson.mqtt === "e5"}
@@ -99,7 +99,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Название сервера</p>
+          <p class="wgt-dscr-stl truncate">Название сервера</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -107,7 +107,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Порт</p>
+          <p class="wgt-dscr-stl truncate">Порт</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -115,7 +115,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Префикс</p>
+          <p class="wgt-dscr-stl truncate">Префикс</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -123,7 +123,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Имя пользователя</p>
+          <p class="wgt-dscr-stl truncate">Имя пользователя</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -131,7 +131,7 @@
       </div>
       <div class="crd-itm-psn">
         <div class="w-4/6">
-          <p class="wgt-dscr-stl">Пароль</p>
+          <p class="wgt-dscr-stl truncate">Пароль</p>
         </div>
         <div class="flex justify-end w-3/6">
           <input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
diff --git a/src/pages/Dashboard.svelte b/src/pages/Dashboard.svelte
index 37e2cde..213c070 100644
--- a/src/pages/Dashboard.svelte
+++ b/src/pages/Dashboard.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte";
   import Card from "../components/Card.svelte";
   import Input from "../widgets/Input.svelte";
   import Range from "../widgets/Range.svelte";
@@ -7,17 +8,29 @@
   import Anydata from "../widgets/Anydata.svelte";
   import Alarm from "../components/Alarm.svelte";
 
+  onMount(async () => {
+    setTimeout(timeIsOut, 1000);
+  });
+
   export let layoutJson;
   export let pages;
 
   export let show;
 
   export let wsPush = (ws, topic, status) => {};
+
+  let empty = false;
+
+  function timeIsOut() {
+    if (layoutJson.length === 0) {
+      empty = true;
+    }
+  }
 </script>
 
 {#if show}
-  <div class="grd-1col1">
-    {#if layoutJson.length === 0}
+  <div class="grd-1col1 animate-pulse">
+    {#if empty}
       <Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
     {/if}
   </div>
diff --git a/src/pages/System.svelte b/src/pages/System.svelte
index dab1640..b224658 100644
--- a/src/pages/System.svelte
+++ b/src/pages/System.svelte
@@ -337,10 +337,26 @@
         </div>
       </div>
 
+      <!--MQTT-->
+      <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">Прием событий с других устройств</p>
+        </div>
+        <div class="flex justify-center w-1/3">
+          <label for="mqtt" class="items-center cursor-pointer">
+            <div class="relative">
+              <input bind:checked={settingsJson.mqttin} on:change={() => (reboot = true)} id="mqtt" type="checkbox" class="sr-only" />
+              <div class="block {settingsJson.mqttin ? '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>
+
       <!--i2c-->
       <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">Расширение i2c</p>
+          <p class="pr-4 text-gray-500 font-bold text-sm truncate">Перенаправление i2c</p>
         </div>
 
         <div class="flex justify-center w-1/3">
@@ -353,31 +369,32 @@
           </label>
         </div>
       </div>
-
-      <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">i2c SCL gpio</p>
+      {#if settingsJson.i2c === true}
+        <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">i2c SCL gpio</p>
+          </div>
+          <div class="flex justify-center w-1/3">
+            <input bind:value={settingsJson.pinSCL} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
+          </div>
         </div>
-        <div class="flex justify-center w-1/3">
-          <input bind:value={settingsJson.pinSCL} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
+        <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">i2c SDA gpio</p>
+          </div>
+          <div class="flex justify-center w-1/3">
+            <input bind:value={settingsJson.pinSDA} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
+          </div>
         </div>
-      </div>
-      <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">i2c SDA gpio</p>
+        <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">i2c частота</p>
+          </div>
+          <div class="flex justify-center w-1/3">
+            <input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
+          </div>
         </div>
-        <div class="flex justify-center w-1/3">
-          <input bind:value={settingsJson.pinSDA} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
-        </div>
-      </div>
-      <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">i2c частота</p>
-        </div>
-        <div class="flex justify-center w-1/3">
-          <input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
-        </div>
-      </div>
+      {/if}
 
       <!--control-->
       <!--<div class="grd-2col1">-->
@@ -390,6 +407,7 @@
       <!--<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить"}</button>-->
       <!--</div>-->
     </Card>
+
     <!--LOG-->
     <Card title="Лог" class="z-50">
       <div class="h-80 overflow-y-auto">