From af1eaee5abfc1604514a29019049cb1d51f6e6e0 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Tue, 28 Dec 2021 23:55:14 +0100
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B8=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.svelte             | 136 ++++++++++++++++++-------------------
 src/components/Card.svelte |   4 +-
 src/widgets/Anydata.svelte |  12 ++--
 src/widgets/Input.svelte   |  16 ++---
 src/widgets/Toggle.svelte  |   8 +--
 5 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d1288c0..456a31f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -626,7 +626,7 @@
   <ul class="menu__main">
     <div class="bg-cover bg-gray-50 pt-8 px-4">
       <Route path="/">
-        <div class="cards-grid">
+        <div class="crd-grd">
           {#each pages as pagesName, i}
             <Card title={pagesName.page}>
               {#each wigets as widget, i}
@@ -646,57 +646,57 @@
           {/each}
 
           <Card title="Редактор JSON">
-            <textarea on:input={wigetsUpdate} rows="10" class="json-input w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
+            <textarea on:input={wigetsUpdate} rows="10" class="jsn-ipt w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
           </Card>
         </div>
       </Route>
       <Route path="/config">
-        <div class="cards-grid-inline">
+        <div class="crd-grd-ln">
           <Card>
-            <!--<select class="long-select">{"Выберите элемент"}</select>-->
-            <!--<select class="long-select">{"Выберите пресет"}</select>-->
+            <!--<select class="slct-lg">{"Выберите элемент"}</select>-->
+            <!--<select class="slct-lg">{"Выберите пресет"}</select>-->
             <table class="table-fixed w-full">
               <thead class="bg-gray-50">
-                <tr>
-                  <th class="table-head-element text-center">Тип</th>
-                  <th class="table-head-element text-center">Id</th>
-                  <th class="table-head-element text-center">Виджет</th>
-                  <th class="table-head-element text-center">Вкладка</th>
-                  <th class="table-head-element text-center">Название</th>
-                  <th class="table-head-element text-center w-12"><button class="table-button bg-green-100 hover:bg-green-400" /></th>
-                  <th class="table-head-element text-center w-12" />
+                <tr class="tbl-txt-sz tbl-txt-p">
+                  <th class="tbl-hd">Тип</th>
+                  <th class="tbl-hd">Id</th>
+                  <th class="tbl-hd">Виджет</th>
+                  <th class="tbl-hd">Вкладка</th>
+                  <th class="tbl-hd">Название</th>
+                  <th class="tbl-hd w-12"><button class="btn-tbl bg-green-100 hover:bg-green-400" /></th>
+                  <th class="tbl-hd w-12" />
                 </tr>
               </thead>
               <tbody class="bg-white">
                 {#each config as element}
-                  <tr>
-                    <td class="table-body-element text-center">{element.subtype}</td>
-                    <td class="table-body-element text-center"><input bind:value={element.id} class="table-input w-full" type="text" /></td>
-                    <td class="table-body-element text-center"
-                      ><select class="table-input w-full" bind:value={selectedDeviceData}>
+                  <tr class="tbl-txt-sz tbl-txt-p">
+                    <td class="tbl-bdy">{element.subtype}</td>
+                    <td class="tbl-bdy"><input bind:value={element.id} class="tbl-ipt w-full" type="text" /></td>
+                    <td class="tbl-bdy"
+                      ><select class="tbl-ipt w-full" bind:value={selectedDeviceData}>
                         {#each deviceList as device}
                           <option value={device}>
                             {device.name}
                           </option>
                         {/each}
                       </select></td>
-                    <td class="table-body-element text-center"><input bind:value={element.page} class="table-input w-full" type="text" /></td>
-                    <td class="table-body-element text-center"><input bind:value={element.descr} class="table-input w-full" type="text" /></td>
-                    <td class="table-body-element text-center"><button on:click={() => (hideAllSubParams = !hideAllSubParams)} class="table-button bg-green-100 hover:bg-green-400" /></td>
-                    <td class="table-body-element text-center"><button class="table-button bg-red-100 hover:bg-red-400" /></td>
+                    <td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
+                    <td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
+                    <td class="tbl-bdy"><button on:click={() => (hideAllSubParams = !hideAllSubParams)} class="btn-tbl bg-green-100 hover:bg-green-400" /></td>
+                    <td class="tbl-bdy"><button class="btn-tbl bg-red-100 hover:bg-red-400" /></td>
                   </tr>
                   {#if !hideAllSubParams}
                     {#each Object.entries(element) as [key, param]}
                       {#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
-                        <tr>
+                        <tr class="tbl-txt-sz tbl-txt-p">
                           <td />
                           <td />
                           <td />
-                          <td class="table-sub-body-element text-right">
-                            <p class="table-sub-text">{key}</p>
+                          <td class="tbl-s-bdy text-right">
+                            <p class="tbl-s-txt">{key}</p>
                           </td>
-                          <td class="table-sub-body-element text-center">
-                            <input bind:value={element[key]} class="table-sub-input w-full" type="text" />
+                          <td class="tbl-s-bdy text-center">
+                            <input bind:value={element[key]} class="tbl-s-ipt w-full" type="text" />
                           </td>
                         </tr>
                       {/if}
@@ -706,12 +706,12 @@
                 {/each}
               </tbody>
             </table>
-            <button class="long-button" on:click={() => pushConfigToEsp()}>{"Сохранить"}</button>
+            <button class="btn-lg" on:click={() => pushConfigToEsp()}>{"Сохранить"}</button>
           </Card>
         </div>
       </Route>
       <Route path="/connection">
-        <div class="cards-grid">
+        <div class="crd-grd">
           <Card title="Подключение к WiFi роутеру" />
           <Card title="Подключение к MQTT брокеру" />
         </div>
@@ -731,34 +731,34 @@
       <Route path="/list">
         <Card title={"Список устройств"}>
           <table class="table-fixed w-full">
-            <thead class="bg-gray-50">
+            <thead class="bg-gray-50 ">
               <tr>
-                <th class="table-head-element text-center">Название устройства</th>
-                <th class="table-head-element text-center">IP адрес</th>
-                <th class="table-head-element text-center">Идентификатор</th>
-                <th class="table-head-element text-center">Состояние</th>
+                <th class="tbl-hd">Название устройства</th>
+                <th class="tbl-hd">IP адрес</th>
+                <th class="tbl-hd">Идентификатор</th>
+                <th class="tbl-hd">Состояние</th>
               </tr>
             </thead>
             <tbody class="bg-white">
               {#each deviceList as device}
                 <tr>
-                  <td class="table-body-element text-center">{device.name}</td>
-                  <td class="table-body-element text-center"><a href={"http://" + device.ip}>{device.ip}</a></td>
-                  <td class="table-body-element text-center">{device.id}</td>
-                  <td class="table-body-element text-center {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
+                  <td class="tbl-bdy">{device.name}</td>
+                  <td class="tbl-bdy"><a href={"http://" + device.ip}>{device.ip}</a></td>
+                  <td class="tbl-bdy">{device.id}</td>
+                  <td class="tbl-bdy {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
                 </tr>
               {/each}
               {#if showInput}
                 <tr>
-                  <td class="table-body-element text-center"><input bind:value={newDevice.name} class="table-input w-full" type="text" /></td>
-                  <td class="table-body-element text-center"><input bind:value={newDevice.ip} class="table-input w-full" type="text" /></td>
-                  <td class="table-body-element text-center"><input bind:value={newDevice.id} class="table-input w-full" type="text" /></td>
-                  <td class="table-body-element text-center" />
+                  <td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
+                  <td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
+                  <td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
+                  <td class="tbl-bdy" />
                 </tr>
               {/if}
             </tbody>
           </table>
-          <button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
+          <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
         </Card>
       </Route>
       <Route path="/about">
@@ -776,85 +776,85 @@
   @layer components {
     /*==================================================cards grid=====================================================*/
     /* grid for cards */
-    .cards-grid {
+    .crd-grd {
       @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center;
     }
     /* grid for cards for full screen */
-    .cards-grid-inline {
+    .crd-grd-ln {
       @apply grid grid-cols-1 justify-items-center;
     }
     /*=============================================card and items inside===============================================*/
     /* 1. paddig and style for card */
-    .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 */
-    .card-header {
+    .crd-hdr {
       @apply text-center text-lg text-gray-500 font-bold pb-4;
     }
     /* 3. card items positioning*/
-    .card-items-psn {
+    .crd-itm-psn {
       @apply flex mb-4 h-8 items-center;
     }
     /* 4. widget description width*/
-    .widget-descr-width {
+    .wgt-dscr-w {
       @apply w-2/3;
     }
     /* 5. widget descr style*/
-    .widget-descr-style {
+    .wgt-dscr-stl {
       @apply pr-4 text-gray-500 font-bold;
     }
     /* 6. widget width*/
-    .widget-width {
+    .wgt-w {
       @apply flex justify-end w-1/3;
     }
     /*====================================================others=====================================================*/
-    .btn-indigo {
+    .btn-i {
       @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
     }
-    .widget-input {
+    .wgt-ipt {
       @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right;
     }
-    .json-input {
+    .jsn-ipt {
       @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
     }
-    .widget-anydata-style {
+    .wgt-adt-stl {
       @apply text-center text-gray-500 font-bold;
     }
     /*====================================================table=====================================================*/
-    .table-head-element {
-      @apply px-2 py-2 break-words text-gray-500 font-bold;
+    .tbl-hd {
+      @apply text-center px-2 py-2 break-words text-gray-500 font-bold;
     }
-    .table-body-element {
-      @apply px-2 py-2 break-words;
+    .tbl-bdy {
+      @apply text-center px-2 py-2 break-words;
     }
-    .table-sub-body-element {
+    .tbl-s-bdy {
       @apply px-2 py-1 break-words;
     }
-    .table-input {
+    .tbl-ipt {
       @apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500;
     }
-    .table-sub-text {
+    .tbl-s-txt {
       @apply text-sm inline-block italic align-top text-right text-gray-500;
     }
-    .table-sub-input {
+    .tbl-s-ipt {
       @apply content-center h-6 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500 rounded-sm;
     }
-    .table-text-padding {
+    .tbl-txt-p {
       @apply px-2 py-0 sm:py-0 md:py-0 lg:py-1 xl:py-2 2xl:py-2;
     }
-    .table-text-sizing {
+    .tbl-txt-sz {
       @apply text-xxs sm:text-xxs md:text-base lg:text-base xl:text-base 2xl:text-base;
     }
     /*====================================================buttons=====================================================*/
-    .long-button {
+    .btn-lg {
       @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded;
     }
-    .table-button {
+    .btn-tbl {
       @apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300;
     }
     /*====================================================select=====================================================*/
-    .long-select {
+    .slct-lg {
       @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-1/4 mb-6 border border-gray-300 rounded;
     }
   }
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 3fb3c71..49c0f3e 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -2,9 +2,9 @@
   export let title;
 </script>
 
-<div class="card">
+<div class="crd">
   {#if title}
-    <h1 class="card-header">{title}</h1>
+    <h1 class="crd-hdr">{title}</h1>
   {/if}
   <slot />
 </div>
diff --git a/src/widgets/Anydata.svelte b/src/widgets/Anydata.svelte
index 49f5f8a..6af47d7 100644
--- a/src/widgets/Anydata.svelte
+++ b/src/widgets/Anydata.svelte
@@ -4,15 +4,15 @@
   value = value;
 </script>
 
-<div class="card-items-psn">
-  <div class="widget-descr-width">
+<div class="crd-itm-psn">
+  <div class="wgt-dscr-w">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
+    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width">
+  <div class="wgt-w">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="widget-anydata-style">{!widget.status ? "" : widget.status}</label>
+    <label class="wgt-adt-stl">{!widget.status ? "" : widget.status}</label>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="widget-anydata-style">&nbsp;{!widget.after ? "" : widget.after}</label>
+    <label class="wgt-adt-stl">&nbsp;{!widget.after ? "" : widget.after}</label>
   </div>
 </div>
diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte
index 9437153..c453151 100644
--- a/src/widgets/Input.svelte
+++ b/src/widgets/Input.svelte
@@ -5,23 +5,23 @@
   value = value;
 </script>
 
-<div class="card-items-psn">
-  <div class="widget-descr-width">
+<div class="crd-itm-psn">
+  <div class="wgt-dscr-w">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
+    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width">
+  <div class="wgt-w">
     {#if widget.type == "number"}
-      <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
+      <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
     {/if}
     {#if widget.type == "text"}
-      <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
+      <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
     {/if}
     {#if widget.type == "date"}
-      <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
+      <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
     {/if}
     {#if widget.type == "time"}
-      <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />
+      <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />
     {/if}
   </div>
 </div>
diff --git a/src/widgets/Toggle.svelte b/src/widgets/Toggle.svelte
index 8cbeb29..99d6f78 100644
--- a/src/widgets/Toggle.svelte
+++ b/src/widgets/Toggle.svelte
@@ -5,12 +5,12 @@
   export let wsPushProp = (ws, topic, status) => {};
 </script>
 
-<div class="card-items-psn">
-  <div class="widget-descr-width">
+<div class="crd-itm-psn">
+  <div class="wgt-dscr-w">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
+    <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width">
+  <div class="wgt-w">
     <label for={widget.topic} class="items-center cursor-pointer">
       <div class="relative">
         <input on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />