iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 23:12:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

add device list

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-12-09 22:35:04 +01:00
parent 5956870704
commit 9894ae21ba
1 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/App.svelte
View File

@@ -129,7 +129,7 @@
let config = []; let config = [];
let socket = []; let socket = [];
let socketConnected = false; let socketConnected = false;
let selectedDeviceData;
let deviceList = []; let deviceList = [];
deviceList = [ deviceList = [
@@ -154,13 +154,10 @@
function connectToAllDevices() { function connectToAllDevices() {
let ws = 0; let ws = 0;
deviceList.forEach((device) => { deviceList.forEach((device) => {
if (debug) console.log(device.name, ws, device.ip, device.id); if (debug) console.log("[i]", device.name, ws, device.ip, device.id);
wsConnect(ws, device.ip); wsConnect(ws, device.ip);
wsEventAdd(ws); wsEventAdd(ws);
device.ws = ws; device.ws = ws;
//if (device.ip === myip) {
// if (debug) console.log("My device found in list:", device.name);
//}
ws++; ws++;
}); });
} }
@@ -169,9 +166,16 @@
deviceList.forEach((device) => { deviceList.forEach((device) => {
if (device.ws === ws) { if (device.ws === ws) {
device.status = status; device.status = status;
if (debug) console.log(device.name, ws, device.ip, device.id, device.status); if (debug) {
if (device.status) {
console.log("[i]", device.name, device.ip, "dev status online");
} else {
console.log("[i]", device.name, device.ip, "dev status offline");
}
}
} }
}); });
deviceList = deviceList;
} }
function wsConnect(ws, ip) { function wsConnect(ws, ip) {
@@ -181,39 +185,35 @@
function wsEventAdd(ws) { function wsEventAdd(ws) {
if (socket[ws]) { if (socket[ws]) {
socket[ws].addEventListener("open", function (event) { socket[ws].addEventListener("open", function (event) {
if (debug) console.log("WS CONNECTED! " + myip); if (debug) console.log("[i]", "ws connected", myip);
socketConnected = true;
markDeviceStatus(ws, true); markDeviceStatus(ws, true);
//socket[ws].send("HELLO"); //socket[ws].send("HELLO");
}); });
socket[ws].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); //if (debug) console.log("[i]", "new data:", event.data);
if (data.includes("/core/")) { if (data.includes("/core/")) {
data = data.replace("/core/", ""); data = data.replace("/core/", "");
addCoreMsg(data); addCoreMsg(data);
} }
}); });
socket[ws].addEventListener("close", (event) => { socket[ws].addEventListener("close", (event) => {
socketConnected = false; if (debug) console.log("[e]", "ws close", myip);
markDeviceStatus(ws, false); markDeviceStatus(ws, false);
wsConnect(ws); wsConnect(ws);
console.log("ws close " + myip);
}); });
socket[ws].addEventListener("error", function (event) { socket[ws].addEventListener("error", function (event) {
socketConnected = false; if (debug) console.log("[e]", "ws error", myip);
markDeviceStatus(ws, false); markDeviceStatus(ws, false);
wsConnect(ws); wsConnect(ws);
console.log(myip + " ws error: ", event);
}); });
} }
} }
function wsPush(ws, topic, status) { function wsPush(ws, topic, status) {
let msg = topic + " " + status; let msg = topic + " " + status;
if (debug) console.log(ws, msg); if (debug) console.log("[i]", "send to ws msg:", msg);
wsSendMsg(ws, msg); wsSendMsg(ws, msg);
//socket[ws].send('{"path":"' + topic + '/control", "status":"' + value.toString() + '"}');
} }
function wsTestMsgTask() { function wsTestMsgTask() {
@@ -224,9 +224,9 @@
function wsSendMsg(ws, msg) { function wsSendMsg(ws, msg) {
if (socket[ws] && socket[ws].readyState === 1) { if (socket[ws] && socket[ws].readyState === 1) {
socket[ws].send(msg); socket[ws].send(msg);
if (debug) console.log("[ws:" + ws + "]", "msg send success:", msg); if (debug) console.log("[i]", "msg send success:", msg);
} else { } else {
if (debug) console.log("[ws:" + ws + "]", "msg not send, try reconnected...", msg); if (debug) console.log("[i]", "msg not send, try reconnected...", msg);
wsConnect(ws); wsConnect(ws);
} }
} }
@@ -283,8 +283,13 @@
}); });
}; };
function dropdownChange() {
socketConnected = selectedDeviceData.status;
if (debug) console.log("[i]", "user choose dev:", selectedDeviceData.name);
}
onMount(async () => { onMount(async () => {
console.log("mounted"); console.log("[i]", "mounted");
connectToAllDevices(); connectToAllDevices();
//wsTestMsgTask(); //wsTestMsgTask();
//wsEventAdd(); //wsEventAdd();
@@ -297,7 +302,7 @@
<div class="fixed m-0 h-10 w-full bg-gray-100 shadow-md"> <div class="fixed m-0 h-10 w-full bg-gray-100 shadow-md">
<div class="flex justify-end content-center"> <div class="flex justify-end content-center">
<div class="px-15 py-2"> <div class="px-15 py-2">
<select> <select bind:value={selectedDeviceData} on:change={() => dropdownChange()}>
{#each deviceList as device} {#each deviceList as device}
<option value={device}> <option value={device}>
{device.name} {device.name}
@@ -306,7 +311,7 @@
</select> </select>
</div> </div>
<div class="px-10 py-1"> <div class="px-10 py-1">
<svg class="h-8 w-8 {socketConnected == true ? 'text-green-500' : 'text-red-500'}" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" /></svg> <svg class="h-8 w-8 {socketConnected === true ? 'text-green-500' : 'text-red-500'}" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" /></svg>
</div> </div>
</div> </div>
</div> </div>
@@ -390,12 +395,26 @@
</Route> </Route>
<Route path="/list"> <Route path="/list">
<Card title={"Список устройств"}> <Card title={"Список устройств"}>
{#each deviceList as device} <table class="table-fixed w-full">
<div> <thead>
<input class="focus:border-indigo-500" bind:value={device.name} /> <tr>
<input class="focus:border-indigo-500" bind:value={device.ip} /> <th class="border border-gray-300 w-1/4">Название устройства</th>
</div> <th class="border border-gray-300 w-1/4">IP адрес</th>
{/each} <th class="border border-gray-300 w-1/4">Идентификатор</th>
<th class="border border-gray-300 w-1/4">Состояние</th>
</tr>
</thead>
<tbody>
{#each deviceList as device}
<tr>
<td class="border border-gray-300 w-1/4">{device.name}</td>
<td class="border border-gray-300 w-1/4">{device.ip}</td>
<td class="border border-gray-300 w-1/4">{device.id}</td>
<td class="border border-gray-300 w-1/4 {device.status ? 'text-green-500' : 'text-red-500'}">{device.status ? "online" : "offline"}</td>
</tr>
{/each}
</tbody>
</table>
</Card> </Card>
</Route> </Route>
<Route path="/about" /> <Route path="/about" />