From 18b11cb41359ab92bc353c009676fe309bbd967d Mon Sep 17 00:00:00 2001
From: Eirene <sorokina333@gmail.com>
Date: Wed, 31 Jan 2024 13:31:40 +0800
Subject: [PATCH] ui: update Devices table, add component badgeStatus.svelte

---
 .../lib/client/components/badgeStatus.svelte  | 27 ++++++++++++
 .../src/lib/client/components/table.svelte    | 21 +++-------
 apps/front/src/routes/devices/+page.svelte    | 42 +++++++++----------
 3 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 apps/front/src/lib/client/components/badgeStatus.svelte

diff --git a/apps/front/src/lib/client/components/badgeStatus.svelte b/apps/front/src/lib/client/components/badgeStatus.svelte
new file mode 100644
index 0000000..0ed3c3a
--- /dev/null
+++ b/apps/front/src/lib/client/components/badgeStatus.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let text: string;
+    export let color: 'red' | 'orange' | 'green' | 'gray';
+
+    // Function to select classes based on the color
+    const colorClasses = (color: string): string => {
+        switch(color) {
+            case 'red':
+                return 'bg-red-600 text-red-50';
+            case 'orange':
+                return 'bg-orange-600 text-orange-50';
+            case 'green':
+                return 'bg-green-600 text-green-50';
+            case 'gray':
+                return 'bg-gray-600 text-gray-50';
+            default:
+                return '';
+        }
+    };
+
+    // Current classes for the badge
+    $: badgeClasses = `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium capitalize ${colorClasses(color)}`;
+</script>
+
+<span class={badgeClasses}>
+  {text}
+</span>
diff --git a/apps/front/src/lib/client/components/table.svelte b/apps/front/src/lib/client/components/table.svelte
index 6324f96..e063f6e 100644
--- a/apps/front/src/lib/client/components/table.svelte
+++ b/apps/front/src/lib/client/components/table.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Badge from '$lib/client/components/badgeStatus.svelte';
 	export let title = 'Failed devices';
 	export let description =
 		'Lamp is not working / too much voltage / no signal from device for a long time.';
@@ -57,10 +58,7 @@
 						</td>
 						<td>Block 1</td>
 						<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
-							<span
-								class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-600 text-green-50 capitalize"
-								>Working</span
-							>
+							<Badge text="Working" color="green" />
 						</td>
 						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
 							<time datetime="2020-07-11">July 11, 2024</time>
@@ -72,10 +70,7 @@
 						</td>
 						<td>Block 2</td>
 						<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
-							<span
-								class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-red-600 text-red-50 capitalize"
-								>Not Working</span
-							>
+							<Badge text="Not Working" color="red" />
 						</td>
 						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
 							<time datetime="2020-07-11">July 11, 2024</time>
@@ -87,10 +82,7 @@
 						</td>
 						<td>Block 3</td>
 						<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
-							<span
-								class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-orange-600 text-orange-50 capitalize"
-								>Too much voltage</span
-							>
+							<Badge text="Too much voltage" color="orange" />
 						</td>
 						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
 							<time datetime="2020-07-11">July 11, 2024</time>
@@ -102,10 +94,7 @@
 						</td>
 						<td>Block 4</td>
 						<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
-							<span
-								class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-600 text-gray-50 capitalize"
-								>No signal</span
-							>
+							<Badge text="No signal" color="gray" />
 						</td>
 						<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
 							<time datetime="2020-07-11">July 11, 2024</time>
diff --git a/apps/front/src/routes/devices/+page.svelte b/apps/front/src/routes/devices/+page.svelte
index 5858570..584b0e4 100644
--- a/apps/front/src/routes/devices/+page.svelte
+++ b/apps/front/src/routes/devices/+page.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import Table from '$lib/client/components/table.svelte';
+	import Badge from '$lib/client/components/badgeStatus.svelte';
 
 	let tabs: string[] = ['Gateways', 'Lamps', 'Sensors'];
 	let selectedTab: string = 'Gateways'; // default selected tab
 
 	function handleTabChange(event: CustomEvent): void {
 		selectedTab = event.target.value;
-		// Implement functionality to navigate to the selected tab's content
-		// This could be done through page navigation or by updating local component state
 	}
 </script>
 
@@ -79,16 +77,16 @@
 							class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
 						>
 							<th class="text-left max-w-xs" scope="col">Name</th>
-							<th class="text-left" scope="col">Type</th>
-							<th class="text-left" scope="col">Fault reason</th>
+							<th class="text-left" scope="col">Status</th>
+							<th class="text-left" scope="col">Comment / Fault reason</th>
 							<th class="text-right" scope="col">Actions</th>
 						</tr>
 					</thead>
 					<tbody class="divide-y divide-gray-200 bg-white">
 						{#each { length: 1 } as item, index}
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Lamp 001 </td>
-								<td>Bulb</td>
+								<td class="text-gray-900"> Gateway 001 </td>
+								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -98,8 +96,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Gateway 001 </td>
-								<td>A wi-fi router</td>
+								<td class="text-gray-900"> Gateway 002 </td>
+								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -109,8 +107,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Motion sensor 001 </td>
-								<td>A sensor</td>
+								<td class="text-gray-900"> Gateway 003 </td>
+								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -164,7 +162,7 @@
 						{#each { length: 1 } as item, index}
 							<tr class="bg-white text-sm *:px-6 *:py-4">
 								<td class="text-gray-900"> Lamp 001 </td>
-								<td>Bulb</td>
+								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -174,8 +172,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Gateway 001 </td>
-								<td>A wi-fi router</td>
+								<td class="text-gray-900"> Lamp 002 </td>
+								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -185,8 +183,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Motion sensor 001 </td>
-								<td>A sensor</td>
+								<td class="text-gray-900"> Lamp 003 </td>
+								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -239,8 +237,8 @@
 					<tbody class="divide-y divide-gray-200 bg-white">
 						{#each { length: 1 } as item, index}
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Lamp 001 </td>
-								<td>Bulb</td>
+								<td class="text-gray-900"> Motion sensor 001 </td>
+								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -250,8 +248,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Gateway 001 </td>
-								<td>A wi-fi router</td>
+								<td class="text-gray-900"> Motion sensor 002 </td>
+								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
@@ -261,8 +259,8 @@
 								</td>
 							</tr>
 							<tr class="bg-white text-sm *:px-6 *:py-4">
-								<td class="text-gray-900"> Motion sensor 001 </td>
-								<td>A sensor</td>
+								<td class="text-gray-900"> Motion sensor 003 </td>
+								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">