From 8327bfdf0e05a0153a74c48130c1e463744cc95a Mon Sep 17 00:00:00 2001
From: Anton Shubin <2spy4x@gmail.com>
Date: Tue, 30 Jan 2024 21:49:34 +0800
Subject: [PATCH] ui: add buttons to Zone table

---
 .../src/lib/client/components/toggle.svelte   | 26 +++++++++++++++++++
 .../{device-groups => devices}/+page.svelte   |  0
 .../[id]/+page.svelte                         |  0
 .../[id]/add/+page.svelte                     |  0
 apps/front/src/routes/map/+page.svelte        | 16 ++++++++++++
 5 files changed, 42 insertions(+)
 create mode 100644 apps/front/src/lib/client/components/toggle.svelte
 rename apps/front/src/routes/{device-groups => devices}/+page.svelte (100%)
 rename apps/front/src/routes/{device-groups => devices}/[id]/+page.svelte (100%)
 rename apps/front/src/routes/{device-groups => devices}/[id]/add/+page.svelte (100%)

diff --git a/apps/front/src/lib/client/components/toggle.svelte b/apps/front/src/lib/client/components/toggle.svelte
new file mode 100644
index 0000000..07ad27f
--- /dev/null
+++ b/apps/front/src/lib/client/components/toggle.svelte
@@ -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>
diff --git a/apps/front/src/routes/device-groups/+page.svelte b/apps/front/src/routes/devices/+page.svelte
similarity index 100%
rename from apps/front/src/routes/device-groups/+page.svelte
rename to apps/front/src/routes/devices/+page.svelte
diff --git a/apps/front/src/routes/device-groups/[id]/+page.svelte b/apps/front/src/routes/devices/[id]/+page.svelte
similarity index 100%
rename from apps/front/src/routes/device-groups/[id]/+page.svelte
rename to apps/front/src/routes/devices/[id]/+page.svelte
diff --git a/apps/front/src/routes/device-groups/[id]/add/+page.svelte b/apps/front/src/routes/devices/[id]/add/+page.svelte
similarity index 100%
rename from apps/front/src/routes/device-groups/[id]/add/+page.svelte
rename to apps/front/src/routes/devices/[id]/add/+page.svelte
diff --git a/apps/front/src/routes/map/+page.svelte b/apps/front/src/routes/map/+page.svelte
index 6a2d29a..a823ddc 100644
--- a/apps/front/src/routes/map/+page.svelte
+++ b/apps/front/src/routes/map/+page.svelte
@@ -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... -->