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
2022-02-07 02:08:21 +01:00
parent 9d66593dc6
commit b426958f8a
6 changed files with 103 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/App.svelte
View File

@@ -5,8 +5,10 @@
import { Route, router, active } from "tinro"; import { Route, router, active } from "tinro";
router.mode.hash(); router.mode.hash();
import Modal from "./components/Modal.svelte"; import Alarm from "./components/Alarm.svelte";
import Progress from "./components/Progress.svelte";
import Modal from "./components/Modal.svelte";
import DashboardPage from "./pages/Dashboard.svelte"; import DashboardPage from "./pages/Dashboard.svelte";
import ConfigPage from "./pages/Config.svelte"; import ConfigPage from "./pages/Config.svelte";
import ConnectionPage from "./pages/Connection.svelte"; import ConnectionPage from "./pages/Connection.svelte";
@@ -49,8 +51,6 @@
let itemsJsonFlag = false; let itemsJsonFlag = false;
let itemsJsonParced = false; let itemsJsonParced = false;
let itemsJsonBind = 0;
let layoutJson = []; let layoutJson = [];
let layoutJsonFlag = false; let layoutJsonFlag = false;
let layoutJsonParced = false; let layoutJsonParced = false;
@@ -68,7 +68,7 @@
let selectedDeviceData = undefined; let selectedDeviceData = undefined;
let deviceList = []; let deviceList = [];
let flag = true; let flag = true;
let newDevice = {};
let coreMessages = []; let coreMessages = [];
let wsSelected = undefined; let wsSelected = undefined;
@@ -77,9 +77,15 @@
deviceList = [ deviceList = [
{ {
name: "Устройство 1", name: "Устройство 1",
id: "987654321", id: "123456789",
//ip: myip,
ip: "192.168.88.235", ip: "192.168.88.235",
//ip: myip,
status: false,
},
{
name: "Устройство 2",
id: "123456789",
ip: "192.168.88.236",
status: false, status: false,
}, },
]; ];
@@ -215,7 +221,7 @@
socket[ws].addEventListener("message", function (event) { socket[ws].addEventListener("message", function (event) {
if (typeof event.data === "string") { if (typeof event.data === "string") {
let data = event.data; let data = event.data;
if (debug) console.log("[i]", getIP(ws), "msg received", data); // //if (debug) console.log("[i]", getIP(ws), "msg received", data); //
//сборщик statusJson сообщений====================================== //сборщик statusJson сообщений======================================
if (data.includes("status")) { if (data.includes("status")) {
if (IsJsonParse(data)) { if (IsJsonParse(data)) {
@@ -661,28 +667,12 @@
//************************************************elements and presets dropdown************************************************************/ //************************************************elements and presets dropdown************************************************************/
function elementsDropdownChange() { function deleteLineFromDevlist(num) {
for (let i = 0; i < itemsJson.length; i++) { for (let i = 0; i < deviceList.length; i++) {
let item = Object.assign({}, itemsJson[i]);
if (itemsJsonBind === item.num) {
delete item.num;
delete item.name;
configJson.push(item);
configJson = configJson;
itemsJsonBind = 0;
if (debug) console.log("[i]", "item added");
break;
}
}
}
function deleteLine(num) {
if (debug) console.log("[i]", num);
for (let i = 0; i < configJson.length; i++) {
if (num === i) { if (num === i) {
configJson.splice(i, 1); deviceList.splice(i, 1);
configJson = configJson; deviceList = deviceList;
if (debug) console.log("[i]", "item " + num + " deleted"); if (debug) console.log("[i]", "item " + num + " deleted from dev list");
break; break;
} }
} }
@@ -705,10 +695,11 @@
<div class="flex flex-col h-screen bg-gray-50"> <div class="flex flex-col h-screen bg-gray-50">
<Modal show={showModalFlag} /> <Modal show={showModalFlag} />
<header class="h-10 w-full bg-gray-100 overflow-auto shadow-md"> <header class="h-10 w-full bg-gray-100 overflow-auto shadow-md">
<div class="flex justify-end content-center"> <div class="flex justify-end content-center">
<div class="px-15 py-2 z-50"> <div class="px-15 py-2 z-50">
<select bind:value={selectedDeviceData} on:change={() => devicesDropdownChange()}> <select class="border-indigo-500" bind:value={selectedDeviceData} on:change={() => devicesDropdownChange()}>
{#each deviceList as device} {#each deviceList as device}
<option value={device}> <option value={device}>
{device.name} {device.name}
@@ -716,7 +707,7 @@
{/each} {/each}
</select> </select>
</div> </div>
<div class="px-5 py-1"> <div class="pl-2 pr-4 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>
@@ -757,15 +748,13 @@
<ul class="menu__main"> <ul class="menu__main">
<div class="bg-cover pt-0 px-4"> <div class="bg-cover pt-0 px-4">
{#if !socketConnected} {#if !socketConnected}
<div class="flex justify-center items-center"> <Alarm title="Нет соединения" />
<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
</div>
{:else} {:else}
<Route path="/"> <Route path="/">
<DashboardPage layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} /> <DashboardPage layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
</Route> </Route>
<Route path="/config"> <Route path="/config">
<ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} itemsJsonBind={itemsJsonBind} ssidDropdownClick={() => elementsDropdownChange()} saveConfig={() => saveConfig()} deleteLine={(i) => deleteLine(i)} /> <ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} deleteLineFromConfig={(i) => deleteLineFromConfig(i)} />
</Route> </Route>
<Route path="/connection"> <Route path="/connection">
<ConnectionPage settingsJson={settingsJson} ssidJson={ssidJson} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} /> <ConnectionPage settingsJson={settingsJson} ssidJson={ssidJson} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
@@ -776,13 +765,13 @@
<Route path="/log"> <Route path="/log">
<LogPage coreMessages={coreMessages} /> <LogPage coreMessages={coreMessages} />
</Route> </Route>
<Route path="/list">
<ListPage deviceList={deviceList} showInput={showInput} devListSave={() => devListSave()} />
</Route>
<Route path="/about"> <Route path="/about">
<AboutPage wigetsUpdate={wigetsUpdate} layoutJson={layoutJson} showModal={() => showModal()} syntaxHighlight={(json) => syntaxHighlight(json)} /> <AboutPage wigetsUpdate={wigetsUpdate} layoutJson={layoutJson} showModal={() => showModal()} syntaxHighlight={(json) => syntaxHighlight(json)} />
</Route> </Route>
{/if} {/if}
<Route path="/list">
<ListPage deviceList={deviceList} showInput={showInput} deleteLineFromDevlist={(num) => deleteLineFromDevlist(num)} devListSave={() => devListSave()} newDevice={newDevice} />
</Route>
</div> </div>
</ul> </ul>
</main> </main>
@@ -836,6 +825,9 @@
@apply text-center text-gray-500 font-bold; @apply text-center text-gray-500 font-bold;
} }
/*====================================================table=====================================================*/ /*====================================================table=====================================================*/
.tbl {
@apply table-fixed w-full select-none my-2;
}
.tbl-hd { .tbl-hd {
@apply text-center px-1 break-words text-gray-500 font-bold; @apply text-center px-1 break-words text-gray-500 font-bold;
} }

4
src/components/Alarm.svelte
View File

@@ -16,10 +16,10 @@
@layer components { @layer components {
.alm-hdr { .alm-hdr {
@apply text-center text-base text-gray-500 font-bold pb-0; @apply text-center text-base text-red-500 pb-0;
} }
.alm { .alm {
@apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-red-100 shadow-md lg:shadow-lg border border-gray-300 rounded; @apply mb-4 w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-2 2xl:px-4 2xl:py-2 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
} }
} }
</style> </style>

2
src/components/Card.svelte
View File

@@ -16,7 +16,7 @@
@layer components { @layer components {
.crd { .crd {
@apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg border border-gray-100; @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
} }
.crd-hdr { .crd-hdr {
@apply text-center text-lg text-gray-500 font-bold pb-4; @apply text-center text-lg text-gray-500 font-bold pb-4;

5
src/components/Progress.svelte Normal file
View File

@@ -0,0 +1,5 @@
<div class="flex h-screen justify-center items-center">
<div class="m-auto">
<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
</div>
</div>

36
src/pages/Config.svelte
View File

@@ -4,13 +4,39 @@
export let configJson; export let configJson;
export let widgetsJson; export let widgetsJson;
export let itemsJson; export let itemsJson;
export let itemsJsonBind;
export let elementsDropdownChange = () => {}; let itemsJsonBind = 0;
let debug = true;
export let saveConfig = () => {}; export let saveConfig = () => {};
export let deleteLine = (i) => {};
let hideAllSubParams = true; let hideAllSubParams = true;
function elementsDropdownChange() {
for (let i = 0; i < itemsJson.length; i++) {
let item = Object.assign({}, itemsJson[i]);
if (itemsJsonBind === item.num) {
delete item.num;
delete item.name;
configJson.push(item);
configJson = configJson;
itemsJsonBind = 0;
if (debug) console.log("[i]", "item added");
break;
}
}
}
function deleteLineFromConfig(num) {
for (let i = 0; i < configJson.length; i++) {
if (num === i) {
configJson.splice(i, 1);
configJson = configJson;
if (debug) console.log("[i]", "item " + num + " deleted from config");
break;
}
}
}
</script> </script>
<!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}--> <!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}-->
@@ -31,7 +57,7 @@
</select> </select>
<select class="slct-lg"><option>{"Выберите пресет"}</option></select> <select class="slct-lg"><option>{"Выберите пресет"}</option></select>
</div> </div>
<table class="table-fixed w-full select-none my-2 "> <table class="tbl">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr class="tbl-txt-sz tbl-txt-p"> <tr class="tbl-txt-sz tbl-txt-p">
<th class="tbl-hd">Тип</th> <th class="tbl-hd">Тип</th>
@@ -59,7 +85,7 @@
<td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><svg on:click={() => (hideAllSubParams = !hideAllSubParams)} class="h-6 w-6 text-green-400 cursor-pointer" 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" /> <circle cx="5" cy="12" r="1" /> <circle cx="12" cy="12" r="1" /> <circle cx="19" cy="12" r="1" /></svg></td> <td class="tbl-bdy"><svg on:click={() => (hideAllSubParams = !hideAllSubParams)} class="h-6 w-6 text-green-400 cursor-pointer" 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" /> <circle cx="5" cy="12" r="1" /> <circle cx="12" cy="12" r="1" /> <circle cx="19" cy="12" r="1" /></svg></td>
<td class="tbl-bdy"><svg on:click={() => deleteLine(i)} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></td> <td class="tbl-bdy"><svg on:click={() => deleteLineFromConfig(i)} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></td>
</tr> </tr>
{#if !hideAllSubParams} {#if !hideAllSubParams}
{#each Object.entries(element) as [key, param]} {#each Object.entries(element) as [key, param]}

65
src/pages/List.svelte
View File

@@ -4,39 +4,44 @@
export let deviceList; export let deviceList;
export let showInput; export let showInput;
let newDevice = {}; export let newDevice = {};
export let devListSave = () => {}; export let devListSave = () => {};
export let deleteLineFromDevlist = (num) => {};
</script> </script>
<Card title={"Список устройств"}> <div class="grd-1cols">
<table class="table-fixed gap-4 w-full"> <Card title={"Список устройств"}>
<thead class="bg-gray-50 "> <table class="tbl">
<tr class="tbl-txt-sz tbl-txt-p"> <thead class="bg-gray-100">
<th class="tbl-hd">Название устройства</th>
<th class="tbl-hd">IP адрес</th>
<th class="tbl-hd">Идентификатор</th>
<th class="tbl-hd">Состояние</th>
</tr>
</thead>
<tbody class="bg-white">
{#each deviceList as device}
<tr class="tbl-txt-sz tbl-txt-p"> <tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy">{device.name}</td> <th class="tbl-hd">Название устройства</th>
<td class="tbl-bdy"><a href={"http://" + device.ip}>{device.ip}</a></td> <th class="tbl-hd">IP адрес</th>
<td class="tbl-bdy">{device.id}</td> <th class="tbl-hd">Идентификатор</th>
<td class="tbl-bdy {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td> <th class="tbl-hd">Состояние</th>
<th class="tbl-hd w-7" />
</tr> </tr>
{/each} </thead>
{#if showInput} <tbody class="bg-white">
<tr class="tbl-txt-sz tbl-txt-p"> {#each deviceList as device, i}
<td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td> <tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td> <td class="tbl-bdy tbl-ipt w-full">{device.name}</td>
<td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td> <td class="tbl-bdy tbl-ipt w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="tbl-bdy" /> <td class="tbl-bdy tbl-ipt w-full">{device.id}</td>
</tr> <td class="tbl-bdy tbl-ipt w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
{/if} <td class="tbl-bdy"><svg on:click={() => deleteLineFromDevlist(i)} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></td>
</tbody> </tr>
</table> {/each}
<button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button> {#if showInput}
</Card> <tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy" />
</tr>
{/if}
</tbody>
</table>
<button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
</Card>
</div>