updating packages

package.json

@@ -12,7 +12,7 @@
     "@rollup/plugin-node-resolve": "^11.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
-    "postcss-load-config": "^3.1.4",
+    "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "rollup": "^2.79.1",
@@ -21,13 +21,13 @@
     "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.59.1",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^2.2.19",
-    "tinro": "^0.5.12"
+    "svelte-preprocess": "^5.0.4",
+    "tailwindcss": "^3.3.2",
+    "tinro": "^0.6.12"
   },
   "dependencies": {
-    "daisyui": "^1.25.4",
-    "sirv-cli": "^1.0.14",
+    "daisyui": "^3.1.1",
+    "sirv-cli": "^2.0.2",
     "svelte-frappe-charts": "^1.10.0"
   }
 }

src/App.svelte

@@ -18,7 +18,7 @@
   import Progress from "./components/Progress.svelte";
   import Card from "./components/Card.svelte";
 
-  //import Modal from "./components/Modal.svelte";
+  import ModalPass from "./components/ModalPass.svelte";
   import DashboardPage from "./pages/Dashboard.svelte";
   import ConfigPage from "./pages/Config.svelte";
   import ConnectionPage from "./pages/Connection.svelte";
@@ -44,7 +44,7 @@
   let rebootTimer;
   let opened = false;
   let preventMove = false;
-  const blobDebug = true;
+  const blobDebug = false;
   const devMode = true;
 
   let timeout = reconnectTimeout / 1000;
@@ -58,7 +58,7 @@
   //Flags
   let firstDevListRequest = true;
   let showInput = false;
-  let showModalFlag = false;
+  let authorization = false;
   let showDropdown = true;
 
   let showAwaitingCircle = false;
@@ -182,7 +182,6 @@
 
   //****************************************************web sockets section******************************************************/
   function connectToAllDevices() {
-    console.log("[i]", "[ws]", "connectToAllDevices", deviceList);
     getSelectedDeviceData(selectedWs);
     for (let i = 0; i < deviceList.length; i++) {
       deviceList[i].ws = i;
@@ -442,7 +441,7 @@
       addCoreMsg(txt);
     }
 
-    onParced();
+    await onParced();
   }
 
   async function parseAllBlob(blob, ws) {
@@ -1203,10 +1202,6 @@
   }
 
   //**********************************************************modal*************************************************************************/
-  function showModal() {
-    showModalFlag = !showModalFlag;
-  }
-
   function onCheck() {
     let width = screen.width;
     //console.log("width", width);
@@ -1338,12 +1333,25 @@
     console.log(json);
     wsSendMsg(selectedWs, "/order|" + JSON.stringify(json));
   }
+
+  function checkPassword(pass) {
+    if (pass === settingsJson.passw) {
+      settingsJson.pass = false;
+      authorization = false;
+      saveSett();
+    }
+  }
 </script>
 
 <div class="flex flex-col h-screen bg-gray-50">
   {#if showAwaitingCircle}
     <Progress />
   {/if}
+
+  <!--{#if authorization}
+    <ModalPass checkPassword={(pass) => checkPassword(pass)} />
+  {/if}-->
+
   <header class="h-10 w-full bg-gray-100 overflow-auto shadow-md">
     <div class="flex content-center items-center justify-end">
       {#if showDropdown}

src/components/Modal.svelte

@@ -25,7 +25,7 @@
             </div>
           </div>
           <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            {#if !onlyCloseButton}
+            {#if onlyCloseButton}
               <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button>
             {/if}
             <button on:click={() => (show = false)} type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Закрыть</button>

src/components/ModalPass.svelte

@@ -0,0 +1,36 @@
+<script>
+  export let show = true;
+  export let pass;
+  export let checkPassword = (pass) => {};
+
+  import Card from "../components/Card.svelte";
+</script>
+
+<div class="modal">
+  {#if show}
+    <!-- This example requires Tailwind CSS v2.0+ -->
+    <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" />
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <div class="inline-block align-bottom bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+          <Card>
+            <div class="flex items-center mb-4">
+              <div class="w-1/2">
+                <h2 class="pr-4 text-gray-500 font-bold text-xxl truncate">Введите пароль</h2>
+              </div>
+              <div class="flex justify-center w-1/2">
+                <input bind:value={pass} class="ipt-rnd text-center focus:border-indigo-500" />
+              </div>
+            </div>
+            <div class="grd-2col1">
+              <button class="btn-lg">{"Закрыть"}</button>
+              <button class="btn-lg" on:click={() => checkPassword(pass)}>{"Вход"}</button>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

src/pages/Connection.svelte

@@ -84,7 +84,7 @@
       <Card title="Подключение к MQTT">
         <div class="crd-itm-psn">
           <div class="w-4/6">
-            <p class="wgt-dscr-stl truncate">Состояние подключения</p>
+            <p class="wgt-dscr-stl text-rose-500 truncate">Состояние подключения</p>
           </div>
           <div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
             {#if errorsJson.mqtt === "e5"}

src/pages/System.svelte

@@ -443,6 +443,32 @@
           </div>
         {/if}
 
+        <!--password-->
+        <!--<div class="flex mb-2 h-6 items-center">
+          <div class="w-2/3">
+            <p class="pr-4 text-gray-500 font-bold text-sm truncate">Включить защиту паролем</p>
+          </div>
+
+          <div class="flex justify-center w-1/3">
+            <label for="pass" class="items-center cursor-pointer">
+              <div class="relative">
+                <input bind:checked={settingsJson.pass} on:change={() => (paramsBeenChanged = true)} id="pass" type="checkbox" class="sr-only" />
+                <div class="block {settingsJson.pass ? 'bg-blue-600' : 'bg-gray-600'} w-10 h-6 rounded-full shadow-lg" />
+                <div class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div class="flex mb-2 h-6 items-center">
+          <div class="w-2/3">
+            <p class="pr-4 text-gray-500 font-bold text-sm truncate">Пароль защиты веб интерфейса</p>
+          </div>
+          <div class="flex justify-center w-1/3">
+            <input bind:value={settingsJson.passw} on:change={() => (paramsBeenChanged = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" />
+          </div>
+        </div>-->
+
         <!--control-->
         <!--<div class="grd-2col1">-->
         {#if paramsBeenChanged}
@@ -456,8 +482,8 @@
       </Card>
 
       <!--LOG-->
-      <Card title="Лог" class="z-50">
-        <div class="h-96 overflow-y-auto">
+      <Card title="Лог">
+        <div class="overflow-y-auto" style={{ width: `$200px` }}>
           {#each coreMessages as message, i}
             <div class={message.msg.toString().includes("[E]") || message.msg.toString().includes("[!]") ? "text-xs text-red-500" : "text-xs text-black"}>{message.msg}</div>
           {/each}

src/widgets/Anydata.svelte

@@ -3,7 +3,7 @@
   export let value;
   value = value;
 
-  $: widget.status, blink();
+  $: widget.status, blink(), colorSet();
 
   let prevStatus;
 
@@ -12,7 +12,7 @@
   function blink() {
     if (widget.status) {
       if (widget.status != prevStatus) {
-        setTimeout(stopBlink, 500);
+        setTimeout(stopBlink, 300);
         green = true;
       }
       prevStatus = widget.status;
@@ -22,17 +22,35 @@
   function stopBlink() {
     green = false;
   }
+
+  let setedColor;
+
+  function colorSet() {
+    if (widget.color) {
+      if (widget.color.length > 1) {
+        for (let i = 0; i < widget.color.length; i++) {
+          if (i > 0) {
+            if (widget.status > widget.color[i - 1].level && widget.status < widget.color[i].level) {
+              setedColor = widget.color[i].value;
+              console.log("[i]", "color: " + setedColor);
+              return;
+            }
+          }
+        }
+      }
+    }
+  }
 </script>
 
 <div class="crd-itm-psn">
   <div class="w-2/3">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
+    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
   </div>
   <div class="flex justify-end w-1/3">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
+    <label class="wgt-adt-stl text-{setedColor}-500 {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
+    <label class="wgt-adt-stl text-{setedColor}-500 {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
   </div>
 </div>

src/widgets/Chart.svelte

@@ -111,7 +111,7 @@
 
 <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>
+  <label class="inline-block italic align-top text-center text-{widget.descrColor ? widget.descrColor : 'gray'}-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
 </div>
 
-<Chart data={datachart} type={type} lineOptions={lineOptions} axisOptions={axisOptions} height="200" padding="0px" />
+<Chart data={datachart} type={type} lineOptions={lineOptions} axisOptions={axisOptions} height="150" padding="0px" />

src/widgets/Input.svelte

@@ -53,7 +53,7 @@
 <div class="crd-itm-psn">
   <div class="w-2/3">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
+    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
   </div>
   <div class="flex justify-end w-1/3">
     {#if widget.type == "number"}

src/widgets/Range.svelte

@@ -1,7 +1,6 @@
 <script>
   export let widget;
   export let wsPush = (ws, topic, status) => {};
-  export let val = 0;
 
   function map(val, in_min, in_max, out_min, out_max) {
     return Math.round(((val - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min);
@@ -9,20 +8,35 @@
 
   $: widget.status, calc();
 
+  let minForMCU = widget.min;
+  let maxForMCU = widget.max;
+
+  let valueForUser;
+
   function calc() {
-    val = map(widget.status, 0, 1024, widget.min, widget.max);
+    valueForUser = Math.round(widget.status);
+    //если коэффициент масштабирования присутствует
+    if (widget.k) {
+      if (widget.k !== 0) {
+        //тогда приведем диапазоны
+        minForMCU = widget.min / widget.k;
+        maxForMCU = widget.max / widget.k;
+        valueForUser = map(widget.status, minForMCU, maxForMCU, widget.min, widget.max);
+      }
+    }
   }
 </script>
 
-<!--<div class="text-center">-->
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr} {val} {widget.after}</label>
-<!--</div>-->
+<!--ползунок работает в режиме для микроконтроллера-->
+<div class="text-center">
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr} {valueForUser} {widget.after} </label>
+</div>
 <input
   bind:value={widget.status}
   on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))}
   class="form-range range-secondary w-full h-2 p-0 rounded-lg {widget.sent ? 'bg-red-300' : 'bg-gray-300'} 
   focus:outline-none appearance-none"
   type="range"
-  min="0"
-  max="1024" />
+  min={minForMCU}
+  max={maxForMCU} />

src/widgets/Toggle.svelte

@@ -26,14 +26,14 @@
 <div class="crd-itm-psn">
   <div class="w-2/3">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
+    <label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
   </div>
   <div class="flex justify-end w-1/3">
     <label for={widget.topic} class="items-center cursor-pointer">
       <div class="relative">
         <input bind:checked={toggleState} on:change={() => (changeValue(), wsPush(widget.ws, widget.topic, widget.status))} id={widget.topic} type="checkbox" class="sr-only" />
         <div class="block {toggleState ? 'bg-blue-600' : 'bg-gray-600'} w-10 h-6 rounded-full shadow-lg" />
-        <div class="dot {widget.sent ? 'bg-red-300' : 'bg-gray-100'} absolute left-1 top-1  w-4 h-4 rounded-full transition shadow-lg" />
+        <div class="dot {widget.sent ? 'bg-red-300' : 'bg-gray-100'} absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
       </div>
     </label>
   </div>

tailwind.config.js

@@ -1,12 +1,20 @@
-// tailwind.config.js
+//https://stackoverflow.com/questions/70704377/default-colors-given-in-tailwind-documentation-are-not-working
+const colors = require("./node_modules/tailwindcss/colors");
+
+delete colors["lightBlue"];
+delete colors["warmGray"];
+delete colors["trueGray"];
+delete colors["coolGray"];
+delete colors["blueGray"];
+
 module.exports = {
   purge: {
     enabled: !process.env.ROLLUP_WATCH,
     //mode: 'all',
     //preserveHtmlElements: false,
-    content: ['./public/index.html', './src/**/*.svelte'],
+    content: ["./public/index.html", "./src/**/*.svelte"],
     options: {
-      defaultExtractor: content => [
+      defaultExtractor: (content) => [
         ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
         ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
       ],
@@ -15,7 +23,15 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // you can either spread `colors` to apply all the colors
+        ...colors,
+        // or add them one by one and name whatever you want
+        //amber: colors.amber,
+        //emerald: colors.emerald,
+      },
+    },
   },
   variants: {
     extend: {},
@@ -23,19 +39,19 @@ module.exports = {
   plugins: [],
   theme: {
     fontSize: {
-      'xxs': '.5rem',
-      'xs': '.75rem',
-      'sm': '.875rem',
-      'tiny': '.875rem',
-      'base': '1rem',
-      'lg': '1.125rem',
-      'xl': '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-      '7xl': '5rem',
-    }
-  }
-}
+      xxs: ".5rem",
+      xs: ".75rem",
+      sm: ".875rem",
+      tiny: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+    },
+  },
+};