mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-03-26 23:12:34 +03:00
1697 lines
50 KiB
Svelte
1697 lines
50 KiB
Svelte
<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, "&")
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">");
|
||
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>
|