Add pages, tabs, tables
This commit is contained in:
parent
35d88a11e1
commit
4d3c96ca73
@ -1,3 +1,13 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
@apply flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-purple-600 hover:bg-purple-400 focus-visible:outline-purple-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,4 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0713312310418!2d103.86541329291512!3d1.2815590836801172!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1904937e1633%3A0x62099677b59fca76!2sGardens%20by%20the%20Bay!5e0!3m2!1sen!2ssg!4v1706174691015!5m2!1sen!2ssg" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0713312310418!2d103.86541329291512!3d1.2815590836801172!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1904937e1633%3A0x62099677b59fca76!2sGardens%20by%20the%20Bay!5e0!3m2!1sen!2ssg!4v1706174691015!5m2!1sen!2ssg"
|
||||||
|
width="100%"
|
||||||
|
height="600"
|
||||||
|
style="border:0;"
|
||||||
|
allowfullscreen=""
|
||||||
|
loading="lazy"
|
||||||
|
referrerpolicy="no-referrer-when-downgrade"
|
||||||
|
></iframe>
|
||||||
|
|||||||
@ -1,21 +1,32 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let title = 'Failed devices';
|
export let title = 'Failed devices';
|
||||||
export let description = 'Lamp is not working / too much voltage / no signal from device for a long time.'
|
export let description =
|
||||||
|
'Lamp is not working / too much voltage / no signal from device for a long time.';
|
||||||
export let link = '#';
|
export let link = '#';
|
||||||
export let addLink = ''
|
export let addLink = '';
|
||||||
export let deleteLink = ''
|
export let deleteLink = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Activity table (small breakpoint and up) -->
|
<!-- Activity table (small breakpoint and up) -->
|
||||||
<div class="mt-10 sm:flex sm:items-center">
|
<div class="sm:flex sm:items-center">
|
||||||
<div class="sm:flex-auto">
|
<div class="sm:flex-auto">
|
||||||
<h1 class="text-base font-semibold leading-6 text-gray-900">{title}</h1>
|
<h1 class="text-base font-semibold leading-6 text-gray-900">{title}</h1>
|
||||||
<p class="mt-2 text-sm text-gray-700">{description}</p>
|
<p class="mt-2 text-sm text-gray-700">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
{#if addLink}
|
{#if addLink}
|
||||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||||
<a href={addLink} class="flex gap-1 items-center rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href={addLink}
|
||||||
|
class="flex gap-1 items-center rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
</svg>
|
</svg>
|
||||||
Add
|
Add
|
||||||
@ -25,12 +36,13 @@
|
|||||||
{deleteLink}
|
{deleteLink}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-auto max-w-6xl">
|
<div class="flex flex-col">
|
||||||
<div class="mt-2 flex flex-col">
|
|
||||||
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
|
<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">
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900">
|
<tr
|
||||||
|
class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
|
||||||
|
>
|
||||||
<th class="text-left" scope="col">#</th>
|
<th class="text-left" scope="col">#</th>
|
||||||
<th class="text-left" scope="col">Location</th>
|
<th class="text-left" scope="col">Location</th>
|
||||||
<th class="text-left" scope="col">Status</th>
|
<th class="text-left" scope="col">Status</th>
|
||||||
@ -38,14 +50,17 @@
|
|||||||
</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">
|
<td class="text-gray-900">
|
||||||
#{index}
|
#{index}
|
||||||
</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 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>
|
<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
|
||||||
|
>
|
||||||
</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>
|
||||||
@ -53,11 +68,14 @@
|
|||||||
</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">
|
<td class="text-gray-900">
|
||||||
#{index+1}
|
#{index + 1}
|
||||||
</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 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>
|
<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
|
||||||
|
>
|
||||||
</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>
|
||||||
@ -65,11 +83,14 @@
|
|||||||
</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">
|
<td class="text-gray-900">
|
||||||
#{index+2}
|
#{index + 2}
|
||||||
</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 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>
|
<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
|
||||||
|
>
|
||||||
</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>
|
||||||
@ -77,11 +98,14 @@
|
|||||||
</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">
|
<td class="text-gray-900">
|
||||||
#{index+3}
|
#{index + 3}
|
||||||
</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 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>
|
<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
|
||||||
|
>
|
||||||
</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>
|
||||||
@ -92,7 +116,10 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
|
<nav
|
||||||
|
class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
|
||||||
|
aria-label="Pagination"
|
||||||
|
>
|
||||||
<div class="hidden sm:block">
|
<div class="hidden sm:block">
|
||||||
<p class="text-sm text-gray-700">
|
<p class="text-sm text-gray-700">
|
||||||
Showing
|
Showing
|
||||||
@ -105,10 +132,17 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-1 justify-between gap-x-3 sm:justify-end">
|
<div class="flex flex-1 justify-between gap-x-3 sm:justify-end">
|
||||||
<a href={link} class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400">Previous</a>
|
<a
|
||||||
<a href={link} class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400">Next</a>
|
href={link}
|
||||||
|
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
|
||||||
|
>Previous</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
|
||||||
|
>Next</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
@ -1,12 +1,32 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import "../app.css";
|
import '../app.css';
|
||||||
import Login from '$lib/client/components/Login.svelte';
|
import Login from '$lib/client/components/Login.svelte';
|
||||||
import { auth } from '$lib/client/stores/auth';
|
import { auth } from '$lib/client/stores/auth';
|
||||||
|
|
||||||
|
// import { onMount } from 'svelte';
|
||||||
|
let isDropdownOpen = false;
|
||||||
|
|
||||||
|
const toggleDropdown = (): void => {
|
||||||
|
isDropdownOpen = !isDropdownOpen;
|
||||||
|
};
|
||||||
|
|
||||||
|
// const handleClickOutside = (event: MouseEvent): void => {
|
||||||
|
// if (!(event.target as Element).closest('.dropdown-container')) {
|
||||||
|
// isDropdownOpen = false;
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// // Close the dropdown if the user clicks outside of it
|
||||||
|
// onMount(() => {
|
||||||
|
// window.addEventListener('click', handleClickOutside);
|
||||||
|
|
||||||
|
// return () => {
|
||||||
|
// window.removeEventListener('click', handleClickOutside);
|
||||||
|
// };
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $auth.isSignedIn}
|
{#if $auth.isSignedIn}
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
This example requires some changes to your config:
|
This example requires some changes to your config:
|
||||||
|
|
||||||
@ -69,16 +89,29 @@
|
|||||||
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
||||||
<button type="button" class="-m-2.5 p-2.5">
|
<button type="button" class="-m-2.5 p-2.5">
|
||||||
<span class="sr-only">Close sidebar</span>
|
<span class="sr-only">Close sidebar</span>
|
||||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
<svg
|
||||||
|
class="h-6 w-6 text-white"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
|
<div
|
||||||
|
class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"
|
||||||
|
>
|
||||||
<div class="flex gap-4 h-16 shrink-0 items-center">
|
<div class="flex gap-4 h-16 shrink-0 items-center">
|
||||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
<img
|
||||||
|
class="h-8 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
|
||||||
|
alt="Your Company"
|
||||||
|
/>
|
||||||
<h3 class="text-white">JB Lux</h3>
|
<h3 class="text-white">JB Lux</h3>
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex flex-1 flex-col">
|
<nav class="flex flex-1 flex-col">
|
||||||
@ -87,50 +120,138 @@
|
|||||||
<ul role="list" class="-mx-2 space-y-1">
|
<ul role="list" class="-mx-2 space-y-1">
|
||||||
<li>
|
<li>
|
||||||
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
||||||
<a href="#" class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Dashboard
|
Dashboard
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Team
|
Team
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Projects
|
Projects
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Calendar
|
Calendar
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Documents
|
Documents
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Reports
|
Reports
|
||||||
</a>
|
</a>
|
||||||
@ -142,30 +263,66 @@
|
|||||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||||
<li>
|
<li>
|
||||||
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">H</span>
|
href="#"
|
||||||
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||||
|
>H</span
|
||||||
|
>
|
||||||
<span class="truncate">Heroicons</span>
|
<span class="truncate">Heroicons</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">T</span>
|
href="#"
|
||||||
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||||
|
>T</span
|
||||||
|
>
|
||||||
<span class="truncate">Tailwind Labs</span>
|
<span class="truncate">Tailwind Labs</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">W</span>
|
href="#"
|
||||||
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||||
|
>W</span
|
||||||
|
>
|
||||||
<span class="truncate">Workcation</span>
|
<span class="truncate">Workcation</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="mt-auto">
|
<li class="mt-auto">
|
||||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Settings
|
Settings
|
||||||
</a>
|
</a>
|
||||||
@ -182,7 +339,11 @@
|
|||||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
|
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
|
||||||
<div class="flex gap-4 h-16 shrink-0 items-center">
|
<div class="flex gap-4 h-16 shrink-0 items-center">
|
||||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
<img
|
||||||
|
class="h-8 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
|
||||||
|
alt="Your Company"
|
||||||
|
/>
|
||||||
<h3 class="text-white">JB Lux</h3>
|
<h3 class="text-white">JB Lux</h3>
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex flex-1 flex-col">
|
<nav class="flex flex-1 flex-col">
|
||||||
@ -191,58 +352,161 @@
|
|||||||
<ul role="list" class="-mx-2 space-y-1">
|
<ul role="list" class="-mx-2 space-y-1">
|
||||||
<li>
|
<li>
|
||||||
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
||||||
<a href="/" class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="/"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Dashboard
|
Dashboard
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/map" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href="/map"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Map
|
Map and Zones
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/device-groups" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href="/device-groups"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Device Groups
|
Device Groups
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href="/fault"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Export Data
|
|
||||||
|
Fault
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Notifications
|
Notifications
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Admin
|
Admin
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
|
class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Reports
|
Reports
|
||||||
</a>
|
</a>
|
||||||
@ -251,10 +515,28 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="mt-auto">
|
<li class="mt-auto">
|
||||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white">
|
<a
|
||||||
<svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
href="#"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 shrink-0"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Settings
|
Settings
|
||||||
</a>
|
</a>
|
||||||
@ -265,11 +547,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="lg:pl-72">
|
<div class="lg:pl-72">
|
||||||
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
|
<div
|
||||||
|
class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
|
||||||
|
>
|
||||||
<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
|
<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
|
||||||
<span class="sr-only">Open sidebar</span>
|
<span class="sr-only">Open sidebar</span>
|
||||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
<svg
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -279,16 +574,42 @@
|
|||||||
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
||||||
<form class="relative flex flex-1" action="#" method="GET">
|
<form class="relative flex flex-1" action="#" method="GET">
|
||||||
<label for="search-field" class="sr-only">Search</label>
|
<label for="search-field" class="sr-only">Search</label>
|
||||||
<svg class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
<svg
|
||||||
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
|
class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<input id="search-field" class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." type="search" name="search">
|
<input
|
||||||
|
id="search-field"
|
||||||
|
class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
|
||||||
|
placeholder="Search..."
|
||||||
|
type="search"
|
||||||
|
name="search"
|
||||||
|
/>
|
||||||
</form>
|
</form>
|
||||||
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
||||||
<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
|
<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
|
||||||
<span class="sr-only">View notifications</span>
|
<span class="sr-only">View notifications</span>
|
||||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
<svg
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -297,13 +618,36 @@
|
|||||||
|
|
||||||
<!-- Profile dropdown -->
|
<!-- Profile dropdown -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="-m-1.5 flex items-center p-1.5"
|
||||||
|
id="user-menu-button"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
on:click|preventDefault={toggleDropdown}
|
||||||
|
>
|
||||||
<span class="sr-only">Open user menu</span>
|
<span class="sr-only">Open user menu</span>
|
||||||
<img class="h-8 w-8 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
<img
|
||||||
|
class="h-8 w-8 rounded-full bg-gray-50"
|
||||||
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
<span class="hidden lg:flex lg:items-center">
|
<span class="hidden lg:flex lg:items-center">
|
||||||
<span class="ml-4 text-sm font-semibold leading-6 text-gray-900" aria-hidden="true">Tom Cook</span>
|
<span
|
||||||
<svg class="ml-2 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
class="ml-4 text-sm font-semibold leading-6 text-gray-900"
|
||||||
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
|
aria-hidden="true">Tom Cook</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ml-2 h-5 w-5 text-gray-400"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@ -318,11 +662,31 @@
|
|||||||
From: "transform opacity-100 scale-100"
|
From: "transform opacity-100 scale-100"
|
||||||
To: "transform opacity-0 scale-95"
|
To: "transform opacity-0 scale-95"
|
||||||
-->
|
-->
|
||||||
<div class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
{#if isDropdownOpen}
|
||||||
|
<div
|
||||||
|
class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
|
||||||
|
role="menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-labelledby="user-menu-button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
<!-- Active: "bg-gray-50", Not Active: "" -->
|
<!-- Active: "bg-gray-50", Not Active: "" -->
|
||||||
<a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-0">Your profile</a>
|
<a
|
||||||
<button on:click={auth.signOut} class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</button>
|
href="#"
|
||||||
|
class="block px-3 py-1 text-sm leading-6 text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
id="user-menu-item-0">Your profile</a
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
on:click={auth.signOut}
|
||||||
|
class="block px-3 py-1 text-sm leading-6 text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
id="user-menu-item-1">Sign out</button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -337,5 +701,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<Login/>
|
<Login />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -2,14 +2,25 @@
|
|||||||
import Table from '$lib/client/components/table.svelte';
|
import Table from '$lib/client/components/table.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="space-y-4 lg:space-y-8">
|
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
|
||||||
<!-- Pinned projects -->
|
<!-- Pinned projects -->
|
||||||
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
||||||
<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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg
|
||||||
<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" />
|
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>
|
</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>
|
||||||
@ -38,8 +49,19 @@
|
|||||||
<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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@ -69,8 +91,19 @@
|
|||||||
<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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg
|
||||||
<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" />
|
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>
|
</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>
|
||||||
@ -94,27 +127,56 @@
|
|||||||
|
|
||||||
<!--Map-->
|
<!--Map-->
|
||||||
<div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
|
<div class="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-60 left-[30rem] cursor-pointer">
|
<li class="absolute top-[30%] left-[53%] cursor-pointer">
|
||||||
<span class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full">
|
<span
|
||||||
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
|
||||||
<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
|
||||||
|
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>
|
</svg>
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
<span
|
||||||
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
|
||||||
|
></span>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="absolute top-80 left-[35rem] cursor-pointer">
|
<li class="absolute top-[35%] left-[61.2%] cursor-pointer">
|
||||||
<span class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full">
|
<span
|
||||||
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
|
||||||
<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
|
||||||
|
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>
|
</svg>
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
<span
|
||||||
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
|
||||||
|
></span>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Table />
|
||||||
<Table/>
|
|
||||||
</section>
|
</section>
|
||||||
@ -1,5 +1,281 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Table from '$lib/client/components/table.svelte';
|
import Table from '$lib/client/components/table.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>
|
</script>
|
||||||
|
|
||||||
<Table title="All groups" description="Here you can manage schedules, add/remove devices." link="/device-groups/1"/>
|
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
|
||||||
|
<div>
|
||||||
|
<div class="sm:hidden">
|
||||||
|
<label for="tabs" class="sr-only">Select a tab</label>
|
||||||
|
<select
|
||||||
|
id="tabs"
|
||||||
|
name="tabs"
|
||||||
|
class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||||
|
bind:value={selectedTab}
|
||||||
|
on:change={handleTabChange}
|
||||||
|
>
|
||||||
|
{#each tabs as tab}
|
||||||
|
<option value={tab} selected={selectedTab === tab}>{tab}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:block">
|
||||||
|
<div class="border-b border-gray-200">
|
||||||
|
<nav class="-mb-px flex" aria-label="Tabs">
|
||||||
|
{#each tabs as tab}
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class:border-indigo-500={selectedTab === tab}
|
||||||
|
class:text-indigo-600={selectedTab === tab}
|
||||||
|
class:text-gray-500={selectedTab !== tab}
|
||||||
|
class:hover:border-gray-300={selectedTab !== tab}
|
||||||
|
class:hover:text-gray-700={selectedTab !== tab}
|
||||||
|
class="w-1/3 border-b-2 py-4 px-1 text-center text-sm font-medium cursor-pointer"
|
||||||
|
on:click|preventDefault={() => (selectedTab = tab)}
|
||||||
|
aria-current={selectedTab === tab ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{tab}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if selectedTab === 'Gateways'}
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="flex mb-2">
|
||||||
|
<div>
|
||||||
|
<p class="mt-2 text-sm text-gray-700">Gateways description</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto">
|
||||||
|
<button type="button" class="btn btn-primary mb-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="-ml-0.5 size-5"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
|
</svg>
|
||||||
|
Add new</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
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-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> Zero power consumed </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Offline </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Too high measures </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<!-- More transactions... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if selectedTab === 'Lamps'}
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="flex mb-2">
|
||||||
|
<div>
|
||||||
|
<p class="mt-2 text-sm text-gray-700">Lamps description</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto">
|
||||||
|
<button type="button" class="btn btn-primary mb-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="-ml-0.5 size-5"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
|
</svg>
|
||||||
|
Add new</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
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-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> Zero power consumed </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Offline </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Too high measures </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<!-- More transactions... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if selectedTab === 'Sensors'}
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="flex mb-2">
|
||||||
|
<div>
|
||||||
|
<p class="mt-2 text-sm text-gray-700">Sensors description</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto">
|
||||||
|
<button type="button" class="btn btn-primary mb-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="-ml-0.5 size-5"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
|
</svg>
|
||||||
|
Add new</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
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-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> Zero power consumed </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Offline </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</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> Too high measures </td>
|
||||||
|
<td>
|
||||||
|
<div class="flex gap-4 items-center justify-end">
|
||||||
|
<a href="/" class="text-purple-800">Edit</a>
|
||||||
|
<a href="/" class="text-red-600">Delete</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<!-- More transactions... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|||||||
35
apps/front/src/routes/fault/+page.svelte
Normal file
35
apps/front/src/routes/fault/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<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
|
||||||
|
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>
|
||||||
|
</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> Zero power consumed </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> Offline </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> Too high measures </td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<!-- More transactions... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -3,8 +3,39 @@
|
|||||||
import Table from '$lib/client/components/table.svelte';
|
import Table from '$lib/client/components/table.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Map />
|
<section class="space-y-4 lg:space-y-8">
|
||||||
|
<div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="mt-10">
|
<Map />
|
||||||
<Table />
|
</div>
|
||||||
</div>
|
<div class="mx-auto max-w-6xl">
|
||||||
|
<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
|
||||||
|
class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
<th class="text-left" scope="col">Zone name</th>
|
||||||
|
<th class="text-right" scope="col">Gateways</th>
|
||||||
|
<th class="text-right" scope="col">Lamps</th>
|
||||||
|
<th class="text-right" scope="col">Sensors</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200 bg-white">
|
||||||
|
{#each { length: 10 } as item, index}
|
||||||
|
<tr class="bg-white text-sm *:px-6 *:py-4">
|
||||||
|
<td class="text-gray-900">
|
||||||
|
Zone #{index + 1}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">12</td>
|
||||||
|
<td class="text-right"> 20 </td>
|
||||||
|
<td class="text-right">40</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<!-- More transactions... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user