diff --git a/package-lock.json b/package-lock.json index ca393dd..703e17d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -249,13 +249,13 @@ "dev": true }, "autoprefixer": { - "version": "10.4.8", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz", - "integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==", + "version": "10.4.11", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.11.tgz", + "integrity": "sha512-5lHp6DgRodxlBLSkzHOTcufWFflH1ewfy2hvFQyjrblBFlP/0Yh4O/Wrg4ow8WRlN3AAUFFLAQwX8hTptzqVHg==", "dev": true, "requires": { "browserslist": "^4.21.3", - "caniuse-lite": "^1.0.30001373", + "caniuse-lite": "^1.0.30001399", "fraction.js": "^4.2.0", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -294,15 +294,15 @@ } }, "browserslist": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz", - "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==", + "version": "4.21.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", + "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001370", - "electron-to-chromium": "^1.4.202", + "caniuse-lite": "^1.0.30001400", + "electron-to-chromium": "^1.4.251", "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.5" + "update-browserslist-db": "^1.0.9" } }, "buffer-crc32": { @@ -342,9 +342,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001382", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001382.tgz", - "integrity": "sha512-2rtJwDmSZ716Pxm1wCtbPvHtbDWAreTPxXbkc5RkKglow3Ig/4GNGazDI9/BVnXbG/wnv6r3B5FEbkfg9OcTGg==", + "version": "1.0.30001402", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz", + "integrity": "sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==", "dev": true }, "chalk": { @@ -527,9 +527,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.227", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.227.tgz", - "integrity": "sha512-I9VVajA3oswIJOUFg2PSBqrHLF5Y+ahIfjOV9+v6uYyBqFZutmPxA6fxocDUUmgwYevRWFu1VjLyVG3w45qa/g==", + "version": "1.4.254", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.254.tgz", + "integrity": "sha512-Sh/7YsHqQYkA6ZHuHMy24e6TE4eX6KZVsZb9E/DvU1nQRIrH4BflO/4k+83tfdYvDl+MObvlqHPRICzEdC9c6Q==", "dev": true }, "error-ex": { @@ -1731,9 +1731,9 @@ "dev": true }, "update-browserslist-db": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz", - "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz", + "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==", "dev": true, "requires": { "escalade": "^3.1.1", diff --git a/package.json b/package.json index 12a4055..e8294fb 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.0", - "autoprefixer": "^10.4.8", + "autoprefixer": "^10.4.11", "postcss": "^8.4.16", "postcss-load-config": "^3.1.4", "prettier": "^2.7.1", diff --git a/src/App.svelte b/src/App.svelte index 36775b5..c8c52b6 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -92,6 +92,7 @@ let layoutJson = []; let layoutJsonArrayParced = false; + let layoutReceivingCompleted = false; let settingsJson = {}; let settingsJsonParced = false; @@ -166,8 +167,6 @@ router.subscribe(handleNavigation); function handleNavigation() { - console.log("[i]", "handle navigation"); - currentPageName = $router.path.toString(); //не нужно очищать переменные когда переходим на страницу разработчика @@ -276,7 +275,6 @@ function wsEventAdd(ws) { if (socket[ws]) { let ip = getIP(ws); - if (debug) console.log("[i]", ip, ws, "web socket events added"); socket[ws].addEventListener("open", function (event) { if (debug) console.log("[i]", ip, ws, "completed connecting"); markDeviceStatus(ws, true); @@ -357,7 +355,6 @@ if (data.includes("/log|")) { data = data.replace("/log|", ""); //let msg = data.toString(); - if (debug) console.log("", data); addCoreMsg(data); } @@ -377,7 +374,7 @@ scenarioJson = JSON.parse(scenarioJsonResult); scenarioJson = scenarioJson; scenarioJsonParced = true; - if (debug) console.log("✔", "scenarioJson parced", scenarioJson); + if (debug) console.log("✔", "scenarioJson parced"); onParced(); } }; @@ -445,9 +442,13 @@ } //сборщик layoutJson пакетов if (data === "/st/layout.json") { + layoutReceivingCompleted = false; } if (data === "/end/layout.json") { - //createLayoutUnderLoading(ws); + console.log("[1]", ws, "blob package received"); + //как только прилетел весь блоб мы начнем его читать ридером и заодно запросим json-ы всех параметров + combineLayoutsInOne(ws); + wsSendMsg(ws, "/statuses|"); ///params| } //сборщик paramsJson сообщений if (data.includes('"params":"')) { @@ -458,18 +459,24 @@ ...JSON.parse(data), }; paramsJson = paramsJson; - console.log("[i] paramsJson:", paramsJson); - createLayoutUnderLoading(ws); + console.log("[4]", ws, "collecting params"); + updateAllStatuses(ws); onParced(); } } //сборщик statusJson сообщений - if (data.includes('"status":')) { + if (data.includes('"status"')) { if (IsJsonParse(data)) { let statusJson = JSON.parse(data); - udateStatusOfWidget(statusJson); - if (debug) console.log("[i] status", ip, ws, statusJson); + if (Array.isArray(statusJson.status)) { + updateWidgetArr(statusJson); + if (debug) console.log("[i] status (arr)", ws, JSON.stringify(statusJson)); + } else { + updateWidget(statusJson); + if (debug) console.log("[i] status (dgt)", ws, JSON.stringify(statusJson)); + } } + //если сообщение является массивом } } @@ -500,30 +507,71 @@ } } - //функция создающая общий json всех виджетов под загрузкой (не имеющая события завершения) - async function createLayoutUnderLoading(ws) { + //***********************************************************dashboard***************************************************************/ + + //слияние layout-ов всех устройств в общий layout + async function combineLayoutsInOne(ws) { var bb = layoutJsonArray[ws].getBlob(); let reader = new FileReader(); reader.readAsText(bb); + reader.onload = () => { let devLayout = JSON.parse(reader.result); - udateStatusOfDevWidgets(devLayout, ws); layoutJson = layoutJson.concat(devLayout); + console.log("[2]", ws, "blob package pushed to layout"); sortingLayout(); }; } - //данная функция обновляет статусы виджетов одного устройства при загрузке страницы dashboard - function udateStatusOfDevWidgets(devLayout, ws) { + function sortingLayout() { + //сортируем весь layout по алфавиту + layoutJson.sort(function (a, b) { + if (a.descr < b.descr) { + return -1; + } + if (a.descr > b.descr) { + return 1; + } + return 0; + }); + //формируем json всех карточек + pages = []; + 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, + }) + ), + ]; + }); + //сортируем карточки по алфавиту + pages.sort(function (a, b) { + if (a.page < b.page) { + return -1; + } + if (a.page > b.page) { + return 1; + } + return 0; + }); + layoutReceivingCompleted = true; + layoutJson = layoutJson; + console.log("[3]", "layout sort"); + } + + function updateAllStatuses(ws) { for (const [key, value] of Object.entries(paramsJson)) { - for (let i = 0; i < devLayout.length; i++) { - let topic = devLayout[i].topic; + for (let i = 0; i < layoutJson.length; i++) { + let topic = layoutJson[i].topic; if (topic) { - devLayout[i].ws = ws; + layoutJson[i].ws = ws; topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length); if (key === topic) { - console.log("[i]", "updated " + topic, value); - devLayout[i].status = value; + console.log("[i]", "updated =>" + topic, value); + layoutJson[i].status = value; break; } } @@ -531,13 +579,12 @@ } } - //данная функция обновляет статусы всех виджетов хранящихся в layoutJson - function udateStatusOfWidget(newStatusJson) { + //обработка интервально прилетающих статусов + function updateWidget(newStatusJson) { for (let i = 0; i < layoutJson.length; i++) { let topic = layoutJson[i].topic; if (topic === newStatusJson.topic) { layoutJson[i] = jsonConcat(layoutJson[i], newStatusJson); - //layoutJson[i].status = newStatusJson.status; //получен ответ - выключаем красный цвет layoutJson[i].sent = false; break; @@ -545,6 +592,37 @@ } } + //если статус виджета это массив и его нужно накопить + function updateWidgetArr(newStatusJson) { + console.log("[i]", "collecting arrays"); + let error = true; + if (layoutJson.length > 0) { + for (let i = 0; i < layoutJson.length; i++) { + let topic = layoutJson[i].topic; + if (topic === newStatusJson.topic) { + error = false; + layoutJson[i] = jsonConcatEx(layoutJson[i], newStatusJson); + let prevArr = layoutJson[i].status; //который был в layout + let newArr = newStatusJson.status; //тот что получили + if (prevArr) { + //если что то было в layout то делаем слияние + prevArr = [...prevArr, ...newArr]; + layoutJson[i].status = prevArr; + } else { + //если ничего не было то просто запишем новый + layoutJson[i].status = newArr; + } + + //получен ответ - выключаем красный цвет + layoutJson[i].sent = false; + } + } + } else { + console.log("[E]", "layoutJson missing"); + } + if (error) console.log("[E]", "topic not found ", newStatusJson.topic); + } + function jsonConcat(o1, o2) { for (var key in o2) { o1[key] = o2[key]; @@ -552,6 +630,16 @@ return o1; } + //объединяем исклчая статус так как статус в данном случае накопительная переменная + function jsonConcatEx(o1, o2) { + for (var key in o2) { + if (key !== "status") { + o1[key] = o2[key]; + } + } + return o1; + } + async function onParced() { if (currentPageName === "/|") { clearParcedFlags(); @@ -579,7 +667,7 @@ if (debug) console.log("✔✔", "system data parced"); systemReady = true; } - if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced) { + if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced && paramsJsonParced) { clearParcedFlags(); getVersionsList(); if (debug) console.log("✔✔", "dev data parced"); @@ -598,7 +686,7 @@ function saveSett() { var size = Object.keys(settingsJson).length; - console.log("[i]", "settingsJson length: " + size); + //console.log("[i]", "settingsJson length: " + size); if (size > 5) { jsonArrWrite(deviceList, "ip", getIP(selectedWs), "name", settingsJson.name); deviceList = deviceList; @@ -616,7 +704,7 @@ function saveMqtt() { var size = Object.keys(settingsJson).length; - console.log("[i]", "settingsJson length: " + size); + //console.log("[i]", "settingsJson length: " + size); if (size > 5) { wsSendMsg(selectedWs, "/sgnittes|" + JSON.stringify(settingsJson)); } else { @@ -667,7 +755,7 @@ input.page = config.page; input.topic = settingsJson.root + "/" + config.id + "-date"; input.descr = config.descr; - console.log("[i]", "topic ", widget.topic); + //console.log("[i]", "topic ", widget.topic); layout.push(input); } error = false; @@ -676,9 +764,9 @@ error = true; } } - if (error) console.log("[e]", "error, widget not found: " + setWidget); + if (error) console.log("[E]", "error, widget not found: " + setWidget); } - if (debug) console.log("[i] layout:", JSON.stringify(layout)); + //if (debug) console.log("[i] layout:", JSON.stringify(layout)); return layout; } @@ -710,7 +798,7 @@ clearParcedFlags(); - if (debug) console.log("[i]", "all app data cleared"); + //if (debug) console.log("[i]", "all app data cleared"); } function clearParcedFlags() { @@ -718,6 +806,7 @@ widgetsJsonParced = false; itemsJsonParced = false; layoutJsonArrayParced = false; + layoutReceivingCompleted = false; settingsJsonParced = false; errorsJsonParced = false; ssidJsonParced = false; @@ -780,43 +869,6 @@ }); } - //***********************************************************dashboard***************************************************************/ - function sortingLayout() { - //сортируем весь layout по алфавиту - layoutJson.sort(function (a, b) { - if (a.descr < b.descr) { - return -1; - } - if (a.descr > b.descr) { - return 1; - } - return 0; - }); - //формируем json всех карточек - pages = []; - 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, - }) - ), - ]; - }); - //сортируем карточки по алфавиту - pages.sort(function (a, b) { - if (a.page < b.page) { - return -1; - } - if (a.page > b.page) { - return 1; - } - return 0; - }); - } - //***********************************************************logging******************************************************************/ const addCoreMsg = (msg) => { if (coreMessages.length >= LOG_MAX_MESSAGES) { @@ -1032,7 +1084,7 @@ function onCheck() { let width = screen.width; - console.log("width", width); + //console.log("width", width); if (width < 900) { preventMove = true; } else { @@ -1196,7 +1248,7 @@ {#if devMode} - + diff --git a/src/pages/Dev.svelte b/src/pages/Dev.svelte index bd730cd..2e3feb8 100644 --- a/src/pages/Dev.svelte +++ b/src/pages/Dev.svelte @@ -19,6 +19,7 @@ export let settingsJson; export let configJson; export let itemsJson; + export let paramsJson;
@@ -37,4 +38,7 @@ + + +
diff --git a/src/widgets/Chart.svelte b/src/widgets/Chart.svelte index 258d0f4..24f30eb 100644 --- a/src/widgets/Chart.svelte +++ b/src/widgets/Chart.svelte @@ -8,50 +8,50 @@ export let widget; - //необходимые по умолчанию значения из за тупости библиотеки - let labels = [0, 0]; - let values = [0, 0]; - let datachart = { - labels: labels, + labels: [0, 0], datasets: [ { name: widget.descr, - values: values, + values: [0, 0], }, ], }; + let prevStatus = {}; + + let firstTime = true; + + let labels = []; + let values = []; + let axisOptions = { xAxisMode: "tick", xIsSeries: true }; let lineOptions; - - let collectingDataArray = []; - let prevSatus = []; - if (widget.pointRadius == "0") { lineOptions = { regionFill: 1, hideDots: 1, spline: 1 }; } else { lineOptions = { regionFill: 1, dotSize: 3, spline: 1 }; } - $: widget.status, collectDataToArr(); + $: widget, collectDataToArr(); function collectDataToArr() { - if (widget.status && Array.isArray(widget.status)) { - //отсекаем лишние события изменения переменной widget - if (prevSatus !== widget.status) { - console.log("[i]", "collecting chart data to array, topic:", widget.topic); - let incomingDataArr = widget.status; + if (prevStatus !== widget.status && !firstTime) { + if (Array.isArray(widget.status)) { + console.log("[i]", "======================================================="); + prevStatus = widget.status; - console.log("[i]", "array:", incomingDataArr); - - collectingDataArray = [...collectingDataArray, ...incomingDataArr]; - - for (let i = 0; i < collectingDataArray.length; i++) { - labels[i] = getHHMM(collectingDataArray[i].x); - values[i] = [collectingDataArray[i].y1]; + for (let i = 0; i < widget.status.length; i++) { + if (i === 0) { + labels[i] = getDDMM(widget.status[i].x); + } else { + labels[i] = getHHMM(widget.status[i].x); + } + values[i] = [widget.status[i].y1]; } + //console.log("[i]", JSON.stringify(widget.status)); + if (widget.maxCount == 0 || widget.maxCount == "0") { clearCart(); console.log("[i]", "clear cart data"); @@ -67,12 +67,9 @@ }, ], }; - prevSatus = widget.status; - datachart = datachart; } - } else { - console.log("[i]", "skipping event, topic:", widget.topic); } + firstTime = false; } function getHHMM(timestamp) { @@ -80,16 +77,26 @@ return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2); } + function getDDMM(timestamp) { + var date = new Date(timestamp * 1000); + let day = date.getDate(); + let month = date.getMonth() + 1; + let year = date.getFullYear(); + return day + "." + month + "." + year; + } + function clearCart() { - collectingDataArray = []; - labels = [0, 0]; - values = [0, 0]; + widget.status = []; + + labels = []; + values = []; + datachart = { - labels: [0], + labels: [0, 0], datasets: [ { name: widget.descr, - values: [0], + values: [0, 0], }, ], }; @@ -100,6 +107,5 @@ -
- -
+ +