mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-03-26 23:12:34 +03:00
добавил полностью автоматическую таблицу элементов
This commit is contained in:
Dmitry Borisenko
@@ -4,7 +4,7 @@
|
|||||||
"svelteBracketNewLine": false,
|
"svelteBracketNewLine": false,
|
||||||
"svelteAllowShorthand": false,
|
"svelteAllowShorthand": false,
|
||||||
"svelteIndentScriptAndStyle": true,
|
"svelteIndentScriptAndStyle": true,
|
||||||
"printWidth": 600,
|
"printWidth": 1000,
|
||||||
"sxBracketSameLine": true,
|
"sxBracketSameLine": true,
|
||||||
"overrides": [
|
"overrides": [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
//router.mode.memory(); // enables in-memory navigation method
|
//router.mode.memory(); // enables in-memory navigation method
|
||||||
import Chart from "svelte-frappe-charts";
|
import Chart from "svelte-frappe-charts";
|
||||||
|
|
||||||
import Card from "./widgets/Card.svelte";
|
import Card from "./components/Card.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";
|
||||||
@@ -176,13 +176,13 @@
|
|||||||
{
|
{
|
||||||
name: "Устройство 1",
|
name: "Устройство 1",
|
||||||
id: "987654321",
|
id: "987654321",
|
||||||
ip: "192.168.88.233",
|
ip: "192.168.88.235",
|
||||||
status: false,
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Устройство 2",
|
name: "Устройство 2",
|
||||||
id: "987654321",
|
id: "987654321",
|
||||||
ip: "192.168.88.235",
|
ip: "192.168.88.233",
|
||||||
status: false,
|
status: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -623,33 +623,49 @@
|
|||||||
<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">Подтип</th>
|
<th class="table-head-element text-center">Тип</th>
|
||||||
<th class="table-head-element">Id</th>
|
<th class="table-head-element text-center">Id</th>
|
||||||
<th class="table-head-element">Виджет</th>
|
<th class="table-head-element text-center">Виджет</th>
|
||||||
<th class="table-head-element">Вкладка</th>
|
<th class="table-head-element text-center">Вкладка</th>
|
||||||
<th class="table-head-element">Название</th>
|
<th class="table-head-element text-center">Название</th>
|
||||||
<th class="table-head-element w-12" />
|
<th class="table-head-element text-center w-12" />
|
||||||
<th class="table-head-element w-12" />
|
<th class="table-head-element text-center w-12" />
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="bg-white">
|
<tbody class="bg-white">
|
||||||
{#each config as element}
|
{#each config as element}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="table-body-element">{element.subtype}</td>
|
<td class="table-body-element text-center">{element.subtype}</td>
|
||||||
<td class="table-body-element"><input bind:value={element.id} class="table-input" type="text" /></td>
|
<td class="table-body-element text-center"><input bind:value={element.id} class="table-input w-full" type="text" /></td>
|
||||||
<td class="table-body-element"
|
<td class="table-body-element text-center"
|
||||||
><select class="table-input" bind:value={selectedDeviceData}>
|
><select class="table-input 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"><input bind:value={element.page} class="table-input" type="text" /></td>
|
<td class="table-body-element text-center"><input bind:value={element.page} class="table-input w-full" type="text" /></td>
|
||||||
<td class="table-body-element"><input bind:value={element.descr} class="table-input" 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="table-body-element"><button on:click={() => showAdditionalParams(element.id)} class="table-button bg-green-100 hover:bg-green-400" /></td>
|
<td class="table-body-element text-center"><button on:click={() => showAdditionalParams(element.id)} class="table-button bg-green-100 hover:bg-green-400" /></td>
|
||||||
<td class="table-body-element"><button class="table-button bg-red-100 hover:bg-red-400" /></td>
|
<td class="table-body-element text-center"><button class="table-button bg-red-100 hover:bg-red-400" /></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<!-- {#each Object.values(element) as d}-->
|
||||||
|
{#each Object.entries(element) as [key, param]}
|
||||||
|
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
|
||||||
|
<tr>
|
||||||
|
<td />
|
||||||
|
<td />
|
||||||
|
<td />
|
||||||
|
<td class="table-body-element text-right">
|
||||||
|
<p class="table-sub-text">{key}</p>
|
||||||
|
</td>
|
||||||
|
<td class="table-body-element text-center">
|
||||||
|
<input bind:value={element[key]} class="table-sub-input w-full" type="text" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -681,27 +697,27 @@
|
|||||||
<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">Название устройства</th>
|
<th class="table-head-element text-center">Название устройства</th>
|
||||||
<th class="table-head-element">IP адрес</th>
|
<th class="table-head-element text-center">IP адрес</th>
|
||||||
<th class="table-head-element">Идентификатор</th>
|
<th class="table-head-element text-center">Идентификатор</th>
|
||||||
<th class="table-head-element">Состояние</th>
|
<th class="table-head-element text-center">Состояние</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">{device.name}</td>
|
<td class="table-body-element text-center">{device.name}</td>
|
||||||
<td class="table-body-element"><a href={"http://" + device.ip}>{device.ip}</a></td>
|
<td class="table-body-element text-center"><a href={"http://" + device.ip}>{device.ip}</a></td>
|
||||||
<td class="table-body-element">{device.id}</td>
|
<td class="table-body-element text-center">{device.id}</td>
|
||||||
<td class="table-body-element {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
|
<td class="table-body-element text-center {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"><input bind:value={newDevice.name} class="table-input" type="text" /></td>
|
<td class="table-body-element text-center"><input bind:value={newDevice.name} class="table-input w-full" type="text" /></td>
|
||||||
<td class="table-body-element"><input bind:value={newDevice.ip} class="table-input" 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="table-body-element"><input bind:value={newDevice.id} class="table-input" 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="table-body-element" />
|
<td class="table-body-element text-center" />
|
||||||
</tr>
|
</tr>
|
||||||
{/if}
|
{/if}
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -771,13 +787,19 @@
|
|||||||
}
|
}
|
||||||
/*====================================================table=====================================================*/
|
/*====================================================table=====================================================*/
|
||||||
.table-head-element {
|
.table-head-element {
|
||||||
@apply px-2 py-2 text-center break-words text-gray-500 font-bold;
|
@apply px-2 py-2 break-words text-gray-500 font-bold;
|
||||||
}
|
}
|
||||||
.table-body-element {
|
.table-body-element {
|
||||||
@apply px-2 py-2 text-center break-words;
|
@apply px-2 py-2 break-words;
|
||||||
}
|
}
|
||||||
.table-input {
|
.table-input {
|
||||||
@apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 w-full 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 {
|
||||||
|
@apply text-sm inline-block italic align-top text-right text-gray-500;
|
||||||
|
}
|
||||||
|
.table-sub-input {
|
||||||
|
@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;
|
||||||
}
|
}
|
||||||
/*====================================================buttons=====================================================*/
|
/*====================================================buttons=====================================================*/
|
||||||
.long-button {
|
.long-button {
|
||||||
|
|||||||
Reference in New Issue
Block a user