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

123

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-11-22 15:07:41 +01:00
parent a2530c24e2
commit 4b10fffc88
5 changed files with 78 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>IoT Manager 4.4.1</title> <title>IoT Manager 4.4.2</title>
<link rel="icon" type="image/png" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="stylesheet" href="/build/bundle.css?441" /> <link rel="stylesheet" href="/build/bundle.css?441" />

17
src/App.svelte
View File

@@ -33,14 +33,14 @@
//******************************************************************************************************************************/ //******************************************************************************************************************************/
const debug = true; const debug = true;
const LOG_MAX_MESSAGES = 100; const LOG_MAX_MESSAGES = 100;
const reconnectTimeout = 20000; const reconnectTimeout = 30000;
const waitingAckTimeout = 5000; const waitingAckTimeout = 5000;
const rebootingTimeout = 18000; const rebootingTimeout = 20000;
const updatingTimeout = 120000; const updatingTimeout = 130000;
let opened = false; let opened = false;
let preventMove = false; let preventMove = false;
const blobDebug = false; const blobDebug = false;
const devMode = true; const devMode = false;
//****************************************************variable section**********************************************************/ //****************************************************variable section**********************************************************/
//******************************************************************************************************************************/ //******************************************************************************************************************************/
@@ -1156,6 +1156,7 @@
function rebootEsp() { function rebootEsp() {
if (debug) console.log("[i]", "reboot..."); if (debug) console.log("[i]", "reboot...");
wsSendMsg(selectedWs, "/reboot|"); wsSendMsg(selectedWs, "/reboot|");
markDeviceStatus(selectedWs, false);
rebootingUpdatingInProgress = true; rebootingUpdatingInProgress = true;
myTimeout = setTimeout(rebootingTask, rebootingTimeout); myTimeout = setTimeout(rebootingTask, rebootingTimeout);
} }
@@ -1306,7 +1307,7 @@
<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 && currentPageName != "/|"} {#if !socketConnected && currentPageName != "/|"}
<Alarm title="Нет соединения" /> <Alarm title="Подключение..." />
{:else} {:else}
<Route path="/"> <Route path="/">
<DashboardPage show={pageReady.dash} layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} /> <DashboardPage show={pageReady.dash} layoutJson={layoutJson} pages={pages} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
@@ -1379,10 +1380,10 @@
@apply table-fixed w-full select-none my-2; @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 truncate;
} }
.tbl-bdy-lg { .tbl-bdy-lg {
@apply text-center px-1 break-words; @apply text-center px-1 break-words truncate;
} }
.tbl-bdy-sm { .tbl-bdy-sm {
@apply px-1 break-words; @apply px-1 break-words;
@@ -1412,7 +1413,7 @@
} }
/*====================================================buttons=====================================================*/ /*====================================================buttons=====================================================*/
.btn-lg { .btn-lg {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded; @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded truncate;
} }
.btn-tbl { .btn-tbl {
@apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300; @apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300;

24
src/pages/Connection.svelte
View File

@@ -19,7 +19,7 @@
<Card title="Подключение к WiFi"> <Card title="Подключение к WiFi">
<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 truncate">Название устройства</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -27,7 +27,7 @@
</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 truncate">Точка доступа</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -35,7 +35,7 @@
</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 truncate">Пароль точки доступа</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -43,7 +43,7 @@
</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">Название wifi сети</p> <p class="wgt-dscr-stl truncate">Название wifi сети</p>
</div> </div>
<div class="flex justify-end w-3/6"> <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()}> <select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
@@ -57,7 +57,7 @@
</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 truncate">Пароль</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -65,7 +65,7 @@
</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 truncate">Сервер обновления</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.serverip} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.serverip} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -83,7 +83,7 @@
<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 truncate">Состояние подключения</p>
</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="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"} {#if errorsJson.mqtt === "e5"}
@@ -99,7 +99,7 @@
</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 truncate">Название сервера</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -107,7 +107,7 @@
</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 truncate">Порт</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -115,7 +115,7 @@
</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 truncate">Префикс</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -123,7 +123,7 @@
</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 truncate">Имя пользователя</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
@@ -131,7 +131,7 @@
</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 truncate">Пароль</p>
</div> </div>
<div class="flex justify-end w-3/6"> <div class="flex justify-end w-3/6">
<input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />

17
src/pages/Dashboard.svelte
View File

@@ -1,4 +1,5 @@
<script> <script>
import { onMount } from "svelte";
import Card from "../components/Card.svelte"; import Card from "../components/Card.svelte";
import Input from "../widgets/Input.svelte"; import Input from "../widgets/Input.svelte";
import Range from "../widgets/Range.svelte"; import Range from "../widgets/Range.svelte";
@@ -7,17 +8,29 @@
import Anydata from "../widgets/Anydata.svelte"; import Anydata from "../widgets/Anydata.svelte";
import Alarm from "../components/Alarm.svelte"; import Alarm from "../components/Alarm.svelte";
onMount(async () => {
setTimeout(timeIsOut, 1000);
});
export let layoutJson; export let layoutJson;
export let pages; export let pages;
export let show; export let show;
export let wsPush = (ws, topic, status) => {}; export let wsPush = (ws, topic, status) => {};
let empty = false;
function timeIsOut() {
if (layoutJson.length === 0) {
empty = true;
}
}
</script> </script>
{#if show} {#if show}
<div class="grd-1col1"> <div class="grd-1col1 animate-pulse">
{#if layoutJson.length === 0} {#if empty}
<Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} /> <Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
{/if} {/if}
</div> </div>

22
src/pages/System.svelte
View File

@@ -337,10 +337,26 @@
</div> </div>
</div> </div>
<!--MQTT-->
<div class="flex mb-2 h-6 items-center">
<div class="w-2/3">
<p class="pr-4 text-gray-500 font-bold text-sm truncate">Прием событий с других устройств</p>
</div>
<div class="flex justify-center w-1/3">
<label for="mqtt" class="items-center cursor-pointer">
<div class="relative">
<input bind:checked={settingsJson.mqttin} on:change={() => (reboot = true)} id="mqtt" type="checkbox" class="sr-only" />
<div class="block {settingsJson.mqttin ? 'bg-blue-600' : 'bg-gray-600'} w-10 h-6 rounded-full shadow-lg" />
<div class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
</div>
</label>
</div>
</div>
<!--i2c--> <!--i2c-->
<div class="flex mb-2 h-6 items-center"> <div class="flex mb-2 h-6 items-center">
<div class="w-2/3"> <div class="w-2/3">
<p class="pr-4 text-gray-500 font-bold text-sm truncate">Расширение i2c</p> <p class="pr-4 text-gray-500 font-bold text-sm truncate">Перенаправление i2c</p>
</div> </div>
<div class="flex justify-center w-1/3"> <div class="flex justify-center w-1/3">
@@ -353,7 +369,7 @@
</label> </label>
</div> </div>
</div> </div>
{#if settingsJson.i2c === true}
<div class="flex mb-2 h-6 items-center"> <div class="flex mb-2 h-6 items-center">
<div class="w-2/3"> <div class="w-2/3">
<p class="pr-4 text-gray-500 font-bold text-sm truncate">i2c SCL gpio</p> <p class="pr-4 text-gray-500 font-bold text-sm truncate">i2c SCL gpio</p>
@@ -378,6 +394,7 @@
<input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" /> <input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
</div> </div>
</div> </div>
{/if}
<!--control--> <!--control-->
<!--<div class="grd-2col1">--> <!--<div class="grd-2col1">-->
@@ -390,6 +407,7 @@
<!--<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить"}</button>--> <!--<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить"}</button>-->
<!--</div>--> <!--</div>-->
</Card> </Card>
<!--LOG--> <!--LOG-->
<Card title="Лог" class="z-50"> <Card title="Лог" class="z-50">
<div class="h-80 overflow-y-auto"> <div class="h-80 overflow-y-auto">