ui: add widgets to Fault page

apps/front/src/lib/client/components/icons/index.ts

@@ -11,6 +11,7 @@ export { default as IconCpuChip } from './cpuChip.svelte';
 export { default as IconCursorArrowRays } from './cursorArrowRays.svelte';
 export { default as IconExclamationTriangle } from './exclamationTriangle.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 IconMap } from './map.svelte';
 export { default as IconUser } from './user.svelte';

apps/front/src/lib/client/components/icons/informationCircle.svelte

@@ -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>

apps/front/src/routes/+layout.svelte

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

apps/front/src/routes/+page.svelte

@@ -15,7 +15,7 @@
 	<!-- Pinned projects -->
 	<ul
 		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"
 	>
 		<li>
@@ -129,7 +129,7 @@
 	</div>
 
 	<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"
 	>
 		<li>

apps/front/src/routes/fault/+page.svelte

@@ -1,3 +1,102 @@
+<script>
+	import {IconInformationCircle} from "$lib/client/components/icons/";
+</script>
+
+<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">
@@ -33,3 +132,4 @@
 			</table>
 		</div>
 	</div>
+</section>