iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-30 20:09:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

много изменений

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-12-08 22:59:21 +01:00
parent f18102d63e
commit a171106933
4 changed files with 98 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/App.svelte
View File

@@ -1,9 +1,3 @@
<script context="module">
export function WSpush(ws, topic, value) {
console.log(ws, topic, value);
}
</script>
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import { Route, router, active } from "tinro"; import { Route, router, active } from "tinro";
@@ -18,6 +12,9 @@
import Anydata from "./widgets/Anydata.svelte"; import Anydata from "./widgets/Anydata.svelte";
//секция переменных========================================================================== //секция переменных==========================================================================
let debug = true;
let LOG_MAX_MESSAGES = 10;
//===========================================================================================
let myip = document.location.hostname; let myip = document.location.hostname;
let wigets = []; let wigets = [];
wigets = [ wigets = [
@@ -29,7 +26,7 @@
order: "4", order: "4",
descr: "Switch on boiler date", descr: "Switch on boiler date",
topic: "/prefix/00000-00004/date1", topic: "/prefix/00000-00004/date1",
ws: 1, ws: 0,
}, },
{ {
widget: "input", widget: "input",
@@ -39,7 +36,7 @@
order: "1", order: "1",
descr: "Switch on boiler time", descr: "Switch on boiler time",
topic: "/prefix/00000-00001/time", topic: "/prefix/00000-00001/time",
ws: 1, ws: 0,
}, },
{ {
widget: "input", widget: "input",
@@ -50,7 +47,7 @@
order: "2", order: "2",
descr: "Boiler temperature", descr: "Boiler temperature",
topic: "/prefix/00000-00002/temp", topic: "/prefix/00000-00002/temp",
ws: 1, ws: 0,
}, },
{ {
widget: "input", widget: "input",
@@ -60,7 +57,7 @@
order: "3", order: "3",
descr: "Message to be send", descr: "Message to be send",
topic: "/prefix/00000-00003/text", topic: "/prefix/00000-00003/text",
ws: 1, ws: 0,
}, },
{ {
widget: "toggle", widget: "toggle",
@@ -69,7 +66,7 @@
order: "3", order: "3",
descr: "Light in my room", descr: "Light in my room",
topic: "/prefix/00000-00003/btn1", topic: "/prefix/00000-00003/btn1",
ws: 1, ws: 0,
}, },
{ {
widget: "toggle", widget: "toggle",
@@ -78,7 +75,7 @@
order: "3", order: "3",
descr: "Light in my room", descr: "Light in my room",
topic: "/prefix/00000-00003/btn2", topic: "/prefix/00000-00003/btn2",
ws: 1, ws: 0,
}, },
{ {
widget: "toggle", widget: "toggle",
@@ -87,7 +84,7 @@
order: "3", order: "3",
descr: "Light in my room", descr: "Light in my room",
topic: "/prefix/00000-00003/btn3", topic: "/prefix/00000-00003/btn3",
ws: 1, ws: 0,
}, },
{ {
widget: "anydata", widget: "anydata",
@@ -97,7 +94,7 @@
order: "3", order: "3",
descr: "Temperature", descr: "Temperature",
topic: "/prefix/00000-00003/tmp10", topic: "/prefix/00000-00003/tmp10",
ws: 1, ws: 0,
}, },
{ {
widget: "anydata", widget: "anydata",
@@ -107,7 +104,7 @@
order: "3", order: "3",
descr: "Pressure", descr: "Pressure",
topic: "/prefix/00000-00003/tmp10", topic: "/prefix/00000-00003/tmp10",
ws: 1, ws: 0,
}, },
{ {
widget: "anydata", widget: "anydata",
@@ -117,7 +114,7 @@
order: "3", order: "3",
descr: "Level", descr: "Level",
topic: "/prefix/00000-00003/tmp10", topic: "/prefix/00000-00003/tmp10",
ws: 1, ws: 0,
}, },
{ {
widget: "anydata", widget: "anydata",
@@ -126,28 +123,52 @@
order: "3", order: "3",
descr: "Status", descr: "Status",
topic: "/prefix/00000-00003/tmp10", topic: "/prefix/00000-00003/tmp10",
ws: 1, ws: 0,
}, },
]; ];
let config = []; let config = [];
let socket = []; let socket = [];
let socketConnected = false; let socketConnected = false;
let deviceList = [];
deviceList = [
{
id: "987654321",
ip: "192.168.88.231",
name: "test ESP 2",
},
];
let pages = []; let pages = [];
let coreMessages = []; let coreMessages = [];
let LOG_MAX_MESSAGES = 10;
//секция функций=========================================================================
function wsConnect() { //секция функций=========================================================================
socket[0] = new WebSocket("ws://" + myip + "/ws"); function connectToAllDevices() {
let ws = 0;
deviceList.forEach((device) => {
if (debug) console.log(device.name, ws, device.ip, device.id);
wsConnect(ws, device.ip);
wsEventAdd(ws);
//if (device.ip === myip) {
// if (debug) console.log("My device found in list:", device.name);
//}
ws++;
});
} }
function wsEventAdd() { function wsConnect(ws, ip) {
socket[0].addEventListener("open", function (event) { socket[ws] = new WebSocket("ws://" + ip + "/ws");
console.log("WS CONNECTED! " + myip); }
function wsEventAdd(ws) {
if (socket[ws]) {
socket[ws].addEventListener("open", function (event) {
if (debug) console.log("WS CONNECTED! " + myip);
socketConnected = true; socketConnected = true;
//socket[0].send("HELLO"); //socket[ws].send("HELLO");
}); });
socket[0].addEventListener("message", function (event) { socket[ws].addEventListener("message", function (event) {
let data = event.data.toString(); let data = event.data.toString();
//console.log("NEW data packet " + myip, event.data); //console.log("NEW data packet " + myip, event.data);
if (data.includes("/core/")) { if (data.includes("/core/")) {
@@ -155,39 +176,38 @@
addCoreMsg(data); addCoreMsg(data);
} }
}); });
socket[0].addEventListener("close", (event) => { socket[ws].addEventListener("close", (event) => {
socketConnected = false; socketConnected = false;
wsConnect(); wsConnect(ws);
console.log("ws close " + myip); console.log("ws close " + myip);
}); });
socket[0].addEventListener("error", function (event) { socket[ws].addEventListener("error", function (event) {
socketConnected = false; socketConnected = false;
wsConnect(); wsConnect(ws);
console.log(myip + " ws error: ", event); console.log(myip + " ws error: ", event);
}); });
} }
function WSpushLocal(ws, topic, value) {
//console.log(ws, topic, value);
//wsSendMsg(topic);
//if (socketConnected) {
// socket[ws].send('{"path":"' + topic + '/control", "status":"' + value.toString() + '"}');
//}
} }
function wsSendMsg(msg) { function wsPush(ws, topic, status) {
if (!socket[0]) return; let msg = topic + " " + status;
if (socket[0].readyState === 1) { if (debug) console.log(ws, msg);
socket[0].send(msg); wsSendMsg(ws, msg);
} //socket[ws].send('{"path":"' + topic + '/control", "status":"' + value.toString() + '"}');
} }
function wsTestMsgTask() { function wsTestMsgTask() {
setTimeout(wsTestMsgTask, 10000); setTimeout(wsTestMsgTask, 10000);
if (!socket[0]) return; wsSendMsg(0, "test");
if (socket[0].readyState === 1) { }
console.log("test");
socket[0].send("test"); function wsSendMsg(ws, msg) {
if (socket[ws] && socket[ws].readyState === 1) {
socket[ws].send(msg);
if (debug) console.log("[ws:" + ws + "]", "msg send success:", msg);
} else {
if (debug) console.log("[ws:" + ws + "]", "msg not send, try reconnected...", msg);
wsConnect(ws);
} }
} }
@@ -221,14 +241,6 @@
}); });
} }
onMount(async () => {
console.log("mounted");
wsConnect();
wsEventAdd();
wsTestMsgTask();
findNewPage();
});
function wigetsUpdate() { function wigetsUpdate() {
wigets = JSON.parse(document.getElementById("text1").value); wigets = JSON.parse(document.getElementById("text1").value);
findNewPage(); findNewPage();
@@ -250,6 +262,15 @@
return 0; return 0;
}); });
}; };
onMount(async () => {
console.log("mounted");
connectToAllDevices();
//wsTestMsgTask();
//wsEventAdd();
findNewPage();
//deviceListExecution();
});
</script> </script>
<main> <main>
@@ -294,10 +315,10 @@
{#each wigets as widget, i} {#each wigets as widget, i}
{#if widget.page === pagesName.page} {#if widget.page === pagesName.page}
{#if widget.widget === "input"} {#if widget.widget === "input"}
<Input bind:value={widget.status} widget={widget} /> <Input bind:value={widget.status} widget={widget} wsPushProp={(ws, topic, status) => wsPush(ws, topic, status)} />
{/if} {/if}
{#if widget.widget === "toggle"} {#if widget.widget === "toggle"}
<Toggle bind:value={widget.status} widget={widget} /> <Toggle bind:value={widget.status} widget={widget} wsPushProp={(ws, topic, status) => wsPush(ws, topic, status)} />
{/if} {/if}
{#if widget.widget === "anydata"} {#if widget.widget === "anydata"}
<Anydata bind:value={widget.status} widget={widget} /> <Anydata bind:value={widget.status} widget={widget} />

4
src/widgets/Anydata.svelte
View File

@@ -1,7 +1,3 @@
<script context="module">
import { WSpush } from "../App.svelte";
</script>
<script> <script>
export let widget; export let widget;
</script> </script>

13
src/widgets/Input.svelte
View File

@@ -1,9 +1,6 @@
<script context="module">
import { WSpush } from "../App.svelte";
</script>
<script> <script>
export let widget; export let widget;
export let wsPushProp = (ws, topic, status) => {};
</script> </script>
<div class="card-items-psn"> <div class="card-items-psn">
@@ -13,16 +10,16 @@
</div> </div>
<div class="widget-width"> <div class="widget-width">
{#if widget.type == "number"} {#if widget.type == "number"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
{/if} {/if}
{#if widget.type == "text"} {#if widget.type == "text"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" /> <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
{/if} {/if}
{#if widget.type == "date"} {#if widget.type == "date"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" /> <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
{/if} {/if}
{#if widget.type == "time"} {#if widget.type == "time"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" /> <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />
{/if} {/if}
</div> </div>
</div> </div>

7
src/widgets/Toggle.svelte
View File

@@ -1,9 +1,6 @@
<script context="module">
import { WSpush } from "../App.svelte";
</script>
<script> <script>
export let widget; export let widget;
export let wsPushProp = (ws, topic, status) => {};
</script> </script>
<div class="card-items-psn"> <div class="card-items-psn">
@@ -14,7 +11,7 @@
<div class="widget-width"> <div class="widget-width">
<label for={widget.topic} class="items-center cursor-pointer"> <label for={widget.topic} class="items-center cursor-pointer">
<div class="relative"> <div class="relative">
<input on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" /> <input on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />
<div class="block bg-gray-600 w-10 h-6 rounded-full" /> <div class="block bg-gray-600 w-10 h-6 rounded-full" />
<div class="dot {widget['send'] == true ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1 w-4 h-4 rounded-full transition" /> <div class="dot {widget['send'] == true ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1 w-4 h-4 rounded-full transition" />
</div> </div>