new icons, resize map, faulty link
This commit is contained in:
parent
c4e66f7b79
commit
8e3e8c350b
@ -0,0 +1,14 @@
|
|||||||
|
<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="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 585 B |
14
apps/front/src/lib/client/components/icons/bulb.svelte
Normal file
14
apps/front/src/lib/client/components/icons/bulb.svelte
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<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="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 533 B |
@ -1,4 +1,6 @@
|
|||||||
export { default as IconBell } from './bell.svelte';
|
export { default as IconBell } from './bell.svelte';
|
||||||
|
export { default as IconBuildingOffice2 } from './buildingOffice2.svelte';
|
||||||
|
export { default as IconBulb } from './bulb.svelte';
|
||||||
export { default as IconChartPie } from './chartPie.svelte';
|
export { default as IconChartPie } from './chartPie.svelte';
|
||||||
export { default as IconCog6Tooth } from './cog6tooth.svelte';
|
export { default as IconCog6Tooth } from './cog6tooth.svelte';
|
||||||
export { default as IconCpuChip } from './cpuChip.svelte';
|
export { default as IconCpuChip } from './cpuChip.svelte';
|
||||||
@ -6,3 +8,4 @@ export { default as IconExclamationTriangle } from './exclamationTriangle.svelte
|
|||||||
export { default as IconHome } from './home.svelte';
|
export { default as IconHome } from './home.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';
|
||||||
|
export { default as IconUsers } from './users.svelte';
|
||||||
|
|||||||
14
apps/front/src/lib/client/components/icons/users.svelte
Normal file
14
apps/front/src/lib/client/components/icons/users.svelte
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<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="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 664 B |
@ -1,5 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Table from '$lib/client/components/table.svelte';
|
import Table from '$lib/client/components/table.svelte';
|
||||||
|
import {
|
||||||
|
IconBuildingOffice2,
|
||||||
|
IconBulb,
|
||||||
|
IconCpuChip,
|
||||||
|
IconUsers
|
||||||
|
} from '$lib/client/components/icons';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
|
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
|
||||||
@ -8,20 +14,7 @@
|
|||||||
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
||||||
<span class="text-gray-800">
|
<span class="text-gray-800">
|
||||||
<svg
|
<IconCpuChip />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
<div class="text-sm font-medium leading-6 text-gray-900">Devices</div>
|
<div class="text-sm font-medium leading-6 text-gray-900">Devices</div>
|
||||||
</div>
|
</div>
|
||||||
@ -33,13 +26,13 @@
|
|||||||
</dt>
|
</dt>
|
||||||
<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
|
<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between gap-x-4 py-3">
|
<a href="/fault" class="flex justify-between gap-x-4 py-3 group">
|
||||||
<dt class="flex items-center gap-x-2">
|
<dt class="flex items-center gap-x-2">
|
||||||
<span class="h-2 w-2 rounded-full bg-red-600"></span>
|
<span class="h-2 w-2 rounded-full bg-red-600"></span>
|
||||||
<span class="text-gray-500">Faulty</span>
|
<span class="text-gray-500 group-hover:underline">Faulty</span>
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
|
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
|
||||||
</div>
|
</a>
|
||||||
<div class="flex justify-between gap-x-4 py-3">
|
<div class="flex justify-between gap-x-4 py-3">
|
||||||
<dt class="text-gray-500">Total</dt>
|
<dt class="text-gray-500">Total</dt>
|
||||||
<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
|
<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
|
||||||
@ -49,20 +42,7 @@
|
|||||||
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
||||||
<span class="text-gray-800">
|
<span class="text-gray-800">
|
||||||
<svg
|
<IconBuildingOffice2 />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="text-sm font-medium leading-6 text-gray-900">Zones</div>
|
<div class="text-sm font-medium leading-6 text-gray-900">Zones</div>
|
||||||
@ -91,20 +71,7 @@
|
|||||||
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
<div class="flex items-center gap-2 bg-gray-50 p-5">
|
||||||
<span class="text-gray-800">
|
<span class="text-gray-800">
|
||||||
<svg
|
<IconUsers />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
<div class="text-sm font-medium leading-6 text-gray-900">Guests detected</div>
|
<div class="text-sm font-medium leading-6 text-gray-900">Guests detected</div>
|
||||||
</div>
|
</div>
|
||||||
@ -126,27 +93,14 @@
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!--Map-->
|
<!--Map-->
|
||||||
<div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
|
<div class="h-96 relative overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<img class="brightness-85" src="../img/map.png" width="2414" height="2008" alt="Map example" />
|
<img class="brightness-85" src="../img/map.png" width="2414" height="2008" alt="Map example" />
|
||||||
<ul>
|
<ul>
|
||||||
<li class="absolute top-[30%] left-[53%] cursor-pointer">
|
<li class="absolute top-[30%] left-[53%] cursor-pointer">
|
||||||
<span
|
<span
|
||||||
class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
|
class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
|
||||||
>
|
>
|
||||||
<svg
|
<IconBulb size="4" />
|
||||||
class="size-4"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span
|
<span
|
||||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
|
||||||
></span>
|
></span>
|
||||||
@ -156,20 +110,7 @@
|
|||||||
<span
|
<span
|
||||||
class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
|
class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
|
||||||
>
|
>
|
||||||
<svg
|
<IconBulb size="4" />
|
||||||
class="size-4"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span
|
<span
|
||||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
|
||||||
></span>
|
></span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user