ui: Table under map with status of devices, last time updated

This commit is contained in:
Eirene 2024-01-28 16:22:37 +08:00
parent 26a5f88dcb
commit 35d88a11e1
3 changed files with 105 additions and 51 deletions

View File

@ -6,13 +6,13 @@
export let deleteLink = '' export let deleteLink = ''
</script> </script>
<div class=""> <!-- Activity table (small breakpoint and up) -->
<div class="mt-10 sm:flex sm:items-center"> <div class="mt-10 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 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"> <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">
@ -21,45 +21,94 @@
Add Add
</a> </a>
</div> </div>
{/if}
</div> {deleteLink}
<div class="mt-8 flow-root"> {/if}
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> </div>
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div class="mx-auto max-w-6xl">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"> <div class="mt-2 flex flex-col">
<table class="min-w-full divide-y divide-gray-300"> <div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<thead class="bg-gray-50"> <table class="min-w-full divide-y divide-gray-200">
<tr> <thead>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th> <tr class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900">
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Title</th> <th class="text-left" scope="col">#</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th> <th class="text-left" scope="col">Location</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th> <th class="text-left" scope="col">Status</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6"> <th class="text-right" scope="col">Last Updated</th>
<span class="sr-only">Edit</span> </tr>
</th> </thead>
</tr> <tbody class="divide-y divide-gray-200 bg-white">
</thead> {#each {length: 1} as item, index}
<tbody class="divide-y divide-gray-200 bg-white"> <tr class="bg-white text-sm *:px-6 *:py-4">
{#each {length: 10} as item} <td class="text-gray-900">
<tr> #{index}
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Lindsay Walton</td> </td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td> <td>Block 1</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td> <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 class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"> </td>
<a href={link} class="text-indigo-600 hover:text-indigo-900">Edit<span class="sr-only">, Lindsay Walton</span></a> <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
{#if deleteLink} <time datetime="2020-07-11">July 11, 2024</time>
<button type="button" class="ml-2 text-red-600 hover:text-red-900"> </td>
Delete </tr>
</button> <tr class="bg-white text-sm *:px-6 *:py-4">
{/if} <td class="text-gray-900">
</td> #{index+1}
</tr> </td>
{/each} <td>Block 2</td>
</tbody> <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
</table> <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 class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time>
</td>
</tr>
<tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900">
#{index+2}
</td>
<td>Block 3</td>
<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>
</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time>
</td>
</tr>
<tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900">
#{index+3}
</td>
<td>Block 4</td>
<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>
</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<time datetime="2020-07-11">July 11, 2024</time>
</td>
</tr>
{/each}
<!-- More transactions... -->
</tbody>
</table>
<!-- 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">
<p class="text-sm text-gray-700">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">20</span>
results
</p>
</div> </div>
</div> <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 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>
</nav>
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,7 +2,7 @@
import Table from '$lib/client/components/table.svelte'; import Table from '$lib/client/components/table.svelte';
</script> </script>
<section class="space-y-6 lg:space-y-10"> <section class="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">
@ -94,9 +94,9 @@
<!--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-90" 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]"> <li class="absolute top-60 left-[30rem] cursor-pointer">
<span class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"> <span class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <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" /> <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" />
@ -104,7 +104,7 @@
<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]"> <li class="absolute top-80 left-[35rem] cursor-pointer">
<span class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"> <span class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <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" /> <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" />

View File

@ -2,7 +2,12 @@
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: {}, extend: {
brightness: {
80: '.80',
85: '0.85',
}
},
}, },
plugins: [require('@tailwindcss/forms'),], plugins: [require('@tailwindcss/forms'),],
} }