diff --git a/src/App.svelte b/src/App.svelte index a709cf0..d9dc788 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -36,119 +36,8 @@ let additionalParams = false; //dashboard - let wigets = []; let pages = []; - //wigets = [ - // { - // widget: "input", - // type: "date", - // status: "2021-10-17", - // page: "Inputs", - // order: "4", - // descr: "Switch on boiler date", - // topic: "/prefix/00000-00004/date1", - // ws: 0, - // }, - // { - // widget: "input", - // type: "time", - // status: "12:00", - // page: "Inputs", - // order: "1", - // descr: "Switch on boiler time", - // topic: "/prefix/00000-00001/time", - // ws: 0, - // }, - // { - // widget: "input", - // type: "number", - // status: "30.5", - // after: "°С", - // page: "Inputs", - // order: "2", - // descr: "Boiler temperature", - // topic: "/prefix/00000-00002/temp", - // ws: 0, - // }, - // { - // widget: "input", - // type: "text", - // status: "Hello", - // page: "Inputs", - // order: "3", - // descr: "Message to be send", - // topic: "/prefix/00000-00003/text", - // ws: 0, - // }, - // { - // widget: "toggle", - // status: 0, - // page: "Toggles", - // order: "3", - // descr: "Light in my room", - // topic: "/prefix/00000-00003/btn1", - // ws: 0, - // }, - // { - // widget: "toggle", - // status: 0, - // page: "Toggles", - // order: "3", - // descr: "Light in my room", - // topic: "/prefix/00000-00003/btn2", - // ws: 0, - // }, - // { - // widget: "toggle", - // status: 0, - // page: "Toggles", - // order: "3", - // descr: "Light in my room", - // topic: "/prefix/00000-00003/btn3", - // ws: 0, - // }, - // { - // widget: "anydata", - // status: 30.5, - // after: "°С", - // page: "Any data", - // order: "3", - // descr: "Temperature", - // topic: "/prefix/00000-00003/tmp10", - // ws: 0, - // }, - // { - // widget: "anydata", - // status: 1032, - // after: "mm", - // page: "Any data", - // order: "3", - // descr: "Pressure", - // topic: "/prefix/00000-00003/tmp10", - // ws: 0, - // }, - // { - // widget: "anydata", - // status: 50, - // after: "%", - // page: "Any data", - // order: "3", - // descr: "Level", - // topic: "/prefix/00000-00003/tmp10", - // ws: 0, - // }, - // { - // widget: "anydata", - // status: "opened", - // page: "Any data", - // order: "3", - // descr: "Status", - // topic: "/prefix/00000-00003/tmp10", - // ws: 0, - // }, - //]; - let datachart = { labels: ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"], datasets: [ @@ -170,6 +59,12 @@ let itemsJsonBind = 0; + let layoutJson = []; + let layoutJsonFlag = false; + + let settingsJson = {}; + let settingsJsonFlag = false; + //web sockets let socket = []; let socketConnected = false; @@ -184,8 +79,8 @@ { name: "Устройство 1", id: "987654321", - ip: myip, - //ip: "192.168.88.235", + //ip: myip, + ip: "192.168.88.235", status: false, }, ]; @@ -216,6 +111,8 @@ var configJsonBlob = new MyBlobBuilder(); var widgetsJsonBlob = new MyBlobBuilder(); var itemsJsonBlob = new MyBlobBuilder(); + var layoutJsonBlob = new MyBlobBuilder(); + var settingsJsonBlob = new MyBlobBuilder(); router.subscribe(handleNavigation); function handleNavigation() { @@ -318,6 +215,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); // //сборщик configJson пакетов======================================== if (data === "/st/config.json") { if (debug) console.log("[i]", "configJson start!"); @@ -378,11 +276,55 @@ } }; } + //сборщик layoutJson пакетов======================================== + if (data === "/st/layout.json") { + if (debug) console.log("[i]", "layoutJson start!"); + layoutJsonFlag = true; + } + if (data === "/end/layout.json") { + if (debug) console.log("[i]", "layoutJson end!"); + layoutJsonFlag = false; + var bb = layoutJsonBlob.getBlob(); + let layoutJsonReader = new FileReader(); + layoutJsonReader.readAsText(bb); + layoutJsonReader.onload = () => { + let layoutJsonResult = layoutJsonReader.result; + if (IsJsonParse(layoutJsonResult)) { + layoutJson = JSON.parse(layoutJsonResult); + layoutJson = layoutJson; + wigetsUpdate(); + if (debug) console.log("[i]", "layoutJson parced!"); + } + }; + } + //сборщик settingsJson пакетов======================================== + if (data === "/st/settings.json") { + if (debug) console.log("[i]", "settingsJson start!"); + settingsJsonFlag = true; + } + if (data === "/end/settings.json") { + if (debug) console.log("[i]", "settingsJson end!"); + settingsJsonFlag = false; + var bb = settingsJsonBlob.getBlob(); + let settingsJsonReader = new FileReader(); + settingsJsonReader.readAsText(bb); + settingsJsonReader.onload = () => { + let settingsJsonResult = settingsJsonReader.result; + if (IsJsonParse(settingsJsonResult)) { + settingsJson = JSON.parse(settingsJsonResult); + settingsJson = settingsJson; + wigetsUpdate(); + if (debug) console.log("[i]", "settingsJson parced!"); + } + }; + } } if (event.data instanceof Blob) { if (configJsonFlag) configJsonBlob.append(event.data); if (widgetsJsonFlag) widgetsJsonBlob.append(event.data); if (itemsJsonFlag) itemsJsonBlob.append(event.data); + if (layoutJsonFlag) layoutJsonBlob.append(event.data); + if (settingsJsonFlag) settingsJsonBlob.append(event.data); } }); socket[ws].addEventListener("close", (event) => { @@ -399,25 +341,31 @@ } function saveConfig() { - generateLayout(); wsSendMsg(wsSelected, "/tuoyal" + JSON.stringify(generateLayout())); wsSendMsg(wsSelected, "/gifnoc" + JSON.stringify(configJson)); clearData(); sendCurrentPageName(); } + function saveSettings() { + wsSendMsg(wsSelected, "/cennoc" + JSON.stringify(settingsJson)); + clearData(); + sendCurrentPageName(); + } + function generateLayout() { let layout = []; for (let i = 0; i < configJson.length; i++) { - let config = configJson[i]; + let config = Object.assign({}, configJson[i]); let setWidget = config.widget; let error = true; for (let w = 0; w < widgetsJson.length; w++) { if (setWidget === widgetsJson[w].name) { - let widget = widgetsJson[w]; + let widget = Object.assign({}, widgetsJson[w]); widget.page = config.page; widget.descr = config.descr; widget.id = config.id; + widget.ws = wsSelected; layout.push(widget); error = false; break; @@ -427,19 +375,26 @@ } if (error) console.log("[e]", "error, widget not found: " + setWidget); } - if (debug) console.log("[i]", JSON.stringify(layout)); + if (debug) console.log("[i] layout:", JSON.stringify(layout)); return layout; - //wigets = layout; - //wigets = wigets; - //wigetsUpdate(); } function clearData() { configJson = []; configJsonBlob.clear(); + widgetsJson = []; widgetsJsonBlob.clear(); + itemsJson = []; + itemsJsonBlob.clear(); + + layoutJson = []; + layoutJsonBlob.clear(); + + settingsJson = {}; + settingsJsonBlob.clear(); + if (debug) console.log("[i]", "all app data cleared"); } @@ -477,7 +432,7 @@ //***********************************************************dashboard***************************************************************/ function findNewPage() { pages = []; - const newPage = Array.from(new Set(Array.from(wigets, ({ page }) => page))); + const newPage = Array.from(new Set(Array.from(layoutJson, ({ page }) => page))); newPage.forEach(function (item, i, arr) { pages = [...pages, JSON.parse(JSON.stringify({ page: item }))]; }); @@ -752,12 +707,12 @@
- {#if wigets === []} + {#if layoutJson === []} {/if} {#each pages as pagesName, i} - {#each wigets as widget, i} + {#each layoutJson as widget, i} {#if widget.page === pagesName.page} {#if widget.widget === "input"} wsPush(ws, topic, status)} /> @@ -777,7 +732,7 @@
-
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
@@ -901,7 +940,7 @@ - +
@@ -955,7 +994,7 @@ @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; } .wgt-ipt { - @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right; + @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white; } .jsn-ipt { @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500; @@ -996,9 +1035,12 @@ @apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300; } /*====================================================select=====================================================*/ - .grd-2cols { + .grd-2colsfx { @apply grid gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center; } + .grd-2cols { + @apply grid gap-4 grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center; + } .slct-lg { @apply flex w-full justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 mb-0 border border-gray-300 rounded; } diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte index c453151..a3b50e6 100644 --- a/src/widgets/Input.svelte +++ b/src/widgets/Input.svelte @@ -12,16 +12,16 @@
{#if widget.type == "number"} - ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> + ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> {/if} {#if widget.type == "text"} - ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" /> + ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" /> {/if} {#if widget.type == "date"} - ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" /> + ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" /> {/if} {#if widget.type == "time"} - ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" /> + ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" /> {/if}