From 764791565ffd749356a599bbc9e98489ecc41d11 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Tue, 17 Aug 2021 20:51:36 +0800
Subject: [PATCH] add editor

---
 examples/Setup.svelte | 1696 +++++++++++++++++++++++++++++++++++++++++
 examples/parts.js     |    1 +
 src/App.svelte        |   17 +
 src/Card.svelte       |    3 -
 4 files changed, 1714 insertions(+), 3 deletions(-)
 create mode 100644 examples/Setup.svelte
 create mode 100644 examples/parts.js

diff --git a/examples/Setup.svelte b/examples/Setup.svelte
new file mode 100644
index 0000000..fbe7291
--- /dev/null
+++ b/examples/Setup.svelte
@@ -0,0 +1,1696 @@
+<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
new file mode 100644
index 0000000..43ee04e
--- /dev/null
+++ b/examples/parts.js
@@ -0,0 +1 @@
+{syntaxHighlight(JSON.stringify(wigets))}
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index a9e83fb..77dcaaa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -17,6 +17,19 @@
     WSpush("mounted");
   });
 
+  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;
+  };
+
   let wigets = [];
 
   wigets = [
@@ -89,6 +102,10 @@
   <ul class="menu__main">
     <div class="bg-cover bg-gray-50 pt-16">
       <Route path="/">
+        <Card title="Редактор JSON">
+          <textarea rows="10" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
+          <button on:click={(wigets = JSON.parse(document.getElementById("text1").value))} class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button"> Save </button>
+        </Card>
         <Card title="Testing card1">
           {#each wigets as widget, i}
             {#if widget.widget === "input"}
diff --git a/src/Card.svelte b/src/Card.svelte
index 1d2e98b..42a3ea4 100644
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -3,11 +3,8 @@
 </script>
 
 <div class="container">
-  <!-- Card Container -->
   <div class="grid place-items-center mx-2 sm:my-auto">
-    <!-- Card -->
     <div class="w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-6 py-10 my-5 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg">
-      <!-- Card Title -->
       <h1 class="text-center text-lg text-gray-500 font-bold pb-6">{title}</h1>
       <slot />
     </div>