ui: add buttons to Zone table

This commit is contained in:
Anton Shubin 2024-01-30 21:49:34 +08:00
parent a9cc044eb3
commit 8327bfdf0e
5 changed files with 42 additions and 0 deletions

View File

@ -0,0 +1,26 @@
<script lang="ts">
export let initialValue: boolean = false;
let enabled: boolean = initialValue;
const toggleSwitch = (): void => {
enabled = !enabled;
};
</script>
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
class:bg-indigo-600={enabled}
class:bg-gray-200={!enabled}
role="switch"
aria-checked={enabled}
on:click={toggleSwitch}
>
<span
aria-hidden="true"
class="pointer-events-none inline-block rounded-full h-5 w-5 transform bg-white shadow ring-0 transition duration-200 ease-in-out"
class:translate-x-5={enabled}
class:translate-x-0={!enabled}
></span>
</button>

View File

@ -1,6 +1,7 @@
<script lang="ts">
import Map from '$lib/client/components/map.svelte';
import Table from '$lib/client/components/table.svelte';
import ToggleSwitch from '$lib/client/components/toggle.svelte';
import {
IconArrowUturnLeft,
IconArrowUturnRight,
@ -8,6 +9,8 @@
IconCursorArrowRays,
IconXMark
} from '../../lib/client/components/icons';
let initialValueForSwitch: boolean = true;
</script>
<section class="space-y-4 lg:space-y-8">
@ -56,6 +59,9 @@
<th class="text-right" scope="col">Gateways</th>
<th class="text-right" scope="col">Lamps</th>
<th class="text-right" scope="col">Sensors</th>
<th class="text-center" scope="col">Schedule</th>
<th class="text-right" scope="col">On/Off</th>
<th class="text-right" scope="col">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
@ -67,6 +73,16 @@
<td class="text-right">12</td>
<td class="text-right"> 20 </td>
<td class="text-right">40</td>
<td class="text-center"> <a href="/" class="text-purple-800">View</a></td>
<td class="text-right">
<ToggleSwitch {initialValueForSwitch} />
</td>
<td class="text-right">
<div class="flex gap-4 items-center justify-end">
<a href="/" class="text-purple-800">Edit</a>
<a href="/" class="text-red-600">Delete</a>
</div>
</td>
</tr>
{/each}
<!-- More transactions... -->