iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 15:02:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

ghjdthrf

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-02-06 18:19:38 +01:00
parent 00bf4f3ad2
commit a1a78f8b7b
4 changed files with 160 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.svelte
View File

@@ -16,6 +16,7 @@
//}); //});
import Card from "./components/Card.svelte"; import Card from "./components/Card.svelte";
import Alarm from "./components/Alarm.svelte";
import Modal from "./components/Modal.svelte"; import Modal from "./components/Modal.svelte";
import Input from "./widgets/Input.svelte"; import Input from "./widgets/Input.svelte";
import Toggle from "./widgets/Toggle.svelte"; import Toggle from "./widgets/Toggle.svelte";
@@ -97,8 +98,8 @@
{ {
name: "Устройство 1", name: "Устройство 1",
id: "987654321", id: "987654321",
ip: myip, //ip: myip,
//ip: "192.168.8.196", ip: "192.168.88.235",
status: false, status: false,
}, },
]; ];
@@ -234,7 +235,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)) {
@@ -963,7 +964,12 @@
<input bind:value={settingsJson.routerpass} class="wgt-ipt text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.routerpass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
</div> </div>
</div> </div>
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button> {#if settingsJson.pass_status === 1}
<div class="grd-1cols">
<Alarm title="Введен неправильный пароль" />
</div>
{/if}
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button>
</Card> </Card>
<Card title="Подключение к MQTT брокеру"> <Card title="Подключение к MQTT брокеру">
<div class="crd-itm-psn"> <div class="crd-itm-psn">
@@ -1006,7 +1012,7 @@
<input bind:value={settingsJson.mqttPass} class="wgt-ipt text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.mqttPass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
</div> </div>
</div> </div>
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button> <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
</Card> </Card>
</div> </div>
</Route> </Route>
@@ -1085,14 +1091,6 @@
@apply grid grid-cols-1 justify-items-center; @apply grid grid-cols-1 justify-items-center;
} }
/*=============================================card and items inside===============================================*/ /*=============================================card and items inside===============================================*/
/* 1. paddig and style for card */
.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;
}
/* 2. style for card header */
.crd-hdr {
@apply text-center text-lg text-gray-500 font-bold pb-4;
}
/* 3. card items positioning*/ /* 3. card items positioning*/
.crd-itm-psn { .crd-itm-psn {
@apply flex mb-3 h-8 items-center; @apply flex mb-3 h-8 items-center;

109
src/Connection.svelte Normal file
View File

@@ -0,0 +1,109 @@
<script>
import Card from "./components/Card.svelte";
import Alarm from "./components/Alarm.svelte";
export let settingsJson;
export let ssidJson;
export let ssidDropdownClick = () => {};
export let saveSettings = () => {};
</script>
<div class="grd-2cols">
<Card title="Подключение к WiFi роутеру">
<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.name} class="wgt-ipt 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.apssid} class="wgt-ipt 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.appass} class="wgt-ipt 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">Название wifi сети</p>
</div>
<div class="wgt-w">
<select class="wgt-ipt 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 class="crd-itm-psn">
<div class="wgt-dscr-w">
<p class="wgt-dscr-stl">Пароль</p>
</div>
<div class="wgt-w">
<input bind:value={settingsJson.routerpass} class="wgt-ipt text-left focus:border-indigo-500" type="text" />
</div>
</div>
{#if settingsJson.pass_status === 1}
<div class="grd-1cols">
<Alarm title="Введен неправильный пароль" />
</div>
{/if}
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button>
</Card>
<Card title="Подключение к MQTT брокеру">
<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="wgt-ipt 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="wgt-ipt 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="wgt-ipt 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="wgt-ipt 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="wgt-ipt text-left focus:border-indigo-500" type="text" />
</div>
</div>
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
</Card>
</div>

25
src/components/Alarm.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script>
export let title;
</script>
<div class="alm">
{#if title}
<h1 class="alm-hdr">{title}</h1>
{/if}
<slot />
</div>
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.alm-hdr {
@apply text-center text-base text-gray-500 font-bold pb-0;
}
.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;
}
}
</style>

15
src/components/Card.svelte
View File

@@ -8,3 +8,18 @@
{/if} {/if}
<slot /> <slot />
</div> </div>
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.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;
}
.crd-hdr {
@apply text-center text-lg text-gray-500 font-bold pb-4;
}
}
</style>