mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-03-26 15:02:21 +03:00
margins
This commit is contained in:
Dmitry Borisenko
@@ -196,90 +196,92 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-2col1">
|
||||
<Card title="Конфигуратор">
|
||||
<div class="grd-2col2">
|
||||
<select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}>
|
||||
{#each itemsJson as item}
|
||||
{#if item.header}
|
||||
<optgroup label={item.header} />
|
||||
{/if}
|
||||
{#if !item.header}
|
||||
<option value={item.num}>
|
||||
{item.name}
|
||||
</option>
|
||||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
<select class="slct-lg"><option>{"Выберите пресет"}</option></select>
|
||||
</div>
|
||||
<table class="tbl">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="txt-sz txt-pad">
|
||||
<th class="tbl-hd">Тип</th>
|
||||
<th class="tbl-hd">Id</th>
|
||||
<th class="tbl-hd">Виджет</th>
|
||||
<th class="tbl-hd">Вкладка</th>
|
||||
<th class="tbl-hd">Название</th>
|
||||
<th class="tbl-hd w-7" />
|
||||
<th class="tbl-hd w-7" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white">
|
||||
{#each configJson as element, i}
|
||||
<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-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={() => (element.show = !element.show)} /></td>
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromConfig(i)} /></td>
|
||||
<div class="my-4">
|
||||
<div class="grd-2col1">
|
||||
<Card title="Конфигуратор">
|
||||
<div class="grd-2col2">
|
||||
<select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}>
|
||||
{#each itemsJson as item}
|
||||
{#if item.header}
|
||||
<optgroup label={item.header} />
|
||||
{/if}
|
||||
{#if !item.header}
|
||||
<option value={item.num}>
|
||||
{item.name}
|
||||
</option>
|
||||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
<select class="slct-lg"><option>{"Выберите пресет"}</option></select>
|
||||
</div>
|
||||
<table class="tbl">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="txt-sz txt-pad">
|
||||
<th class="tbl-hd">Тип</th>
|
||||
<th class="tbl-hd">Id</th>
|
||||
<th class="tbl-hd">Виджет</th>
|
||||
<th class="tbl-hd">Вкладка</th>
|
||||
<th class="tbl-hd">Название</th>
|
||||
<th class="tbl-hd w-7" />
|
||||
<th class="tbl-hd w-7" />
|
||||
</tr>
|
||||
{#if element.show}
|
||||
{#each Object.entries(element) as [key, param]}
|
||||
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr" && key != "show"}
|
||||
<tr class="txt-sz txt-pad">
|
||||
<td />
|
||||
<td />
|
||||
<td />
|
||||
{#if key.startsWith("btn")}
|
||||
<td class="tbl-bdy-sm text-right">
|
||||
<button on:click={() => moduleOrder(element.id, key.substring(4), element[key])} class="h-3 sm:h-6 md:h-6 lg:h-6 xl:h-6 2xl:h-6 w-auto bg-blue-100 inline-flex items-center border border-gray-300 hover:bg-blue-200">{key.substring(4)}</button>
|
||||
</td>
|
||||
{#if element[key] != "nil"}
|
||||
</thead>
|
||||
<tbody class="bg-white">
|
||||
{#each configJson as element, i}
|
||||
<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-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={() => (element.show = !element.show)} /></td>
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromConfig(i)} /></td>
|
||||
</tr>
|
||||
{#if element.show}
|
||||
{#each Object.entries(element) as [key, param]}
|
||||
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr" && key != "show"}
|
||||
<tr class="txt-sz txt-pad">
|
||||
<td />
|
||||
<td />
|
||||
<td />
|
||||
{#if key.startsWith("btn")}
|
||||
<td class="tbl-bdy-sm text-right">
|
||||
<button on:click={() => moduleOrder(element.id, key.substring(4), element[key])} class="h-3 sm:h-6 md:h-6 lg:h-6 xl:h-6 2xl:h-6 w-auto bg-blue-100 inline-flex items-center border border-gray-300 hover:bg-blue-200">{key.substring(4)}</button>
|
||||
</td>
|
||||
{#if element[key] != "nil"}
|
||||
<td class="tbl-bdy-sm text-center">
|
||||
<input bind:value={element[key]} class="ipt-sm w-full" type="text" />
|
||||
</td>
|
||||
{/if}
|
||||
{:else}
|
||||
<td class="tbl-bdy-sm text-right">
|
||||
<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" />
|
||||
</td>
|
||||
{/if}
|
||||
{:else}
|
||||
<td class="tbl-bdy-sm text-right">
|
||||
<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" />
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
<!--<br />-->
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
<!--<br />-->
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
|
||||
<Card title="Сценарии">
|
||||
<textarea bind:value={scenarioTxt} rows={height} class="px-2 bg-gray-50 border-2 border-gray-200 rounded text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500 w-full" />
|
||||
</Card>
|
||||
<Card title="Сценарии">
|
||||
<textarea bind:value={scenarioTxt} rows={height} class="px-2 bg-gray-50 border-2 border-gray-200 rounded text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500 w-full" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grd-1col1">
|
||||
<Card>
|
||||
|
||||
@@ -15,130 +15,132 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-2col1">
|
||||
<Card title="Подключение к WiFi">
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Название устройства</p>
|
||||
<div class="my-4">
|
||||
<div class="grd-2col1">
|
||||
<Card title="Подключение к WiFi">
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</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="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Точка доступа</p>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</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="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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()}>
|
||||
{#each Object.entries(ssidJson) as [num, ssid]}
|
||||
<option value={ssid}>
|
||||
{ssid}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Пароль точки доступа</p>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</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="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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()}>
|
||||
{#each Object.entries(ssidJson) as [num, ssid]}
|
||||
<option value={ssid}>
|
||||
{ssid}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
{#if errorsJson.passer === 1}
|
||||
<div class="grd-1col1">
|
||||
<Alarm title="Введен неправильный пароль" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if errorsJson.passer === 1}
|
||||
<div class="grd-1col1">
|
||||
<Alarm title="Введен неправильный пароль" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn-lg" on:click={() => saveSett()}>{"Сохранить"}</button>
|
||||
</Card>
|
||||
<button class="btn-lg" on:click={() => saveSett()}>{"Сохранить"}</button>
|
||||
</Card>
|
||||
|
||||
<Card title="Подключение к MQTT">
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Состояние подключения</p>
|
||||
<Card title="Подключение к MQTT">
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl 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">
|
||||
{#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>
|
||||
{: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}
|
||||
<p class="text-blue-500 font-bold h-8 bg-blue-50 border-2 border-gray-200 rounded w-full text-center">Ожидание</p>
|
||||
{:else}
|
||||
<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="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"}
|
||||
<p class="text-green-500 font-bold 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}
|
||||
<p class="text-blue-500 font-bold h-8 bg-blue-50 border-2 border-gray-200 rounded w-full text-center">Ожидание</p>
|
||||
{:else}
|
||||
<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 class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Название сервера</p>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</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="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<p class="wgt-dscr-stl truncate">Порт</p>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</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="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="crd-itm-psn">
|
||||
<div class="w-4/6">
|
||||
<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>
|
||||
</div>
|
||||
<button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>
|
||||
</Card>
|
||||
<button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grd-1col1">
|
||||
<Card>
|
||||
|
||||
@@ -30,45 +30,47 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-1col1">
|
||||
<Card title={"Список устройств"}>
|
||||
<table class="tbl">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="txt-sz txt-pad">
|
||||
<th class="tbl-hd">Название устройства</th>
|
||||
<th class="tbl-hd">IP адрес</th>
|
||||
<th class="tbl-hd">Идентификатор</th>
|
||||
<th class="tbl-hd">Состояние</th>
|
||||
<th class="tbl-hd">Пинг</th>
|
||||
<th class="tbl-hd w-7" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white">
|
||||
{#each deviceList as device, i}
|
||||
<div class="my-4">
|
||||
<div class="grd-1col1">
|
||||
<Card title={"Список устройств"}>
|
||||
<table class="tbl">
|
||||
<thead class="bg-gray-100">
|
||||
<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 ipt-lg w-full">{device.ping ? device.ping : "-"}</td>
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
|
||||
<th class="tbl-hd">Название устройства</th>
|
||||
<th class="tbl-hd">IP адрес</th>
|
||||
<th class="tbl-hd">Идентификатор</th>
|
||||
<th class="tbl-hd">Состояние</th>
|
||||
<th class="tbl-hd">Пинг</th>
|
||||
<th class="tbl-hd w-7" />
|
||||
</tr>
|
||||
{/each}
|
||||
{#if showInput}
|
||||
<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>
|
||||
</table>
|
||||
<div class="grd-2col1">
|
||||
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
|
||||
<button class="btn-lg" on:click={(msg) => sendToAllDevices("/reboot|")}>{"Перезагрузить все устройства"}</button>
|
||||
</div>
|
||||
</Card>
|
||||
</thead>
|
||||
<tbody class="bg-white">
|
||||
{#each deviceList as device, i}
|
||||
<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 ipt-lg w-full">{device.ping ? device.ping : "-"}</td>
|
||||
<td class="tbl-bdy-lg"><CrossIcon click={() => deleteLineFromDevlist(i)} /></td>
|
||||
</tr>
|
||||
{/each}
|
||||
{#if showInput}
|
||||
<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>
|
||||
</table>
|
||||
<div class="grd-2col1">
|
||||
<button class="btn-lg" on:click={() => ((showInput = !showInput), addDevInList())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
|
||||
<button class="btn-lg" on:click={(msg) => sendToAllDevices("/reboot|")}>{"Перезагрузить все устройства"}</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Alarm>
|
||||
<p>Прошитые прошивкой IoT Manager устройства появятся в списке автоматически в течении минуты. Для обновления названий устройств нужно обновить страницу. Устройства должны быть подключены к одному wifi роутеру.</p>
|
||||
</Alarm>
|
||||
|
||||
@@ -151,273 +151,275 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="grd-3col1">
|
||||
<!--INFORMATION-->
|
||||
<Card title="Системная информация">
|
||||
<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 class="my-4">
|
||||
<div class="grd-3col1">
|
||||
<!--INFORMATION-->
|
||||
<Card title="Системная информация">
|
||||
<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">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.bn}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.bn}</p>
|
||||
<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">
|
||||
<select class="border border-indigo-500 border-4 text-center" bind:value={choosingVersion}>
|
||||
{#if versionsList}
|
||||
{#each Object.entries(versionsList) as [key, param]}
|
||||
<option value={param}>
|
||||
{param}
|
||||
</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.bver}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<select class="border border-indigo-500 border-4 text-center" bind:value={choosingVersion}>
|
||||
{#if versionsList}
|
||||
{#each Object.entries(versionsList) as [key, param]}
|
||||
<option value={param}>
|
||||
{param}
|
||||
</option>
|
||||
{/each}
|
||||
|
||||
<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">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.wver}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.timenow}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Uptime устройства</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.upt}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Uptime сессии mqtt</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.uptm}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Uptime сессии wifi</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.uptw}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Качество WiFi сигнала</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-xs sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
|
||||
{#if errorsJson.rssi === 0}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">не подключено</p>
|
||||
{/if}
|
||||
</select>
|
||||
{#if errorsJson.rssi === 1}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">нет сигнала</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 2}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">очень низкий</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 3}
|
||||
<p class="text-yellow-500 font-bold text-sm text-center truncate">низкий</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 4}
|
||||
<p class="text-yellow-500 font-bold text-sm text-center truncate">хороший</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 5}
|
||||
<p class="text-green-500 font-bold text-sm text-center truncate">очень хороший</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 6}
|
||||
<p class="text-green-500 font-bold text-sm text-center truncate">отличный</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<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">Остаток RAM</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm text-center">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.heap}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Остаток flash</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm text-center">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.freeBytes}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Кол-во записей на flash</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.fl}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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 text-sm">
|
||||
<p class="{errorsJson.rst.toString().includes('Watchdog') || errorsJson.rst.toString().includes('Exception') ? 'text-red-500' : 'text-green-500'} font-bold text-center truncate">{errorsJson.rst}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-lg" on:click={() => startUpdate()}>{"Обновить прошивку"}</button>
|
||||
</Card>
|
||||
<!--SETTINGS-->
|
||||
<Card title="Системные настройки">
|
||||
<!--ZONE-->
|
||||
<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">
|
||||
<input bind:value={settingsJson.timezone} on:change={() => (paramsBeenChanged = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<!--CLEAN-->
|
||||
<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">
|
||||
<button class="btn-lg h-7" on:click={() => cleanLogs()}>{"Очистить"}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!--WORKING GROUP-->
|
||||
<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">
|
||||
<input bind:value={settingsJson.wg} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.bver}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!--LOG-->
|
||||
<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="log" class="items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.wver}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!--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>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.timenow}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Uptime устройства</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.upt}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Uptime сессии mqtt</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.uptm}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Uptime сессии wifi</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<p class="text-gray-500 font-bold text-sm text-center truncate">{errorsJson.uptw}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Качество WiFi сигнала</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-xs sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
|
||||
{#if errorsJson.rssi === 0}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">не подключено</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 1}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">нет сигнала</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 2}
|
||||
<p class="text-red-500 font-bold text-sm text-center truncate">очень низкий</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 3}
|
||||
<p class="text-yellow-500 font-bold text-sm text-center truncate">низкий</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 4}
|
||||
<p class="text-yellow-500 font-bold text-sm text-center truncate">хороший</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 5}
|
||||
<p class="text-green-500 font-bold text-sm text-center truncate">очень хороший</p>
|
||||
{/if}
|
||||
{#if errorsJson.rssi === 6}
|
||||
<p class="text-green-500 font-bold text-sm text-center truncate">отличный</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<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">Остаток RAM</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm text-center">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.heap}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Остаток flash</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm text-center">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.freeBytes}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Кол-во записей на flash</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3 text-sm">
|
||||
<p class="text-green-500 font-bold text-center truncate">{errorsJson.fl}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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 text-sm">
|
||||
<p class="{errorsJson.rst.toString().includes('Watchdog') || errorsJson.rst.toString().includes('Exception') ? 'text-red-500' : 'text-green-500'} font-bold text-center truncate">{errorsJson.rst}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-lg" on:click={() => startUpdate()}>{"Обновить прошивку"}</button>
|
||||
</Card>
|
||||
<!--SETTINGS-->
|
||||
<Card title="Системные настройки">
|
||||
<!--ZONE-->
|
||||
<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">
|
||||
<input bind:value={settingsJson.timezone} on:change={() => (paramsBeenChanged = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<!--CLEAN-->
|
||||
<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">
|
||||
<button class="btn-lg h-7" on:click={() => cleanLogs()}>{"Очистить"}</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--i2c-->
|
||||
<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">Перенаправление i2c</p>
|
||||
</div>
|
||||
|
||||
<!--WORKING GROUP-->
|
||||
<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 class="flex justify-center w-1/3">
|
||||
<label for="i2c" class="items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.wg} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" />
|
||||
</div>
|
||||
</div>
|
||||
{#if settingsJson.i2c === true}
|
||||
<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">i2c SCL gpio</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.pinSCL} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<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">i2c SDA gpio</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.pinSDA} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<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">i2c частота</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!--control-->
|
||||
<!--<div class="grd-2col1">-->
|
||||
{#if paramsBeenChanged}
|
||||
<button class="btn-lg animate-pulse" on:click={() => (saveSett(), (paramsBeenChanged = false))}>{"Сохранить"}</button>
|
||||
{/if}
|
||||
{#if reboot}
|
||||
<button class="btn-lg animate-pulse" on:click={() => (saveSett(), rebootEsp(), (reboot = false))}>{"Сохранить и перезагрузить"}</button>
|
||||
{/if}
|
||||
<!--<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить"}</button>-->
|
||||
<!--</div>-->
|
||||
</Card>
|
||||
|
||||
<!--LOG-->
|
||||
<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>
|
||||
<Card title="Лог" class="z-50">
|
||||
<div class="h-80 overflow-y-auto">
|
||||
{#each coreMessages as message, i}
|
||||
<div class={message.msg.toString().includes("[E]") || message.msg.toString().includes("[!]") ? "text-xs text-red-500" : "text-xs text-black"}>{message.msg}</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<label for="log" class="items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</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-->
|
||||
<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">Перенаправление i2c</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center w-1/3">
|
||||
<label for="i2c" class="items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{#if settingsJson.i2c === true}
|
||||
<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">i2c SCL gpio</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.pinSCL} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<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">i2c SDA gpio</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.pinSDA} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<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">i2c частота</p>
|
||||
</div>
|
||||
<div class="flex justify-center w-1/3">
|
||||
<input bind:value={settingsJson.i2cFreq} on:change={() => (reboot = true)} class="ipt-rnd h-7 text-center focus:border-indigo-500" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!--control-->
|
||||
<!--<div class="grd-2col1">-->
|
||||
{#if paramsBeenChanged}
|
||||
<button class="btn-lg animate-pulse" on:click={() => (saveSett(), (paramsBeenChanged = false))}>{"Сохранить"}</button>
|
||||
{/if}
|
||||
{#if reboot}
|
||||
<button class="btn-lg animate-pulse" on:click={() => (saveSett(), rebootEsp(), (reboot = false))}>{"Сохранить и перезагрузить"}</button>
|
||||
{/if}
|
||||
<!--<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить"}</button>-->
|
||||
<!--</div>-->
|
||||
</Card>
|
||||
|
||||
<!--LOG-->
|
||||
<Card title="Лог" class="z-50">
|
||||
<div class="h-80 overflow-y-auto">
|
||||
{#each coreMessages as message, i}
|
||||
<div class={message.msg.toString().includes("[E]") || message.msg.toString().includes("[!]") ? "text-xs text-red-500" : "text-xs text-black"}>{message.msg}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<!--ERRORS-->
|
||||
<div class="grd-1col1">
|
||||
|
||||
Reference in New Issue
Block a user