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

ui: add widgets to Fault page

Browse Source
This commit is contained in:
Eirene 2024-01-31 16:02:53 +08:00
parent c28dffdfa6
commit 6839137512
5 changed files with 125 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/front/src/lib/client/components/icons/index.ts
View File

@ -11,6 +11,7 @@ export { default as IconCpuChip } from './cpuChip.svelte';
export { default as IconCursorArrowRays } from './cursorArrowRays.svelte'; export { default as IconCursorArrowRays } from './cursorArrowRays.svelte';
export { default as IconExclamationTriangle } from './exclamationTriangle.svelte'; export { default as IconExclamationTriangle } from './exclamationTriangle.svelte';
export { default as IconHome } from './home.svelte'; export { default as IconHome } from './home.svelte';
export { default as IconInformationCircle} from './informationCircle.svelte';
export { default as IconMagnifyingGlass } from './magnifyingGlass.svelte'; export { default as IconMagnifyingGlass } from './magnifyingGlass.svelte';
export { default as IconMap } from './map.svelte'; export { default as IconMap } from './map.svelte';
export { default as IconUser } from './user.svelte'; export { default as IconUser } from './user.svelte';

4
apps/front/src/lib/client/components/icons/informationCircle.svelte Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

8
apps/front/src/routes/+layout.svelte
View File

@ -7,6 +7,8 @@
IconBars3, IconBell, IconMagnifyingGlass, IconXMark IconBars3, IconBell, IconMagnifyingGlass, IconXMark
} from '$lib/client/components/icons'; } from '$lib/client/components/icons';
import { fly, fade } from 'svelte/transition' import { fly, fade } from 'svelte/transition'
import {page} from "$app/stores";
import {onMount} from "svelte";
let showSidePanel = false, width let showSidePanel = false, width
function toggleSidePanel() { function toggleSidePanel() {
@ -18,6 +20,12 @@
const toggleDropdown = (): void => { const toggleDropdown = (): void => {
isDropdownOpen = !isDropdownOpen; isDropdownOpen = !isDropdownOpen;
}; };
onMount(()=>{
return page.subscribe(() => {
showSidePanel = false;
})
})
</script> </script>
{#if $auth.isSignedIn} {#if $auth.isSignedIn}

4
apps/front/src/routes/+page.svelte
View File

@ -15,7 +15,7 @@
<!-- Pinned projects --> <!-- Pinned projects -->
<ul <ul
role="list" role="list"
class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8 class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white" *:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
> >
<li> <li>
@ -129,7 +129,7 @@
</div> </div>
<ul <ul
class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8 class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white" *:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
> >
<li> <li>

120
apps/front/src/routes/fault/+page.svelte
View File

@ -1,16 +1,115 @@
<div class="flex flex-col"> <script>
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"> import {IconInformationCircle} from "$lib/client/components/icons/";
<table class="min-w-full divide-y divide-gray-200"> </script>
<thead>
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
<ul
role="list"
class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
>
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconInformationCircle />
</span>
<div class="text-sm font-medium leading-6 text-gray-900">Lamps</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">23</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3 group">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-red-600"></span>
<span class="text-gray-500 group-hover:underline">Faulty</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Total</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">35</time></dd>
</div>
</dl>
</li>
<li>
<a href="/map" class="block">
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconInformationCircle />
</span>
<div class="text-sm font-medium leading-6 text-gray-900">Gateways</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3 group">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-red-600"></span>
<span class="text-gray-500 group-hover:underline">Faulty</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Total</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
</div>
</dl>
</a>
</li>
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconInformationCircle />
</span>
<div class="text-sm font-medium leading-6 text-gray-900">Sensors</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3 group">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-red-600"></span>
<span class="text-gray-500 group-hover:underline">Faulty</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">2</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Total</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">14</time></dd>
</div>
</dl>
</li>
</ul>
<div class="flex flex-col">
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr <tr
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">Type</th>
<th class="text-left" scope="col">Fault reason</th> <th class="text-left" scope="col">Fault reason</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"> Lamp 001 </td>
@ -29,7 +128,8 @@
</tr> </tr>
{/each} {/each}
<!-- More transactions... --> <!-- More transactions... -->
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </section>