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:
Dmitry Borisenko
2021-12-28 23:55:14 +01:00
parent fd5d18e20b
commit af1eaee5ab
5 changed files with 88 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/App.svelte
View File

@@ -626,7 +626,7 @@
<ul class="menu__main"> <ul class="menu__main">
<div class="bg-cover bg-gray-50 pt-8 px-4"> <div class="bg-cover bg-gray-50 pt-8 px-4">
<Route path="/"> <Route path="/">
<div class="cards-grid"> <div class="crd-grd">
{#each pages as pagesName, i} {#each pages as pagesName, i}
<Card title={pagesName.page}> <Card title={pagesName.page}>
{#each wigets as widget, i} {#each wigets as widget, i}
@@ -646,57 +646,57 @@
{/each} {/each}
<Card title="Редактор JSON"> <Card title="Редактор JSON">
<textarea on:input={wigetsUpdate} rows="10" class="json-input w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea> <textarea on:input={wigetsUpdate} rows="10" class="jsn-ipt w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
</Card> </Card>
</div> </div>
</Route> </Route>
<Route path="/config"> <Route path="/config">
<div class="cards-grid-inline"> <div class="crd-grd-ln">
<Card> <Card>
<!--<select class="long-select">{"Выберите элемент"}</select>--> <!--<select class="slct-lg">{"Выберите элемент"}</select>-->
<!--<select class="long-select">{"Выберите пресет"}</select>--> <!--<select class="slct-lg">{"Выберите пресет"}</select>-->
<table class="table-fixed w-full"> <table class="table-fixed w-full">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr class="tbl-txt-sz tbl-txt-p">
<th class="table-head-element text-center">Тип</th> <th class="tbl-hd">Тип</th>
<th class="table-head-element text-center">Id</th> <th class="tbl-hd">Id</th>
<th class="table-head-element text-center">Виджет</th> <th class="tbl-hd">Виджет</th>
<th class="table-head-element text-center">Вкладка</th> <th class="tbl-hd">Вкладка</th>
<th class="table-head-element text-center">Название</th> <th class="tbl-hd">Название</th>
<th class="table-head-element text-center w-12"><button class="table-button bg-green-100 hover:bg-green-400" /></th> <th class="tbl-hd w-12"><button class="btn-tbl bg-green-100 hover:bg-green-400" /></th>
<th class="table-head-element text-center w-12" /> <th class="tbl-hd w-12" />
</tr> </tr>
</thead> </thead>
<tbody class="bg-white"> <tbody class="bg-white">
{#each config as element} {#each config as element}
<tr> <tr class="tbl-txt-sz tbl-txt-p">
<td class="table-body-element text-center">{element.subtype}</td> <td class="tbl-bdy">{element.subtype}</td>
<td class="table-body-element text-center"><input bind:value={element.id} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={element.id} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center" <td class="tbl-bdy"
><select class="table-input w-full" bind:value={selectedDeviceData}> ><select class="tbl-ipt w-full" bind:value={selectedDeviceData}>
{#each deviceList as device} {#each deviceList as device}
<option value={device}> <option value={device}>
{device.name} {device.name}
</option> </option>
{/each} {/each}
</select></td> </select></td>
<td class="table-body-element text-center"><input bind:value={element.page} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center"><input bind:value={element.descr} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center"><button on:click={() => (hideAllSubParams = !hideAllSubParams)} class="table-button bg-green-100 hover:bg-green-400" /></td> <td class="tbl-bdy"><button on:click={() => (hideAllSubParams = !hideAllSubParams)} class="btn-tbl bg-green-100 hover:bg-green-400" /></td>
<td class="table-body-element text-center"><button class="table-button bg-red-100 hover:bg-red-400" /></td> <td class="tbl-bdy"><button class="btn-tbl bg-red-100 hover:bg-red-400" /></td>
</tr> </tr>
{#if !hideAllSubParams} {#if !hideAllSubParams}
{#each Object.entries(element) as [key, param]} {#each Object.entries(element) as [key, param]}
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"} {#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
<tr> <tr class="tbl-txt-sz tbl-txt-p">
<td /> <td />
<td /> <td />
<td /> <td />
<td class="table-sub-body-element text-right"> <td class="tbl-s-bdy text-right">
<p class="table-sub-text">{key}</p> <p class="tbl-s-txt">{key}</p>
</td> </td>
<td class="table-sub-body-element text-center"> <td class="tbl-s-bdy text-center">
<input bind:value={element[key]} class="table-sub-input w-full" type="text" /> <input bind:value={element[key]} class="tbl-s-ipt w-full" type="text" />
</td> </td>
</tr> </tr>
{/if} {/if}
@@ -706,12 +706,12 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
<button class="long-button" on:click={() => pushConfigToEsp()}>{"Сохранить"}</button> <button class="btn-lg" on:click={() => pushConfigToEsp()}>{"Сохранить"}</button>
</Card> </Card>
</div> </div>
</Route> </Route>
<Route path="/connection"> <Route path="/connection">
<div class="cards-grid"> <div class="crd-grd">
<Card title="Подключение к WiFi роутеру" /> <Card title="Подключение к WiFi роутеру" />
<Card title="Подключение к MQTT брокеру" /> <Card title="Подключение к MQTT брокеру" />
</div> </div>
@@ -733,32 +733,32 @@
<table class="table-fixed w-full"> <table class="table-fixed w-full">
<thead class="bg-gray-50 "> <thead class="bg-gray-50 ">
<tr> <tr>
<th class="table-head-element text-center">Название устройства</th> <th class="tbl-hd">Название устройства</th>
<th class="table-head-element text-center">IP адрес</th> <th class="tbl-hd">IP адрес</th>
<th class="table-head-element text-center">Идентификатор</th> <th class="tbl-hd">Идентификатор</th>
<th class="table-head-element text-center">Состояние</th> <th class="tbl-hd">Состояние</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white"> <tbody class="bg-white">
{#each deviceList as device} {#each deviceList as device}
<tr> <tr>
<td class="table-body-element text-center">{device.name}</td> <td class="tbl-bdy">{device.name}</td>
<td class="table-body-element text-center"><a href={"http://" + device.ip}>{device.ip}</a></td> <td class="tbl-bdy"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="table-body-element text-center">{device.id}</td> <td class="tbl-bdy">{device.id}</td>
<td class="table-body-element text-center {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td> <td class="tbl-bdy {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
</tr> </tr>
{/each} {/each}
{#if showInput} {#if showInput}
<tr> <tr>
<td class="table-body-element text-center"><input bind:value={newDevice.name} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={newDevice.name} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center"><input bind:value={newDevice.ip} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={newDevice.ip} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center"><input bind:value={newDevice.id} class="table-input w-full" type="text" /></td> <td class="tbl-bdy"><input bind:value={newDevice.id} class="tbl-ipt w-full" type="text" /></td>
<td class="table-body-element text-center" /> <td class="tbl-bdy" />
</tr> </tr>
{/if} {/if}
</tbody> </tbody>
</table> </table>
<button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button> <button class="btn-lg" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
</Card> </Card>
</Route> </Route>
<Route path="/about"> <Route path="/about">
@@ -776,85 +776,85 @@
@layer components { @layer components {
/*==================================================cards grid=====================================================*/ /*==================================================cards grid=====================================================*/
/* grid for cards */ /* grid for cards */
.cards-grid { .crd-grd {
@apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center; @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center;
} }
/* grid for cards for full screen */ /* grid for cards for full screen */
.cards-grid-inline { .crd-grd-ln {
@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 */ /* 1. paddig and style for card */
.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; @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 */ /* 2. style for card header */
.card-header { .crd-hdr {
@apply text-center text-lg text-gray-500 font-bold pb-4; @apply text-center text-lg text-gray-500 font-bold pb-4;
} }
/* 3. card items positioning*/ /* 3. card items positioning*/
.card-items-psn { .crd-itm-psn {
@apply flex mb-4 h-8 items-center; @apply flex mb-4 h-8 items-center;
} }
/* 4. widget description width*/ /* 4. widget description width*/
.widget-descr-width { .wgt-dscr-w {
@apply w-2/3; @apply w-2/3;
} }
/* 5. widget descr style*/ /* 5. widget descr style*/
.widget-descr-style { .wgt-dscr-stl {
@apply pr-4 text-gray-500 font-bold; @apply pr-4 text-gray-500 font-bold;
} }
/* 6. widget width*/ /* 6. widget width*/
.widget-width { .wgt-w {
@apply flex justify-end w-1/3; @apply flex justify-end w-1/3;
} }
/*====================================================others=====================================================*/ /*====================================================others=====================================================*/
.btn-indigo { .btn-i {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
} }
.widget-input { .wgt-ipt {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right; @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right;
} }
.json-input { .jsn-ipt {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500; @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
} }
.widget-anydata-style { .wgt-adt-stl {
@apply text-center text-gray-500 font-bold; @apply text-center text-gray-500 font-bold;
} }
/*====================================================table=====================================================*/ /*====================================================table=====================================================*/
.table-head-element { .tbl-hd {
@apply px-2 py-2 break-words text-gray-500 font-bold; @apply text-center px-2 py-2 break-words text-gray-500 font-bold;
} }
.table-body-element { .tbl-bdy {
@apply px-2 py-2 break-words; @apply text-center px-2 py-2 break-words;
} }
.table-sub-body-element { .tbl-s-bdy {
@apply px-2 py-1 break-words; @apply px-2 py-1 break-words;
} }
.table-input { .tbl-ipt {
@apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500; @apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500;
} }
.table-sub-text { .tbl-s-txt {
@apply text-sm inline-block italic align-top text-right text-gray-500; @apply text-sm inline-block italic align-top text-right text-gray-500;
} }
.table-sub-input { .tbl-s-ipt {
@apply content-center h-6 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500 rounded-sm; @apply content-center h-6 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500 rounded-sm;
} }
.table-text-padding { .tbl-txt-p {
@apply px-2 py-0 sm:py-0 md:py-0 lg:py-1 xl:py-2 2xl:py-2; @apply px-2 py-0 sm:py-0 md:py-0 lg:py-1 xl:py-2 2xl:py-2;
} }
.table-text-sizing { .tbl-txt-sz {
@apply text-xxs sm:text-xxs md:text-base lg:text-base xl:text-base 2xl:text-base; @apply text-xxs sm:text-xxs md:text-base lg:text-base xl:text-base 2xl:text-base;
} }
/*====================================================buttons=====================================================*/ /*====================================================buttons=====================================================*/
.long-button { .btn-lg {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded; @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded;
} }
.table-button { .btn-tbl {
@apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300; @apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300;
} }
/*====================================================select=====================================================*/ /*====================================================select=====================================================*/
.long-select { .slct-lg {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-1/4 mb-6 border border-gray-300 rounded; @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-1/4 mb-6 border border-gray-300 rounded;
} }
} }

4
src/components/Card.svelte
View File

@@ -2,9 +2,9 @@
export let title; export let title;
</script> </script>
<div class="card"> <div class="crd">
{#if title} {#if title}
<h1 class="card-header">{title}</h1> <h1 class="crd-hdr">{title}</h1>
{/if} {/if}
<slot /> <slot />
</div> </div>

12
src/widgets/Anydata.svelte
View File

@@ -4,15 +4,15 @@
value = value; value = value;
</script> </script>
<div class="card-items-psn"> <div class="crd-itm-psn">
<div class="widget-descr-width"> <div class="wgt-dscr-w">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width"> <div class="wgt-w">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-anydata-style">{!widget.status ? "" : widget.status}</label> <label class="wgt-adt-stl">{!widget.status ? "" : widget.status}</label>
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-anydata-style">&nbsp;{!widget.after ? "" : widget.after}</label> <label class="wgt-adt-stl">&nbsp;{!widget.after ? "" : widget.after}</label>
</div> </div>
</div> </div>

16
src/widgets/Input.svelte
View File

@@ -5,23 +5,23 @@
value = value; value = value;
</script> </script>
<div class="card-items-psn"> <div class="crd-itm-psn">
<div class="widget-descr-width"> <div class="wgt-dscr-w">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width"> <div class="wgt-w">
{#if widget.type == "number"} {#if widget.type == "number"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
{/if} {/if}
{#if widget.type == "text"} {#if widget.type == "text"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" /> <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
{/if} {/if}
{#if widget.type == "date"} {#if widget.type == "date"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" /> <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
{/if} {/if}
{#if widget.type == "time"} {#if widget.type == "time"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" /> <input class={widget["send"] == true ? "wgt-ipt border-red-500" : "wgt-ipt focus:border-indigo-500"} on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />
{/if} {/if}
</div> </div>
</div> </div>

8
src/widgets/Toggle.svelte
View File

@@ -5,12 +5,12 @@
export let wsPushProp = (ws, topic, status) => {}; export let wsPushProp = (ws, topic, status) => {};
</script> </script>
<div class="card-items-psn"> <div class="crd-itm-psn">
<div class="widget-descr-width"> <div class="wgt-dscr-w">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width"> <div class="wgt-w">
<label for={widget.topic} class="items-center cursor-pointer"> <label for={widget.topic} class="items-center cursor-pointer">
<div class="relative"> <div class="relative">
<input on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" /> <input on:change={() => ((widget["send"] = true), wsPushProp(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />