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

ui: add pageSchedule Edit

Browse Source
This commit is contained in:
Eirene 2024-07-29 00:55:16 +08:00
parent b740df3a35
commit b752a3d048
17 changed files with 283 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
apps/front/src/app.css
View File

@ -3,52 +3,62 @@
@tailwind utilities;
@layer base {
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
.poppins-regular {
html {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
@apply text-base text-black;
}
.h1 {
@apply text-4xl font-semibold mb-4;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
.h2 {
@apply text-3xl font-semibold mb-3;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
.h3 {
@apply text-2xl font-medium mb-2;
}
html {
@apply poppins-regular text-base text-black;
.h4 {
@apply text-xl font-medium mb-2;
}
.h5 {
@apply text-lg font-medium mb-2;
}
.h6 {
@apply text-base font-medium mb-2;
}
.p {
@apply text-base mb-4;
}
.text-primary{@apply text-purple-600;}
.bg-primary{@apply bg-purple-900;}
.rounded-primary{@apply rounded-lg;}
}
@layer components {
.btn {
@apply cursor-pointer flex items-center justify-center gap-2;
@apply rounded-lg px-4 h-12 text-white;
@apply rounded-primary px-6 h-12 text-white;
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
}
.btn-primary {
@apply bg-purple-900 text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
}
.input{
@apply block w-full h-12 rounded-lg border border-gray-300 text-gray-900;
@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
@apply placeholder:text-gray-500;
@apply focus:border-purple-900 focus:ring-1 focus:ring-inset focus:ring-transparent;
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
}
.label{
@apply block text-black;
@apply block text-black text-sm;
}
}

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

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 836 B

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

@ -4,6 +4,7 @@ export { default as IconBars3 } from './bars3.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 IconCalendarDays } from './calendarDays.svelte';
export { default as IconChartPie } from './chartPie.svelte';
export { default as IconCheck } from './check.svelte';
export { default as IconCog6Tooth } from './cog6tooth.svelte';

2
apps/front/src/lib/client/components/login.svelte
View File

@ -7,7 +7,7 @@
<h2 class="mt-20 mb-10 text-center text-2xl font-semibold leading-9 text-gray-900">Sign in to your account</h2>
<div class="mx-auto w-full max-w-md">
<div class="bg-white p-6 lg:py-12 rounded-lg sm:px-12 shadow-sm">
<div class="bg-white p-6 lg:py-12 rounded-primary sm:px-12 shadow-sm">
<form class="space-y-6" on:submit|preventDefault={auth.signIn}>
<div>
<label for="email" class="label">Username</label>

15
apps/front/src/lib/client/components/nav.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import {
IconBell,
IconCalendarDays,
IconChartPie,
IconCog6Tooth,
IconCpuChip,
@ -26,22 +27,18 @@
{ name: 'Devices', href: '/devices', Icon: IconCpuChip },
{ name: 'Fault', href: '/fault', Icon: IconExclamationTriangle },
{ name: 'Notifications', href: '/notifications', Icon: IconBell },
{ name: 'Schedule', href: '/schedule', Icon: IconCalendarDays },
{ name: 'Admin', href: '/admin', Icon: IconUser },
{ name: 'Reports', href: '/reports', Icon: IconChartPie },
{ name: 'Settings', href: '/settings', Icon: IconCog6Tooth }
];
const activeClasses = 'bg-gray-800 text-white';
const inactiveClasses = 'text-gray-400 hover:text-white hover:bg-gray-800';
const baseClasses = 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold';
const activeClasses = 'bg-purple-950 text-purple-100';
const inactiveClasses = 'text-purple-100 hover:text-white hover:bg-purple-950';
const baseClasses = 'group flex gap-x-3 rounded-primary p-2 text-sm leading-6';
</script>
<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"
/>
<h3 class="text-white">GB Lux</h3>
<h3 class="text-purple-100 font-semibold text-xl">GB Lux</h3>
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col -mx-2 space-y-1">

8
apps/front/src/lib/client/components/table.svelte
View File

@ -18,7 +18,7 @@
<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"
class="flex gap-1 items-center rounded-primary 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"
@ -38,7 +38,7 @@
{/if}
</div>
<div class="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-primary">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr
@ -123,12 +123,12 @@
<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"
class="relative inline-flex items-center rounded-primary 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"
class="relative inline-flex items-center rounded-primary 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>

7
apps/front/src/lib/client/components/toggle.svelte
View File

@ -1,17 +1,20 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let initialValue: boolean = false;
let enabled: boolean = initialValue;
const dispatch = createEventDispatcher();
const toggleSwitch = (): void => {
enabled = !enabled;
dispatch('toggle', enabled);
};
</script>
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
class:bg-indigo-600={enabled}
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-900 focus:ring-offset-2"
class:bg-purple-900={enabled}
class:bg-gray-200={!enabled}
role="switch"
aria-checked={enabled}

2
apps/front/src/lib/client/components/weekCheckbox.svelte Normal file
View File

@ -0,0 +1,2 @@
<div class="flex gap-1 sm:gap-2"> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="monday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Mon</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="tuesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Tue</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="wednesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Wed</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="thursday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Thu</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="friday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Fri</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="saturday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sat</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="sunday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sun</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> </div>

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

@ -46,7 +46,7 @@
<!-- Sidebar component -->
<div
class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"
class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4 ring-1 ring-white/10"
>
<Nav />
</div>
@ -58,7 +58,7 @@
<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<!-- Sidebar component -->
<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-primary px-6 pb-4">
<Nav />
</div>
</div>
@ -73,7 +73,7 @@
</button>
<!-- Separator -->
<div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"></div>
<div class="h-6 w-px bg-primary/10 lg:hidden" aria-hidden="true"></div>
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
<form class="relative flex flex-1" action="#" method="GET">
@ -94,7 +94,7 @@
</button>
<!-- Separator -->
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true"></div>
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-primary/10" aria-hidden="true"></div>
<!-- Profile dropdown -->
<div class="relative">
@ -114,7 +114,7 @@
/>
<span class="hidden lg:flex lg:items-center">
<span
class="ml-4 text-sm font-semibold leading-6 text-gray-900"
class="ml-4 text-sm leading-6 text-gray-900"
aria-hidden="true">Tom Cook</span
>
<svg
@ -144,7 +144,7 @@
-->
{#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"
class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-primary 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"

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

@ -16,7 +16,7 @@
<ul
role="list"
class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
>
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
@ -102,7 +102,7 @@
</ul>
<!--Map-->
<div class="h-96 relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="h-96 relative overflow-hidden rounded-primary border border-gray-200 bg-white">
<img class="brightness-85" src="../img/map.png" width="2414" height="2008" alt="Map example" />
<ul>
<li class="absolute top-[30%] left-[53%] cursor-pointer">
@ -130,7 +130,7 @@
<ul
class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
>
<li>
<ChartMotion />

8
apps/front/src/routes/devices/+page.svelte
View File

@ -16,7 +16,7 @@
<select
id="tabs"
name="tabs"
class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
class="block w-full rounded-primary border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
bind:value={selectedTab}
on:change={handleTabChange}
>
@ -70,7 +70,7 @@
>
</div>
</div>
<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-primary">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr
@ -150,7 +150,7 @@
>
</div>
</div>
<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-primary">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr
@ -230,7 +230,7 @@
>
</div>
</div>
<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-primary">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr

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

@ -5,7 +5,7 @@
<div class="sm:col-span-4 flex gap-2 items-center">
<label for="website" class="block text-sm font-medium leading-6 text-gray-900">Zone ID:</label>
<div
class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"
class="flex rounded-primary shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"
>
<input
type="text"
@ -16,7 +16,7 @@
/>
</div>
<button
class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-primary shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Save
</button>

66
apps/front/src/routes/devices/1/add/+page.svelte
View File

@ -7,13 +7,13 @@
<p class="mt-1 text-sm leading-6 text-gray-600">This information will be displayed publicly so be careful what you share.</p>
</div>
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-4">
<label for="website" class="block text-sm font-medium leading-6 text-gray-900">Website</label>
<label for="website" class="label">Website</label>
<div class="mt-2">
<div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
<div class="flex rounded-primary shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
<span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm">http://</span>
<input type="text" name="website" id="website" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="www.example.com">
</div>
@ -21,32 +21,32 @@
</div>
<div class="col-span-full">
<label for="about" class="block text-sm font-medium leading-6 text-gray-900">About</label>
<label for="about" class="label">About</label>
<div class="mt-2">
<textarea id="about" name="about" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
<textarea id="about" name="about" rows="3" class="block w-full rounded-primary border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
</div>
<p class="mt-3 text-sm leading-6 text-gray-600">Write a few sentences about yourself.</p>
</div>
<div class="col-span-full">
<label for="photo" class="block text-sm font-medium leading-6 text-gray-900">Photo</label>
<label for="photo" class="label">Photo</label>
<div class="mt-2 flex items-center gap-x-3">
<svg class="h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
</svg>
<button type="button" class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Change</button>
<button type="button" class="rounded-primary bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Change</button>
</div>
</div>
<div class="col-span-full">
<label for="cover-photo" class="block text-sm font-medium leading-6 text-gray-900">Cover photo</label>
<div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
<label for="cover-photo" class="label">Cover photo</label>
<div class="mt-2 flex justify-center rounded-primary border border-dashed border-gray-900/25 px-6 py-10">
<div class="text-center">
<svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
</svg>
<div class="mt-4 flex text-sm leading-6 text-gray-600">
<label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
<label for="file-upload" class="relative cursor-pointer rounded-primary bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
<span>Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
</label>
@ -60,7 +60,7 @@
</div>
<div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 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">Save</button>
<button type="submit" class="rounded-primary bg-indigo-600 px-3 py-2 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">Save</button>
</div>
</form>
</div>
@ -71,32 +71,32 @@
<p class="mt-1 text-sm leading-6 text-gray-600">Use a permanent address where you can receive mail.</p>
</div>
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">First name</label>
<label for="first-name" class="label">First name</label>
<div class="mt-2">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="input">
</div>
</div>
<div class="sm:col-span-3">
<label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">Last name</label>
<label for="last-name" class="label">Last name</label>
<div class="mt-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="input">
</div>
</div>
<div class="sm:col-span-4">
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
<label for="email" class="label">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input id="email" name="email" type="email" autocomplete="email" class="input">
</div>
</div>
<div class="sm:col-span-4">
<label for="country" class="block text-sm font-medium leading-6 text-gray-900">Country</label>
<label for="country" class="label">Country</label>
<div class="mt-2">
<select id="country" name="country" autocomplete="country-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
<option>United States</option>
@ -107,30 +107,30 @@
</div>
<div class="col-span-full">
<label for="street-address" class="block text-sm font-medium leading-6 text-gray-900">Street address</label>
<label for="street-address" class="label">Street address</label>
<div class="mt-2">
<input type="text" name="street-address" id="street-address" autocomplete="street-address" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="street-address" id="street-address" autocomplete="street-address" class="input">
</div>
</div>
<div class="sm:col-span-2 sm:col-start-1">
<label for="city" class="block text-sm font-medium leading-6 text-gray-900">City</label>
<label for="city" class="label">City</label>
<div class="mt-2">
<input type="text" name="city" id="city" autocomplete="address-level2" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="city" id="city" autocomplete="address-level2" class="input">
</div>
</div>
<div class="sm:col-span-2">
<label for="region" class="block text-sm font-medium leading-6 text-gray-900">State / Province</label>
<label for="region" class="label">State / Province</label>
<div class="mt-2">
<input type="text" name="region" id="region" autocomplete="address-level1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="region" id="region" autocomplete="address-level1" class="input">
</div>
</div>
<div class="sm:col-span-2">
<label for="postal-code" class="block text-sm font-medium leading-6 text-gray-900">ZIP / Postal code</label>
<label for="postal-code" class="label">ZIP / Postal code</label>
<div class="mt-2">
<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code" class="input">
</div>
</div>
</div>
@ -148,7 +148,7 @@
<p class="mt-1 text-sm leading-6 text-gray-600">We'll always let you know about important changes, but you pick what else you want to hear about.</p>
</div>
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="max-w-2xl space-y-10">
<fieldset>
@ -189,23 +189,23 @@
<div class="mt-6 space-y-6">
<div class="flex items-center gap-x-3">
<input id="push-everything" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
<label for="push-everything" class="block text-sm font-medium leading-6 text-gray-900">Everything</label>
<label for="push-everything" class="label">Everything</label>
</div>
<div class="flex items-center gap-x-3">
<input id="push-email" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
<label for="push-email" class="block text-sm font-medium leading-6 text-gray-900">Same as email</label>
<label for="push-email" class="label">Same as email</label>
</div>
<div class="flex items-center gap-x-3">
<input id="push-nothing" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
<label for="push-nothing" class="block text-sm font-medium leading-6 text-gray-900">No push notifications</label>
<label for="push-nothing" class="label">No push notifications</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 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">Save</button>
<button type="button" class="btn text-purple-900">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>

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

@ -6,7 +6,7 @@
<ul
role="list"
class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
>
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
@ -98,7 +98,7 @@
</ul>
<div class="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-primary">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr

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

@ -14,12 +14,12 @@
<section class="space-y-4 lg:space-y-8">
<h1 class="text-xl lg:text-2xl font-medium lg:text-right">Create new zones with edit buttons:</h1>
<div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="flex relative overflow-hidden rounded-primary border border-gray-200 bg-white">
<Map/>
<div class="top-2 absolute bg-white block right-2 rounded-xl shadow z-10">
<div class="top-2 absolute bg-white block right-2 rounded-primary shadow z-10">
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-col gap-0.5">
<button class="btn btn-primary" type="button">

109
apps/front/src/routes/schedule/+page.svelte Normal file
View File

@ -0,0 +1,109 @@
<script lang="ts">
</script>
<section class="space-y-4 lg:space-y-8">
<h1 class="h1">
Schedule
</h1>
<div class="-mx-4 lg:mx-0 overflow-x-auto p-px">
<div class="inline-block min-w-full py-2 align-middle">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 lg:rounded-primary">
<table class="min-w-full divide-y divide-gray-300 text-sm">
<thead class="bg-gray-50 font-medium">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left sm:pl-6">Title</th>
<th scope="col" class="px-3 py-3.5 text-left">Start time</th>
<th scope="col" class="px-3 py-3.5 text-left">End time</th>
<th scope="col" class="px-3 py-3.5 text-left">Status</th>
<th scope="col" class="px-3 py-3.5 text-left">Days of week</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white text-gray-600">
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
</td>
<td class="whitespace-nowrap px-3 py-4">
17:00
</td>
<td class="whitespace-nowrap px-3 py-4">02:00</td>
<td class="whitespace-nowrap px-3 py-4">
<div class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
</td>
</tr>
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
</td>
<td class="whitespace-nowrap px-3 py-4">
17:00
</td>
<td class="whitespace-nowrap px-3 py-4">02:00</td>
<td class="whitespace-nowrap px-3 py-4">
<div class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
</td>
</tr>
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
</td>
<td class="whitespace-nowrap px-3 py-4">
17:00
</td>
<td class="whitespace-nowrap px-3 py-4">02:00</td>
<td class="whitespace-nowrap px-3 py-4">
<div class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
</td>
</tr>
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
</td>
<td class="whitespace-nowrap px-3 py-4">
17:00
</td>
<td class="whitespace-nowrap px-3 py-4">02:00</td>
<td class="whitespace-nowrap px-3 py-4">
<div class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>

67
apps/front/src/routes/schedule/1/edit/+page.svelte Normal file
View File

@ -0,0 +1,67 @@
<script lang="ts">
import ToggleSwitch from "$lib/client/components/toggle.svelte";
import WeekCheckbox from "$lib/client/components/weekCheckbox.svelte";
let statusEnabled: boolean = false;
const handleToggle = (newStatus: boolean) => {
statusEnabled = newStatus;
};
</script>
<section class="space-y-4 lg:space-y-8">
<h1 class="h1">
Edit
</h1>
<div class="space-y-10 divide-y divide-gray-900/10">
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-5">
<label for="first-name" class="label">Name</label>
<div class="mt-2">
<input type="text" name="name" id="name" autocomplete="given-name"
class="input" value="South entrance weekends">
</div>
</div>
<div class="sm:col-span-2 sm:col-start-1">
<label for="startTime" class="label">Start time</label>
<div class="mt-2">
<input type="text" name="startTime" id="startTime" class="input">
</div>
</div>
<div class="sm:col-span-2">
<label for="endTime" class="label">End time</label>
<div class="mt-2">
<input type="text" name="endTime" id="endTime" class="input">
</div>
</div>
<div class="col-span-full flex items-center gap-4">
<label for="status" class="label">Status:</label>
<ToggleSwitch on:toggle={event => handleToggle(event.detail)} />
<span class="label {statusEnabled ? '' : 'text-gray-400'}">{statusEnabled ? 'on' : 'off'}</span>
</div>
<div class="col-span-full">
<label for="street-address" class="label">Days of week</label>
<div class="mt-2">
<WeekCheckbox />
</div>
</div>
</div>
</div>
<div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
<a href="/schedule" class="btn text-purple-600">Cancel</a>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</section>