From 425faec4e357e5f99e14f2151e28818de163f541 Mon Sep 17 00:00:00 2001
From: IoT Manager <67171972+IoTManagerProject@users.noreply.github.com>
Date: Fri, 22 Sep 2023 19:40:34 +0200
Subject: [PATCH] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.svelte              |  30 ++++++++--
 src/pages/Config.svelte     |   4 +-
 src/pages/Connection.svelte | 106 ++++++++++++++++--------------------
 src/pages/Dashboard.svelte  |   3 -
 src/widgets/Anydata.svelte  |  10 ++--
 src/widgets/Chart.svelte    |  13 +----
 src/widgets/Input.svelte    |   3 +-
 src/widgets/Range.svelte    |   3 +-
 src/widgets/Toggle.svelte   |   3 +-
 9 files changed, 86 insertions(+), 89 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index abf3e69..926d765 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -38,14 +38,14 @@
   const LOG_MAX_MESSAGES = 100;
   const reconnectTimeout = 60000; //период проверки соединения с устройством
   let preventReconnect = false;
-  const waitingAckTimeout = 12000; //время ожидания ответа от устройства
-  const rebootingTimeout = 20000;
+  const waitingAckTimeout = 18000; //время ожидания ответа от устройства
+  const rebootingTimeout = 30000;
   const updatingTimeout = 130000;
   let rebootTimer;
   let opened = false;
   let preventMove = false;
   const blobDebug = false;
-  const devMode = false;
+  const devMode = true;
 
   let timeout = reconnectTimeout / 1000;
   let percent;
@@ -53,7 +53,7 @@
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
   let myip = document.location.hostname;
-  if (devMode) myip = "192.168.1.238";
+  if (devMode) myip = "192.168.1.247";
 
   //Flags
   let firstDevListRequest = true;
@@ -949,6 +949,7 @@
     return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
   }
 
+  //тикер который тикает каждую секунду и на каждую 0 секунду запускает проверку соединения
   function wsTestMsgTask() {
     setTimeout(wsTestMsgTask, 1000);
     if (!preventReconnect) {
@@ -1657,4 +1658,25 @@
   input[type="file"] {
     display: none;
   }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #ebebeb;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #cbcbcb;
+    border-radius: 2px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #aeaeae;
+  }
 </style>
diff --git a/src/pages/Config.svelte b/src/pages/Config.svelte
index b0c819f..07dc846 100644
--- a/src/pages/Config.svelte
+++ b/src/pages/Config.svelte
@@ -257,7 +257,7 @@
                         </td>
                         {#if element[key] != "nil"}
                           <td class="tbl-bdy-sm text-center">
-                            <input bind:value={element[key]} class="ipt-sm w-full" type="text" />
+                            <input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
                           </td>
                         {/if}
                       {:else}
@@ -265,7 +265,7 @@
                           <p class="txt-ita">{key}</p>
                         </td>
                         <td class="tbl-bdy-sm text-center">
-                          <input bind:value={element[key]} class="ipt-sm w-full" type="text" />
+                          <input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
                         </td>
                       {/if}
                     </tr>
diff --git a/src/pages/Connection.svelte b/src/pages/Connection.svelte
index dcfaf15..e453dc2 100644
--- a/src/pages/Connection.svelte
+++ b/src/pages/Connection.svelte
@@ -18,36 +18,33 @@
   <div class="my-4">
     <div class="grd-2col1">
       <Card title="Подключение к WiFi">
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+        <div class="grid grid-cols-2 gap-2">
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.name} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.apssid} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.appass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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()}>
+          <div class="flex justify-end w-full">
+            <select class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
               {#each Object.entries(ssidJson) as [num, ssid]}
                 <option value={ssid}>
                   {ssid}
@@ -55,21 +52,19 @@
               {/each}
             </select>
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.routerpass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.serverip} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
         </div>
         {#if errorsJson.passer === 1}
@@ -82,13 +77,13 @@
       </Card>
 
       <Card title="Подключение к MQTT">
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+        <div class="grid grid-cols-2 gap-2">
+          <div class="w-full">
             <p class="wgt-dscr-stl text-gray-500 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">
+          <div class="flex justify-center w-full align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base truncate align-text-middle">
             {#if errorsJson.mqtt === "e5"}
-              <p class="text-green-500 font-bold h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p>
+              <p class="text-green-500 font-bold m-0 p-0 h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p>
             {:else if errorsJson.mqtt === "e13"}
               <p class="text-yellow-500 font-bold h-8 bg-yellow-50 border-2 border-gray-200 rounded w-full text-center">Подключение</p>
             {:else if errorsJson.mqtt === undefined}
@@ -97,45 +92,40 @@
               <p class="text-red-500 font-bold h-8 bg-red-50 border-2 border-gray-200 rounded w-full text-center">Ошибка</p>
             {/if}
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttServer} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPort} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPrefix} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttUser} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <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" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPass} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
         </div>
         <button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>
diff --git a/src/pages/Dashboard.svelte b/src/pages/Dashboard.svelte
index 5617f67..0fcaec1 100644
--- a/src/pages/Dashboard.svelte
+++ b/src/pages/Dashboard.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount } from "svelte";
   import Card from "../components/Card.svelte";
   import Input from "../widgets/Input.svelte";
   import Range from "../widgets/Range.svelte";
@@ -8,8 +7,6 @@
   import Anydata from "../widgets/Anydata.svelte";
   import Alarm from "../components/Alarm.svelte";
 
-  onMount(async () => {});
-
   export let layoutJson;
 
   $: layoutJson.length, timeOut();
diff --git a/src/widgets/Anydata.svelte b/src/widgets/Anydata.svelte
index 96be547..532ceb8 100644
--- a/src/widgets/Anydata.svelte
+++ b/src/widgets/Anydata.svelte
@@ -44,13 +44,11 @@
 
 <div class="crd-itm-psn">
   <div class="w-2/3">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
+    <p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
   </div>
   <div class="flex justify-end w-1/3">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl  {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl  {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
+    <p class="wgt-adt-stl truncate {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</p>
+
+    <p class="wgt-adt-stl truncate {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</p>
   </div>
 </div>
diff --git a/src/widgets/Chart.svelte b/src/widgets/Chart.svelte
index 4fd137d..b9a7665 100644
--- a/src/widgets/Chart.svelte
+++ b/src/widgets/Chart.svelte
@@ -1,11 +1,5 @@
 <script>
   import Chart from "svelte-frappe-charts";
-  import { onMount } from "svelte";
-
-  onMount(async () => {
-    console.log("[i]", "chart component mounted");
-  });
-
   export let widget;
 
   let datachart = {
@@ -25,7 +19,7 @@
   let labels = [];
   let values = [];
 
-  let axisOptions = { xAxisMode: "tick", xIsSeries: true };
+  let axisOptions = { xAxisMode: "tick", xIsSeries: true, xIsSeries: true };
   let lineOptions;
   if (widget.pointRadius == "0") {
     lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
@@ -110,8 +104,7 @@
 </script>
 
 <div class="text-center">
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label class="inline-block italic align-top text-center text-{widget.descrColor ? widget.descrColor : 'gray'}-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
+  <p class="inline-block italic truncate align-top text-center text-{widget.descrColor ? widget.descrColor : 'gray'}-500 txt-sz">{!widget.descr ? "" : widget.descr}</p>
 </div>
 
-<Chart data={datachart} type={type} lineOptions={lineOptions} axisOptions={axisOptions} height="150" padding="0px" />
+<Chart id={"notes"} data={datachart} type={type} title={""} lineOptions={lineOptions} axisOptions={axisOptions} height="150" padding="0px" margin="0px" />
diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte
index d75f46e..8c52f7f 100644
--- a/src/widgets/Input.svelte
+++ b/src/widgets/Input.svelte
@@ -52,8 +52,7 @@
 
 <div class="crd-itm-psn">
   <div class="w-2/3">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
+    <p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
   </div>
   <div class="flex justify-end w-1/3">
     {#if widget.type == "number"}
diff --git a/src/widgets/Range.svelte b/src/widgets/Range.svelte
index 37b1a78..3bfb35b 100644
--- a/src/widgets/Range.svelte
+++ b/src/widgets/Range.svelte
@@ -29,8 +29,7 @@
 
 <!--ползунок работает в режиме для микроконтроллера-->
 <div class="text-center">
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr} {valueForUser} {widget.after} </label>
+  <p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr} {valueForUser} {widget.after}</p>
 </div>
 <input
   bind:value={widget.status}
diff --git a/src/widgets/Toggle.svelte b/src/widgets/Toggle.svelte
index 322ea55..69d11bd 100644
--- a/src/widgets/Toggle.svelte
+++ b/src/widgets/Toggle.svelte
@@ -25,8 +25,7 @@
 
 <div class="crd-itm-psn">
   <div class="w-2/3">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
+    <p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
   </div>
   <div class="flex justify-end w-1/3">
     <label for={widget.topic} class="items-center cursor-pointer">