From a1a78f8b7b475f7b57d3350d27eb4d75ac986ee4 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <67171972+IoTManagerProject@users.noreply.github.com>
Date: Sun, 6 Feb 2022 18:19:38 +0100
Subject: [PATCH] ghjdthrf

---
 src/App.svelte              |  24 ++++----
 src/Connection.svelte       | 109 ++++++++++++++++++++++++++++++++++++
 src/components/Alarm.svelte |  25 +++++++++
 src/components/Card.svelte  |  15 +++++
 4 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 src/Connection.svelte
 create mode 100644 src/components/Alarm.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 70d07f8..91ea34a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -16,6 +16,7 @@
   //});
 
   import Card from "./components/Card.svelte";
+  import Alarm from "./components/Alarm.svelte";
   import Modal from "./components/Modal.svelte";
   import Input from "./widgets/Input.svelte";
   import Toggle from "./widgets/Toggle.svelte";
@@ -97,8 +98,8 @@
     {
       name: "Устройство 1",
       id: "987654321",
-      ip: myip,
-      //ip: "192.168.8.196",
+      //ip: myip,
+      ip: "192.168.88.235",
       status: false,
     },
   ];
@@ -234,7 +235,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);//
+          if (debug) console.log("[i]", getIP(ws), "msg received", data); //
           //сборщик statusJson сообщений======================================
           if (data.includes("status")) {
             if (IsJsonParse(data)) {
@@ -963,7 +964,12 @@
                     <input bind:value={settingsJson.routerpass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
                   </div>
                 </div>
-                <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
+                {#if settingsJson.pass_status === 1}
+                  <div class="grd-1cols">
+                    <Alarm title="Введен неправильный пароль" />
+                  </div>
+                {/if}
+                <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button>
               </Card>
               <Card title="Подключение к MQTT брокеру">
                 <div class="crd-itm-psn">
@@ -1006,7 +1012,7 @@
                     <input bind:value={settingsJson.mqttPass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
                   </div>
                 </div>
-                <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
+                <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
               </Card>
             </div>
           </Route>
@@ -1085,14 +1091,6 @@
       @apply grid grid-cols-1 justify-items-center;
     }
     /*=============================================card and items inside===============================================*/
-    /* 1. paddig and style for card */
-    .crd {
-      @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg border border-gray-100;
-    }
-    /* 2. style for card header */
-    .crd-hdr {
-      @apply text-center text-lg text-gray-500 font-bold pb-4;
-    }
     /* 3. card items positioning*/
     .crd-itm-psn {
       @apply flex mb-3 h-8 items-center;
diff --git a/src/Connection.svelte b/src/Connection.svelte
new file mode 100644
index 0000000..e052829
--- /dev/null
+++ b/src/Connection.svelte
@@ -0,0 +1,109 @@
+<script>
+  import Card from "./components/Card.svelte";
+  import Alarm from "./components/Alarm.svelte";
+  export let settingsJson;
+  export let ssidJson;
+
+  export let ssidDropdownClick = () => {};
+  export let saveSettings = () => {};
+</script>
+
+<div class="grd-2cols">
+  <Card title="Подключение к WiFi роутеру">
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Название устройства</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.name} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Точка доступа</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.apssid} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Пароль точки доступа</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.appass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Название wifi сети</p>
+      </div>
+      <div class="wgt-w">
+        <select class="wgt-ipt text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidDropdownClick()}>
+          {#each Object.entries(ssidJson) as [num, ssid]}
+            <option value={ssid}>
+              {ssid}
+            </option>
+          {/each}
+        </select>
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Пароль</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.routerpass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    {#if settingsJson.pass_status === 1}
+      <div class="grd-1cols">
+        <Alarm title="Введен неправильный пароль" />
+      </div>
+    {/if}
+    <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button>
+  </Card>
+  <Card title="Подключение к MQTT брокеру">
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Название сервера</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.mqttServer} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Порт</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.mqttPort} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Префикс</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.mqttPrefix} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Имя пользователя</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.mqttUser} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <div class="crd-itm-psn">
+      <div class="wgt-dscr-w">
+        <p class="wgt-dscr-stl">Пароль</p>
+      </div>
+      <div class="wgt-w">
+        <input bind:value={settingsJson.mqttPass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
+      </div>
+    </div>
+    <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
+  </Card>
+</div>
diff --git a/src/components/Alarm.svelte b/src/components/Alarm.svelte
new file mode 100644
index 0000000..73a7786
--- /dev/null
+++ b/src/components/Alarm.svelte
@@ -0,0 +1,25 @@
+<script>
+  export let title;
+</script>
+
+<div class="alm">
+  {#if title}
+    <h1 class="alm-hdr">{title}</h1>
+  {/if}
+  <slot />
+</div>
+
+<style lang="postcss" global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .alm-hdr {
+      @apply text-center text-base text-gray-500 font-bold pb-0;
+    }
+    .alm {
+      @apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-red-100 shadow-md lg:shadow-lg border border-gray-300 rounded;
+    }
+  }
+</style>
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 49c0f3e..83d6c3d 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -8,3 +8,18 @@
   {/if}
   <slot />
 </div>
+
+<style lang="postcss" global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .crd {
+      @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg border border-gray-100;
+    }
+    .crd-hdr {
+      @apply text-center text-lg text-gray-500 font-bold pb-4;
+    }
+  }
+</style>