ui: update Devices table, add component badgeStatus.svelte
This commit is contained in:
parent
cdf1d994b4
commit
18b11cb413
27
apps/front/src/lib/client/components/badgeStatus.svelte
Normal file
27
apps/front/src/lib/client/components/badgeStatus.svelte
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user