From b426958f8ab800ea9c060b5ec5318e71252c163a Mon Sep 17 00:00:00 2001 From: Dmitry Borisenko <67171972+IoTManagerProject@users.noreply.github.com> Date: Mon, 7 Feb 2022 02:08:21 +0100 Subject: [PATCH] =?UTF-8?q?=D0=BC=D0=BD=D0=BE=D0=B3=D0=B8=D0=B5=20=D0=B8?= =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.svelte | 66 +++++++++++++++------------------- src/components/Alarm.svelte | 4 +-- src/components/Card.svelte | 2 +- src/components/Progress.svelte | 5 +++ src/pages/Config.svelte | 36 ++++++++++++++++--- src/pages/List.svelte | 65 +++++++++++++++++---------------- 6 files changed, 103 insertions(+), 75 deletions(-) create mode 100644 src/components/Progress.svelte diff --git a/src/App.svelte b/src/App.svelte index 77248ab..528028e 100644 --- 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 @@
+
- devicesDropdownChange()}> {#each deviceList as device}
-
+
@@ -757,15 +748,13 @@
    {#if !socketConnected} -
    -
    -
    + {:else} wsPush(ws, topic, status)} /> - elementsDropdownChange()} saveConfig={() => saveConfig()} deleteLine={(i) => deleteLine(i)} /> + saveConfig()} deleteLineFromConfig={(i) => deleteLineFromConfig(i)} /> ssidDropdownClick()} saveSettings={() => saveSettings()} /> @@ -776,13 +765,13 @@ - - devListSave()} /> - showModal()} syntaxHighlight={(json) => syntaxHighlight(json)} /> {/if} + + deleteLineFromDevlist(num)} devListSave={() => devListSave()} newDevice={newDevice} /> +
@@ -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; } diff --git a/src/components/Alarm.svelte b/src/components/Alarm.svelte index 73a7786..eaeb9b5 100644 --- 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; } } diff --git a/src/components/Card.svelte b/src/components/Card.svelte index 83d6c3d..a145217 100644 --- 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; diff --git a/src/components/Progress.svelte b/src/components/Progress.svelte new file mode 100644 index 0000000..567b0f4 --- /dev/null +++ b/src/components/Progress.svelte @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/src/pages/Config.svelte b/src/pages/Config.svelte index 5f0b59f..c84ce9a 100644 --- 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; + } + } + } @@ -31,7 +57,7 @@
- +
@@ -59,7 +85,7 @@ - + {#if !hideAllSubParams} {#each Object.entries(element) as [key, param]} diff --git a/src/pages/List.svelte b/src/pages/List.svelte index 38ef054..b31b212 100644 --- 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) => {}; - -
Тип (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"> 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"> 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">
- - - - - - - - - - {#each deviceList as device} +
+ +
Название устройстваIP адресИдентификаторСостояние
+ - - - - + + + + + - {/each} - {#if showInput} - - - - - - {/if} - -
{device.name}{device.ip}{device.id}{device.status ? "online" : "offline"}Название устройстваIP адресИдентификаторСостояние
-
- - + + + {#each deviceList as device, i} + + {device.name} + {device.ip} + {device.id} + {device.status ? "online" : "offline"} + 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"> + + {/each} + {#if showInput} + + + + + + + {/if} + + + + +