ввод даты

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.3</title>
+    <title>IoT Manager 4.2.4</title>
 
     <link rel="icon" type="image/png" href="/favicon.ico" />
     <link rel="stylesheet" href="/build/bundle.css" />

src/App.svelte

@@ -20,6 +20,7 @@
   import ConnectionPage from "./pages/Connection.svelte";
   import ListPage from "./pages/List.svelte";
   import SystemPage from "./pages/System.svelte";
+  import DevPage from "./pages/Dev.svelte";
 
   //import UtilitiesPage from "./pages/Utilities.svelte";
   //import LogPage from "./pages/Log.svelte";
@@ -37,13 +38,12 @@
   let updatingTimeout = 80000;
   let opened = false;
   let preventMove = false;
-  let showWidjetJson = false;
-  let devMode = false;
+  let devMode = true;
 
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
   let myip = document.location.hostname;
-  if (devMode) myip = "192.168.1.196";
+  if (devMode) myip = "192.168.1.107";
 
   //Flags
   let firstDevListRequest = true;
@@ -165,8 +165,13 @@
 
   function handleNavigation() {
     console.log("[i]", "handle navigation");
-    clearData();
+
     currentPageName = $router.path.toString();
+
+    //не нужно очищать переменные когда переходим на страницу разработчика
+    if (currentPageName != "/dev") {
+      clearData();
+    }
     currentPageName = currentPageName + "|";
     console.log("[i]", "user on page:", currentPageName);
 
@@ -509,6 +514,7 @@
     for (const [key, value] of Object.entries(paramsJson)) {
       for (let i = 0; i < devLayout.length; i++) {
         let topic = devLayout[i].topic;
+        if (topic) {
           devLayout[i].ws = ws;
           topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length);
           if (key === topic) {
@@ -519,6 +525,7 @@
         }
       }
     }
+  }
 
   function udateStatusOfAllWidgets() {
     for (const [key, value] of Object.entries(paramsJson)) {
@@ -614,6 +621,17 @@
     wsSendMsg(selectedWs, "/mqtt|");
   }
 
+  let input = {};
+
+  input = {
+    name: "inputDate",
+    descr: "Выберите дату",
+    widget: "input",
+    size: "small",
+    color: "orange",
+    type: "date",
+  };
+
   function generateLayout() {
     let layout = [];
     for (let i = 0; i < configJson.length; i++) {
@@ -629,6 +647,11 @@
           //widget.ws = selectedWs;
           widget.topic = settingsJson.root + "/" + config.id;
           layout.push(widget);
+          if (widget.widget === "chart") {
+            input.page = config.page;
+            input.topic = settingsJson.root + "/" + config.id + "-date";
+            layout.push(input);
+          }
           error = false;
           break;
         } else {
@@ -659,7 +682,7 @@
 
     settingsJson = {};
     errorsJson = {};
-    coreMessages = [];
+    //coreMessages = [];
 
     dashReady = false;
     configReady = false;
@@ -1121,6 +1144,11 @@
       <li>
         <a class="menu__item" href="/system">{"Системные"}</a>
       </li>
+      {#if devMode}
+        <li>
+          <a class="menu__item" href="/dev">{"Разработчик"}</a>
+        </li>
+      {/if}
     </ul>
   </nav>
 
@@ -1132,10 +1160,6 @@
         {:else}
           <Route path="/">
             <DashboardPage show={dashReady} layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
-            <!--<button class="btn-lg" on:click={() => createFinalLayout()}>{"Test"}</button>-->
-            {#if showWidjetJson}
-              <textarea value={JSON.stringify(layoutJson)} class="ipt-big h-40 w-full" />
-            {/if}
           </Route>
           <Route path="/config">
             <ConfigPage show={configReady} configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} cleanLogs={() => cleanLogs()} rebootEsp={() => rebootEsp()} scenarioJson={scenarioJson} />
@@ -1149,6 +1173,11 @@
           <Route path="/system">
             <SystemPage show={systemReady} errorsJson={errorsJson} settingsJson={settingsJson} saveSett={() => saveSett()} cleanLogs={() => cleanLogs()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} versionsList={versionsList} bind:choosingVersion startUpdate={() => startUpdate()} coreMessages={coreMessages} />
           </Route>
+          {#if devMode}
+            <Route path="/dev">
+              <DevPage show={systemReady} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} />
+            </Route>
+          {/if}
         {/if}
       </div>
     </ul>

src/pages/About.svelte

@@ -1,14 +0,0 @@
-<script>
-  import Card from "../components/Card.svelte";
-
-  export let wigetsUpdate;
-  export let layoutJson;
-
-  export let showModal = () => {};
-  export let syntaxHighlight = (json) => {};
-</script>
-
-<button on:click={() => showModal()} type="button"> Toggle modal </button>
-<Card title="Редактор JSON">
-  <textarea on:input={wigetsUpdate} rows="10" class="ipt-big w-full" id="text1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
-</Card>

src/pages/Dashboard.svelte

@@ -17,7 +17,7 @@
 
 {#if show}
   <div class="grd-3col1">
-    {#if layoutJson === []}
+    {#if !layoutJson}
       <Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
     {/if}
     {#each pages as pagesName, p}

src/pages/Dev.svelte

@@ -0,0 +1,40 @@
+<script>
+  import Card from "../components/Card.svelte";
+
+  const syntaxHighlight = (json) => {
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 4);
+    } catch (e) {
+      return json;
+    }
+    json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+      return match;
+    });
+    return json;
+  };
+
+  export let errorsJson;
+  export let layoutJson;
+  export let settingsJson;
+  export let configJson;
+  export let itemsJson;
+</script>
+
+<div class="grd-3col1">
+  <Card title="layoutJson">
+    <textarea on:input={layoutJson} rows="23" cols="50" id="1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
+  </Card>
+  <Card title="errorsJson">
+    <textarea on:input={errorsJson} rows="23" cols="50" id="2">{syntaxHighlight(JSON.stringify(errorsJson))}</textarea>
+  </Card>
+  <Card title="settingsJson">
+    <textarea on:input={settingsJson} rows="23" cols="50" id="3">{syntaxHighlight(JSON.stringify(settingsJson))}</textarea>
+  </Card>
+  <Card title="configJson">
+    <textarea on:input={configJson} rows="23" cols="50" id="3">{syntaxHighlight(JSON.stringify(configJson))}</textarea>
+  </Card>
+  <Card title="itemsJson">
+    <textarea on:input={itemsJson} rows="23" cols="50" id="3">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
+  </Card>
+</div>

src/widgets/Chart.svelte

@@ -70,6 +70,8 @@
   }
 </script>
 
+<div class="text-center">
   <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
-<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />
+  <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} />