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-13 00:37:58 +01:00
parent 862dacabde
commit 6b5e8b36c4
6 changed files with 454 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/App.svelte
View File

@@ -45,25 +45,57 @@
//dashboard //dashboard
let pages = []; let pages = [];
//ready flags
let dashReady = false;
let configReady = false;
let connectionReady = false;
let listReady = false;
let systemReady = false;
//configuration //configuration
let configJson = []; let configJson = [];
let configJsonFlag = false; let configJsonFlag = false;
let configJsonParced = false;
let widgetsJson = []; let widgetsJson = [];
let widgetsJsonFlag = false; let widgetsJsonFlag = false;
let widgetsJsonParced = false;
let itemsJson = []; let itemsJson = [];
let itemsJsonFlag = false; let itemsJsonFlag = false;
let itemsJsonParced = false;
let layoutJson = []; let layoutJson = [];
let layoutJsonFlag = false; let layoutJsonFlag = false;
let layoutJsonParced = false;
let settingsJson = {}; let settingsJson = {};
let settingsJsonFlag = false; let settingsJsonFlag = false;
let settingsJsonParced = false;
let errorsJson = {}; let errorsJson = {};
let errorsJsonParced = false;
let ssidJson = {}; let ssidJson = {};
let ssidJsonParced = false;
let paramsJson = {};
let paramsJsonParced = false;
let statusJsonParced = false;
let incDeviceList = [];
let incDeviceListParced = false;
let deviceList = [];
deviceList = [
{
name: "--",
id: "--",
ip: myip,
status: false,
},
];
//web sockets //web sockets
let socket = []; let socket = [];
@@ -77,19 +109,6 @@
let oneOfJsonPackageError = false; let oneOfJsonPackageError = false;
let deviceList = [];
deviceList = [
{
name: "--",
id: "--",
ip: myip,
status: false,
},
];
let incDeviceList = [];
let incDeviceListParced = false;
//***********************************************************blob**************************************************************/ //***********************************************************blob**************************************************************/
var MyBlobBuilder = function () { var MyBlobBuilder = function () {
this.parts = []; this.parts = [];
@@ -235,16 +254,16 @@
udateStatusOfWidget(statusJson); udateStatusOfWidget(statusJson);
wigetsUpdate(); wigetsUpdate();
if (debug) console.log("✔", "statusJson parced"); if (debug) console.log("✔", "statusJson parced");
statusJsonParced = true;
onParced("status"); onParced("status");
} }
} }
//сборщик paramsJson сообщений====================================== //сборщик paramsJson сообщений======================================
if (data.includes("params")) { if (data.includes("params")) {
if (IsJsonParse(data)) { if (IsJsonParse(data)) {
let paramsJson = JSON.parse(data); paramsJson = JSON.parse(data);
udateStatusOfAllWidgets(paramsJson);
wigetsUpdate();
if (debug) console.log("✔", "paramsJson parced"); if (debug) console.log("✔", "paramsJson parced");
paramsJsonParced = true;
onParced("params"); onParced("params");
} }
} }
@@ -254,6 +273,7 @@
ssidJson = JSON.parse(data); ssidJson = JSON.parse(data);
ssidJson = ssidJson; ssidJson = ssidJson;
if (debug) console.log("✔", "ssidJson parced"); if (debug) console.log("✔", "ssidJson parced");
ssidJsonParced = true;
onParced("ssid"); onParced("ssid");
} }
} }
@@ -267,6 +287,7 @@
deviceList = deviceList; deviceList = deviceList;
whenDeviceListWasUpdated(); whenDeviceListWasUpdated();
connectToAllDevices(); connectToAllDevices();
if (debug) console.log("✔", "incDeviceList json parced"); if (debug) console.log("✔", "incDeviceList json parced");
onParced("devicelist"); onParced("devicelist");
} }
@@ -276,8 +297,8 @@
if (IsJsonParse(data)) { if (IsJsonParse(data)) {
errorsJson = JSON.parse(data); errorsJson = JSON.parse(data);
errorsJson = errorsJson; errorsJson = errorsJson;
errorsJsonParced = true;
if (debug) console.log("✔", "errorsJson json parced"); if (debug) console.log("✔", "errorsJson json parced");
//dataReceived();
onParced("errors"); onParced("errors");
} }
} }
@@ -295,6 +316,7 @@
if (IsJsonParse(configJsonResult)) { if (IsJsonParse(configJsonResult)) {
configJson = JSON.parse(configJsonResult); configJson = JSON.parse(configJsonResult);
configJson = configJson; configJson = configJson;
configJsonParced = true;
if (debug) console.log("✔", "configJson parced"); if (debug) console.log("✔", "configJson parced");
onParced("config"); onParced("config");
} }
@@ -314,6 +336,7 @@
if (IsJsonParse(widgetsJsonResult)) { if (IsJsonParse(widgetsJsonResult)) {
widgetsJson = JSON.parse(widgetsJsonResult); widgetsJson = JSON.parse(widgetsJsonResult);
widgetsJson = widgetsJson; widgetsJson = widgetsJson;
widgetsJsonParced = true;
if (debug) console.log("✔", "widgetsJson parced"); if (debug) console.log("✔", "widgetsJson parced");
onParced("widgets"); onParced("widgets");
} }
@@ -333,6 +356,7 @@
if (IsJsonParse(itemsJsonResult)) { if (IsJsonParse(itemsJsonResult)) {
itemsJson = JSON.parse(itemsJsonResult); itemsJson = JSON.parse(itemsJsonResult);
itemsJson = itemsJson; itemsJson = itemsJson;
itemsJsonParced = true;
if (debug) console.log("✔", "itemsJson parced"); if (debug) console.log("✔", "itemsJson parced");
onParced("items"); onParced("items");
} }
@@ -353,6 +377,7 @@
layoutJson = JSON.parse(layoutJsonResult); layoutJson = JSON.parse(layoutJsonResult);
layoutJson = layoutJson; layoutJson = layoutJson;
wigetsUpdate(); wigetsUpdate();
layoutJsonParced = true;
if (debug) console.log("✔", "layoutJson parced"); if (debug) console.log("✔", "layoutJson parced");
onParced("layout"); onParced("layout");
} }
@@ -374,6 +399,7 @@
settingsJson = settingsJson; settingsJson = settingsJson;
wigetsUpdate(); wigetsUpdate();
updateThisDeviceInList(); updateThisDeviceInList();
settingsJsonParced = true;
if (debug) console.log("✔", "settingsJson parced"); if (debug) console.log("✔", "settingsJson parced");
onParced("settings"); onParced("settings");
} }
@@ -401,6 +427,36 @@
} }
} }
function onParced(file) {
if (currentPageName === "/|" && layoutJsonParced && paramsJsonParced) {
clearParcedFlags();
if (debug) console.log("✔✔", "dashboard data parced");
udateStatusOfAllWidgets(paramsJson);
wigetsUpdate();
dashReady = true;
}
if (currentPageName === "/config|" && itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced) {
clearParcedFlags();
if (debug) console.log("✔✔", "config data parced");
configReady = true;
}
if (currentPageName === "/connection|" && ssidJsonParced && settingsJsonParced && errorsJsonParced) {
clearParcedFlags();
if (debug) console.log("✔✔", "connection data parced");
connectionReady = true;
}
if (currentPageName === "/list|" && incDeviceListParced) {
clearParcedFlags();
if (debug) console.log("✔✔", "list data parced");
listReady = true;
}
if (currentPageName === "/system|" && errorsJsonParced) {
clearParcedFlags();
if (debug) console.log("✔✔", "system data parced");
systemReady = true;
}
}
function saveConfig() { function saveConfig() {
wsSendMsg(selectedWs, "/tuoyal|" + JSON.stringify(generateLayout())); wsSendMsg(selectedWs, "/tuoyal|" + JSON.stringify(generateLayout()));
wsSendMsg(selectedWs, "/gifnoc|" + JSON.stringify(configJson)); wsSendMsg(selectedWs, "/gifnoc|" + JSON.stringify(configJson));
@@ -501,9 +557,30 @@
errorsJson = {}; errorsJson = {};
dashReady = false;
configReady = false;
connectionReady = false;
listReady = false;
systemReady = false;
clearParcedFlags();
if (debug) console.log("[i]", "all app data cleared"); if (debug) console.log("[i]", "all app data cleared");
} }
function clearParcedFlags() {
configJsonParced = false;
widgetsJsonParced = false;
itemsJsonParced = false;
layoutJsonParced = false;
settingsJsonParced = false;
errorsJsonParced = false;
ssidJsonParced = false;
paramsJsonParced = false;
statusJsonParced = false;
incDeviceListParced = false;
}
function wsPush(ws, topic, status) { function wsPush(ws, topic, status) {
let msg = topic + " " + status; let msg = topic + " " + status;
if (debug) console.log("[i]", "send to ws msg:", msg); if (debug) console.log("[i]", "send to ws msg:", msg);
@@ -802,8 +879,6 @@
wsSendMsg(selectedWs, '/rorre|{"' + alarmKey + '":0}'); wsSendMsg(selectedWs, '/rorre|{"' + alarmKey + '":0}');
} }
function onParced(file) {}
//*******************************************************initialisation********************************************************************/ //*******************************************************initialisation********************************************************************/
onMount(async () => { onMount(async () => {
console.log("[i]", "mounted"); console.log("[i]", "mounted");
@@ -879,16 +954,19 @@
<Alarm title="Нет соединения" /> <Alarm title="Нет соединения" />
{:else} {:else}
<Route path="/"> <Route path="/">
<DashboardPage layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} /> <DashboardPage show={dashReady} 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} saveConfig={() => saveConfig()} /> <ConfigPage show={configReady} configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} />
</Route> </Route>
<Route path="/connection"> <Route path="/connection">
<ConnectionPage rebootEsp={() => rebootEsp()} ssidClick={() => ssidClick()} saveSett={() => saveSett()} saveMqtt={() => saveMqtt()} settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} /> <ConnectionPage show={connectionReady} rebootEsp={() => rebootEsp()} ssidClick={() => ssidClick()} saveSett={() => saveSett()} saveMqtt={() => saveMqtt()} settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} />
</Route>
<Route path="/list">
<ListPage show={listReady} deviceList={deviceList} showInput={showInput} addDevInList={() => addDevInList()} newDevice={newDevice} />
</Route> </Route>
<Route path="/system"> <Route path="/system">
<SystemPage settingsJson={settingsJson} errorsJson={errorsJson} rebootEsp={() => rebootEsp()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} version={version} /> <SystemPage show={systemReady} settingsJson={settingsJson} errorsJson={errorsJson} rebootEsp={() => rebootEsp()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} version={version} />
</Route> </Route>
<!--<Route path="/utilities">--> <!--<Route path="/utilities">-->
@@ -901,9 +979,6 @@
<!--<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} addDevInList={() => addDevInList()} newDevice={newDevice} />
</Route>
</div> </div>
</ul> </ul>
</main> </main>

153
src/pages/Config.svelte
View File

@@ -2,11 +2,14 @@
import Card from "../components/Card.svelte"; import Card from "../components/Card.svelte";
import CrossIcon from "../svg/Cross.svelte"; import CrossIcon from "../svg/Cross.svelte";
import OpenIcon from "../svg/Open.svelte"; import OpenIcon from "../svg/Open.svelte";
import Alarm from "../components/Alarm.svelte";
export let configJson; export let configJson;
export let widgetsJson; export let widgetsJson;
export let itemsJson; export let itemsJson;
export let show;
let itemsJsonBind = 0; let itemsJsonBind = 0;
let debug = true; let debug = true;
@@ -41,80 +44,78 @@
} }
</script> </script>
<!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}--> {#if show}
<div class="grd-1col1"> <div class="grd-1col1">
<Card> <Card>
<div class="grd-2col2"> <div class="grd-2col2">
<select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}> <select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}>
{#each itemsJson as item} {#each itemsJson as item}
{#if item.header} {#if item.header}
<optgroup label={item.header} /> <optgroup label={item.header} />
{/if} {/if}
{#if !item.header} {#if !item.header}
<option value={item.num}> <option value={item.num}>
{item.name} {item.name}
</option> </option>
{/if} {/if}
{/each} {/each}
</select> </select>
<select class="slct-lg"><option>{"Выберите пресет"}</option></select> <select class="slct-lg"><option>{"Выберите пресет"}</option></select>
</div> </div>
<table class="tbl"> <table class="tbl">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr class="txt-sz txt-pad"> <tr class="txt-sz txt-pad">
<th class="tbl-hd">Тип</th> <th class="tbl-hd">Тип</th>
<th class="tbl-hd">Id</th> <th class="tbl-hd">Id</th>
<th class="tbl-hd">Виджет</th> <th class="tbl-hd">Виджет</th>
<th class="tbl-hd">Вкладка</th> <th class="tbl-hd">Вкладка</th>
<th class="tbl-hd">Название</th> <th class="tbl-hd">Название</th>
<th class="tbl-hd w-7" /> <th class="tbl-hd w-7" />
<th class="tbl-hd w-7" /> <th class="tbl-hd w-7" />
</tr>
</thead>
<tbody class="bg-white">
{#each configJson as element, i}
<tr class="txt-sz txt-pad align-middle">
<td class="tbl-bdy-lg">{element.subtype}</td>
<td class="tbl-bdy-lg"><input bind:value={element.id} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg"
><select bind:value={element.widget} class="ipt-lg w-full">
{#each widgetsJson as select}
<option value={select.name}>
{select.label}
</option>
{/each}
</select></td>
<td class="tbl-bdy-lg"><input bind:value={element.page} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg"><input bind:value={element.descr} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg"><OpenIcon click={() => (hideAllSubParams = !hideAllSubParams)} /></td>
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromConfig(i)} /></td>
</tr> </tr>
{#if !hideAllSubParams} </thead>
{#each Object.entries(element) as [key, param]} <tbody class="bg-white">
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"} {#each configJson as element, i}
<tr class="txt-sz txt-pad"> <tr class="txt-sz txt-pad align-middle">
<td /> <td class="tbl-bdy-lg">{element.subtype}</td>
<td /> <td class="tbl-bdy-lg"><input bind:value={element.id} class="ipt-lg w-full" type="text" /></td>
<td /> <td class="tbl-bdy-lg"
<td class="tbl-bdy-sm text-right"> ><select bind:value={element.widget} class="ipt-lg w-full">
<p class="txt-ita">{key}</p> {#each widgetsJson as select}
</td> <option value={select.name}>
<td class="tbl-bdy-sm text-center"> {select.label}
<input bind:value={element[key]} class="ipt-sm w-full" type="text" /> </option>
</td> {/each}
</tr> </select></td>
{/if} <td class="tbl-bdy-lg"><input bind:value={element.page} class="ipt-lg w-full" type="text" /></td>
{/each} <td class="tbl-bdy-lg"><input bind:value={element.descr} class="ipt-lg w-full" type="text" /></td>
<!--<br />--> <td class="tbl-bdy-lg"><OpenIcon click={() => (hideAllSubParams = !hideAllSubParams)} /></td>
{/if} <td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromConfig(i)} /></td>
{/each} </tr>
</tbody> {#if !hideAllSubParams}
</table> {#each Object.entries(element) as [key, param]}
<button class="btn-lg" on:click={() => saveConfig()}>{"Сохранить"}</button> {#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
</Card> <tr class="txt-sz txt-pad">
</div> <td />
<!--{:else if !itemsJsonParced && !widgetsJsonParced && !configJsonParced && !settingsJsonParced}--> <td />
<!--<div class="flex justify-center items-center">--> <td />
<!--<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />--> <td class="tbl-bdy-sm text-right">
<!--</div>--> <p class="txt-ita">{key}</p>
<!--{/if}--> </td>
<td class="tbl-bdy-sm text-center">
<input bind:value={element[key]} class="ipt-sm w-full" type="text" />
</td>
</tr>
{/if}
{/each}
<!--<br />-->
{/if}
{/each}
</tbody>
</table>
<button class="btn-lg" on:click={() => saveConfig()}>{"Сохранить"}</button>
</Card>
</div>
{:else}
<Alarm title="Загрузка..." />
{/if}

224
src/pages/Connection.svelte
View File

@@ -6,131 +6,137 @@
export let errorsJson; export let errorsJson;
export let ssidJson; export let ssidJson;
export let show;
export let ssidClick = () => {}; export let ssidClick = () => {};
export let saveSett = () => {}; export let saveSett = () => {};
export let saveMqtt = () => {}; export let saveMqtt = () => {};
export let rebootEsp = () => {}; export let rebootEsp = () => {};
</script> </script>
<div class="grd-2col1"> {#if show}
<Card title="Подключение к WiFi"> <div class="grd-2col1">
<div class="crd-itm-psn"> <Card title="Подключение к WiFi">
<div class="w-4/6"> <div class="crd-itm-psn">
<p class="wgt-dscr-stl">Название устройства</p> <div class="w-4/6">
<p class="wgt-dscr-stl">Название устройства</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="crd-itm-psn">
<input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <div class="w-4/6">
<p class="wgt-dscr-stl">Точка доступа</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-4/6">
<div class="w-4/6"> <p class="wgt-dscr-stl">Пароль точки доступа</p>
<p class="wgt-dscr-stl">Точка доступа</p> </div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="crd-itm-psn">
<input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <div class="w-4/6">
<p class="wgt-dscr-stl">Название wifi сети</p>
</div>
<div class="flex justify-end w-3/6">
<select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
{#each Object.entries(ssidJson) as [num, ssid]}
<option value={ssid}>
{ssid}
</option>
{/each}
</select>
</div>
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-4/6">
<div class="w-4/6"> <p class="wgt-dscr-stl">Пароль</p>
<p class="wgt-dscr-stl">Пароль точки доступа</p> </div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
<div class="flex justify-end w-3/6"> {#if errorsJson.passer === 1}
<input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <div class="grd-1col1">
</div> <Alarm title="Введен неправильный пароль" />
</div> </div>
<div class="crd-itm-psn"> {/if}
<div class="w-4/6">
<p class="wgt-dscr-stl">Название wifi сети</p>
</div>
<div class="flex justify-end w-3/6">
<select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
{#each Object.entries(ssidJson) as [num, ssid]}
<option value={ssid}>
{ssid}
</option>
{/each}
</select>
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<p class="wgt-dscr-stl">Пароль</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
{#if errorsJson.passer === 1}
<div class="grd-1col1">
<Alarm title="Введен неправильный пароль" />
</div>
{/if}
<button class="btn-lg" on:click={() => saveSett()}>{"Сохранить"}</button> <button class="btn-lg" on:click={() => saveSett()}>{"Сохранить"}</button>
</Card> </Card>
<Card title="Подключение к MQTT"> <Card title="Подключение к MQTT">
<div class="crd-itm-psn"> <div class="crd-itm-psn">
<div class="w-4/6"> <div class="w-4/6">
<p class="wgt-dscr-stl">Состояние подключения</p> <p class="wgt-dscr-stl">Состояние подключения</p>
</div>
<div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
{#if errorsJson.mqtt === "e5"}
<p class="text-green-500 font-bold h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p>
{:else if errorsJson.mqtt === "e13"}
<p class="text-yellow-500 font-bold h-8 bg-yellow-50 border-2 border-gray-200 rounded w-full text-center">Подключение</p>
{:else if errorsJson.mqtt === undefined}
<p class="text-blue-500 font-bold h-8 bg-blue-50 border-2 border-gray-200 rounded w-full text-center">Ожидание</p>
{:else}
<p class="text-red-500 font-bold h-8 bg-red-50 border-2 border-gray-200 rounded w-full text-center">Ошибка</p>
{/if}
</div>
</div> </div>
<div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words"> <div class="crd-itm-psn">
{#if errorsJson.mqtt === "e5"} <div class="w-4/6">
<p class="text-green-500 font-bold h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p> <p class="wgt-dscr-stl">Название сервера</p>
{:else if errorsJson.mqtt === "e13"} </div>
<p class="text-yellow-500 font-bold h-8 bg-yellow-50 border-2 border-gray-200 rounded w-full text-center">Подключение</p> <div class="flex justify-end w-3/6">
{:else if errorsJson.mqtt === undefined} <input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
<p class="text-blue-500 font-bold h-8 bg-blue-50 border-2 border-gray-200 rounded w-full text-center">Ожидание</p> </div>
{:else}
<p class="text-red-500 font-bold h-8 bg-red-50 border-2 border-gray-200 rounded w-full text-center">Ошибка</p>
{/if}
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-4/6">
<div class="w-4/6"> <p class="wgt-dscr-stl">Порт</p>
<p class="wgt-dscr-stl">Название сервера</p> </div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="crd-itm-psn">
<input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <div class="w-4/6">
<p class="wgt-dscr-stl">Префикс</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-4/6">
<div class="w-4/6"> <p class="wgt-dscr-stl">Имя пользователя</p>
<p class="wgt-dscr-stl">Порт</p> </div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="crd-itm-psn">
<input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <div class="w-4/6">
<p class="wgt-dscr-stl">Пароль</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div> </div>
</div> <button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>
<div class="crd-itm-psn"> </Card>
<div class="w-4/6"> </div>
<p class="wgt-dscr-stl">Префикс</p> <div class="grd-1col1">
</div> <Card>
<div class="flex justify-end w-3/6"> <button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
<input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> </Card>
</div> </div>
</div> {:else}
<div class="crd-itm-psn"> <Alarm title="Загрузка..." />
<div class="w-4/6"> {/if}
<p class="wgt-dscr-stl">Имя пользователя</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<p class="wgt-dscr-stl">Пароль</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>
</Card>
</div>
<div class="grd-1col1">
<Card>
<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
</Card>
</div>

49
src/pages/Dashboard.svelte
View File

@@ -3,32 +3,39 @@
import Input from "../widgets/Input.svelte"; import Input from "../widgets/Input.svelte";
import Toggle from "../widgets/Toggle.svelte"; import Toggle from "../widgets/Toggle.svelte";
import Anydata from "../widgets/Anydata.svelte"; import Anydata from "../widgets/Anydata.svelte";
import Alarm from "../components/Alarm.svelte";
export let layoutJson; export let layoutJson;
export let pages; export let pages;
export let show;
export let wsPush = (ws, topic, status) => {}; export let wsPush = (ws, topic, status) => {};
</script> </script>
<div class="grd-3col1"> {#if show}
{#if layoutJson === []} <div class="grd-3col1">
<Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} /> {#if layoutJson === []}
{/if} <Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
{#each pages as pagesName, i} {/if}
<Card title={pagesName.page}> {#each pages as pagesName, i}
{#each layoutJson as widget, i} <Card title={pagesName.page}>
{#if widget.page === pagesName.page} {#each layoutJson as widget, i}
{#if widget.widget === "input"} {#if widget.page === pagesName.page}
<Input bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} /> {#if widget.widget === "input"}
<Input bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
{/if}
{#if widget.widget === "toggle"}
<Toggle bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
{/if}
{#if widget.widget === "anydata"}
<Anydata bind:value={widget.status} widget={widget} />
{/if}
{/if} {/if}
{#if widget.widget === "toggle"} {/each}
<Toggle bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} /> </Card>
{/if} {/each}
{#if widget.widget === "anydata"} </div>
<Anydata bind:value={widget.status} widget={widget} /> {:else}
{/if} <Alarm title="Загрузка..." />
{/if} {/if}
{/each}
</Card>
{/each}
</div>

78
src/pages/List.svelte
View File

@@ -5,6 +5,8 @@
import CrossIcon from "../svg/Cross.svelte"; import CrossIcon from "../svg/Cross.svelte";
import OpenIcon from "../svg/Open.svelte"; import OpenIcon from "../svg/Open.svelte";
export let show;
export let deviceList; export let deviceList;
export let showInput; export let showInput;
export let newDevice = {}; export let newDevice = {};
@@ -25,41 +27,45 @@
} }
</script> </script>
<div class="grd-1col1"> {#if show}
<Card title={"Список устройств"}> <div class="grd-1col1">
<table class="tbl"> <Card title={"Список устройств"}>
<thead class="bg-gray-100"> <table class="tbl">
<tr class="txt-sz txt-pad"> <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>
<th class="tbl-hd w-7" />
</tr>
</thead>
<tbody class="bg-white">
{#each deviceList as device, i}
<tr class="txt-sz txt-pad"> <tr class="txt-sz txt-pad">
<td class="tbl-bdy-lg ipt-lg w-full">{device.name}</td> <th class="tbl-hd">Название устройства</th>
<td class="tbl-bdy-lg ipt-lg w-full"><a href={"http://" + device.ip}>{device.ip}</a></td> <th class="tbl-hd">IP адрес</th>
<td class="tbl-bdy-lg ipt-lg w-full">{device.id}</td> <th class="tbl-hd">Идентификатор</th>
<td class="tbl-bdy-lg ipt-lg w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td> <th class="tbl-hd">Состояние</th>
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td> <th class="tbl-hd w-7" />
</tr> </tr>
{/each} </thead>
{#if showInput} <tbody class="bg-white">
<tr class="txt-sz txt-pad"> {#each deviceList as device, i}
<td class="tbl-bdy-lg"><input bind:value={newDevice.name} class="ipt-lg w-full" type="text" /></td> <tr class="txt-sz txt-pad">
<td class="tbl-bdy-lg"><input bind:value={newDevice.ip} class="ipt-lg w-full" type="text" /></td> <td class="tbl-bdy-lg ipt-lg w-full">{device.name}</td>
<td class="tbl-bdy-lg"><input bind:value={newDevice.id} class="ipt-lg w-full" type="text" /></td> <td class="tbl-bdy-lg ipt-lg w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="tbl-bdy-lg" /> <td class="tbl-bdy-lg ipt-lg w-full">{device.id}</td>
</tr> <td class="tbl-bdy-lg ipt-lg w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
{/if} <td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
</tbody> </tr>
</table> {/each}
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Сохранить" : "Добавить устройство"}</button> {#if showInput}
</Card> <tr class="txt-sz txt-pad">
<Alarm> <td class="tbl-bdy-lg"><input bind:value={newDevice.name} class="ipt-lg w-full" type="text" /></td>
<p>Список устройств будет обновляться автоматически. Подключенные к одному роутеру устройства будут появляться в списке в течении двух минут. Ручное добавление сделано в целях проверки для разработчика.</p> <td class="tbl-bdy-lg"><input bind:value={newDevice.ip} class="ipt-lg w-full" type="text" /></td>
</Alarm> <td class="tbl-bdy-lg"><input bind:value={newDevice.id} class="ipt-lg w-full" type="text" /></td>
</div> <td class="tbl-bdy-lg" />
</tr>
{/if}
</tbody>
</table>
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
</Card>
<Alarm>
<p>Список устройств будет обновляться автоматически. Подключенные к одному роутеру устройства будут появляться в списке в течении двух минут. Ручное добавление сделано в целях проверки для разработчика.</p>
</Alarm>
</div>
{:else}
<Alarm title="Загрузка..." />
{/if}

176
src/pages/System.svelte
View File

@@ -124,98 +124,104 @@
export let errorsJson; export let errorsJson;
export let rebootEsp = () => {}; export let rebootEsp = () => {};
export let show;
export let cancelAlarm = (alarmKey) => {}; export let cancelAlarm = (alarmKey) => {};
</script> </script>
<div class="grd-2col1"> {#if show}
<Card title="Системная информация"> <div class="grd-2col1">
<div class="crd-itm-psn"> <Card title="Системная информация">
<div class="w-3/4"> <div class="crd-itm-psn">
<p class="wgt-dscr-stl">Версия прошивки</p> <div class="w-3/4">
<p class="wgt-dscr-stl">Версия прошивки</p>
</div>
<div class="flex justify-center w-1/4">
<p class="text-gray-500 font-bold">{errorsJson.bver}</p>
</div>
</div> </div>
<div class="flex justify-center w-1/4"> <div class="crd-itm-psn">
<p class="text-gray-500 font-bold">{errorsJson.bver}</p> <div class="w-3/4">
<p class="wgt-dscr-stl">Версия файловой системы</p>
</div>
<div class="flex justify-center w-1/4">
<p class="text-gray-500 font-bold">{version}</p>
</div>
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-3/4">
<div class="w-3/4"> <p class="wgt-dscr-stl">Uptime устройства</p>
<p class="wgt-dscr-stl">Версия файловой системы</p> </div>
<div class="flex justify-center w-1/4">
<p class="text-gray-500 font-bold">{errorsJson.upt}</p>
</div>
</div> </div>
<div class="flex justify-center w-1/4"> <div class="crd-itm-psn">
<p class="text-gray-500 font-bold">{version}</p> <div class="w-3/4">
<p class="wgt-dscr-stl">Uptime сессии mqtt</p>
</div>
<div class="flex justify-center w-1/4">
<p class="text-gray-500 font-bold">{errorsJson.uptm}</p>
</div>
</div> </div>
</div> <div class="crd-itm-psn">
<div class="crd-itm-psn"> <div class="w-3/4">
<div class="w-3/4"> <p class="wgt-dscr-stl">Качество WiFi сигнала</p>
<p class="wgt-dscr-stl">Uptime устройства</p> </div>
<div class="flex justify-center w-1/4 text-xs sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
{#if errorsJson.rssi === 0}
<p class="text-red-500 font-bold">не подключено</p>
{/if}
{#if errorsJson.rssi === 1}
<p class="text-red-500 font-bold">нет сигнала</p>
{/if}
{#if errorsJson.rssi === 2}
<p class="text-red-500 font-bold">очень низкий</p>
{/if}
{#if errorsJson.rssi === 3}
<p class="text-yellow-500 font-bold">низкий</p>
{/if}
{#if errorsJson.rssi === 4}
<p class="text-yellow-500 font-bold">хороший</p>
{/if}
{#if errorsJson.rssi === 5}
<p class="text-green-500 font-bold">очень хороший</p>
{/if}
{#if errorsJson.rssi === 6}
<p class="text-green-500 font-bold">отличный</p>
{/if}
</div>
</div> </div>
<div class="flex justify-center w-1/4"> <div class="crd-itm-psn">
<p class="text-gray-500 font-bold">{errorsJson.upt}</p> <div class="w-3/4">
<p class="wgt-dscr-stl">Остаток оперативной памяти</p>
</div>
<div class="flex justify-center w-1/4">
<p class="text-green-500 font-bold">{errorsJson.heap}</p>
</div>
</div> </div>
</div> </Card>
<div class="crd-itm-psn"> <Card title="Системные ошибки">
<div class="w-3/4"> <div class="grd-2col1">
<p class="wgt-dscr-stl">Uptime сессии mqtt</p> <!--ошибки-->
{#each Object.entries(errorsJson) as [key, param]}
{#if key in systemErrorsRus && param in systemErrorsRus[key]}
<Alarm title={systemErrorsRus[key][param].descr} cross={systemErrorsRus[key][param].cancel} close={() => cancelAlarm(key)}>
<p class="break-words text-center">{systemErrorsRus[key][param].txt}</p>
{#if systemErrorsRus[key][param].num}
<p class="break-words text-center">{"Количество: " + errorsJson[key + "n"]}</p>
{/if}
</Alarm>
{/if}
{/each}
</div> </div>
<div class="flex justify-center w-1/4"> </Card>
<p class="text-gray-500 font-bold">{errorsJson.uptm}</p> </div>
</div> <div class="grd-1col1">
</div> <Card>
<div class="crd-itm-psn"> <button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
<div class="w-3/4"> </Card>
<p class="wgt-dscr-stl">Качество WiFi сигнала</p> </div>
</div> {:else}
<div class="flex justify-center w-1/4 text-xs sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words"> <Alarm title="Загрузка..." />
{#if errorsJson.rssi === 0} {/if}
<p class="text-red-500 font-bold">не подключено</p>
{/if}
{#if errorsJson.rssi === 1}
<p class="text-red-500 font-bold">нет сигнала</p>
{/if}
{#if errorsJson.rssi === 2}
<p class="text-red-500 font-bold">очень низкий</p>
{/if}
{#if errorsJson.rssi === 3}
<p class="text-yellow-500 font-bold">низкий</p>
{/if}
{#if errorsJson.rssi === 4}
<p class="text-yellow-500 font-bold">хороший</p>
{/if}
{#if errorsJson.rssi === 5}
<p class="text-green-500 font-bold">очень хороший</p>
{/if}
{#if errorsJson.rssi === 6}
<p class="text-green-500 font-bold">отличный</p>
{/if}
</div>
</div>
<div class="crd-itm-psn">
<div class="w-3/4">
<p class="wgt-dscr-stl">Остаток оперативной памяти</p>
</div>
<div class="flex justify-center w-1/4">
<p class="text-green-500 font-bold">{errorsJson.heap}</p>
</div>
</div>
</Card>
<Card title="Системные ошибки">
<div class="grd-2col1">
<!--ошибки-->
{#each Object.entries(errorsJson) as [key, param]}
{#if key in systemErrorsRus && param in systemErrorsRus[key]}
<Alarm title={systemErrorsRus[key][param].descr} cross={systemErrorsRus[key][param].cancel} close={() => cancelAlarm(key)}>
<p class="break-words text-center">{systemErrorsRus[key][param].txt}</p>
{#if systemErrorsRus[key][param].num}
<p class="break-words text-center">{"Количество: " + errorsJson[key + "n"]}</p>
{/if}
</Alarm>
{/if}
{/each}
</div>
</Card>
</div>
<div class="grd-1col1">
<Card>
<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
</Card>
</div>