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

добавил возможность добавления устройств

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-12-12 00:20:47 +01:00
parent ddf3531630
commit a97a1c0b09
1 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/App.svelte
View File

@@ -15,6 +15,7 @@
let debug = true; let debug = true;
let LOG_MAX_MESSAGES = 10; let LOG_MAX_MESSAGES = 10;
//=========================================================================================== //===========================================================================================
let showInput = false;
let myip = document.location.hostname; let myip = document.location.hostname;
let wigets = []; let wigets = [];
wigets = [ wigets = [
@@ -129,30 +130,33 @@
let config = []; let config = [];
let socket = []; let socket = [];
let socketConnected = false; let socketConnected = false;
let selectedDeviceData; let selectedDeviceData = {};
let deviceList = []; let deviceList = [];
let flag = true; let flag = true;
deviceList = [ //deviceList = [
{ // {
name: "Устройство 1", // name: "Устройство 1",
id: "987654321", // id: "987654321",
ip: "192.168.88.230", // ip: "192.168.88.230",
status: false, // status: false,
}, // },
{ // {
name: "Устройство 2", // name: "Устройство 2",
id: "987654321", // id: "987654321",
ip: "192.168.88.231", // ip: "192.168.88.231",
status: false, // status: false,
}, // },
]; //];
let newDevice = {};
let pages = []; let pages = [];
let coreMessages = []; let coreMessages = [];
//секция функций========================================================================== //секция функций==========================================================================
function connectToAllDevices() { function connectToAllDevices() {
socket = [];
let ws = 0; let ws = 0;
deviceList.forEach((device) => { deviceList.forEach((device) => {
//if (debug) console.log("[i]", device.name, ws, device.ip, device.id); //if (debug) console.log("[i]", device.name, ws, device.ip, device.id);
@@ -251,6 +255,7 @@
function wsTestMsgTask() { function wsTestMsgTask() {
setTimeout(wsTestMsgTask, 60000); setTimeout(wsTestMsgTask, 60000);
if (debug) console.log("[i]", "----timer tick----"); if (debug) console.log("[i]", "----timer tick----");
if (!flag) { if (!flag) {
deviceList.forEach((device) => { deviceList.forEach((device) => {
if (!getDeviceStatus(device.ws)) { if (!getDeviceStatus(device.ws)) {
@@ -330,6 +335,21 @@
if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name); if (debug) console.log("[i]", "user selected device:", selectedDeviceData.name);
} }
function devListSave() {
if (!showInput) {
if (newDevice.name !== undefined && newDevice.ip !== undefined && newDevice.id !== undefined) {
newDevice.status = false;
deviceList.push(newDevice);
deviceList = deviceList;
newDevice = {};
connectToAllDevices();
socketConnected = selectedDeviceData.status;
} else {
if (debug) console.log("[e]", "wrong data");
}
}
}
onMount(async () => { onMount(async () => {
console.log("[i]", "mounted"); console.log("[i]", "mounted");
connectToAllDevices(); connectToAllDevices();
@@ -454,9 +474,17 @@
<td class="table-body-element {device.status ? 'bg-green-100' : 'bg-red-100'}">{device.status ? "online" : "offline"}</td> <td class="table-body-element {device.status ? 'bg-green-100' : 'bg-red-100'}">{device.status ? "online" : "offline"}</td>
</tr> </tr>
{/each} {/each}
{#if showInput}
<tr>
<td class="table-body-element"><input bind:value={newDevice.name} class="table-input" type="text" /></td>
<td class="table-body-element"><input bind:value={newDevice.ip} class="table-input" type="text" /></td>
<td class="table-body-element"><input bind:value={newDevice.id} class="table-input" type="text" /></td>
<td class="table-body-element" />
</tr>
{/if}
</tbody> </tbody>
</table> </table>
<button class="flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded">Добавить устройство</button> <button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
</Card> </Card>
</Route> </Route>
<Route path="/about" /> <Route path="/about" />
@@ -524,6 +552,13 @@
.table-body-element { .table-body-element {
@apply border border-gray-300 text-center break-words w-1/4; @apply border border-gray-300 text-center break-words w-1/4;
} }
.table-input {
@apply content-center bg-gray-100 appearance-none border-2 border-gray-200 w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-center focus:border-indigo-500;
}
/*====================================================buttons=====================================================*/
.long-button {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded;
}
} }
#menu__toggle { #menu__toggle {