From aa67ba1b8016697571854f346f99d54af8cd45e4 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Mon, 25 Oct 2021 16:50:31 +0700
Subject: [PATCH] some changes

---
 examples/Dashboard.svelte | 1676 ------------------------------------
 examples/Setup.svelte     | 1696 -------------------------------------
 examples/parts.js         |    1 -
 src/App.svelte            |   41 +-
 src/widgets/Input.svelte  |    2 +-
 src/widgets/Toggle.svelte |   18 +-
 6 files changed, 26 insertions(+), 3408 deletions(-)
 delete mode 100644 examples/Dashboard.svelte
 delete mode 100644 examples/Setup.svelte
 delete mode 100644 examples/parts.js

diff --git a/examples/Dashboard.svelte b/examples/Dashboard.svelte
deleted file mode 100644
index e0dfa64..0000000
--- a/examples/Dashboard.svelte
+++ /dev/null
@@ -1,1676 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import Cookies, { get } from "js-cookie";
-  //import { Tabs, Tab, TabList, TabPanel } from "svelte-tabs";
-  import Toggle from "svelte-toggle";
-  import Chart from "svelte-frappe-charts";
-  import Logo from "./Logo.svelte";
-  import mqtt from "mqtt/dist/mqtt.min";
-  // -------------------Swipe-------------------------------------
-
-  import { Swipe, SwipeItem } from "svelte-swipe";
-  let swipe_holder_height = 0;
-  let active_item;
-  let SwipeComp;
-  function heightChanged({ detail }) {
-    if (detail.height < 700) {
-      swipe_holder_height = 700;
-    } else {
-      swipe_holder_height = detail.height;
-    }
-  }
-  let newPage;
-  function changeSlide(i) {
-    newPage = 0;
-    newPage = 1;
-    SwipeComp.goTo(i);
-  }
-  const swipeConfig = {
-    autoplay: false,
-    delay: 2000,
-    showIndicators: false,
-    transitionDuration: 1000,
-    defaultIndex: 0,
-  };
-
-  let items = [];
-  let MQTTconnections = [];
-  // темная тема
-  onMount(async () => {
-    if (Cookies.get("darktheme") == "true") {
-      window.document.body.classList.value = "dark-mode";
-      //window.document.body.classList.toggle("dark-mode");
-    }
-  });
-
-  function toggleTheme() {
-    //  window.document.body.classList.toggle("dark-mode");
-    if (window.document.body.classList.value == "dark-mode") {
-      window.document.body.classList.value = "light-mode";
-      Cookies.set("darktheme", "False", { expires: 365 });
-    } else {
-      window.document.body.classList.toggle("dark-mode");
-      Cookies.set("darktheme", "true", { expires: 365 });
-    }
-  }
-  //секция переменных============================================
-  let myip = document.location.hostname;
-  let configSetupJson = "{}";
-  let espName = "IotManager";
-  let chipID = "";
-  let colors;
-  let lineOptions;
-  let axisOptions;
-  let graf_1 = [];
-  let graf_2 = [];
-  let NewWiget = "";
-  let NewPage = "";
-  let NewPrefics = "";
-  let date = "";
-  let hours = "";
-  let minutes = "";
-  let temp;
-  let selectedprefics;
-  // декларируем массив для  списка всех ESP в сети
-  let devices = [];
-  // декларируем массив для списка всех websocket
-  let socket = [];
-  // декларируем массив для списка всех виджетов
-  let wigets = [];
-  // декларируем массив для списка всех страниц
-  let pages = [];
-  // декларируем массив для списка всех префиксов
-  let prefics = [{ prefics: "" }];
-  // выбраный префикс
-  let selected;
-  // массивы для построения графиков
-  let graf_time = [];
-  let graf_val = [];
-  let dataLine = [];
-
-  // ==на время разработки==
-  //myip = "192.168.36.127";
-
-  let connectionType = "MQTT";
-  let client;
-  let topic;
-  let connected = false;
-
-  let clientId = "IotManager_";
-
-  // MQTT====================================================================
-  function MQTTChange() {
-    // console.log("The selected option is " + JSON.stringify(selected));
-    Cookies.set("selectedMQTT", selected, { expires: 365 });
-
-    wigets = [];
-    prefics = [];
-    pages = [];
-    newPage = 0;
-    clientId += "_" + Math.floor(Math.random() * 10000);
-    connected = false;
-    const mqtt_options = {
-      clientId: clientId,
-      servers: [
-        {
-          host: selected.mqtt_host,
-          port: Number(selected.mqtt_port),
-          protocol: selected.connection_protocol,
-        },
-      ],
-      path: "" + selected.mqtt_path,
-      protocolId: "MQTT",
-      protocolVersion: 4,
-      keepalive: 30,
-      clean: true,
-      reconnectPeriod: 100000,
-      connectTimeout: 30 * 1000,
-      rejectUnauthorized: false,
-    };
-    mqtt_options.username = selected.mqtt_username;
-    mqtt_options.password = selected.mqtt_password;
-    topic = selected.mqtt_prefix;
-    const url = `${mqtt_options.servers[0].protocol}://${mqtt_options.servers[0].host}:${mqtt_options.servers[0].port}${mqtt_options.path}`;
-
-    const onConnect = () => {
-      console.log(`MQTT connected ${url}`);
-      connected = client.connected;
-      const topic = selected.mqtt_prefix;
-      client.subscribe(topic + "/#", function (err) {
-        if (err) {
-          console.error(err);
-        } else {
-          console.log(`MQTT subscribed on topic '${topic}'`);
-          client.publish(topic, "HELLO");
-        }
-      });
-    };
-
-    const onMessage = (topic, message) => {
-      const msg = message.toString();
-      const time = new Date().getTime();
-      addMessage(msg, topic);
-    };
-
-    //try{
-    client = mqtt.connect(mqtt_options);
-    client.on("connect", onConnect);
-    client.on("message", onMessage);
-    client.on("error", (err) => {
-      console.log("MQTT", err);
-      client.end();
-      connected = client.connected;
-    });
-    client.on("close", () => {
-      console.log("MQTT " + clientId + " disconnected");
-      connected = client.connected;
-    });
-  }
-  if (connectionType == "MQTT") {
-    // ==на время разработки==
-    // MQTTconnections = JSON.parse(MQTTconnections);
-
-    MQTTconnections = [
-      {
-        user_id: "1",
-        connection_name: "demo",
-        connection_protocol: "wss",
-        mqtt_host: "meef.ru",
-        mqtt_port: "18883",
-        mqtt_prefix: "/demo",
-        mqtt_username: "IotManager:guest",
-        mqtt_password: "guest",
-        mqtt_path: "/ws",
-        mqtt_id: "mqtt_id",
-      },
-      {
-        user_id: "1",
-        connection_name: "IotManager",
-        connection_protocol: "wss",
-        mqtt_host: "meef.ru",
-        mqtt_port: "18883",
-        mqtt_prefix: "/IotManager",
-        mqtt_username: "IotManager:guest",
-        mqtt_password: "guest",
-        mqtt_path: "/ws",
-        mqtt_id: "mqtt_id",
-      },
-    ];
-
-    if (Cookies.get("selectedMQTT")) {
-      selected = Cookies.get("selectedMQTT");
-    } else {
-      selected = MQTTconnections[0];
-    }
-    if (selected) {
-      selected = JSON.parse(selected);
-    }
-    MQTTChange();
-
-    if (Cookies.get("darktheme") == "") {
-      window.document.body.classList.value = "dark-mode";
-    }
-    if (!Cookies.get("darktheme")) {
-      window.document.body.classList.value = "dark-mode";
-      Cookies.set("darktheme", "true", { expires: 365 });
-    }
-  }
-
-  // MQTT =============================================================================================
-
-  // подключаемся к локальной машине, получаем карту сети
-  function getNetworkMap() {
-    devices = JSON.parse(
-      '[{"deviceID":"","deviceIP":"' + myip + '","deviceName":""}]'
-    );
-    devices[0].id = 0;
-    devices[0].status = false;
-    console.log("Подключаемся к WS на localhost ", devices);
-    if (connectionType != "MQTT") {
-      socket[0] = new WebSocket("ws://" + myip + "/ws");
-      socket[0].addEventListener("open", function (event) {
-        devices[0].id = 0;
-        devices[0].status = true;
-        connected = true;
-        devices = devices;
-        console.log("WS CONNECTED! " + myip);
-        // получаем "карту сети" по websocket
-        socket[0].send("getNetworkMap");
-        // получаем конфигурацию ESP по websocket
-        socket[0].send("HELLO");
-      });
-      socket[0].addEventListener("message", function (event) {
-        if (Cookies.get("consolelog") == "true") {
-          console.log("NEW data packet " + myip, event.data);
-        }
-        // запускаем обработку пришедшего сообщения
-
-        addMessage(event.data, 0);
-      });
-      // Обработка ошибок websocket
-      socket[0].addEventListener("close", (event) => {
-        if (item) {
-          console.log("ws close " + item.deviceIP);
-        } else {
-          console.log("ws close " + myip);
-        }
-        devices[0].status = false;
-        connected = false;
-        devices = devices;
-      });
-      socket[0].addEventListener("error", function (event) {
-        if (item) {
-          console.log(item.deviceIP + " WebSocket error: ", event);
-        } else {
-          console.log(myip + " WebSocket error: ", event);
-        }
-        devices[0].status = false;
-        connected = false;
-        devices = devices;
-      });
-    }
-  }
-  if (connectionType != "MQTT") {
-    getNetworkMap();
-  }
-
-  function addConnection(devices) {
-    if (devices) {
-      devices.forEach(function (item, i, arr) {
-        console.log("trying connect", item);
-
-        // Create WebSocket connection.
-        socket[i] = new WebSocket("ws://" + item.deviceIP + "/ws");
-        // Connection opened
-        socket[i].addEventListener("open", function (event) {
-          devices[i].id = i;
-          devices[i].status = true;
-          connected = true;
-          devices = devices;
-          console.log("WS CONNECTED! " + item.deviceIP);
-          socket[i].send("HELLO");
-        });
-        // Listen for messages
-        socket[i].addEventListener("message", function (event) {
-          // вывод отладочных сообщений в консоль
-
-          if (Cookies.get("consolelog") == "true") {
-            console.log("NEW data packet " + item.deviceIP, event.data);
-          }
-
-          // запускаем обработку пришедшего сообщения
-          let time = new Date().getTime();
-          addMessage(event.data, i);
-        });
-        // Обработка ошибок websocket
-        socket[i].addEventListener("close", (event) => {
-          console.log("ws close " + item.deviceIP);
-          devices[i].status = false;
-          connected = false;
-          devices = devices;
-          Shuttervisibil();
-        });
-        socket[i].addEventListener("error", function (event) {
-          console.log(item.deviceIP + " WebSocket error: ", event);
-          devices[i].status = false;
-          connected = false;
-          devices = devices;
-          Shuttervisibil();
-        });
-      });
-    }
-  }
-  //console.log(devices);
-
-  //обрабатываем пришедшее сообщение =====================================================================
-
-  function addMessage(data, socket) {
-    if (connectionType == "MQTT") {
-      // console.log("NEW data packet " + socket, data);
-      topic = socket;
-    }
-
-    let json;
-    let tmp;
-
-    try {
-      let net = JSON.parse(data);
-
-      // Если пришла карта сети
-      if (net[0].deviceID) {
-        console.log("пришла карта сети :", net);
-        devices = net;
-        //Conf=[];
-
-        addConnection(devices);
-        NetworkMap = data;
-      }
-    } catch (e) {
-      //	console.log('ERROR parse JSON', tmp);
-    }
-
-    tmp = "[" + data + "]";
-
-    //tmp = [data];
-    try {
-      tmp = JSON.parse(tmp);
-      tmp.forEach(function (json, i, array) {
-        // собираем виджеты
-        // если пришедшее сообщение виджет
-        if (json.widget) {
-          // ищем его в массиве виджетов
-          NewWiget = "";
-          wigets.forEach(function (item, i, array) {
-            if (json.topic == item.topic) {
-              NewWiget = json.topic;
-              //	console.log("Нашли совпадение виджета");
-            }
-          });
-
-          // ищем новые страницы
-          NewPage = "";
-          pages.forEach(function (item, i, array) {
-            if (json.page == item.page) {
-              NewPage = json.page;
-              //	console.log("Нашли совпадение страницы");
-            }
-          });
-
-          // ищем новые префиксы
-          NewPrefics = "";
-          prefics.forEach(function (item, i, array) {
-            let topic = getprefics(json.topic);
-            if (topic == item.prefics) {
-              NewPrefics = item.prefics;
-              //	console.log("Нашли совпадение префикса");
-            }
-          });
-
-          // Новый виджет дописываем в массив виджетов
-          if (!NewWiget) {
-            // дописываем виджету из какого сокета он получен
-            json.socket = socket;
-            // дописываем виджету префикс
-            json.prefics = getprefics(json.topic);
-            json.closed = true;
-
-            wigets = [...wigets, json];
-
-            // сортируем
-            wigets.sort((a, b) => a.order - b.order);
-          }
-
-          // Дописываем новую страницу в массив страниц
-          if (!NewPage) {
-            pages = [
-              ...pages,
-              JSON.parse(
-                JSON.stringify({ page: json.page, topic: json.topic })
-              ),
-            ];
-
-            pages.sort(function (a, b) {
-              if (a.page < b.page) {
-                return -1;
-              }
-              if (a.page > b.page) {
-                return 1;
-              }
-              return 0;
-            });
-          }
-
-          // Дописываем новый префикс в массив префиксов
-          if (!NewPrefics) {
-            prefics = [
-              ...prefics,
-              JSON.parse(JSON.stringify({ prefics: getprefics(json.topic) })),
-            ];
-          }
-        }
-        // закончили сбор виджетов
-
-        // если новое сообщение статус
-        if (json.status) {
-          // ищем виджет к которому относится этот статус
-          wigets.forEach(function (element) {
-            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
-            let messegetopic;
-            if (connectionType === "MQTT") {
-              messegetopic = topic.replace("/status", "");
-            } else {
-              messegetopic = json.topic.replace("/status", "");
-            }
-            // ========================================================================
-
-            if (element.topic == messegetopic) {
-              // если получен статус график
-
-              if (element.widget == "chart") {
-                graf_time = [];
-                graf_val = [];
-                try {
-                  temp = json.status;
-                  temp.forEach(function (item, i, arr) {
-                    // получаем время
-                    date = new Date(item.x * 1000);
-                    hours = date.getHours();
-                    //	minutes =date.getMinutes();
-                    minutes = checkTime(date.getMinutes());
-                    function checkTime(i) {
-                      return i < 10 ? "0" + i : i;
-                    }
-                    let days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
-                    let dayW = days[date.getDay()];
-                    //let dw = days[dayW];
-                    let day = date.getDate();
-                    let month = checkTime(date.getMonth());
-
-                    //graf_time = [... graf_time,  hours+':'+minutes+' '+day+'.'+month, ];
-                    if ((element.dateFormat = "HH:mm")) {
-                      graf_time = [
-                        ...graf_time,
-                        hours + ":" + minutes + " " + dayW,
-                      ];
-                    } else if ((element.dateFormat = "DD.MM.YYYY")) {
-                      graf_time = [
-                        ...graf_time,
-                        day + "." + month + " " + dayW,
-                      ];
-                    } else {
-                      graf_time = [...graf_time, hours + ":" + minutes];
-                    }
-
-                    graf_val = [...graf_val, item.y1];
-                  });
-
-                  axisOptions = { xAxisMode: "tick", xIsSeries: true };
-                  if (element.pointRadius == "0") {
-                    lineOptions = { hideDots: 1, regionFill: 1, spline: 1 };
-                  } else {
-                    lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
-                  }
-
-                  dataLine = {
-                    labels: graf_time,
-                    datasets: [
-                      {
-                        name: element.descr,
-                        values: graf_val,
-                      },
-                    ],
-                  };
-
-                  if (!element.status) {
-                    // архив графика отсутсутствует, то создаем статус и заполняем
-                    element.status = dataLine;
-                  } else {
-                    //console.log(" дописываем новые значения к имеющимся");
-                    element.status.labels = [
-                      ...element.status.labels,
-                      dataLine.labels[0],
-                    ];
-                    element.status.datasets[0].values = [
-                      ...element.status.datasets[0].values,
-                      dataLine.datasets[0].values[0],
-                    ];
-                  }
-                } catch (e) {
-                  console.log(
-                    "полученные данные для графика содержат ошибки",
-                    element.status
-                  );
-                }
-
-                //два графика в одном / пока работает криво только для WS	, надо делать
-                if (connectionType === "MQTT") {
-                  if (topic.includes("_1/status")) {
-                    graf_1 = element.status.datasets[0];
-                  }
-                  if (topic.includes("_2/status")) {
-                    graf_2 = element.status.datasets[0];
-                    element.status.datasets[1] = graf_1;
-                  }
-                } else {
-                }
-              }
-              // данные для прочих витжетов	(заменяем статус на новый)
-              else {
-                element.status = json.status;
-                element.send = false;
-              }
-            }
-            wigets = wigets;
-            devices = devices;
-            pages = pages;
-          });
-        }
-        //  для mysens
-        if (json.info) {
-          // ищем виджет к которому относится INFO
-          wigets.forEach(function (element) {
-            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
-            let messegetopic;
-            if (connectionType === "MQTT") {
-              messegetopic = topic.replace("/status", "");
-            } else {
-              messegetopic = json.topic.replace("/status", "");
-            }
-            // ========================================================================
-
-            if (element.topic == messegetopic) {
-              element.nodeInfo = json.info;
-            }
-          });
-        }
-        if (json.color) {
-          // ищем виджет к которому относится цвет INFO
-          wigets.forEach(function (element) {
-            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
-            let messegetopic;
-            if (connectionType === "MQTT") {
-              messegetopic = topic.replace("/status", "");
-            } else {
-              messegetopic = json.topic.replace("/status", "");
-            }
-            // ========================================================================
-
-            if (element.topic == messegetopic) {
-              element.nodeInfoColor = json.color;
-            }
-          });
-        }
-      });
-    } catch (e) {
-      console.log("ERROR parse JSON", tmp);
-    }
-
-    tmp = null;
-    temp = null;
-    json = null;
-    data = null;
-    NewWiget = null;
-    NewPage = null;
-    NewPrefics = null;
-    date = null;
-    hours = null;
-    minutes = null;
-  }
-
-  // функция получаем префикс
-
-  function getprefics(topic) {
-    if (topic[0] == "/") {
-      topic = topic.slice(0, topic.indexOf("/", 2));
-      return topic;
-    } else {
-      topic = topic.slice(0, topic.indexOf("/", 0));
-      return topic;
-    }
-  }
-  // функция если произошла смена префикса в интерфейсе
-  function handleSubmit() {
-    console.log("The selected option is " + JSON.stringify(selected.prefics));
-    selectedprefics = selected.prefics;
-  }
-
-  // шлем данные в websocket
-  function WSpush(ws, uri, val) {
-    //    console.log(ws, uri, val);
-    if (connectionType == "MQTT") {
-      client.publish(uri + "/control", val.toString());
-    } else {
-      socket[ws].send(
-        '{"path":"' + uri + '/control", "status":"' + val.toString() + '"}'
-      );
-
-      if (socket[ws].readyState != 1) {
-        addConnection(devices);
-
-        // добавить GET запрос
-      }
-    }
-  }
-
-  if (connectionType != "MQTT") {
-    //	addConnection(devices);
-  }
-
-  // обратный отсчет для 		Shutter
-  let frame;
-  let elapsed = 0;
-  let duration = 5000;
-  let last_time = window.performance.now();
-  (function update() {
-    frame = requestAnimationFrame(update);
-    const time = window.performance.now();
-    elapsed += Math.min(time - last_time, duration - elapsed);
-    last_time = time;
-    if (elapsed == duration) {
-      Shutterhiddn();
-    }
-  })();
-
-  let Shuttervisibl = "visibility: hidden;";
-
-  function Shuttervisibil() {
-    Shuttervisibl = "visibility: visible;";
-    //	duration = sec;
-    elapsed = 0;
-    if (elapsed === duration) {
-      Shuttervisibl = "visibility: hidden;";
-    }
-  }
-  function Shutterhiddn() {
-    Shuttervisibl = "visibility: hidden;";
-  }
-  Shuttervisibil();
-</script>
-
-<!---->
-
-{#if connectionType == "MQTT"}
-  {#if MQTTconnections[1]}
-    <form on:submit|preventDefault={MQTTChange}>
-      <select bind:value={selected} on:change={MQTTChange}>
-        {#each MQTTconnections as MQTTconnection}
-          {#if MQTTconnection.connection_name == selected.connection_name}
-            <option selected value={MQTTconnection}>
-              {MQTTconnection.connection_name}
-            </option>
-          {:else}
-            <option value={MQTTconnection}>
-              {MQTTconnection.connection_name}
-            </option>
-          {/if}
-        {/each}
-      </select>
-    </form>
-  {/if}
-{:else}
-  <div
-    class="Shutter"
-    style="{Shuttervisibl} position: absolute; z-index: 1; right: 1%; top: 0px"
-    id="layer1"
-  >
-    <span>
-      <progress value={elapsed / duration} />
-      <br /><br />
-      <!--Перечисляем девайсы в сети-->
-      {#each devices as NetworkDevice, i}
-        {#if !NetworkDevice.status && NetworkDevice.status != false}
-          <p align="left" style=" margin-top: -5px; margin-bottom: -5px">
-            {NetworkDevice.deviceIP}
-            {NetworkDevice.deviceName} waiting
-          </p>
-        {/if}
-        {#if NetworkDevice.status == true}
-          <p
-            align="left"
-            style="color: green; margin-top: -5px; margin-bottom: -5px"
-          >
-            {NetworkDevice.deviceIP}
-            {NetworkDevice.deviceName} connected
-          </p>
-        {/if}
-        {#if NetworkDevice.status == false}
-          <p
-            align="left"
-            style="color: red; margin-top: -5px; margin-bottom: -5px"
-            on:click={addConnection(devices)}
-          >
-            {NetworkDevice.deviceIP}
-            {NetworkDevice.deviceName} disconnected
-          </p>
-        {/if}
-      {/each}
-    </span>
-  </div>
-{/if}
-
-<div
-  style=" position: absolute;  z-index: 2; right: 7%; top: 0%; color:red"
-  on:click={toggleTheme}
-  id="toggleTheme"
->
-  🔆
-</div>
-
-{#if connectionType == "MQTT"}
-  {#if connected == false}
-    <div
-      style=" position: absolute;  z-index: 2; right: 2%; top: 0%; color:red"
-      on:click={toggleTheme}
-      id="layerMQTT"
-    >
-      MQTT
-    </div>
-    {#if MQTTconnections[0].mqtt_port == ""}
-      <div align="center">
-        Для подключения MQTT обязателььно должен быть указан порт "MQTT wss port
-        (TLS)"
-      </div>
-    {/if}
-  {/if}
-  {#if connected == true}
-    <div
-      style=" position: absolute;  z-index: 2; right: 2%; top: 0%; color:green"
-      on:click={toggleTheme}
-      id="layerMQTT"
-    >
-      MQTT
-    </div>
-  {/if}
-{:else if connected == true}
-  <div
-    on:mouseenter={Shuttervisibil}
-    on:click={Shutterhiddn}
-    style="color:green; position: absolute;  z-index: 2; right: 1.5%; top: 0px"
-    id="layerWS;  "
-  >
-    localNET
-  </div>
-{:else}
-  <div
-    on:mouseenter={Shuttervisibil}
-    on:click={Shutterhiddn}
-    style="color:red;  position: absolute;  z-index: 2; right: 1.5%; top: 0px"
-    id="layerWS; "
-  >
-    localNET
-  </div>
-{/if}
-<!-- селектор префиксов  -->
-{#if prefics[2]}
-  <form on:submit|preventDefault={handleSubmit}>
-    <select style="float: left" bind:value={selected} on:change={handleSubmit}>
-      {#each prefics as curentprefics}
-        <option value={curentprefics}>
-          {curentprefics.prefics}
-        </option>
-      {/each}
-    </select>
-  </form>
-{/if}
-
-<!--закончили селектор префиксов -->
-
-{#if !pages[0]}
-  <p align="center"><Logo /></p>
-{/if}
-
-<!-------------------------------------------------------->
-<p align="center">
-  {#each pages as page, i}
-    <button type="button" on:click={() => changeSlide(i)}>{page.page}</button>
-  {/each}
-</p>
-{#if newPage == 1}
-  <div class="swipe-holder" style="height:{swipe_holder_height}px">
-    <Swipe bind:active_item bind:this={SwipeComp}>
-      {#each pages as pagesName, i}
-        <SwipeItem
-          active={active_item == i}
-          allow_dynamic_height={true}
-          on:swipe_item_height_change={heightChanged}
-        >
-          <table border="0" style="margin-left: 0%" width="99%">
-            {#each wigets as widget, i}
-              <!--Отображаем виджеты только для выбранного префикса-->
-
-              {#if !selectedprefics || selectedprefics === widget.prefics}
-                {#if widget.page === pagesName.page}
-                  <tr>
-                    <!-- Toggle -->
-                    {#if widget.widget === "toggle"}
-                      <td style="width: 100%;">
-                        <span style="float: left"> {widget.descr}</span>
-                      </td>
-
-                      <td />
-
-                      <td>
-                        {#if widget.status == "1"}
-                          <span style="float: right">
-                            <Toggle
-                              style="float: right"
-                              on:toggle={WSpush(widget.socket, widget.topic, 0)}
-                              label=""
-                              toggledColor="#6495ED"
-                              untoggledColor="#FF6347"
-                              switchColor="#eee"
-                            />
-                          </span>
-                        {:else}
-                          <span style="float: right">
-                            <Toggle
-                              on:toggle={WSpush(widget.socket, widget.topic, 1)}
-                              label=""
-                              toggledColor="#FF6347"
-                              untoggledColor="gray"
-                              switchColor="#eee"
-                              toggled=""
-                            />
-                          </span>
-                        {/if}
-                      </td>{/if}
-                    <!-- anydata -->
-                    {#if widget.widget === "anydata"}
-                      <td>
-                        {#if widget.descrColor}
-                          <span style="float: left">
-                            <lable
-                              align="left"
-                              style="color: {widget.descrColor}; font-family: '{widget.descrfont}'"
-                              >{widget.descr}</lable
-                            >
-                          </span>
-                        {:else}
-                          <span
-                            style="float: left; font-family: '{widget.descrfont}'"
-                          >
-                            {widget.descr}
-                            <!--Инфо от ноды mysens отображается под названием виджета -->
-                            <div
-                              class="letter"
-                              align="left"
-                              style="color: {!widget.nodeInfoColor
-                                ? 'gray'
-                                : widget.nodeInfoColor}"
-                            >
-                              {!widget.nodeInfo ? "" : widget.nodeInfo}
-                            </div>
-                          </span>
-                        {/if}
-                      </td>
-                      <td>
-                        <!--Инфо от ноды mysens отображается по середине
-  <lable align='left' style='color: {!widget.nodeInfoColor ? 'gray' : widget.nodeInfoColor}'>
-  
-  </lable>-->
-                      </td>
-                      <td align="right" style="white-space: nowrap;">
-                        <!--Делаем anidata разноцветными если есть кастомизация цвета-->
-                        {#if Array.isArray(widget.color) && widget.status}
-                          {#each widget.color as anydataColor, i}
-                            <!--// убираем знаки после запятой 	-->
-                            {#if anydataColor.level && widget.status < anydataColor.level && widget.status > widget.color[i - 1].level && i > 0}
-                              <lable
-                                align="left"
-                                style="color: {anydataColor.value}; font-family: '{widget.font}' "
-                                >{Math.round(widget.status * 10) / 10
-                                  ? Math.round(widget.status * 10) / 10
-                                  : widget.status}{!widget.after
-                                  ? ""
-                                  : widget.after}</lable
-                              >
-                            {/if}
-                          {/each}
-                          <!--если цвет задан значением а не массивом-->
-                        {:else if widget.color && widget.status}
-                          <lable
-                            align="left"
-                            style="color: {widget.color}; font-family: '{widget.font}'"
-                            >{Math.round(widget.status * 10) / 10
-                              ? Math.round(widget.status * 10) / 10
-                              : widget.status}{widget.after}</lable
-                          >
-                          <!--если цвет не задан и статус пустой-->
-                        {:else if !widget.status}
-                          <lable align="left">...</lable>
-                          <!--если цвет не задан-->
-                        {:else if widget.status}
-                          <lable
-                            align="left"
-                            style="font-family: '{widget.font}'"
-                            >{Math.round(widget.status * 10) / 10
-                              ? Math.round(widget.status * 10) / 10
-                              : widget.status}{!widget.after
-                              ? ""
-                              : widget.after}</lable
-                          >
-                        {:else}
-                          <lable
-                            align="left"
-                            style="font-family: '{widget.font}'"
-                          >
-                            {!widget.status ? "" : widget.status}{!widget.after
-                              ? ""
-                              : widget.after}
-                          </lable>
-                        {/if}
-                      </td>
-                    {/if}
-                    <!-- input -->
-                    {#if widget.widget === "input"}
-                      <td><span style="float: left"> {widget.descr}</span></td>
-                      <td />
-                      {#if widget.type === "number"}
-                        <td align="right">
-                          <div
-                            style="float: right; display:inline;  width: 120px  "
-                          >
-                            <input
-                              type="button"
-                              value="-  "
-                              style=" border: 1px solid lightblue; width: 25px"
-                              on:click={WSpush(
-                                widget.socket,
-                                widget.topic,
-                                widget.status - 1
-                              )}
-                            />
-                            <input
-                              class:red={widget["send"] == true}
-                              style="width: 45px "
-                              type="tel"
-                              neme={widget.topic}
-                              bind:value={widget.status}
-                              size="20"
-                              on:change={((widget["send"] = true),
-                              WSpush(
-                                widget.socket,
-                                widget.topic,
-                                widget.status
-                              ))}
-                              min="-1000"
-                              max="1000000"
-                            />
-                            <input
-                              type="button"
-                              value="+  "
-                              style="border: 1px solid lightblue; width: 25px"
-                              on:click={WSpush(
-                                widget.socket,
-                                widget.topic,
-                                widget.status - 1 + 2
-                              )}
-                            />
-                          </div>
-                        </td>
-                      {:else if widget.type === "time"}
-                        <td align="right">
-                          <div style="float: right; display:inline-block">
-                            <input
-                              class:red={widget["send"] == true}
-                              type="time"
-                              bind:value={widget.status}
-                              size="20"
-                              on:change={((widget["send"] = true),
-                              WSpush(
-                                widget.socket,
-                                widget.topic,
-                                widget.status
-                              ))}
-                              min="00:00"
-                              max="23:59"
-                              required
-                            />
-                          </div>
-                        </td>
-                      {:else}
-                        <td align="right"
-                          ><div style="display:inline-block">
-                            <input
-                              class:red={widget["send"] == true}
-                              bind:value={widget.status}
-                              size="20"
-                              on:change={((widget["send"] = true),
-                              WSpush(
-                                widget.socket,
-                                widget.topic,
-                                widget.status
-                              ))}
-                            />
-                          </div></td
-                        >
-                      {/if}
-                    {/if}
-                    <!-- btn -->
-                    {#if widget.widget == "btn"}
-                      <td><span style="float: left">{widget.descr}</span></td>
-                      <td />
-                      <td align="right">
-                        {#if widget.status != 0 && widget.status != 1}
-                          <button
-                            class="btn"
-                            on:click={((widget["send"] = true),
-                            WSpush(widget.socket, widget.topic, 1))}
-                            ><span
-                              >&nbsp;&nbsp;{!widget.status
-                                ? ""
-                                : widget.status}&nbsp;&nbsp;</span
-                            ></button
-                          ><br />
-                        {:else}
-                          <button
-                            class="btn"
-                            on:click={((widget["send"] = true),
-                            WSpush(widget.socket, widget.topic, 1))}
-                            ><span
-                              >&nbsp;&nbsp; {!widget.text
-                                ? ""
-                                : widget.text}&nbsp;&nbsp;</span
-                            ></button
-                          ><br />
-                        {/if}
-                      </td>
-                    {/if}
-                    <!-- select -->
-                    {#if widget.widget === "select"}
-                      <td><span style="float: left">{widget.descr}</span></td>
-                      <td />
-                      <td align="right">
-                        {#if widget.status == 0}
-                          <button
-                            class="btnoff"
-                            on:click={((widget["send"] = true),
-                            (this.style.border = "1px solid red"),
-                            WSpush(widget.socket, widget.topic, 1))}
-                            ><span
-                              >{!widget.options[0]
-                                ? "OFF"
-                                : widget.options[0]}</span
-                            ></button
-                          ><br />
-                        {:else}
-                          <button
-                            class="btn"
-                            on:click={((widget["send"] = true),
-                            (this.style.border = "1px solid red"),
-                            WSpush(widget.socket, widget.topic, 0))}
-                            ><span
-                              >{!widget.options[1]
-                                ? "ON"
-                                : widget.options[1]}</span
-                            ></button
-                          ><br />
-                        {/if}
-                      </td>
-                    {/if}
-                    <!-- chart -->
-                    {#if widget.widget === "chart"}
-                      <td colspan="3">
-                        {#if widget.status}
-                          {#if widget.topic.includes("_2")}
-                            <Chart
-                              data={widget.status}
-                              {lineOptions}
-                              {axisOptions}
-                              colors={[!widget.color ? "red" : widget.color]}
-                              type={!widget.type ? "line" : widget.type}
-                              height="300"
-                            />
-                          {:else if !widget.topic.includes("_1")}
-                            {widget.descr}
-                            <Chart
-                              data={widget.status}
-                              {lineOptions}
-                              {axisOptions}
-                              colors={[
-                                !widget.color ? "light-blue" : widget.color,
-                              ]}
-                              type={!widget.type ? "line" : widget.type}
-                              height="300"
-                            />
-                          {/if}
-                        {/if}
-                      </td>
-                    {/if}
-                    <!-- range -->
-                    {#if widget.widget === "range"}
-                      <td colspan="3">
-                        <div>
-                          {widget.descr}
-                          {widget.status / 10}
-                          {widget.after}
-                        </div>
-
-                        <label>
-                          <input
-                            type="range"
-                            bind:value={widget.status}
-                            min={widget.min}
-                            max={widget.max * 10}
-                            on:change={WSpush(
-                              widget.socket,
-                              widget.topic,
-                              widget.status
-                            )}
-                          />
-                        </label>
-                      </td>
-                    {/if}
-                  </tr>
-                {/if}
-              {/if}
-            {/each}
-          </table>
-        </SwipeItem>
-      {/each}
-    </Swipe>
-  </div>
-{/if}
-<!------------------------------------------------------->
-<!--
-<Tabs>
-  <table border="0" style="margin-left: 0%" width="99%">
-    <tr
-      ><td>
-        <TabList>
-          {#each pages as pagesName, i}
-            <Tab>{pagesName.page}</Tab>
-          {/each}
-        </TabList>
-      </td></tr
-    >
-  </table>
-
-  {#each pages as pagesName, i}
-    <TabPanel>
-      <table border="0" style="margin-left: 0%" width="99%">
-        {#each wigets as widget, i}
-         !--Отображаем виджеты только для выбранного префикса--
-
-          {#if !selectedprefics || selectedprefics === widget.prefics}
-            {#if widget.page === pagesName.page}
-              <tr>
-                -- Toggle --
-                {#if widget.widget === "toggle"}
-                  <td style="width: 100%;">
-                    <span style="float: left"> {widget.descr}</span>
-                  </td>
-
-                  <td />
-
-                  <td>
-                    {#if widget.status == "1"}
-                      <span style="float: right">
-                        <Toggle
-                          style="float: right"
-                          on:toggle={WSpush(widget.socket, widget.topic, 0)}
-                          label=""
-                          toggledColor="#6495ED"
-                          untoggledColor="#FF6347"
-                          switchColor="#eee"
-                        />
-                      </span>
-                    {:else}
-                      <span style="float: right">
-                        <Toggle
-                          on:toggle={WSpush(widget.socket, widget.topic, 1)}
-                          label=""
-                          toggledColor="#FF6347"
-                          untoggledColor="gray"
-                          switchColor="#eee"
-                          toggled=""
-                        />
-                      </span>
-                    {/if}
-                  </td>{/if}
-                -- anydata --
-                {#if widget.widget === "anydata"}
-                  <td>
-                    {#if widget.descrColor}
-                      <span style="float: left">
-                        <lable
-                          align="left"
-                          style="color: {widget.descrColor}; font-family: '{widget.descrfont}'"
-                          >{widget.descr}</lable
-                        >
-                      </span>
-                    {:else}
-                      <span
-                        style="float: left; font-family: '{widget.descrfont}'"
-                      >
-                        {widget.descr}
-                        --Инфо от ноды mysens отображается под названием виджета --
-                        <div
-                          class="letter"
-                          align="left"
-                          style="color: {!widget.nodeInfoColor
-                            ? 'gray'
-                            : widget.nodeInfoColor}"
-                        >
-                          {!widget.nodeInfo ? "" : widget.nodeInfo}
-                        </div>
-                      </span>
-                    {/if}
-                  </td>
-                  <td>
-                    --Инфо от ноды mysens отображается по середине 
-                      <lable align='left' style='color: {!widget.nodeInfoColor ? 'gray' : widget.nodeInfoColor}'></lable>
-                    --
-                  </td>
-                  <td align="right" style="white-space: nowrap;">
-                    --Делаем anidata разноцветными если есть кастомизация цвета--
-                    {#if Array.isArray(widget.color) && widget.status}
-                      {#each widget.color as anydataColor, i}
-                        --// убираем знаки после запятой 	--
-                        {#if anydataColor.level && widget.status < anydataColor.level && widget.status > widget.color[i - 1].level && i > 0}
-                          <lable
-                            align="left"
-                            style="color: {anydataColor.value}; font-family: '{widget.font}' "
-                            >{Math.round(widget.status * 10) / 10
-                              ? Math.round(widget.status * 10) / 10
-                              : widget.status}{!widget.after
-                              ? ""
-                              : widget.after}</lable
-                          >
-                        {/if}
-                      {/each}
-                      --если цвет задан значением а не массивом--
-                    {:else if widget.color && widget.status}
-                      <lable
-                        align="left"
-                        style="color: {widget.color}; font-family: '{widget.font}'"
-                        >{Math.round(widget.status * 10) / 10
-                          ? Math.round(widget.status * 10) / 10
-                          : widget.status}{widget.after}</lable
-                      >
-                     --если цвет не задан и статус пустой--
-                    {:else if !widget.status}
-                      <lable align="left">...</lable>
-                      --если цвет не задан--
-                    {:else if widget.status}
-                      <lable align="left" style="font-family: '{widget.font}'"
-                        >{Math.round(widget.status * 10) / 10
-                          ? Math.round(widget.status * 10) / 10
-                          : widget.status}{!widget.after
-                          ? ""
-                          : widget.after}</lable
-                      >
-                    {:else}
-                      <lable align="left" style="font-family: '{widget.font}'">
-                        {!widget.status ? "" : widget.status}{!widget.after
-                          ? ""
-                          : widget.after}
-                      </lable>
-                    {/if}
-                  </td>
-                {/if}
-               -- input --
-                {#if widget.widget === "input"}
-                  <td><span style="float: left"> {widget.descr}</span></td>
-                  <td />
-                  {#if widget.type === "number"}
-                    <td align="right">
-                      <div
-                        style="float: right; display:inline;  width: 120px  "
-                      >
-                        <input
-                          type="button"
-                          value="-  "
-                          style=" border: 1px solid lightblue; width: 25px"
-                          on:click={WSpush(
-                            widget.socket,
-                            widget.topic,
-                            widget.status - 1
-                          )}
-                        />
-                        <input
-                          class:red={widget["send"] == true}
-                          style="width: 45px "
-                          type="tel"
-                          neme={widget.topic}
-                          bind:value={widget.status}
-                          size="20"
-                          on:change={((widget["send"] = true),
-                          WSpush(widget.socket, widget.topic, widget.status))}
-                          min="-1000"
-                          max="1000000"
-                        />
-                        <input
-                          type="button"
-                          value="+  "
-                          style="border: 1px solid lightblue; width: 25px"
-                          on:click={WSpush(
-                            widget.socket,
-                            widget.topic,
-                            widget.status - 1 + 2
-                          )}
-                        />
-                      </div>
-                    </td>
-                  {:else if widget.type === "time"}
-                    <td align="right">
-                      <div style="float: right; display:inline-block">
-                        <input
-                          class:red={widget["send"] == true}
-                          type="time"
-                          bind:value={widget.status}
-                          size="20"
-                          on:change={((widget["send"] = true),
-                          WSpush(widget.socket, widget.topic, widget.status))}
-                          min="00:00"
-                          max="23:59"
-                          required
-                        />
-                      </div>
-                    </td>
-                  {:else}
-                    <td align="right"
-                      ><div style="display:inline-block">
-                        <input
-                          class:red={widget["send"] == true}
-                          bind:value={widget.status}
-                          size="20"
-                          on:change={((widget["send"] = true),
-                          WSpush(widget.socket, widget.topic, widget.status))}
-                        />
-                      </div></td
-                    >
-                  {/if}
-                {/if}
-               -- btn --
-                {#if widget.widget == "btn"}
-                  <td><span style="float: left">{widget.descr}</span></td>
-                  <td />
-                  <td align="right">
-                    {#if widget.status != 0 && widget.status != 1}
-                      <button
-                        class="btn"
-                        on:click={((widget["send"] = true),
-                        WSpush(widget.socket, widget.topic, 1))}
-                        ><span
-                          >&nbsp;&nbsp;{!widget.status
-                            ? ""
-                            : widget.status}&nbsp;&nbsp;</span
-                        ></button
-                      ><br />
-                    {:else}
-                      <button
-                        class="btn"
-                        on:click={((widget["send"] = true),
-                        WSpush(widget.socket, widget.topic, 1))}
-                        ><span
-                          >&nbsp;&nbsp; {!widget.text
-                            ? ""
-                            : widget.text}&nbsp;&nbsp;</span
-                        ></button
-                      ><br />
-                    {/if}
-                  </td>
-                {/if}
-               -- select --
-                {#if widget.widget === "select"}
-                  <td><span style="float: left">{widget.descr}</span></td>
-                  <td />
-                  <td align="right">
-                    {#if widget.status == 0}
-                      <button
-                        class="btnoff"
-                        on:click={((widget["send"] = true),
-                        (this.style.border = "1px solid red"),
-                        WSpush(widget.socket, widget.topic, 1))}
-                        ><span
-                          >{!widget.options[0]
-                            ? "OFF"
-                            : widget.options[0]}</span
-                        ></button
-                      ><br />
-                    {:else}
-                      <button
-                        class="btn"
-                        on:click={((widget["send"] = true),
-                        (this.style.border = "1px solid red"),
-                        WSpush(widget.socket, widget.topic, 0))}
-                        ><span
-                          >{!widget.options[1] ? "ON" : widget.options[1]}</span
-                        ></button
-                      ><br />
-                    {/if}
-                  </td>
-                {/if}
-                -- chart --
-                {#if widget.widget === "chart"}
-                  <td colspan="3">
-                    {#if widget.status}
-                      {#if widget.topic.includes("_2")}
-                        <Chart
-                          data={widget.status}
-                          {lineOptions}
-                          {axisOptions}
-                          colors={[!widget.color ? "red" : widget.color]}
-                          type={!widget.type ? "line" : widget.type}
-                          height="300"
-                        />
-                      {:else if !widget.topic.includes("_1")}
-                        {widget.descr}
-                        <Chart
-                          data={widget.status}
-                          {lineOptions}
-                          {axisOptions}
-                          colors={[!widget.color ? "light-blue" : widget.color]}
-                          type={!widget.type ? "line" : widget.type}
-                          height="300"
-                        />
-                      {/if}
-                    {/if}
-                  </td>
-                {/if}
-                -- range --
-                {#if widget.widget === "range"}
-                  <td colspan="3">
-                    <div>
-                      {widget.descr}
-                      {widget.status / 10}
-                      {widget.after}
-                    </div>
-
-                    <label>
-                      <input
-                        type="range"
-                        bind:value={widget.status}
-                        min={widget.min}
-                        max={widget.max * 10}
-                        on:change={WSpush(
-                          widget.socket,
-                          widget.topic,
-                          widget.status
-                        )}
-                      />
-                    </label>
-                  </td>
-                {/if}
-              </tr>
-            {/if}
-          {/if}
-        {/each}
-      </table>
-    </TabPanel>
-  {/each}
-</Tabs>
--->
-<br /><br />
-<div class="letter" align="center">developed by: avaks@meef.ru</div>
-
-<style>
-  :global(.svelte-tabs__tab-list) {
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-  }
-  :global(.svelte-tabs li.svelte-tabs__tab) {
-    color: gray;
-  }
-  :global(.svelte-tabs li.svelte-tabs__selected) {
-    color: green;
-  }
-  .red {
-    color: crimson;
-  }
-  .green {
-    color: rgb(20, 220, 37);
-  }
-
-  .letter {
-    color: grey;
-    font-size: 60%;
-    padding-left: 15px;
-    opacity: 0.8;
-  }
-  progress {
-    height: 4px;
-  }
-
-  input {
-    text-align: right;
-    border: 1px solid #6699ff;
-    width: 100%;
-  }
-
-  label {
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-  }
-  :global(body.light-mode) {
-    background-color: white;
-  }
-
-  :global(body.dark-mode) {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) span {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) div {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) input {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) select {
-    background-color: #1d3040;
-    color: #bfc2c7;
-    padding: 10px;
-    border-radius: 10px;
-    padding-left: 20px;
-  }
-  :global(body.dark-mode) lable {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  select {
-    padding: 10px;
-    border-radius: 10px;
-    padding-left: 20px;
-  }
-  .Shutter {
-    background-color: hsl(200, 16%, 96%);
-    color: blak;
-    padding: 10px;
-    border-radius: 5px;
-  }
-  :global(body.dark-mode) .Shutter {
-    background-color: #1d3040;
-    color: #bfc2c7;
-    padding: 10px;
-    border-radius: 5px;
-  }
-
-  .btn {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 1px;
-    margin: 0 0px 5px 0;
-    outline: none;
-    border: 1px solid #63b8ff;
-    border-radius: 10px;
-    height: 36px;
-    line-height: 0;
-    font-size: 14px;
-    font-weight: 500;
-    text-decoration: none;
-    color: #fff;
-    background-color: #fff;
-    position: relative;
-    overflow: hidden;
-    vertical-align: top;
-    cursor: pointer;
-    user-select: none;
-    appearance: none;
-    touch-action: manipulation;
-  }
-  .btn span {
-    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
-    display: block;
-    box-sizing: border-box;
-    padding: 0 8px;
-    height: 32px;
-    line-height: 33px;
-    border: 1px solid #63b8ff;
-    border-radius: 8px;
-    font-size: 14px;
-    color: black;
-    text-align: center;
-    font-weight: 600;
-  }
-  .btnoff {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 1px;
-    margin: 0 0px 5px 0;
-    outline: none;
-    border: 1px solid rgb(85, 84, 84);
-    border-radius: 10px;
-    height: 36px;
-    line-height: 0;
-    font-size: 14px;
-    font-weight: 500;
-    text-decoration: none;
-    color: #fff;
-    background-color: #fff;
-    position: relative;
-    overflow: hidden;
-    vertical-align: top;
-    cursor: pointer;
-    user-select: none;
-    appearance: none;
-    touch-action: manipulation;
-  }
-  .btnoff span {
-    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
-    display: block;
-    box-sizing: border-box;
-    padding: 0 8px;
-    height: 32px;
-    line-height: 33px;
-    border: 1px solid rgb(85, 84, 84);
-    border-radius: 8px;
-    font-size: 14px;
-    color: black;
-    text-align: center;
-    font-weight: 600;
-  }
-  .swipe-holder {
-    height: 30vh;
-    width: 100%;
-  }
-  button {
-    color: gray;
-    background-color: #fff;
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-top-width: 0px;
-    border-left-width: 0px;
-    border-right-width: 0px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-  }
-  :global(body.dark-mode) button {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-</style>
diff --git a/examples/Setup.svelte b/examples/Setup.svelte
deleted file mode 100644
index fbe7291..0000000
--- a/examples/Setup.svelte
+++ /dev/null
@@ -1,1696 +0,0 @@
-<script>
-  import Cookies, { get } from "js-cookie";
-  import Tooltip from "./Tooltip.svelte";
-  import Box from "./Box.svelte";
-  //import Toggle from "svelte-toggle";
-  import Logo from "./Logo.svelte";
-
-  let devices = [];
-  let socket = [];
-  let connectionType = "WS";
-  let myip = document.location.hostname;
-  let NetworkMap = [];
-  let Conf = [];
-  let name;
-  let urlMQTT = "";
-  let editJSON;
-
-  // ==на время разработки==
-  myip = "192.168.36.139";
-  /*	if (Conf==""){
-		Conf = [{
- "ip": myip,		
-  "name": "IoT",
-  "chipID": "",
-  "apssid": "IoT",
-  "appass": "",
-  "routerssid": "EURECA",
-  "routerpass": "4455667788",
-  "timezone": 3,
-  "ntp": "pool.ntp.org",
-  "mqttServer": "",
-  "mqttPort": 0,
-  "mqttPortwss":"",
-  "mqttPath":"",
-  "mqttPrefix": "",
-  "mqttUser": "",
-  "mqttPass": "",
-  "mqttServer2": "",
-  "mqttPort2": 0,
-  "mqttPrefix2": "",
-  "mqttUser2": "",
-  "mqttPass2": "",
-  "scen": "1",
-  "telegramApi": "",
-  "telegonof": "0",
-  "teleginput": "0",
-  "autos": "1",
-  "weblogin": "admin",
-  "webpass": "admin",
-  "MqttIn": "0",
-  "MqttOut": "0",
-  "blink": "0",
-  "oneWirePin": "2",
-  "serverip": "http://meef.ru",
-  "uart": "0",
-  "uartS": "9600",
-  "uartTX": "12",
-  "uartRX": "13",
-  "grafmax": "0",
-  "socket": "0"
-}]; 
-}*/
-
-  // темная тема
-  let darkMode = false;
-  //	data.darktheme=(Cookies.get('darktheme') == "true") ? true : false;
-  if (Cookies.get("darktheme") == "true") {
-    window.document.body.classList.value = "dark-mode";
-  }
-  function toggleTheme() {
-    window.document.body.classList.toggle("dark-mode");
-  }
-
-  // подключаемся к локальной машине, получаем карту сети
-  function getNetworkMap() {
-    devices = JSON.parse(
-      '[{"deviceID":"","deviceIP":"' + myip + '","deviceName":""}]'
-    );
-    devices[0].id = 0;
-    devices[0].status = false;
-    console.log("Подключаемся к WS на localhost ", devices);
-    if (connectionType != "MQTT") {
-      socket[0] = new WebSocket("ws://" + myip + "/ws");
-      socket[0].addEventListener("open", function (event) {
-        devices[0].id = 0;
-        devices[0].status = true;
-        devices = devices;
-        console.log("WS CONNECTED! " + myip);
-
-        // получаем "карту сети" по websocket
-        socket[0].send("getNetworkMap");
-        // получаем конфигурацию ESP по websocket
-        socket[0].send("getconfigsetupjson");
-      });
-      socket[0].addEventListener("message", function (event) {
-        if (Cookies.get("consolelog") == "true") {
-          console.log("NEW data packet " + myip, event.data);
-        }
-        // запускаем обработку пришедшего сообщения
-        //console.log(event.data);
-        addMessage(event.data, 0);
-      });
-      // Обработка ошибок websocket
-      socket[0].addEventListener("close", (event) => {
-        if (item) {
-          console.log("ws close " + item.deviceIP);
-        } else {
-          console.log("ws close " + myip);
-        }
-        devices[0].status = false;
-        devices = devices;
-      });
-      socket[0].addEventListener("error", function (event) {
-        if (item) {
-          console.log(item.deviceIP + " WebSocket error: ", event);
-        } else {
-          console.log(myip + " WebSocket error: ", event);
-        }
-
-        devices[0].status = false;
-        devices = devices;
-      });
-    }
-  }
-  getNetworkMap();
-
-  // добавляем новые подключения из карты сети
-
-  function addConnection(devices) {
-    if (devices) {
-      devices.forEach(function (item, i, arr) {
-        if (item.deviceIP != myip) {
-          console.log("trying connect", item, i);
-          socket[i] = new WebSocket("ws://" + item.deviceIP + "/ws");
-          socket[i].addEventListener("open", function (event) {
-            devices[i].id = i;
-            devices[i].status = true;
-            devices = devices;
-            console.log("WS CONNECTED! " + item.deviceIP, i);
-
-            // получаем конфигурацию ESP по websocket
-
-            socket[i].send("getconfigsetupjson");
-          });
-          socket[i].addEventListener("message", function (event) {
-            // запускаем обработку пришедшего сообщения
-            // вывод отладочных сообщений в консоль
-
-            if (Cookies.get("consolelog") == "true") {
-              console.log("NEW data packet " + item.deviceIP, event.data);
-            }
-
-            addMessage(event.data, i);
-          });
-          // Обработка ошибок websocket
-          socket[i].addEventListener("close", (event) => {
-            console.log("ws close " + item.deviceIP);
-            devices[i].status = false;
-            devices = devices;
-            NetworkMap = NetworkMap;
-            console.log(devices);
-          });
-          socket[i].addEventListener("error", function (event) {
-            console.log(item.deviceIP + " WebSocket error: ", event);
-            devices[i].status = false;
-            devices = devices;
-            NetworkMap = NetworkMap;
-            console.log(devices);
-          });
-        }
-      });
-      devices[0].id = 0;
-      devices[0].status = true;
-    }
-  }
-
-  // addConnection(devices);
-
-  function addMessage(data, socket) {
-    NetworkMap = NetworkMap;
-    devices = devices;
-
-    try {
-      data = JSON.parse(data);
-
-      // editor
-      if (data.widget) {
-        editJSON = data;
-        editJSON = JSON.stringify(editJSON);
-      }
-      // Если пришла карта сети
-      if (data.deviceID) {
-        editJSON = data;
-        editJSON = JSON.stringify(editJSON);
-      }
-
-      data.socket = socket;
-      // Если пришел Config
-      if (data.apssid) {
-        //	console.log(data);
-        data.webMQTT = false;
-        data.consolelog = false;
-        data.darktheme = false;
-        data.webMQTT = Cookies.get("webMQTT") == "true" ? true : false;
-        data.consolelog = Cookies.get("consolelog") == "true" ? true : false;
-        data.darktheme = Cookies.get("darktheme") == "true" ? true : false;
-
-        Conf = [...Conf, data];
-        // Запоминаем настройки MQTT дря быстрой смены в выпадающем списке
-        if (Conf != "") {
-          MQTTsample[0].mqttServer = Conf[0].mqttServer;
-          MQTTsample[0].mqttPort = Conf[0].mqttPort;
-          MQTTsample[0].mqttPortwss = Conf[0].mqttPortwss;
-          MQTTsample[0].mqttPrefix = Conf[0].mqttPrefix;
-          MQTTsample[0].mqttUser = Conf[0].mqttUser;
-          MQTTsample[0].mqttPass = Conf[0].mqttPass;
-          MQTTsample[0].mqttPath = Conf[0].mqttPath;
-        }
-      }
-
-      // Если пришла карта сети
-      if (data[0].deviceID) {
-        console.log("пришла карта сети :", data);
-        devices = data;
-        editJSON = data;
-        editJSON = JSON.stringify(editJSON);
-        //Conf=[];
-
-        addConnection(devices);
-        NetworkMap = data;
-      }
-    } catch (e) {
-      if (Cookies.get("consolelog") == "true") {
-        console.log("ERROR parse JSON", data);
-      }
-    }
-  }
-
-  let inputIP = "";
-  let inputName = "";
-
-  let edit = true;
-  function handleClick() {
-    edit = true;
-  }
-  function handleClick1() {
-    edit = false;
-  }
-
-  function addTodo(inputIP, inputName) {
-    NetworkMap = [
-      ...NetworkMap,
-      {
-        deviceID: "0000000-0000000",
-        deviceIP: inputIP,
-        deviceName: inputName,
-      },
-    ];
-    NetworkMap = NetworkMap;
-    inputIP = "";
-    inputName = "";
-    // сохраняем NetworkMap.json   // Надо добавить перебор сокетов
-    //	socket.forEach(function(asd, i, arr) {
-    socket[0].send("{NetworkMap:" + JSON.stringify(NetworkMap) + "}");
-    //});
-  }
-
-  function removeTodo(id) {
-    NetworkMap.splice(id, 1);
-    NetworkMap = NetworkMap;
-    // сохраняем NetworkMap.json // Надо добавить перебор сокетов
-    //socket.forEach(function(asd, i, arr) {
-    socket[0].send("{NetworkMap:" + JSON.stringify(NetworkMap) + "}");
-    //});
-  }
-
-  let MQTTsample = [
-    {
-      mqttServer: "",
-      mqttPort: "",
-      mqttPortwss: "",
-      mqttPrefix: "",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "",
-      placeholder: "",
-    },
-    {
-      mqttServer: "meef.ru",
-      mqttPort: 1883,
-      mqttPortwss: 18883,
-      mqttPrefix: "/IotManager",
-      mqttUser: "IotManager:guest",
-      mqttPass: "guest",
-      mqttPath: "/ws",
-      placeholder: "",
-    },
-    {
-      mqttServer: "test.mosquitto.org",
-      mqttPort: 1883,
-      mqttPortwss: 8081,
-      mqttPrefix: "/IotManager",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "/ws",
-      placeholder: "",
-    },
-    {
-      mqttServer: "broker.hivemq.com",
-      mqttPort: 1883,
-      mqttPortwss: 8000,
-      mqttPrefix: "/IotManager",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "/mqtt",
-      placeholder: "",
-    },
-    {
-      mqttServer: "broker.mqttdashboard.com",
-      mqttPort: 1883,
-      mqttPortwss: 8000,
-      mqttPrefix: "/IotManager",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "/mqtt",
-      placeholder: "",
-    },
-    {
-      mqttServer: "broker.emqx.io",
-      mqttPort: 1883,
-      mqttPortwss: 8083,
-      mqttPrefix: "/IotManager",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "/mqtt",
-      placeholder: "",
-    },
-    {
-      mqttServer: "m3.wqtt.ru",
-      mqttPort: "",
-      mqttPortwss: "",
-      mqttPrefix: "/IotManager",
-      mqttUser: "",
-      mqttPass: "",
-      mqttPath: "",
-      placeholder: "Параметры указаны в личном кабинете насайте wqtt.ru",
-    },
-    {
-      mqttServer: "91.204.228.124",
-      mqttPort: 1883,
-      mqttPortwss: "",
-      mqttPrefix: "/IotManager",
-      mqttUser: "rise",
-      mqttPass: "23ri22se32",
-      mqttPath: "",
-      placeholder: "",
-    },
-  ];
-
-  let selected;
-  let i = 0;
-  let id = 0;
-  let wiget = [];
-
-  function chengConf(id) {
-    i = id;
-  }
-  function chengMQTT(selected) {
-    Conf[i]["mqttServer"] = selected.mqttServer;
-    Conf[i]["mqttPort"] = selected.mqttPort;
-    Conf[i]["mqttPortwss"] = selected.mqttPortwss;
-    Conf[i]["mqttPrefix"] =
-      selected.mqttPrefix + Math.floor(Math.random() * 10000);
-    Conf[i]["mqttUser"] = selected.mqttUser;
-    Conf[i]["mqttPass"] = selected.mqttPass;
-    Conf[i]["mqttPath"] = selected.mqttPath;
-    Conf[i]["placeholder"] = selected.placeholder;
-
-    changeConf(selected.mqttServer, "mqttServer", i);
-    changeConf(selected.mqttPort, "mqttPort", i);
-    changeConf(selected.mqttPortwss, "mqttPortwss", i);
-    changeConf(selected.mqttPrefix, "mqttPrefix", i);
-    changeConf(selected.mqttUser, "mqttUser", i);
-    changeConf(selected.mqttPass, "mqttPass", i);
-    changeConf(selected.mqttPath, "mqttPath", i);
-  }
-  let m;
-
-  function changeConf(val, name, socet) {
-    console.log(val, name, socet);
-    socket[socet].send(
-      '{"setconfigsetupjson":"1", "name":"' + name + '", "val":"' + val + '"}'
-    );
-    Cookies.set(name, val, { expires: 365 });
-  }
-
-  function GetMQTThttp(val, name, socet) {
-    console.log(val, name, socet);
-    socket[socet].send(
-      '{"setconfigsetupjson":"1", "name":"' + name + '", "val":"' + val + '"}'
-    );
-    Cookies.set(name, val, { expires: 365 });
-
-    if (val == true) {
-      urlMQTT =
-        "https://meef.ru/dashboard/?id=" +
-        Math.floor(Math.random() * 100000000);
-      //urlMQTT = "https://192.168.0.10/?id=" + Math.floor(Math.random() * 100000000);
-      Cookies.set("urlMQTT", urlMQTT, { expires: 365 });
-    } else {
-      urlMQTT = "";
-      Cookies.set("urlMQTT", urlMQTT, { expires: 365 });
-    }
-  }
-
-  function reboot(selected) {
-    socket[selected].send('{"command":"reboot"}');
-  }
-  function Pastesettings(i) {
-    Conf[i]["mqttServer"] = Conf[0]["mqttServer"];
-    Conf[i]["mqttPort"] = Conf[0]["mqttPort"];
-    Conf[i]["mqttPortwss"] = Conf[0]["mqttPortwss"];
-    Conf[i]["mqttPrefix"] = Conf[0]["mqttPrefix"];
-    Conf[i]["mqttUser"] = Conf[0]["mqttUser"];
-    Conf[i]["mqttPass"] = Conf[0]["mqttPass"];
-    Conf[i]["mqttPath"] = Conf[0]["mqttPath"];
-
-    Conf[i]["mqttServer2"] = Conf[0]["mqttServer2"];
-    Conf[i]["mqttPort2"] = Conf[0]["mqttPort2"];
-    Conf[i]["mqttPortwss2"] = Conf[0]["mqttPortwss2"];
-    Conf[i]["mqttPrefix2"] = Conf[0]["mqttPrefix2"];
-    Conf[i]["mqttUser2"] = Conf[0]["mqttUser2"];
-    Conf[i]["mqttPass2"] = Conf[0]["mqttPass2"];
-    Conf[i]["mqttPath2"] = Conf[0]["mqttPath2"];
-
-    Conf[i]["telegramApi"] = Conf[0]["telegramApi"];
-    Conf[i]["telegonof"] = Conf[0]["telegonof"];
-    Conf[i]["teleginput"] = Conf[0]["teleginput"];
-    Conf[i]["autos"] = Conf[0]["autos"];
-    Conf[i]["chatId"] = Conf[0]["chatId"];
-
-    changeConf(Conf[i]["mqttServer"], "mqttServer", i);
-    changeConf(Conf[i]["mqttPort"], "mqttPort", i);
-    changeConf(Conf[i]["mqttPortwss"], "mqttPortwss", i);
-    changeConf(Conf[i]["mqttPrefix"], "mqttPrefix", i);
-    changeConf(Conf[i]["mqttUser"], "mqttUser", i);
-    changeConf(Conf[i]["mqttPass"], "mqttPass", i);
-    changeConf(Conf[i]["mqttPath"], "mqttPath", i);
-
-    changeConf(Conf[i]["mqttServer2"], "mqttServer2", i);
-    changeConf(Conf[i]["mqttPort2"], "mqttPort2", i);
-    changeConf(Conf[i]["mqttPortwss2"], "mqttPortwss2", i);
-    changeConf(Conf[i]["mqttPrefix2"], "mqttPrefix2", i);
-    changeConf(Conf[i]["mqttUser2"], "mqttUser2", i);
-    changeConf(Conf[i]["mqttPass2"], "mqttPass2", i);
-    changeConf(Conf[i]["mqttPath2"], "mqttPath2", i);
-
-    changeConf(Conf[i]["telegramApi"], "telegramApi", i);
-    changeConf(Conf[i]["telegonof"], "telegonof", i);
-    changeConf(Conf[i]["teleginput"], "teleginput", i);
-    changeConf(Conf[i]["autos"], "autos", i);
-    changeConf(Conf[i]["chatId"], "chatId", i);
-  }
-
-  // обратный отсчет для 		Shutter
-  let frame;
-  let elapsed = 0;
-  let duration = 5000;
-  let last_time = window.performance.now();
-  (function update() {
-    frame = requestAnimationFrame(update);
-    const time = window.performance.now();
-    elapsed += Math.min(time - last_time, duration - elapsed);
-    last_time = time;
-    if (elapsed == duration) {
-      Shutterhiddn();
-    }
-  })();
-
-  let Shuttervisibl = "visibility: hidden;";
-
-  function Shuttervisibil() {
-    Shuttervisibl = "visibility: visible;";
-    //	duration = sec;
-    elapsed = 0;
-    if (elapsed === duration) {
-      Shuttervisibl = "visibility: hidden;";
-    }
-  }
-  function Shutterhiddn() {
-    Shuttervisibl = "visibility: hidden;";
-  }
-  Shuttervisibil();
-
-  // Селектор wiget.json для editor
-  let fileSelected;
-
-  let widgetfiles = [
-    { id: 0, name: `` },
-    { id: 1, name: `anydataTemp.json` },
-    { id: 2, name: `anydataHum.json` },
-    { id: 3, name: `anydataPress.json` },
-    { id: 4, name: `alarm.json` },
-    { id: 5, name: `anydataAlarm.json` },
-    { id: 6, name: `anydataAmp.json` },
-    { id: 7, name: `anydataHtz.json` },
-    { id: 8, name: `anydataPpb.json` },
-    { id: 9, name: `anydataPpm.json` },
-    { id: 10, name: `anydataTime.json` },
-    { id: 11, name: `anydataVlt.json` },
-    { id: 12, name: `anydataWhr.json` },
-    { id: 13, name: `anydataWtt.json` },
-    { id: 14, name: `btn.json` },
-    { id: 15, name: `select.json` },
-    { id: 16, name: `chart.json` },
-    { id: 17, name: `chart3.json` },
-    { id: 18, name: `NetworkMap.json` },
-  ];
-
-  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;
-  };
-  //	editJSON=JSON.stringify(editJSON);
-
-  // получаем файл с esp
-  function widgetFileChenged(fileSelected, i) {
-    console.log(fileSelected.name);
-    if (
-      fileSelected.name == "NetworkMap.json" ||
-      fileSelected.name == "config.json"
-    ) {
-      socket[i].send('{"getFileName" : "' + fileSelected.name + '"}');
-    } else {
-      socket[i].send('{"getFileName" : "widgets/' + fileSelected.name + '"}');
-    }
-  }
-  // отправляем файл на ESP
-  function handleSubmit(val1, wigetJSON, i) {
-    let newWigetJSON = document.getElementById("S1").value;
-    if (newWigetJSON) {
-      newWigetJSON = JSON.parse(newWigetJSON);
-      if (fileSelected.name == "NetworkMap.json") {
-        newWigetJSON.setFileName = fileSelected.name;
-      } else {
-        newWigetJSON.setFileName = "widgets/" + fileSelected.name;
-      }
-      console.log("newWigetJSON: ", newWigetJSON);
-      newWigetJSON = JSON.stringify(newWigetJSON);
-
-      socket[i].send(newWigetJSON);
-    }
-  }
-</script>
-
-<body>
-  {#if connectionType == "MQTT"}{:else}
-    <div
-      class="Shutter"
-      style="{Shuttervisibl} position: absolute; z-index: 1; right: 1%; top: -45px"
-      id="layer1"
-    >
-      <span>
-        <progress value={elapsed / duration} />
-        <br /><br />
-        <!--Перечисляем девайсы в сети-->
-        {#each devices as NetworkDevice, i}
-          {#if !NetworkDevice.status && NetworkDevice.status != false}
-            <p align="left" style=" margin-top: -5px; margin-bottom: -5px">
-              {NetworkDevice.deviceIP}
-              {NetworkDevice.deviceName} waiting
-            </p>
-          {/if}
-          {#if NetworkDevice.status == true}
-            <p
-              align="left"
-              style="color: green; margin-top: -5px; margin-bottom: -5px"
-            >
-              {NetworkDevice.deviceIP}
-              {NetworkDevice.deviceName} connected
-            </p>
-          {/if}
-          {#if NetworkDevice.status == false}
-            <p
-              align="left"
-              style="color: red; margin-top: -5px; margin-bottom: -5px"
-              on:click={addConnection(devices)}
-            >
-              {NetworkDevice.deviceIP}
-              {NetworkDevice.deviceName} disconnected
-            </p>
-          {/if}
-        {/each}
-      </span>
-    </div>
-  {/if}
-  {#if connectionType == "MQTT"}
-    <div
-      style=" position: absolute;  z-index: 2; right: 2%; top: 1%"
-      id="layerMQTT"
-    >
-      MQTT
-    </div>
-  {:else}
-    <div
-      on:mouseenter={Shuttervisibil}
-      on:click={Shutterhiddn}
-      style=" position: absolute;  z-index: 2; right: 1.5%; top: -45px"
-      id="layerWS"
-    >
-      localNET
-    </div>
-  {/if}
-
-  <div
-    style=" position: absolute;  z-index: 2; right: 90px; top: -45px; color:red"
-    on:click={toggleTheme}
-    id="toggleTheme"
-  >
-    🔆
-  </div>
-
-  {#if Conf != ""}
-    <Box>
-      <b on:click={handleClick}>Network Map</b>
-      <span on:click={handleClick1} class="letter1" />
-      {#if NetworkMap == ""}
-        <b>Файл с картой сети еще не создан</b>
-      {/if}
-      <div>Навсех добавляемых ESP должнабыть такая же прошивка !!!</div>
-
-      <table border="0" width="100%">
-        {#if NetworkMap != ""}
-          {#each NetworkMap as espconf, m}
-            <tr>
-              <td width="1%" class="letter2">IP</td><td
-                ><input
-                  class:red={espconf["status"] == false}
-                  type="text"
-                  disabled
-                  required
-                  bind:value={NetworkMap[m]["deviceIP"]}
-                />
-              </td>
-              <td width="1%">Name</td><td width="30%"
-                ><input
-                  type="text"
-                  required
-                  bind:value={NetworkMap[m]["deviceName"]}
-                /></td
-              >
-              <td><button on:click={() => removeTodo(m)}>-</button></td>
-            </tr>
-          {/each}
-
-          <tr>
-            <td width="1%" class="letter2">IP</td><td
-              ><input type="text" bind:value={inputIP} /></td
-            >
-            <td width="1%">Name</td><td width="30%"
-              ><input type="text" bind:value={inputName} /></td
-            >
-            <td
-              ><button on:click={() => addTodo(inputIP, inputName)}>+</button
-              ></td
-            >
-          </tr>
-        {:else}
-          <tr>
-            <td width="1%" class="letter2">IP</td><td
-              ><input
-                disabled
-                type="text"
-                required
-                bind:value={Conf[i].ip}
-              /></td
-            >
-            <td width="1%">Name</td><td width="30%"
-              ><input type="text" required bind:value={Conf[i].name} /></td
-            >
-            <td
-              ><button on:click={() => addTodo(Conf[i].ip, Conf[i].name)}
-                >+</button
-              ></td
-            ></tr
-          >
-        {/if}
-      </table>
-      <br />
-      <div>После добавления ESP нажмите "F5" что обновить страницу</div>
-    </Box>
-
-    <b>Select ESP</b>
-    <span
-      ><select bind:value={selected} on:change={chengConf(selected)}>
-        {#each Conf as espconf, n}
-          <option value={n}>
-            <b>{Conf[n]["name"]}</b> ({Conf[n]["ip"]})
-          </option>
-        {/each}
-      </select></span
-    >
-
-    <!--WIFI-->
-    <button on:click={Pastesettings(i)}
-      ><Tooltip
-        title="Вставить настройки MQTT и Telegram из верхней в списке ESP "
-        >Paste settings</Tooltip
-      ></button
-    >
-    <button on:click={reboot(Conf[i].socket)}>Reboot</button>
-    <Box>
-      <b on:click={handleClick}>WIFI</b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">ESP name</td>
-
-            <td>
-              <input
-                type="text"
-                placeholder="IotManager"
-                required
-                bind:value={Conf[i].name}
-                on:change={changeConf(Conf[i].name, "name", Conf[i].socket)}
-              />
-            </td>
-
-            <Tooltip
-              title="Имя устройства должно состоять из английских букв и иметь длинну от 6 до 12 символов"
-            >
-              <td>?</td>
-            </Tooltip>
-          </tr>
-          <hr />
-          <tr>
-            <td>WIFI name</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i].routerssid}
-                on:change={changeConf(
-                  Conf[i].routerssid,
-                  "routerssid",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="После того как вы введете логин пароль от вашего wifi роутера необходимо нажать кнопку сохранить, а затем обязательно нажать кнопку перезагрузить устройство внизу этой страницы"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>WIFI password</td>
-            <td
-              ><input
-                type="password"
-                bind:value={Conf[i]["routerpass"]}
-                on:change={changeConf(
-                  Conf[i].routerpass,
-                  "routerpass",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="После того как вы введете логин пароль от вашего wifi роутера необходимо нажать кнопку сохранить, а затем обязательно нажать кнопку перезагрузить устройство внизу этой страницы"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <hr />
-          <tr>
-            <td>AP name</td>
-            <td
-              ><input
-                type="text"
-                required
-                bind:value={Conf[i]["apssid"]}
-                on:change={changeConf(Conf[i].apssid, "apssid", Conf[i].socket)}
-              /></td
-            >
-            <Tooltip
-              title="Устройство постоянно сканирует сеть на наличие wifi. Если роутер отключен, то устройство автоматически перейдет в режим точки доступа. Когда wifi появится устройство автоматически подключится к роутеру снова, и выключит точку доступа"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-
-    <!-- Users-->
-    <Box>
-      <b on:click={handleClick}>Users</b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">WEB admin login</td>
-            <td
-              ><input
-                type="text"
-                required
-                bind:value={Conf[i]["weblogin"]}
-                on:change={changeConf(
-                  Conf[i].weblogin,
-                  "weblogin",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>WEB admin password</td>
-            <td
-              ><input
-                type="password"
-                required
-                bind:value={Conf[i]["webpass"]}
-                on:change={changeConf(
-                  Conf[i].webpass,
-                  "webpass",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-
-    <!--Time-->
-    <Box>
-      <b on:click={handleClick}>Time </b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">Time Zone</td>
-            <td
-              ><input
-                type="text"
-                required
-                bind:value={Conf[i]["timezone"]}
-                on:change={changeConf(
-                  Conf[i].timezone,
-                  "timezone",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>NTP server</td>
-            <td
-              ><input
-                type="text"
-                required
-                bind:value={Conf[i]["ntp"]}
-                on:change={changeConf(Conf[i].ntp, "ntp", Conf[i].socket)}
-              /></td
-            >
-            <Tooltip
-              title="После изменения поля NTP сервер необходимо перезагрузить устройство"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-
-    <!--MQTT-->
-    <Box>
-      <b on:click={handleClick}>MQTT</b>
-      <select bind:value={selected} on:change={chengMQTT(selected)}>
-        {#each MQTTsample as mqtt, n}
-          <option value={mqtt}>
-            <b>{mqtt.mqttServer}</b>
-          </option>
-        {/each}
-      </select> <span>Готовые шаблоны</span>
-
-      <span on:click={handleClick1} class="letter1">
-        <!--	{@html Conf[i]["warning4"]}-->
-      </span>
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">MQTT server</td>
-            <td
-              ><input
-                type="text"
-                placeholder={Conf[i]["placeholder"]}
-                required
-                bind:value={Conf[i]["mqttServer"]}
-                on:change={changeConf(
-                  Conf[i].mqttServer,
-                  "mqttServer",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="После изменеения параметров MQTT требуетсяперезагрузка"
-            >
-              <td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>MQTT port (TCP)</td>
-            <td
-              ><input
-                type="text"
-                required
-                placeholder={Conf[i]["placeholder"]}
-                bind:value={Conf[i]["mqttPort"]}
-                on:change={changeConf(
-                  Conf[i].mqttPort,
-                  "mqttPort",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="После изменеения параметров MQTT требуетсяперезагрузка"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>MQTT wss port (TLS)</td>
-            <td
-              ><input
-                type="text"
-                placeholder={Conf[i]["placeholder"]}
-                bind:value={Conf[i]["mqttPortwss"]}
-                on:change={changeConf(
-                  Conf[i].mqttPortwss,
-                  "mqttPortwss",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="Должен быть указан для подключения IOS устройств и подключения к 'Панели управлени' по MQTT через Internet "
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPrefix</td>
-            <td
-              ><input
-                type="text"
-                required
-                bind:value={Conf[i]["mqttPrefix"]}
-                on:change={changeConf(
-                  Conf[i].mqttPrefix,
-                  "mqttPrefix",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="Обратите внимание что поле префикс может состоять только из одного слова и одного разделителя: /prefix, вариант вида: /prefix1/prefix2 работать не будет. После изменения поля prefix необходимо перезагрузить устройство"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttUser</td>
-            <td
-              ><input
-                type="text"
-                placeholder={Conf[i]["placeholder"]}
-                bind:value={Conf[i]["mqttUser"]}
-                on:change={changeConf(
-                  Conf[i].mqttUser,
-                  "mqttUser",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="После изменеения параметров MQTT требуетсяперезагрузка"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPass</td>
-            <td
-              ><input
-                type="text"
-                placeholder={Conf[i]["placeholder"]}
-                bind:value={Conf[i]["mqttPass"]}
-                on:change={changeConf(
-                  Conf[i].mqttPass,
-                  "mqttPass",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPath</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPath"]}
-                on:change={changeConf(
-                  Conf[i].mqttPath,
-                  "mqttPath",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <br />
-          <tr>
-            <td width="40%">Web dashbord over MQTT</td>
-            <td>
-              <form
-                id="mqttform"
-                method="post"
-                action={urlMQTT}
-                onsubmit="fmSubmit()"
-              >
-                <input
-                  type="checkbox"
-                  bind:checked={Conf[i].webMQTT}
-                  on:change={GetMQTThttp(
-                    Conf[i].webMQTT,
-                    "webMQTT",
-                    Conf[i].socket
-                  )}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="id_user"
-                  name="id_user"
-                  value={urlMQTT}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttServer"
-                  name="mqttServer"
-                  value={Conf[i]["mqttServer"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttPort"
-                  name="mqttPort"
-                  value={Conf[i]["mqttPort"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttPortwss"
-                  name="mqttPortwss"
-                  value={Conf[i]["mqttPortwss"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttPrefix"
-                  name="mqttPrefix"
-                  value={Conf[i]["mqttPrefix"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttUser"
-                  name="mqttUser"
-                  value={Conf[i]["mqttUser"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttPass"
-                  name="mqttPass"
-                  value={Conf[i]["mqttPass"]}
-                />
-                <input
-                  hidden
-                  type="text"
-                  id="mqttPath"
-                  name="mqttPath"
-                  value={Conf[i]["mqttPath"]}
-                />
-
-                {#if Conf[i].webMQTT == true}
-                  <input type="submit" value="перейти на MQTT" />
-                  <!--<a href="{Cookies.get('urlMQTT')}" onclick="document.getElementById('mqttform').submit(); ">перейти на MQTT</a>-->
-                  {(urlMQTT = Cookies.get("urlMQTT"))}
-                {/if}
-              </form>
-            </td>
-            <Tooltip
-              title="Позволяет поучить доступ к 'Панели управления' через Internet по протоколу MQTT. Должен быть указан MQTT wss port (TLS) "
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-
-          <br /><br /><br /><br /><br />
-
-          <!--MQTT2-->
-          <b>Rreserve MQTT</b>
-          <hr />
-          <br />
-          <tr>
-            <td>MQTT server </td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttServer2"]}
-                on:change={changeConf(
-                  Conf[i].mqttServer2,
-                  "mqttServer2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>MQTT port</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPort2"]}
-                on:change={changeConf(
-                  Conf[i].mqttPort2,
-                  "mqttPort2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>MQTT wss port</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPortwss2"]}
-                on:change={changeConf(
-                  Conf[i].mqttPortwss2,
-                  "mqttPortwss2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPrefix</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPrefix2"]}
-                on:change={changeConf(
-                  Conf[i].mqttPrefix2,
-                  "mqttPrefix2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip
-              title="Поле префикс может состоять только из одного слова и одного разделителя: /prefix, вариант вида: /prefix1/prefix2 работать не будет. После изменения поля prefix необходимо перезагрузить устройство"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttUser</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttUser2"]}
-                on:change={changeConf(
-                  Conf[i].mqttUser2,
-                  "mqttUser2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPass</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPass2"]}
-                on:change={changeConf(
-                  Conf[i].mqttPass2,
-                  "mqttPass2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>mqttPath</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["mqttPath2"]}
-                on:change={changeConf(
-                  Conf[i].mqttPath2,
-                  "mqttPath2",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr><br />
-        </table>
-      {/if}
-    </Box>
-
-    <!--Telegram-->
-    <Box>
-      <b on:click={handleClick}>Telegram </b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <br />
-          <tr>
-            <td width="40%">Enable Telegram</td>
-
-            <td>
-              <input
-                type="checkbox"
-                bind:checked={Conf[i]["telegonof"]}
-                on:change={changeConf(
-                  Conf[i]["telegonof"] == true ? 1 : 0,
-                  "telegonof",
-                  Conf[i].socket
-                )}
-              />
-
-              {#if Conf[i]["telegonof"] == 0}
-                {(Conf[i]["telegonof"] = false)}
-              {:else}
-                {(Conf[i]["telegonof"] = true)}
-              {/if}
-            </td>
-
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr /><tr>
-            <td>Enable incoming messages</td>
-
-            <td>
-              <input
-                type="checkbox"
-                bind:checked={Conf[i]["teleginput"]}
-                on:change={changeConf(
-                  Conf[i]["teleginput"] == true ? 1 : 0,
-                  "teleginput",
-                  Conf[i].socket
-                )}
-              />
-
-              {#if Conf[i]["teleginput"] == 0}
-                {(Conf[i]["teleginput"] = false)}
-              {:else}
-                {(Conf[i]["teleginput"] = true)}
-              {/if}
-            </td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr /><tr>
-            <td>Auto get chat ID </td>
-
-            <td>
-              <input
-                type="checkbox"
-                bind:checked={Conf[i]["autos"]}
-                on:change={changeConf(
-                  Conf[i]["autos"] == true ? 1 : 0,
-                  "autos",
-                  Conf[i].socket
-                )}
-              />
-              {#if Conf[i]["autos"] == 0}
-                {(Conf[i]["autos"] = false)}
-              {:else}
-                {(Conf[i]["autos"] = true)}
-              {/if}
-            </td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr><br />
-          <tr>
-            <td>Telegram API token</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["telegramApi"]}
-                on:change={changeConf(
-                  Conf[i].telegramApi,
-                  "telegramApi",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>Telegram chat ID</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["chatId"]}
-                on:change={changeConf(Conf[i].chatId, "chatId", Conf[i].socket)}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-
-    <!--UART-->
-    <Box>
-      <b on:click={handleClick}>UART </b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">Enable UART</td>
-            <td>
-              <input disabled type="checkbox" bind:checked={Conf[i]["???"]} />
-            </td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr /><tr>
-            <td>Send all messages to UART</td>
-            <td
-              ><input
-                disabled
-                type="checkbox"
-                bind:checked={Conf[i]["???"]}
-              /></td
-            >
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr><br />
-          <tr>
-            <td>UART speed</td>
-            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>PIN TX</td>
-            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td>PIN RX</td>
-            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-
-    <!-- Developer settings-->
-    <Box>
-      <b on:click={handleClick}>Developer settings</b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <table border="0" width="100%">
-          <tr>
-            <td width="40%">Update server</td>
-            <td
-              ><input
-                type="text"
-                placeholder="http://206.189.49.244"
-                bind:value={Conf[i]["serverip"]}
-                on:change={changeConf(
-                  Conf[i].serverip,
-                  "serverip",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td>Split point graphs</td>
-            <td
-              ><input
-                type="text"
-                bind:value={Conf[i]["grafmax"]}
-                on:change={changeConf(
-                  Conf[i].grafmax,
-                  "grafmax",
-                  Conf[i].socket
-                )}
-              /></td
-            >
-            <Tooltip title="Бла-бла-бла про то как это использовать"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-          <tr>
-            <td width="40%">Use a dark theme</td>
-            <td>
-              {#if Conf[i]["darktheme"] == "false"}
-                <td
-                  ><input
-                    type="checkbox"
-                    on:change={(changeConf("true", "darktheme", Conf[i].socket),
-                    toggleTheme())}
-                  /></td
-                >
-              {:else}
-                <td
-                  ><input
-                    type="checkbox"
-                    bind:checked={Conf[i]["darktheme"]}
-                    on:change={(changeConf(
-                      Conf[i].darktheme,
-                      "darktheme",
-                      Conf[i].socket
-                    ),
-                    toggleTheme())}
-                  /></td
-                >
-              {/if}
-            </td>
-            <Tooltip title=""><td>?</td></Tooltip>
-          </tr>
-          <tr>
-            <td width="40%">Console LOG</td>
-            <td>
-              {#if Conf[i]["consolelog"] == "false"}
-                <td
-                  ><input
-                    type="checkbox"
-                    on:change={changeConf("true", "consolelog", Conf[i].socket)}
-                  /></td
-                >
-              {:else}
-                <td
-                  ><input
-                    type="checkbox"
-                    bind:checked={Conf[i]["consolelog"]}
-                    on:change={changeConf(
-                      Conf[i].consolelog,
-                      "consolelog",
-                      Conf[i].socket
-                    )}
-                  /></td
-                >
-              {/if}
-            </td>
-            <Tooltip
-              title="Включает вывод в консоль браузера всех полученных пакетов"
-              ><td>?</td>
-            </Tooltip>
-          </tr>
-        </table>
-      {/if}
-    </Box>
-    <!-- editor-->
-    <Box>
-      <b on:click={handleClick}>Editor</b><span
-        on:click={handleClick1}
-        class="letter1"
-      />
-      {#if edit == true}
-        <form>
-          <select
-            bind:value={fileSelected}
-            on:change={widgetFileChenged(fileSelected, i)}
-          >
-            {#each widgetfiles as file}
-              <option value={file}>
-                {file.name}
-              </option>
-            {/each}
-          </select>
-
-          <button
-            on:click={handleSubmit(fileSelected, editJSON, Conf[i].socket)}
-            >Save</button
-          >
-
-          <p>
-            <textarea rows="15" id="S1">{syntaxHighlight(editJSON)}</textarea>
-          </p>
-        </form>
-      {/if}
-    </Box>
-  {:else}
-    <p align="center"><Logo /></p>
-  {/if}
-  <br /><br />
-  <div class="letter" align="center">developed by avaks@meef.ru</div>
-</body>
-
-<style>
-  .letter {
-    color: grey;
-    font-size: 60%;
-    padding-left: 0px;
-    opacity: 0.5;
-  }
-  table {
-    margin: 0px;
-    background-color: #fafafa;
-    line-height: 1;
-  }
-  td {
-    text-align: left;
-    padding-left: 1px;
-  }
-  input[type="text"] {
-    width: 100%;
-    padding: 10px;
-    border: 1;
-    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.06);
-    border-radius: 1px;
-  }
-
-  .letter1 {
-    color: grey;
-    font-size: 80%;
-    padding-left: 20px;
-  }
-  .letter2 {
-    text-align: left;
-    padding-left: 0px;
-  }
-  select {
-    padding: 10px;
-    border-radius: 10px;
-    padding-left: 20px;
-    height: 40px;
-    font-size: 13px;
-  }
-  input[type="password"] {
-    width: 100%;
-    padding: 10px;
-    border: 1;
-    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.06);
-    border-radius: 1px;
-  }
-
-  input:required:invalid:not(:placeholder-shown) {
-    border-color: crimson;
-  }
-
-  .red {
-    border-color: crimson;
-  }
-  .green {
-    border-color: greenyellow;
-  }
-
-  .tooltip {
-    border: 1px solid #ddd;
-    box-shadow: 1px 1px 1px #ddd;
-    background: white;
-    border-radius: 4px;
-    padding: 4px;
-    position: absolute;
-  }
-  progress {
-    height: 4px;
-  }
-  textarea {
-    width: 100%;
-  }
-
-  button {
-    height: 30px;
-    border-radius: 4px;
-    line-height: 0;
-  }
-
-  :global(body.dark-mode) {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) textarea {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) input {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) select {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) button {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) div {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) span {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) lable {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  .Shutter {
-    background-color: hsl(200, 16%, 96%);
-    color: blak;
-    padding: 10px;
-    border-radius: 5px;
-  }
-  :global(body.dark-mode) .Shutter {
-    background-color: #1d3040;
-    color: #bfc2c7;
-    padding: 10px;
-    border-radius: 5px;
-  }
-
-  :global(body.dark-mode) table {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) .letter1 {
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) .letter2 {
-    color: #bfc2c7;
-  }
-  :global(body.dark-mode) b {
-    color: #bfc2c7;
-  }
-
-  :global(body.dark-mode) button {
-    background-color: #1d3040;
-    color: #bfc2c7;
-  }
-</style>
diff --git a/examples/parts.js b/examples/parts.js
deleted file mode 100644
index 43ee04e..0000000
--- a/examples/parts.js
+++ /dev/null
@@ -1 +0,0 @@
-{syntaxHighlight(JSON.stringify(wigets))}
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 649ce7d..ed1a4e0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -246,32 +246,15 @@
   @tailwind utilities;
 
   @layer components {
-    .btn-indigo {
-      @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;
-    }
-    .block-psn-center {
-      @apply grid place-items-center mx-2 sm:my-auto;
-    }
-    .card2 {
-      @apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
-    }
-    .widget-input {
-      @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 {
-      @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-after {
-      @apply pr-4 block text-gray-500 font-bold md:text-right;
-    }
+    /*==================================================cards grid=====================================================*/
+    /* grid for cards */
     .cards-grid {
       @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 {
       @apply grid grid-cols-1 justify-items-center;
     }
-    /*==================================================cards grid=====================================================*/
-
     /*=============================================card and items inside===============================================*/
     /* 1. paddig and style for card */
     .card {
@@ -300,11 +283,21 @@
       @apply pr-4 text-gray-500 font-bold;
     }
     /* 6. widget width*/
-    .widget-width {
+    .widget-width-input {
       @apply w-full sm:w-1/3 lg:w-1/3 xl:w-1/3 2xl:w-1/3;
     }
-    .widget-width-1-3 {
-      @apply w-1/3;
+    .widget-width-toggle {
+      @apply flex justify-end w-1/3;
+    }
+    /*====================================================others=====================================================*/
+    .btn-indigo {
+      @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 {
+      @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 {
+      @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;
     }
   }
 
@@ -427,6 +420,6 @@
   /* Toggle */
   input:checked ~ .dot {
     transform: translateX(100%);
-    background-color: #48bb78;
+    /* background-color: #48bb78;*/
   }
 </style>
diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte
index 19579f5..e1094db 100644
--- a/src/widgets/Input.svelte
+++ b/src/widgets/Input.svelte
@@ -11,7 +11,7 @@
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width">
+  <div class="widget-width-input">
     {#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), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
     {/if}
diff --git a/src/widgets/Toggle.svelte b/src/widgets/Toggle.svelte
index a4f81ac..90f0ae3 100644
--- a/src/widgets/Toggle.svelte
+++ b/src/widgets/Toggle.svelte
@@ -11,15 +11,13 @@
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width-1-3">
-    <div class="flex items-center justify-center w-full">
-      <label for={widget.topic} class="items-center cursor-pointer">
-        <div class="relative">
-          <input on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />
-          <div class="block bg-gray-600 w-14 h-8 rounded-full" />
-          <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition" />
-        </div>
-      </label>
-    </div>
+  <div class="widget-width-toggle">
+    <label for={widget.topic} class="items-center cursor-pointer">
+      <div class="relative">
+        <input on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />
+        <div class="block bg-gray-600 w-14 h-8 rounded-full" />
+        <div class="dot {widget['send'] == true ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1  w-6 h-6 rounded-full transition" />
+      </div>
+    </label>
   </div>
 </div>