From a97a1c0b09a8a50e57859556ec342d8dcbea8245 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Sun, 12 Dec 2021 00:20:47 +0100
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=83=D1=81=D1=82=D1=80=D0=BE=D0=B9=D1=81=D1=82=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.svelte | 67 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f837425..e703c77 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,6 +15,7 @@
   let debug = true;
   let LOG_MAX_MESSAGES = 10;
   //===========================================================================================
+  let showInput = false;
   let myip = document.location.hostname;
   let wigets = [];
   wigets = [
@@ -129,30 +130,33 @@
   let config = [];
   let socket = [];
   let socketConnected = false;
-  let selectedDeviceData;
+  let selectedDeviceData = {};
   let deviceList = [];
   let flag = true;
 
-  deviceList = [
-    {
-      name: "Устройство 1",
-      id: "987654321",
-      ip: "192.168.88.230",
-      status: false,
-    },
-    {
-      name: "Устройство 2",
-      id: "987654321",
-      ip: "192.168.88.231",
-      status: false,
-    },
-  ];
+  //deviceList = [
+  //  {
+  //    name: "Устройство 1",
+  //    id: "987654321",
+  //    ip: "192.168.88.230",
+  //    status: false,
+  //  },
+  //  {
+  //    name: "Устройство 2",
+  //    id: "987654321",
+  //    ip: "192.168.88.231",
+  //    status: false,
+  //  },
+  //];
+
+  let newDevice = {};
 
   let pages = [];
   let coreMessages = [];
 
   //секция функций==========================================================================
   function connectToAllDevices() {
+    socket = [];
     let ws = 0;
     deviceList.forEach((device) => {
       //if (debug) console.log("[i]", device.name, ws, device.ip, device.id);
@@ -251,6 +255,7 @@
   function wsTestMsgTask() {
     setTimeout(wsTestMsgTask, 60000);
     if (debug) console.log("[i]", "----timer tick----");
+
     if (!flag) {
       deviceList.forEach((device) => {
         if (!getDeviceStatus(device.ws)) {
@@ -330,6 +335,21 @@
     if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name);
   }
 
+  function devListSave() {
+    if (!showInput) {
+      if (newDevice.name !== undefined && newDevice.ip !== undefined && newDevice.id !== undefined) {
+        newDevice.status = false;
+        deviceList.push(newDevice);
+        deviceList = deviceList;
+        newDevice = {};
+        connectToAllDevices();
+        socketConnected = selectedDeviceData.status;
+      } else {
+        if (debug) console.log("[e]", "wrong data");
+      }
+    }
+  }
+
   onMount(async () => {
     console.log("[i]", "mounted");
     connectToAllDevices();
@@ -454,9 +474,17 @@
                   <td class="table-body-element {device.status ? 'bg-green-100' : 'bg-red-100'}">{device.status ? "online" : "offline"}</td>
                 </tr>
               {/each}
+              {#if showInput}
+                <tr>
+                  <td class="table-body-element"><input bind:value={newDevice.name} class="table-input" type="text" /></td>
+                  <td class="table-body-element"><input bind:value={newDevice.ip} class="table-input" type="text" /></td>
+                  <td class="table-body-element"><input bind:value={newDevice.id} class="table-input" type="text" /></td>
+                  <td class="table-body-element" />
+                </tr>
+              {/if}
             </tbody>
           </table>
-          <button class="flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded">Добавить устройство</button>
+          <button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
         </Card>
       </Route>
       <Route path="/about" />
@@ -524,6 +552,13 @@
     .table-body-element {
       @apply border border-gray-300 text-center break-words w-1/4;
     }
+    .table-input {
+      @apply content-center bg-gray-100 appearance-none border-2 border-gray-200 w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-center focus:border-indigo-500;
+    }
+    /*====================================================buttons=====================================================*/
+    .long-button {
+      @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded;
+    }
   }
 
   #menu__toggle {