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

изменения

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-02-11 00:22:41 +01:00
parent 050a813471
commit 34d26bbe1d
11 changed files with 216 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.svelte
View File

@@ -26,7 +26,7 @@
let version = 401;
let debug = true;
let LOG_MAX_MESSAGES = 10;
let reconnectTimeout = 30000;
let reconnectTimeout = 20000;
let rebootingTimeout = 20000;
let opened = false;
let preventMove = false;
@@ -785,6 +785,16 @@
myTimeout = setTimeout(rebootingTask, rebootingTimeout);
}
function mqttConnect() {
errorsJson.mqtt = 8;
console.log("[i]", settingsJson);
wsSendMsg(selectedWs, "/sgnittes|" + JSON.stringify(settingsJson));
//wsSendMsg(selectedWs, '/rorre|{"mqtt":8}');
wsSendMsg(selectedWs, "/mqtt|");
clearData();
sendCurrentPageName();
}
function rebootingTask() {
clearTimeout(myTimeout);
connectToAllDevices();
@@ -887,7 +897,7 @@
<ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} />
</Route>
<Route path="/connection">
<ConnectionPage settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} rebootEsp={() => rebootEsp()} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
<ConnectionPage settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} rebootEsp={() => rebootEsp()} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} mqttConnect={() => mqttConnect()} />
</Route>
<Route path="/system">
<SystemPage settingsJson={settingsJson} errorsJson={errorsJson} rebootEsp={() => rebootEsp()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} version={version} />
@@ -938,15 +948,9 @@
.crd-itm-psn {
@apply flex mb-3 h-8 items-center;
}
.wgt-dscr-w {
@apply w-2/3;
}
.wgt-dscr-stl {
@apply pr-4 text-gray-500 font-bold;
}
.wgt-w {
@apply flex justify-end w-1/3;
}
/*====================================================others=====================================================*/
.btn-i {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;

14
src/components/Alarm.svelte
View File

@@ -1,20 +1,20 @@
<script>
import CrossIcon from "../svg/Cross.svelte";
export let title;
export let showCloseBtn = true;
export let title = false;
export let cross = false;
export let close = () => {};
</script>
<div class="alm">
{#if title}
{#if title && !cross}
<h1 class="alm-hdr">{title}</h1>
{:else if title && cross}
<div class="flex items-center">
<div class="w-11/12">
<h1 class="alm-hdr">{title}</h1>
</div>
<div class="flex justify-end w-1/12">
{#if showCloseBtn}
<CrossIcon click={() => close()} />
{/if}
<CrossIcon click={() => close()} />
</div>
</div>
{/if}
@@ -31,7 +31,7 @@
@apply mb-2 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;
}
.alm-hdr {
@apply text-center text-base text-red-500 pb-0;
@apply text-center text-base text-red-400 font-bold pb-0;
}
}
</style>

18
src/components/Card.svelte
View File

@@ -1,22 +1,10 @@
<script>
import CloudIcon from "../svg/Cloud.svelte";
export let title;
export let cloud = false;
export let cloudColor;
export let title = false;
</script>
<div class="crd">
{#if title && !cloud}
{#if title}
<h1 class="crd-hdr">{title}</h1>
{:else if title && cloud}
<div class="flex items-center">
<div class="w-11/12">
<h1 class="crd-hdr">{title}</h1>
</div>
<div class="flex justify-end w-1/12">
<CloudIcon color={cloudColor} />
</div>
</div>
{/if}
<slot />
</div>
@@ -28,7 +16,7 @@
@layer components {
.crd {
@apply w-full mb-2 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;
@apply w-full mb-2 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-4 xl:py-4 2xl:px-4 2xl:py-4 bg-white shadow-md lg:shadow-lg border border-gray-200 rounded-lg;
}
.crd-hdr {
@apply text-center text-lg text-gray-500 font-bold pb-4;

215
src/pages/Connection.svelte
View File

@@ -3,115 +3,142 @@
import Alarm from "../components/Alarm.svelte";
export let settingsJson;
//export let settingsJsonParced;
export let errorsJson;
//export let errorsJsonParced;
export let ssidJson;
let mqttConnected = true;
//export let ssidJsonParced;
let promise = 0;
let next = (value) => new Promise((resolve) => setTimeout(() => resolve(++value), 500));
export let ssidDropdownClick = () => {};
export let saveSettings = () => {};
export let mqttConnect = () => {};
export let rebootEsp = () => {};
</script>
<div class="grd-2col1">
<Card title="Подключение к WiFi роутеру">
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Название устройства</p>
{#await promise}
<p>...</p>
{:then result}
<div class="grd-2col1">
<Card title="Подключение к WiFi">
<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.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
<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.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Точка доступа</p>
<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.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
<div class="crd-itm-psn">
<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={() => ssidDropdownClick()}>
{#each Object.entries(ssidJson) as [num, ssid]}
<option value={ssid}>
{ssid}
</option>
{/each}
</select>
</div>
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Пароль точки доступа</p>
<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>
<div class="wgt-w">
<input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
{#if errorsJson.passer === 1}
<div class="grd-1col1">
<Alarm title="Введен неправильный пароль" />
</div>
{/if}
<button class="btn-lg" on:click={() => (promise = next(result))}>{result}</button>
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
</Card>
<Card title="Подключение к MQTT">
<div class="crd-itm-psn">
<div class="w-4/6">
<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 === 0}
<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 === 8}
<p class="text-yellow-500 font-bold h-8 bg-yellow-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="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Название wifi сети</p>
<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.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="wgt-w">
<select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidDropdownClick()}>
{#each Object.entries(ssidJson) as [num, ssid]}
<option value={ssid}>
{ssid}
</option>
{/each}
</select>
<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.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Пароль</p>
<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.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
<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.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
</div>
{#if errorsJson.passer === 1}
<div class="grd-1col1">
<Alarm title="Введен неправильный пароль" />
<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>
{/if}
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
</Card>
<Card title="Подключение к MQTT брокеру" cloud={true} cloudColor={mqttConnected === true ? "text-green-500" : "text-red-500"}>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Название сервера</p>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Порт</p>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Префикс</p>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Имя пользователя</p>
</div>
<div class="wgt-w">
<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="wgt-dscr-w">
<p class="wgt-dscr-stl">Пароль</p>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
</Card>
</div>
<div class="grd-1col1">
<Card>
<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
</Card>
</div>
<button class="btn-lg" on:click={() => mqttConnect()}>{"Сохранить"}</button>
</Card>
</div>
<div class="grd-1col1">
<Card>
<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
</Card>
</div>
{/await}

64
src/pages/System.svelte
View File

@@ -73,21 +73,23 @@
</Card>
<Card title="Системные ошибки">
<div class="grd-2col1">
<!--Ошибки которые можно сбросить пользователю, связанные с ядром-->
{#if errorsJson.wscle === 1}
<Alarm title={"Ошибка web sockets"} close={() => cancelAlarm("wscle")}>
<Alarm title={"Ошибка web sockets"} cross={true} close={() => cancelAlarm("wscle")}>
<p class="break-words text-center">Слишком много клиентов было открыто. Допускается не более четырех.</p>
</Alarm>
{/if}
{#if errorsJson.jsbuf === 1}
<Alarm title={"Ошибка json"} close={() => cancelAlarm("jsbuf")}>
<Alarm title={"Ошибка json"} cross={true} close={() => cancelAlarm("jsbuf")}>
<p class="break-words text-center">Недостаточный размер буфера библиотеки Arduino Json. Устройство может вести себя непредсказуемо. Обратитесь к разработчику</p>
</Alarm>
{/if}
{#if errorsJson.jserr > 0}
<Alarm title={"Ошибка json"} close={() => cancelAlarm("jserr")}>
<Alarm title={"Ошибка json"} cross={true} close={() => cancelAlarm("jserr")}>
<p class="break-words text-center">Ошибка записи/чтения json. Устройство может вести себя непредсказуемо. Количество ошибок: {errorsJson.jserr}. Обратитесь к разработчику.</p>
</Alarm>
{/if}
<!--Ошибки которые нельзя сбросить пользователю-->
{#if errorsJson.bver != version}
<Alarm title={"Ошибка версии"}>
<p class="break-words text-center">Версия файловой системы не совпадает с версией прошивки. Вероятно произошла ошибка во время обновления устройства по воздуху.</p>
@@ -98,6 +100,62 @@
<p class="break-words text-center">Уровень сигнала WiFi предельно низкий, веб интерфейс может работать со сбоями и потерей данных, рекомендуется переместить устройство ближе к роутеру</p>
</Alarm>
{/if}
<!--MQTT ошибки-->
{#if errorsJson.mqtt === -4}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Нет ответа от сервера</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === -3}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Соединение было разорвано</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === -2}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Ошибка соединения. Обычно возникает когда неверно указано название сервера MQTT</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === -1}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Клиент был отключен</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 1}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Ошибка версии</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 2}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Отклонен идентификатор</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 3}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Не могу установить соединение</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 4}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Неправильное имя пользователя/пароль</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 5}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Не авторизован для подключения</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 6}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Название сервера пустое</p>
</Alarm>
{/if}
{#if errorsJson.mqtt === 7}
<Alarm title={"MQTT"}>
<p class="break-words text-center">Имя пользователя или пароль пустые</p>
</Alarm>
{/if}
</div>
</Card>
</div>

6
src/svg/Cloud.svelte
View File

@@ -1,7 +1,9 @@
<script>
export let color;
export let x = 0;
export let y = 0;
</script>
<svg class="h-8 w-8 {color}" 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" />
<svg class="h-8 w-8 {color}" width="8" height="8" viewBox="{x} {y} 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>

2
src/svg/Cross.svelte
View File

@@ -2,6 +2,6 @@
export let click = () => {};
</script>
<svg on:click={click()} 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">
<svg on:click={click()} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 -2 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>

2
src/svg/Open.svelte
View File

@@ -2,4 +2,4 @@
export let click = () => {};
</script>
<svg on:click={click()} 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>
<svg on:click={click()} class="h-6 w-6 text-green-400 cursor-pointer" width="24" height="24" viewBox="0 -2 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>

4
src/widgets/Anydata.svelte
View File

@@ -5,11 +5,11 @@
</script>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div>
<div class="wgt-w">
<div class="flex justify-end w-1/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-adt-stl">{!widget.status ? "" : widget.status}</label>
<!-- svelte-ignore a11y-label-has-associated-control -->

4
src/widgets/Input.svelte
View File

@@ -6,11 +6,11 @@
</script>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div>
<div class="wgt-w">
<div class="flex justify-end w-1/3">
{#if widget.type == "number"}
<input class={widget["send"] == true ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right 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" />
{/if}

4
src/widgets/Toggle.svelte
View File

@@ -6,11 +6,11 @@
</script>
<div class="crd-itm-psn">
<div class="wgt-dscr-w">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div>
<div class="wgt-w">
<div class="flex justify-end w-1/3">
<label for={widget.topic} class="items-center cursor-pointer">
<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" />