mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-03-26 23:12:34 +03:00
add auto man mode
This commit is contained in:
Dmitry Borisenko
@@ -35,38 +35,39 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-1col1 animate-pulse">
|
||||
{#if empty}
|
||||
<Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<div class="grd-3col1">
|
||||
{#each pages as pagesName, p}
|
||||
<Card title={pagesName.page}>
|
||||
{#each layoutJson as widget, l}
|
||||
{#if widget.page === pagesName.page}
|
||||
{#if widget.widget === "input"}
|
||||
<Input bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
<div class="grd-1col1 animate-pulse">
|
||||
{#if empty}
|
||||
<Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grd-3col1">
|
||||
{#each pages as pagesName, p}
|
||||
<Card title={pagesName.page}>
|
||||
{#each layoutJson as widget, l}
|
||||
{#if widget.page === pagesName.page}
|
||||
{#if widget.widget === "input"}
|
||||
<Input bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
{/if}
|
||||
{#if widget.widget === "toggle"}
|
||||
<Toggle bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
{/if}
|
||||
{#if widget.widget === "anydata"}
|
||||
<Anydata bind:value={widget.status} widget={widget} />
|
||||
{/if}
|
||||
{#if widget.widget === "range"}
|
||||
<Range bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
{/if}
|
||||
{#if widget.widget === "chart"}
|
||||
<Chart bind:value={widget.status} widget={widget} />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if widget.widget === "toggle"}
|
||||
<Toggle bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
{/if}
|
||||
{#if widget.widget === "anydata"}
|
||||
<Anydata bind:value={widget.status} widget={widget} />
|
||||
{/if}
|
||||
{#if widget.widget === "range"}
|
||||
<Range bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
|
||||
{/if}
|
||||
{#if widget.widget === "chart"}
|
||||
<Chart bind:value={widget.status} widget={widget} />
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</Card>
|
||||
{/each}
|
||||
{/each}
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Alarm title="Загрузка..." />
|
||||
{/if}
|
||||
|
||||
@@ -26,25 +26,27 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-3col1">
|
||||
<Card title="layoutJson">
|
||||
<textarea on:input={layoutJson} rows="23" class="w-full" id="1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="paramsJson">
|
||||
<textarea on:input={paramsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(paramsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="errorsJson">
|
||||
<textarea on:input={errorsJson} rows="23" class="w-full" id="2">{syntaxHighlight(JSON.stringify(errorsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="settingsJson">
|
||||
<textarea on:input={settingsJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(settingsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="configJson">
|
||||
<textarea on:input={configJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(configJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="itemsJson">
|
||||
<textarea on:input={itemsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
|
||||
</Card>
|
||||
<div class="my-4">
|
||||
<div class="grd-3col1">
|
||||
<Card title="layoutJson">
|
||||
<textarea on:input={layoutJson} rows="23" class="w-full" id="1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="paramsJson">
|
||||
<textarea on:input={paramsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(paramsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="errorsJson">
|
||||
<textarea on:input={errorsJson} rows="23" class="w-full" id="2">{syntaxHighlight(JSON.stringify(errorsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="settingsJson">
|
||||
<textarea on:input={settingsJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(settingsJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="configJson">
|
||||
<textarea on:input={configJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(configJson))}</textarea>
|
||||
</Card>
|
||||
<Card title="itemsJson">
|
||||
<textarea on:input={itemsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Alarm title="Загрузка..." />
|
||||
|
||||
@@ -10,8 +10,10 @@
|
||||
export let deviceList;
|
||||
export let showInput;
|
||||
export let newDevice = {};
|
||||
export let settingsJson;
|
||||
|
||||
export let addDevInList = () => {};
|
||||
export let saveList = () => {};
|
||||
|
||||
export let sendToAllDevices = (msg) => {};
|
||||
|
||||
@@ -32,7 +34,7 @@
|
||||
{#if show}
|
||||
<div class="my-4">
|
||||
<div class="grd-1col1">
|
||||
<Card title={"Список устройств"}>
|
||||
<Card title={settingsJson.udps ? "Список устройств (авто режим)" : "Список устройств (ручной режим)"}>
|
||||
<table class="tbl">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="txt-sz txt-pad">
|
||||
@@ -52,7 +54,9 @@
|
||||
<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 ipt-lg w-full">{device.ping ? device.ping : "-"}</td>
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
|
||||
{#if i > 0}
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
{#if showInput}
|
||||
@@ -65,14 +69,17 @@
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="grd-2col1">
|
||||
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
|
||||
<div class="grd-3col1">
|
||||
{#if !settingsJson.udps}
|
||||
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Добавить" : "Добавить устройство"}</button>
|
||||
{/if}
|
||||
<button class="btn-lg" on:click={() => saveList()}>{"Сохранить список"}</button>
|
||||
<button class="btn-lg" on:click={(msg) => sendToAllDevices("/reboot|")}>{"Перезагрузить все устройства"}</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Alarm>
|
||||
<p>Прошитые прошивкой IoT Manager устройства появятся в списке автоматически в течении минуты. Для обновления названий устройств нужно обновить страницу. Устройства должны быть подключены к одному wifi роутеру.</p>
|
||||
<p>Авто режим - список создается автоматически, можно нажать кнопку "сохранить список" что бы использовать его потом в ручном режиме. Ручной режим - используется сохраненный список, возможно ручное добавление удаление устройств. Для переключения режима перейдите на страницу "системные"</p>
|
||||
</Alarm>
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
@@ -334,7 +334,7 @@
|
||||
<div class="relative">
|
||||
<input bind:checked={settingsJson.log} on:change={() => (paramsBeenChanged = true)} id="log" type="checkbox" class="sr-only" />
|
||||
<div class="block {settingsJson.log ? '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 class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
@@ -350,7 +350,7 @@
|
||||
<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 class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
@@ -367,11 +367,12 @@
|
||||
<div class="relative">
|
||||
<input bind:checked={settingsJson.i2c} on:change={() => (reboot = true)} id="i2c" type="checkbox" class="sr-only" />
|
||||
<div class="block {settingsJson.i2c ? '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 class="dot bg-gray-100 absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if settingsJson.i2c === true}
|
||||
<div class="flex mb-2 h-6 items-center">
|
||||
<div class="w-2/3">
|
||||
@@ -399,6 +400,22 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!--Dev list mode-->
|
||||
<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">Автоматический поиск устройств по UDP</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<label for="udps" class="items-center cursor-pointer">
|
||||
<div class="relative">
|
||||
<input bind:checked={settingsJson.udps} on:change={() => (reboot = true)} id="udps" type="checkbox" class="sr-only" />
|
||||
<div class="block {settingsJson.udps ? '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>
|
||||
|
||||
<!--control-->
|
||||
<!--<div class="grd-2col1">-->
|
||||
{#if paramsBeenChanged}
|
||||
|
||||
Reference in New Issue
Block a user