многие изменения

src/App.svelte

@@ -5,8 +5,10 @@
   import { Route, router, active } from "tinro";
   router.mode.hash();
 
-  import Modal from "./components/Modal.svelte";
+  import Alarm from "./components/Alarm.svelte";
+  import Progress from "./components/Progress.svelte";
 
+  import Modal from "./components/Modal.svelte";
   import DashboardPage from "./pages/Dashboard.svelte";
   import ConfigPage from "./pages/Config.svelte";
   import ConnectionPage from "./pages/Connection.svelte";
@@ -49,8 +51,6 @@
   let itemsJsonFlag = false;
   let itemsJsonParced = false;
 
-  let itemsJsonBind = 0;
-
   let layoutJson = [];
   let layoutJsonFlag = false;
   let layoutJsonParced = false;
@@ -68,7 +68,7 @@
   let selectedDeviceData = undefined;
   let deviceList = [];
   let flag = true;
-
+  let newDevice = {};
   let coreMessages = [];
   let wsSelected = undefined;
 
@@ -77,9 +77,15 @@
   deviceList = [
     {
       name: "Устройство 1",
-      id: "987654321",
+      id: "123456789",
-      //ip: myip,
       ip: "192.168.88.235",
+      //ip: myip,
+      status: false,
+    },
+    {
+      name: "Устройство 2",
+      id: "123456789",
+      ip: "192.168.88.236",
       status: false,
     },
   ];
@@ -215,7 +221,7 @@
       socket[ws].addEventListener("message", function (event) {
         if (typeof event.data === "string") {
           let data = event.data;
-          if (debug) console.log("[i]", getIP(ws), "msg received", data); //
+          //if (debug) console.log("[i]", getIP(ws), "msg received", data); //
           //сборщик statusJson сообщений======================================
           if (data.includes("status")) {
             if (IsJsonParse(data)) {
@@ -661,28 +667,12 @@
 
   //************************************************elements and presets dropdown************************************************************/
 
-  function elementsDropdownChange() {
+  function deleteLineFromDevlist(num) {
-    for (let i = 0; i < itemsJson.length; i++) {
+    for (let i = 0; i < deviceList.length; i++) {
-      let item = Object.assign({}, itemsJson[i]);
-      if (itemsJsonBind === item.num) {
-        delete item.num;
-        delete item.name;
-        configJson.push(item);
-        configJson = configJson;
-        itemsJsonBind = 0;
-        if (debug) console.log("[i]", "item added");
-        break;
-      }
-    }
-  }
-
-  function deleteLine(num) {
-    if (debug) console.log("[i]", num);
-    for (let i = 0; i < configJson.length; i++) {
       if (num === i) {
-        configJson.splice(i, 1);
+        deviceList.splice(i, 1);
-        configJson = configJson;
+        deviceList = deviceList;
-        if (debug) console.log("[i]", "item " + num + " deleted");
+        if (debug) console.log("[i]", "item " + num + " deleted from dev list");
         break;
       }
     }
@@ -705,10 +695,11 @@
 
 <div class="flex flex-col h-screen bg-gray-50">
   <Modal show={showModalFlag} />
+
   <header class="h-10 w-full bg-gray-100 overflow-auto shadow-md">
     <div class="flex justify-end content-center">
       <div class="px-15 py-2 z-50">
-        <select bind:value={selectedDeviceData} on:change={() => devicesDropdownChange()}>
+        <select class="border-indigo-500" bind:value={selectedDeviceData} on:change={() => devicesDropdownChange()}>
           {#each deviceList as device}
             <option value={device}>
               {device.name}
@@ -716,7 +707,7 @@
           {/each}
         </select>
       </div>
-      <div class="px-5 py-1">
+      <div class="pl-2 pr-4 py-1">
         <svg class="h-8 w-8 {socketConnected === true ? 'text-green-500' : 'text-red-500'}" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" /></svg>
       </div>
     </div>
@@ -757,15 +748,13 @@
     <ul class="menu__main">
       <div class="bg-cover pt-0 px-4">
         {#if !socketConnected}
-          <div class="flex justify-center items-center">
+          <Alarm title="Нет соединения" />
-            <div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
-          </div>
         {:else}
           <Route path="/">
             <DashboardPage layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
           </Route>
           <Route path="/config">
-            <ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} itemsJsonBind={itemsJsonBind} ssidDropdownClick={() => elementsDropdownChange()} saveConfig={() => saveConfig()} deleteLine={(i) => deleteLine(i)} />
+            <ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} deleteLineFromConfig={(i) => deleteLineFromConfig(i)} />
           </Route>
           <Route path="/connection">
             <ConnectionPage settingsJson={settingsJson} ssidJson={ssidJson} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
@@ -776,13 +765,13 @@
           <Route path="/log">
             <LogPage coreMessages={coreMessages} />
           </Route>
-          <Route path="/list">
-            <ListPage deviceList={deviceList} showInput={showInput} devListSave={() => devListSave()} />
-          </Route>
           <Route path="/about">
             <AboutPage wigetsUpdate={wigetsUpdate} layoutJson={layoutJson} showModal={() => showModal()} syntaxHighlight={(json) => syntaxHighlight(json)} />
           </Route>
         {/if}
+        <Route path="/list">
+          <ListPage deviceList={deviceList} showInput={showInput} deleteLineFromDevlist={(num) => deleteLineFromDevlist(num)} devListSave={() => devListSave()} newDevice={newDevice} />
+        </Route>
       </div>
     </ul>
   </main>
@@ -836,6 +825,9 @@
       @apply text-center text-gray-500 font-bold;
     }
     /*====================================================table=====================================================*/
+    .tbl {
+      @apply table-fixed w-full select-none my-2;
+    }
     .tbl-hd {
       @apply text-center px-1 break-words text-gray-500 font-bold;
     }

src/components/Alarm.svelte

@@ -16,10 +16,10 @@
 
   @layer components {
     .alm-hdr {
-      @apply text-center text-base text-gray-500 font-bold pb-0;
+      @apply text-center text-base text-red-500 pb-0;
     }
     .alm {
-      @apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-red-100 shadow-md lg:shadow-lg border border-gray-300 rounded;
+      @apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
     }
   }
 </style>

src/components/Card.svelte

@@ -16,7 +16,7 @@
 
   @layer components {
     .crd {
-      @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg border border-gray-100;
+      @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white  shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
     }
     .crd-hdr {
       @apply text-center text-lg text-gray-500 font-bold pb-4;

src/components/Progress.svelte

@@ -0,0 +1,5 @@
+<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>

src/pages/Config.svelte

@@ -4,13 +4,39 @@
   export let configJson;
   export let widgetsJson;
   export let itemsJson;
-  export let itemsJsonBind;
 
-  export let elementsDropdownChange = () => {};
+  let itemsJsonBind = 0;
+  let debug = true;
+
   export let saveConfig = () => {};
-  export let deleteLine = (i) => {};
 
   let hideAllSubParams = true;
+
+  function elementsDropdownChange() {
+    for (let i = 0; i < itemsJson.length; i++) {
+      let item = Object.assign({}, itemsJson[i]);
+      if (itemsJsonBind === item.num) {
+        delete item.num;
+        delete item.name;
+        configJson.push(item);
+        configJson = configJson;
+        itemsJsonBind = 0;
+        if (debug) console.log("[i]", "item added");
+        break;
+      }
+    }
+  }
+
+  function deleteLineFromConfig(num) {
+    for (let i = 0; i < configJson.length; i++) {
+      if (num === i) {
+        configJson.splice(i, 1);
+        configJson = configJson;
+        if (debug) console.log("[i]", "item " + num + " deleted from config");
+        break;
+      }
+    }
+  }
 </script>
 
 <!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}-->
@@ -31,7 +57,7 @@
       </select>
       <select class="slct-lg"><option>{"Выберите пресет"}</option></select>
     </div>
-    <table class="table-fixed w-full select-none my-2 ">
+    <table class="tbl">
       <thead class="bg-gray-100">
         <tr class="tbl-txt-sz tbl-txt-p">
           <th class="tbl-hd">Тип</th>
@@ -59,7 +85,7 @@
             <td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
             <td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
             <td class="tbl-bdy"><svg on:click={() => (hideAllSubParams = !hideAllSubParams)} class="h-6 w-6 text-green-400 cursor-pointer" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <circle cx="5" cy="12" r="1" /> <circle cx="12" cy="12" r="1" /> <circle cx="19" cy="12" r="1" /></svg></td>
-            <td class="tbl-bdy"><svg on:click={() => deleteLine(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></td>
+            <td class="tbl-bdy"><svg on:click={() => deleteLineFromConfig(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></td>
           </tr>
           {#if !hideAllSubParams}
             {#each Object.entries(element) as [key, param]}

src/pages/List.svelte

@@ -4,28 +4,32 @@
   export let deviceList;
   export let showInput;
 
-  let newDevice = {};
+  export let newDevice = {};
 
   export let devListSave = () => {};
+  export let deleteLineFromDevlist = (num) => {};
 </script>
 
+<div class="grd-1cols">
   <Card title={"Список устройств"}>
-  <table class="table-fixed gap-4 w-full">
+    <table class="tbl">
-    <thead class="bg-gray-50 ">
+      <thead class="bg-gray-100">
         <tr class="tbl-txt-sz tbl-txt-p">
           <th class="tbl-hd">Название устройства</th>
           <th class="tbl-hd">IP адрес</th>
           <th class="tbl-hd">Идентификатор</th>
           <th class="tbl-hd">Состояние</th>
+          <th class="tbl-hd w-7" />
         </tr>
       </thead>
       <tbody class="bg-white">
-      {#each deviceList as device}
+        {#each deviceList as device, i}
           <tr class="tbl-txt-sz tbl-txt-p">
-          <td class="tbl-bdy">{device.name}</td>
+            <td class="tbl-bdy tbl-ipt w-full">{device.name}</td>
-          <td class="tbl-bdy"><a href={"http://" + device.ip}>{device.ip}</a></td>
+            <td class="tbl-bdy tbl-ipt w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
-          <td class="tbl-bdy">{device.id}</td>
+            <td class="tbl-bdy tbl-ipt w-full">{device.id}</td>
-          <td class="tbl-bdy {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
+            <td class="tbl-bdy tbl-ipt w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
+            <td class="tbl-bdy"><svg on:click={() => deleteLineFromDevlist(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></td>
           </tr>
         {/each}
         {#if showInput}
@@ -40,3 +44,4 @@
     </table>
     <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
   </Card>
+</div>