spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: update Devices table, add component badgeStatus.svelte

Browse Source
This commit is contained in:
Eirene 2024-01-31 13:31:40 +08:00
parent cdf1d994b4
commit 18b11cb413
3 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/front/src/lib/client/components/badgeStatus.svelte Normal file
View 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>

21
apps/front/src/lib/client/components/table.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import Badge from '$lib/client/components/badgeStatus.svelte';
export let title = 'Failed devices'; export let title = 'Failed devices';
export let description = export let description =
'Lamp is not working / too much voltage / no signal from device for a long time.'; 'Lamp is not working / too much voltage / no signal from device for a long time.';
@ -57,10 +58,7 @@
</td> </td>
<td>Block 1</td> <td>Block 1</td>
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block"> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<span <Badge text="Working" color="green" />
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
>
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500"> <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time> <time datetime="2020-07-11">July 11, 2024</time>
@ -72,10 +70,7 @@
</td> </td>
<td>Block 2</td> <td>Block 2</td>
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block"> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<span <Badge text="Not Working" color="red" />
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
>
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500"> <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time> <time datetime="2020-07-11">July 11, 2024</time>
@ -87,10 +82,7 @@
</td> </td>
<td>Block 3</td> <td>Block 3</td>
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block"> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<span <Badge text="Too much voltage" color="orange" />
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
>
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500"> <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time> <time datetime="2020-07-11">July 11, 2024</time>
@ -102,10 +94,7 @@
</td> </td>
<td>Block 4</td> <td>Block 4</td>
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block"> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<span <Badge text="No signal" color="gray" />
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
>
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500"> <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time> <time datetime="2020-07-11">July 11, 2024</time>

42
apps/front/src/routes/devices/+page.svelte
View File

@ -1,13 +1,11 @@
<script lang="ts"> <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 tabs: string[] = ['Gateways', 'Lamps', 'Sensors'];
let selectedTab: string = 'Gateways'; // default selected tab let selectedTab: string = 'Gateways'; // default selected tab
function handleTabChange(event: CustomEvent): void { function handleTabChange(event: CustomEvent): void {
selectedTab = event.target.value; 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> </script>
@ -79,16 +77,16 @@
class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900" 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 max-w-xs" scope="col">Name</th>
<th class="text-left" scope="col">Type</th> <th class="text-left" scope="col">Status</th>
<th class="text-left" scope="col">Fault reason</th> <th class="text-left" scope="col">Comment / Fault reason</th>
<th class="text-right" scope="col">Actions</th> <th class="text-right" scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200 bg-white"> <tbody class="divide-y divide-gray-200 bg-white">
{#each { length: 1 } as item, index} {#each { length: 1 } as item, index}
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Lamp 001 </td> <td class="text-gray-900"> Gateway 001 </td>
<td>Bulb</td> <td><Badge text="Not Working" color="red" /></td>
<td> Zero power consumed </td> <td> Zero power consumed </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -98,8 +96,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Gateway 001 </td> <td class="text-gray-900"> Gateway 002 </td>
<td>A wi-fi router</td> <td><Badge text="No signal" color="gray" /></td>
<td> Offline </td> <td> Offline </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -109,8 +107,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Motion sensor 001 </td> <td class="text-gray-900"> Gateway 003 </td>
<td>A sensor</td> <td><Badge text="Too much voltage" color="orange" /></td>
<td> Too high measures </td> <td> Too high measures </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -164,7 +162,7 @@
{#each { length: 1 } as item, index} {#each { length: 1 } as item, index}
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Lamp 001 </td> <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> Zero power consumed </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -174,8 +172,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Gateway 001 </td> <td class="text-gray-900"> Lamp 002 </td>
<td>A wi-fi router</td> <td><Badge text="No signal" color="gray" /></td>
<td> Offline </td> <td> Offline </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -185,8 +183,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Motion sensor 001 </td> <td class="text-gray-900"> Lamp 003 </td>
<td>A sensor</td> <td><Badge text="Too much voltage" color="orange" /></td>
<td> Too high measures </td> <td> Too high measures </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -239,8 +237,8 @@
<tbody class="divide-y divide-gray-200 bg-white"> <tbody class="divide-y divide-gray-200 bg-white">
{#each { length: 1 } as item, index} {#each { length: 1 } as item, index}
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Lamp 001 </td> <td class="text-gray-900"> Motion sensor 001 </td>
<td>Bulb</td> <td><Badge text="Not Working" color="red" /></td>
<td> Zero power consumed </td> <td> Zero power consumed </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -250,8 +248,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Gateway 001 </td> <td class="text-gray-900"> Motion sensor 002 </td>
<td>A wi-fi router</td> <td><Badge text="No signal" color="gray" /></td>
<td> Offline </td> <td> Offline </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">
@ -261,8 +259,8 @@
</td> </td>
</tr> </tr>
<tr class="bg-white text-sm *:px-6 *:py-4"> <tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900"> Motion sensor 001 </td> <td class="text-gray-900"> Motion sensor 003 </td>
<td>A sensor</td> <td><Badge text="Too much voltage" color="orange" /></td>
<td> Too high measures </td> <td> Too high measures </td>
<td> <td>
<div class="flex gap-4 items-center justify-end"> <div class="flex gap-4 items-center justify-end">