графики с выбором даты

package-lock.json

@@ -1521,9 +1521,9 @@
       }
     },
     "svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA=="
+      "version": "3.50.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA=="
     },
     "svelte-frappe-charts": {
       "version": "1.9.2",

package.json

@@ -20,7 +20,7 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.1",
     "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^2.2.19",
     "tinro": "^0.5.12"

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>IoT Manager 4.2.4</title>
+    <title>IoT Manager 4.2.5</title>
 
     <link rel="icon" type="image/png" href="/favicon.ico" />
     <link rel="stylesheet" href="/build/bundle.css" />

src/App.svelte

@@ -38,12 +38,12 @@
   let updatingTimeout = 80000;
   let opened = false;
   let preventMove = false;
-  let devMode = true;
+  let devMode = false;
 
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
   let myip = document.location.hostname;
-  if (devMode) myip = "192.168.1.107";
+  if (devMode) myip = "192.168.1.101";
 
   //Flags
   let firstDevListRequest = true;
@@ -527,26 +527,13 @@
     }
   }
 
-  function udateStatusOfAllWidgets() {
-    for (const [key, value] of Object.entries(paramsJson)) {
-      for (let i = 0; i < layoutJson.length; i++) {
-        let topic = layoutJson[i].topic;
-        topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length);
-        if (key === topic) {
-          console.log("[i]", "value " + topic + " updated");
-          layoutJson[i].status = value;
-          break;
-        }
-      }
-    }
-  }
-
   //данная функция обновляет статусы всех виджетов хранящихся в layoutJson
   function udateStatusOfWidget(newStatusJson) {
     for (let i = 0; i < layoutJson.length; i++) {
       let topic = layoutJson[i].topic;
       if (topic === newStatusJson.topic) {
-        layoutJson[i].status = newStatusJson.status;
+        layoutJson[i] = jsonConcat(layoutJson[i], newStatusJson);
+        //layoutJson[i].status = newStatusJson.status;
         //получен ответ - выключаем красный цвет
         layoutJson[i].sent = false;
         break;
@@ -554,6 +541,13 @@
     }
   }
 
+  function jsonConcat(o1, o2) {
+    for (var key in o2) {
+      o1[key] = o2[key];
+    }
+    return o1;
+  }
+
   async function onParced() {
     if (currentPageName === "/|") {
       clearParcedFlags();

src/widgets/Chart.svelte

@@ -1,20 +1,13 @@
 <script>
   import Chart from "svelte-frappe-charts";
+  import { onMount } from "svelte";
+
+  onMount(async () => {
+    console.log("[i]", "chart component mounted");
+  });
 
   export let widget;
 
-  let axisOptions = { xAxisMode: "tick", xIsSeries: true };
-  let lineOptions;
-
-  if (widget.pointRadius == "0") {
-    lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
-  } else {
-    lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
-  }
-
-  let collectingDataArray = [];
-  let prevSatus = [];
-
   //необходимые по умолчанию значения из за тупости библиотеки
   let labels = [0, 0];
   let values = [0, 0];
@@ -29,6 +22,18 @@
     ],
   };
 
+  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();
 
   function collectDataToArr() {
@@ -38,7 +43,7 @@
         console.log("[i]", "collecting chart data to array, topic:", widget.topic);
         let incomingDataArr = widget.status;
 
-        console.log("[i]", "array:", incomingDataArr);
+        //console.log("[i]", "array:", incomingDataArr);
 
         collectingDataArray = [...collectingDataArray, ...incomingDataArr];
 
@@ -47,6 +52,12 @@
           values[i] = [collectingDataArray[i].y1];
         }
 
+        if (widget.maxCount == 0 || widget.maxCount == "0") {
+          clearCart();
+          console.log("[i]", "clear cart data");
+          return;
+        }
+
         datachart = {
           labels: labels,
           datasets: [
@@ -68,10 +79,22 @@
     var date = new Date(timestamp * 1000);
     return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
   }
+
+  function clearCart() {
+    datachart = {
+      labels: [0],
+      datasets: [
+        {
+          name: widget.descr,
+          values: [0],
+        },
+      ],
+    };
+  }
 </script>
 
 <div class="text-center">
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label class="inline-block italic align-top text-center text-gray-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
 </div>
-<Chart class="h-24" data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />
+<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />

src/widgets/Input.svelte

@@ -1,6 +1,53 @@
 <script>
   export let widget;
   export let wsPush = (ws, topic, status) => {};
+  //let newFormat;
+
+  //$: widget.status, calc();
+
+  function selectFromMarkerToMarker(str, tofind, number) {
+    if (str.indexOf(tofind) == -1) {
+      return "not found";
+    }
+    str += tofind;
+    let i = 0;
+    do {
+      if (i == number) {
+        return selectToMarker(str, tofind);
+      }
+      str = deleteBeforeDelimiter(str, tofind);
+      i++;
+    } while (str.length != 0);
+
+    return "not found";
+  }
+
+  function selectToMarker(str, found) {
+    let p = str.indexOf(found);
+    return str.substring(0, p);
+  }
+
+  function deleteBeforeDelimiter(str, found) {
+    let p = str.indexOf(found) + found.length;
+    return str.substring(p);
+  }
+
+  let bindValue;
+
+  //данная функция вызывается когда в вебе поменяли значение и его нужно отправить в сокеты
+  //а также периписать в переменной виджета
+  function changeFomatTo() {
+    widget.status = selectFromMarkerToMarker(bindValue, "-", 2) + "." + selectFromMarkerToMarker(bindValue, "-", 1) + "." + selectFromMarkerToMarker(bindValue, "-", 0);
+    wsPush(widget.ws, widget.topic, widget.status);
+  }
+
+  $: widget.status, changeFomatFrom();
+
+  //данная функция вызывается когда кто то из вне переписал переменную widget
+  function changeFomatFrom() {
+    let value = widget.status;
+    bindValue = selectFromMarkerToMarker(value, ".", 2) + "-" + selectFromMarkerToMarker(value, ".", 1) + "-" + selectFromMarkerToMarker(value, ".", 0);
+  }
 </script>
 
 <div class="crd-itm-psn">
@@ -16,7 +63,7 @@
       <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
     {/if}
     {#if widget.type == "date"}
-      <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
+      <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), changeFomatTo())} bind:value={bindValue} type="date" />
     {/if}
     {#if widget.type == "time"}
       <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />