From b752a3d048a0f4c3e51de1c6894846a691be2eb2 Mon Sep 17 00:00:00 2001 From: Eirene Date: Mon, 29 Jul 2024 00:55:16 +0800 Subject: [PATCH] ui: add pageSchedule Edit --- apps/front/src/app.css | 54 +++++---- .../components/icons/calendarDays.svelte | 4 + .../src/lib/client/components/icons/index.ts | 1 + .../src/lib/client/components/login.svelte | 2 +- .../src/lib/client/components/nav.svelte | 15 +-- .../src/lib/client/components/table.svelte | 8 +- .../src/lib/client/components/toggle.svelte | 7 +- .../lib/client/components/weekCheckbox.svelte | 2 + apps/front/src/routes/+layout.svelte | 12 +- apps/front/src/routes/+page.svelte | 6 +- apps/front/src/routes/devices/+page.svelte | 8 +- apps/front/src/routes/devices/1/+page.svelte | 4 +- .../src/routes/devices/1/add/+page.svelte | 66 +++++------ apps/front/src/routes/fault/+page.svelte | 4 +- apps/front/src/routes/map/+page.svelte | 4 +- apps/front/src/routes/schedule/+page.svelte | 109 ++++++++++++++++++ .../src/routes/schedule/1/edit/+page.svelte | 67 +++++++++++ 17 files changed, 283 insertions(+), 90 deletions(-) create mode 100644 apps/front/src/lib/client/components/icons/calendarDays.svelte create mode 100644 apps/front/src/lib/client/components/weekCheckbox.svelte create mode 100644 apps/front/src/routes/schedule/+page.svelte create mode 100644 apps/front/src/routes/schedule/1/edit/+page.svelte diff --git a/apps/front/src/app.css b/apps/front/src/app.css index 102cdcf..7b34a5c 100644 --- a/apps/front/src/app.css +++ b/apps/front/src/app.css @@ -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; } } diff --git a/apps/front/src/lib/client/components/icons/calendarDays.svelte b/apps/front/src/lib/client/components/icons/calendarDays.svelte new file mode 100644 index 0000000..ba92527 --- /dev/null +++ b/apps/front/src/lib/client/components/icons/calendarDays.svelte @@ -0,0 +1,4 @@ + + + diff --git a/apps/front/src/lib/client/components/icons/index.ts b/apps/front/src/lib/client/components/icons/index.ts index 0b4aa1f..3e7d1b7 100644 --- a/apps/front/src/lib/client/components/icons/index.ts +++ b/apps/front/src/lib/client/components/icons/index.ts @@ -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'; diff --git a/apps/front/src/lib/client/components/login.svelte b/apps/front/src/lib/client/components/login.svelte index cefb0e1..37ee583 100644 --- a/apps/front/src/lib/client/components/login.svelte +++ b/apps/front/src/lib/client/components/login.svelte @@ -7,7 +7,7 @@

Sign in to your account

-
+
diff --git a/apps/front/src/lib/client/components/nav.svelte b/apps/front/src/lib/client/components/nav.svelte index c80b6f4..28ae5a8 100644 --- a/apps/front/src/lib/client/components/nav.svelte +++ b/apps/front/src/lib/client/components/nav.svelte @@ -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';
- Your Company -

GB Lux

+

GB Lux