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

изменение стилей

Browse Source
This commit is contained in:
IoT Manager
2023-09-22 19:40:34 +02:00
parent 1a87f02c41
commit 425faec4e3
9 changed files with 86 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.svelte
View File

@@ -38,14 +38,14 @@
const LOG_MAX_MESSAGES = 100;
const reconnectTimeout = 60000; //период проверки соединения с устройством
let preventReconnect = false;
const waitingAckTimeout = 12000; //время ожидания ответа от устройства
const rebootingTimeout = 20000;
const waitingAckTimeout = 18000; //время ожидания ответа от устройства
const rebootingTimeout = 30000;
const updatingTimeout = 130000;
let rebootTimer;
let opened = false;
let preventMove = false;
const blobDebug = false;
const devMode = false;
const devMode = true;
let timeout = reconnectTimeout / 1000;
let percent;
@@ -53,7 +53,7 @@
//****************************************************variable section**********************************************************/
//******************************************************************************************************************************/
let myip = document.location.hostname;
if (devMode) myip = "192.168.1.238";
if (devMode) myip = "192.168.1.247";
//Flags
let firstDevListRequest = true;
@@ -949,6 +949,7 @@
return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
//тикер который тикает каждую секунду и на каждую 0 секунду запускает проверку соединения
function wsTestMsgTask() {
setTimeout(wsTestMsgTask, 1000);
if (!preventReconnect) {
@@ -1657,4 +1658,25 @@
input[type="file"] {
display: none;
}
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: #ebebeb;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #cbcbcb;
border-radius: 2px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #aeaeae;
}
</style>

4
src/pages/Config.svelte
View File

@@ -257,7 +257,7 @@
</td>
{#if element[key] != "nil"}
<td class="tbl-bdy-sm text-center">
<input bind:value={element[key]} class="ipt-sm w-full" type="text" />
<input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
</td>
{/if}
{:else}
@@ -265,7 +265,7 @@
<p class="txt-ita">{key}</p>
</td>
<td class="tbl-bdy-sm text-center">
<input bind:value={element[key]} class="ipt-sm w-full" type="text" />
<input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
</td>
{/if}
</tr>

106
src/pages/Connection.svelte
View File

@@ -18,36 +18,33 @@
<div class="my-4">
<div class="grd-2col1">
<Card title="Подключение к WiFi">
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="grid grid-cols-2 gap-2">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Название устройства</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 class="flex justify-end w-full">
<input bind:value={settingsJson.name} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Точка доступа</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 class="flex justify-end w-full">
<input bind:value={settingsJson.apssid} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Пароль точки доступа</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 class="flex justify-end w-full">
<input bind:value={settingsJson.appass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Название 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()}>
<div class="flex justify-end w-full">
<select class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
{#each Object.entries(ssidJson) as [num, ssid]}
<option value={ssid}>
{ssid}
@@ -55,21 +52,19 @@
{/each}
</select>
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Пароль</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 class="flex justify-end w-full">
<input bind:value={settingsJson.routerpass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Сервер обновления</p>
</div>
<div class="flex justify-end w-3/6">
<input bind:value={settingsJson.serverip} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
<div class="flex justify-end w-full">
<input bind:value={settingsJson.serverip} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
{#if errorsJson.passer === 1}
@@ -82,13 +77,13 @@
</Card>
<Card title="Подключение к MQTT">
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="grid grid-cols-2 gap-2">
<div class="w-full">
<p class="wgt-dscr-stl text-gray-500 truncate">Состояние подключения</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">
<div class="flex justify-center w-full align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base truncate align-text-middle">
{#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>
<p class="text-green-500 font-bold m-0 p-0 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}
@@ -97,45 +92,40 @@
<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 class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Название сервера</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 class="flex justify-end w-full">
<input bind:value={settingsJson.mqttServer} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Порт</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 class="flex justify-end w-full">
<input bind:value={settingsJson.mqttPort} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Префикс</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 class="flex justify-end w-full">
<input bind:value={settingsJson.mqttPrefix} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Имя пользователя</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 class="flex justify-end w-full">
<input bind:value={settingsJson.mqttUser} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
<div class="w-4/6">
<div class="w-full">
<p class="wgt-dscr-stl truncate">Пароль</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 class="flex justify-end w-full">
<input bind:value={settingsJson.mqttPass} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
</div>
</div>
<button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>

3
src/pages/Dashboard.svelte
View File

@@ -1,5 +1,4 @@
<script>
import { onMount } from "svelte";
import Card from "../components/Card.svelte";
import Input from "../widgets/Input.svelte";
import Range from "../widgets/Range.svelte";
@@ -8,8 +7,6 @@
import Anydata from "../widgets/Anydata.svelte";
import Alarm from "../components/Alarm.svelte";
onMount(async () => {});
export let layoutJson;
$: layoutJson.length, timeOut();

10
src/widgets/Anydata.svelte
View File

@@ -44,13 +44,11 @@
<div class="crd-itm-psn">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
<p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
</div>
<div class="flex justify-end w-1/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-adt-stl {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="wgt-adt-stl {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
<p class="wgt-adt-stl truncate {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</p>
<p class="wgt-adt-stl truncate {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</p>
</div>
</div>

13
src/widgets/Chart.svelte
View File

@@ -1,11 +1,5 @@
<script>
import Chart from "svelte-frappe-charts";
import { onMount } from "svelte";
onMount(async () => {
console.log("[i]", "chart component mounted");
});
export let widget;
let datachart = {
@@ -25,7 +19,7 @@
let labels = [];
let values = [];
let axisOptions = { xAxisMode: "tick", xIsSeries: true };
let axisOptions = { xAxisMode: "tick", xIsSeries: true, xIsSeries: true };
let lineOptions;
if (widget.pointRadius == "0") {
lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
@@ -110,8 +104,7 @@
</script>
<div class="text-center">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="inline-block italic align-top text-center text-{widget.descrColor ? widget.descrColor : 'gray'}-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
<p class="inline-block italic truncate align-top text-center text-{widget.descrColor ? widget.descrColor : 'gray'}-500 txt-sz">{!widget.descr ? "" : widget.descr}</p>
</div>
<Chart data={datachart} type={type} lineOptions={lineOptions} axisOptions={axisOptions} height="150" padding="0px" />
<Chart id={"notes"} data={datachart} type={type} title={""} lineOptions={lineOptions} axisOptions={axisOptions} height="150" padding="0px" margin="0px" />

3
src/widgets/Input.svelte
View File

@@ -52,8 +52,7 @@
<div class="crd-itm-psn">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
<p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
</div>
<div class="flex justify-end w-1/3">
{#if widget.type == "number"}

3
src/widgets/Range.svelte
View File

@@ -29,8 +29,7 @@
<!--ползунок работает в режиме для микроконтроллера-->
<div class="text-center">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr} {valueForUser} {widget.after} </label>
<p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr} {valueForUser} {widget.after}</p>
</div>
<input
bind:value={widget.status}

3
src/widgets/Toggle.svelte
View File

@@ -25,8 +25,7 @@
<div class="crd-itm-psn">
<div class="w-2/3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="pr-4 text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</label>
<p class="pr-4 truncate text-{widget.descrColor ? widget.descrColor : 'gray'}-500 font-bold">{!widget.descr ? "" : widget.descr}</p>
</div>
<div class="flex justify-end w-1/3">
<label for={widget.topic} class="items-center cursor-pointer">