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

2026-03-26 15:02:21 +03:00 · 2022-02-07 02:08:21 +01:00
parent 9d66593dc6
commit b426958f8a
6 changed files with 103 additions and 75 deletions
--- a/src/App.svelte
+++ b/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",
-      //ip: myip,
+      id: "123456789",
      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() {
-    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 deleteLine(num) {
-    if (debug) console.log("[i]", num);
-    for (let i = 0; i < configJson.length; i++) {
+  function deleteLineFromDevlist(num) {
+    for (let i = 0; i < deviceList.length; i++) {
      if (num === i) {
-        configJson.splice(i, 1);
-        configJson = configJson;
-        if (debug) console.log("[i]", "item " + num + " deleted");
+        deviceList.splice(i, 1);
+        deviceList = deviceList;
+        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">
-            <div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
-          </div>
+          <Alarm title="Нет соединения" />
        {: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;
    }
--- a/src/components/Alarm.svelte
+++ b/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>
--- a/src/components/Card.svelte
+++ b/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;
--- a/src/components/Progress.svelte
+++ b/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>
--- a/src/pages/Config.svelte
+++ b/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]}
--- a/src/pages/List.svelte
+++ b/src/pages/List.svelte
@@ -4,39 +4,44 @@
  export let deviceList;
  export let showInput;

-  let newDevice = {};
+  export let newDevice = {};

  export let devListSave = () => {};
+  export let deleteLineFromDevlist = (num) => {};
 </script>

-<Card title={"Список устройств"}>
-  <table class="table-fixed gap-4 w-full">
-    <thead class="bg-gray-50 ">
-      <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>
-      </tr>
-    </thead>
-    <tbody class="bg-white">
-      {#each deviceList as device}
+<div class="grd-1cols">
+  <Card title={"Список устройств"}>
+    <table class="tbl">
+      <thead class="bg-gray-100">
        <tr class="tbl-txt-sz tbl-txt-p">
-          <td class="tbl-bdy">{device.name}</td>
-          <td class="tbl-bdy"><a href={"http://" + device.ip}>{device.ip}</a></td>
-          <td class="tbl-bdy">{device.id}</td>
-          <td class="tbl-bdy {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
+          <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>
-      {/each}
-      {#if showInput}
-        <tr class="tbl-txt-sz tbl-txt-p">
-          <td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
-          <td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
-          <td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
-          <td class="tbl-bdy" />
-        </tr>
-      {/if}
-    </tbody>
-  </table>
-  <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
-</Card>
+      </thead>
+      <tbody class="bg-white">
+        {#each deviceList as device, i}
+          <tr class="tbl-txt-sz tbl-txt-p">
+            <td class="tbl-bdy tbl-ipt w-full">{device.name}</td>
+            <td class="tbl-bdy tbl-ipt w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
+            <td class="tbl-bdy tbl-ipt w-full">{device.id}</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}
+          <tr class="tbl-txt-sz tbl-txt-p">
+            <td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
+            <td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
+            <td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
+            <td class="tbl-bdy" />
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+    <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
+  </Card>
+</div>