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

список устройств

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-02-07 16:36:43 +01:00
parent b426958f8a
commit ffd427c52a
11 changed files with 219 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/About.svelte
View File

@@ -10,5 +10,5 @@
<button on:click={() => showModal()} type="button"> Toggle modal </button>
<Card title="Редактор JSON">
<textarea on:input={wigetsUpdate} rows="10" class="jsn-ipt w-full" id="text1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
<textarea on:input={wigetsUpdate} rows="10" class="ipt-big w-full" id="text1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
</Card>

36
src/pages/Config.svelte
View File

@@ -1,5 +1,7 @@
<script>
import Card from "../components/Card.svelte";
import CrossIcon from "../svg/Cross.svelte";
import OpenIcon from "../svg/Open.svelte";
export let configJson;
export let widgetsJson;
@@ -40,9 +42,9 @@
</script>
<!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}-->
<div class="grd-1cols">
<div class="grd-1col1">
<Card>
<div class="grd-2colsfx">
<div class="grd-2col2">
<select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}>
{#each itemsJson as item}
{#if item.header}
@@ -59,7 +61,7 @@
</div>
<table class="tbl">
<thead class="bg-gray-100">
<tr class="tbl-txt-sz tbl-txt-p">
<tr class="txt-sz txt-pad">
<th class="tbl-hd">Тип</th>
<th class="tbl-hd">Id</th>
<th class="tbl-hd">Виджет</th>
@@ -71,34 +73,34 @@
</thead>
<tbody class="bg-white">
{#each configJson as element, i}
<tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy">{element.subtype}</td>
<td class="tbl-bdy"><input bind:value={element.id} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"
><select bind:value={element.widget} class="tbl-ipt w-full">
<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"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><svg on:click={() => (hideAllSubParams = !hideAllSubParams)} 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></td>
<td class="tbl-bdy"><svg on:click={() => deleteLineFromConfig(i)} 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"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></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 i={i} click={(i) => deleteLineFromConfig(i)} /></td>
</tr>
{#if !hideAllSubParams}
{#each Object.entries(element) as [key, param]}
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
<tr class="tbl-txt-sz tbl-txt-p">
<tr class="txt-sz txt-pad">
<td />
<td />
<td />
<td class="tbl-s-bdy text-right">
<p class="tbl-s-txt">{key}</p>
<td class="tbl-bdy-sm text-right">
<p class="txt-ita">{key}</p>
</td>
<td class="tbl-s-bdy text-center">
<input bind:value={element[key]} class="tbl-s-ipt w-full" type="text" />
<td class="tbl-bdy-sm text-center">
<input bind:value={element[key]} class="ipt-sm w-full" type="text" />
</td>
</tr>
{/if}

24
src/pages/Connection.svelte
View File

@@ -8,14 +8,14 @@
export let saveSettings = () => {};
</script>
<div class="grd-2cols">
<div class="grd-2col1">
<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" />
<input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -23,7 +23,7 @@
<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" />
<input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -31,7 +31,7 @@
<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" />
<input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -39,7 +39,7 @@
<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()}>
<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}
@@ -53,11 +53,11 @@
<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" />
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
{#if settingsJson.pass_status === 1}
<div class="grd-1cols">
<div class="grd-1col1">
<Alarm title="Введен неправильный пароль" />
</div>
{/if}
@@ -69,7 +69,7 @@
<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" />
<input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -77,7 +77,7 @@
<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" />
<input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -85,7 +85,7 @@
<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" />
<input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -93,7 +93,7 @@
<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" />
<input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div>
</div>
<div class="crd-itm-psn">
@@ -101,7 +101,7 @@
<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" />
<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>

2
src/pages/Dashboard.svelte
View File

@@ -10,7 +10,7 @@
export let wsPush = (ws, topic, status) => {};
</script>
<div class="grd-3cols">
<div class="grd-3col1">
{#if layoutJson === []}
<Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
{/if}

44
src/pages/List.svelte
View File

@@ -1,20 +1,34 @@
<script>
import Card from "../components/Card.svelte";
import CrossIcon from "../svg/Cross.svelte";
import OpenIcon from "../svg/Open.svelte";
export let deviceList;
export let showInput;
export let newDevice = {};
export let devListSave = () => {};
export let deleteLineFromDevlist = (num) => {};
let debug = true;
function deleteLineFromDevlist(num) {
for (let i = 0; i < deviceList.length; i++) {
if (num === i) {
deviceList.splice(i, 1);
deviceList = deviceList;
if (debug) console.log("[i]", "item " + num + " deleted from dev list");
break;
}
}
}
</script>
<div class="grd-1cols">
<div class="grd-1col1">
<Card title={"Список устройств"}>
<table class="tbl">
<thead class="bg-gray-100">
<tr class="tbl-txt-sz tbl-txt-p">
<tr class="txt-sz txt-pad">
<th class="tbl-hd">Название устройства</th>
<th class="tbl-hd">IP адрес</th>
<th class="tbl-hd">Идентификатор</th>
@@ -24,20 +38,20 @@
</thead>
<tbody class="bg-white">
{#each deviceList as device, i}
<tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy tbl-ipt w-full">{device.name}</td>
<td class="tbl-bdy tbl-ipt w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="tbl-bdy tbl-ipt w-full">{device.id}</td>
<td class="tbl-bdy tbl-ipt w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
<td class="tbl-bdy"><svg on:click={() => deleteLineFromDevlist(i)} 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"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></td>
<tr class="txt-sz txt-pad">
<td class="tbl-bdy-lg ipt-lg w-full">{device.name}</td>
<td class="tbl-bdy-lg ipt-lg w-full"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="tbl-bdy-lg ipt-lg w-full">{device.id}</td>
<td class="tbl-bdy-lg ipt-lg w-full {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
<td class="tbl-bdy-lg"><CrossIcon i={i} click={(i) => deleteLineFromDevlist(i)} /></td>
</tr>
{/each}
{#if showInput}
<tr class="tbl-txt-sz tbl-txt-p">
<td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
<td class="tbl-bdy" />
<tr class="txt-sz txt-pad">
<td class="tbl-bdy-lg"><input bind:value={newDevice.name} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg"><input bind:value={newDevice.ip} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg"><input bind:value={newDevice.id} class="ipt-lg w-full" type="text" /></td>
<td class="tbl-bdy-lg" />
</tr>
{/if}
</tbody>