diff --git a/README.md b/README.md index 536792da..ed90b0fb 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Invictus Bier Systeem is _het_ websysteem voor O.D.D. Invictus. ## Ontwikkelen -IBS3 gebruikt node 22.4.0 +IBS3 gebruikt node 22.11.0 Om te beginnen met ontwikkelen moet je eerst de repository clonen met diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 818c0a37..1f0548e0 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -96,6 +96,8 @@ model User { File File[] AccessToken AccessToken[] Activity Activity[] + + FrontPageItem FrontPageItem[] } model Account { @@ -915,6 +917,8 @@ model File { Photo Photo[] Journal Journal? @relation(fields: [journalId], references: [id]) journalId Int? + + FrontPageImage FrontPageItem[] } // @@ -933,3 +937,31 @@ model Job { completedAt DateTime? result String? } + +// +// Dit moet natuurlijk in de database +// +model FrontPageItem { + id Int @id @default(autoincrement()) + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + // HTML ID waar deze foto komt + key String + // Titel (staat bij een foto) + // bijv. Lichting 1 + title String + // Bijbehordende beschrijving + description String + visible Boolean @default(false) + + // verwijst dit item naar een andere pagina? + link String? + + changedBy User? @relation(fields: [userId], references: [id], onDelete: NoAction) + userId Int? + + // Photo + file File @relation(fields: [fileId], references: [id], onDelete: Cascade) + fileId String +} diff --git a/src/lib/server/auth/authorization.ts b/src/lib/server/auth/authorization.ts index 6e69448e..6d5c4631 100644 --- a/src/lib/server/auth/authorization.ts +++ b/src/lib/server/auth/authorization.ts @@ -38,11 +38,11 @@ const handleAuthorization = (async ({ event, resolve }) => { if (event.route.id?.includes('(public)')) { // Resolve normally return await resolve(event) - } else if (!url.startsWith('/auth')) { + } else if (!url.startsWith('/home') || !url.startsWith('/auth')) { // If the path is something other than /auth, check if the user is logged in if (!user) { - return redirect(303, '/auth') + return redirect(303, '/home') } if (user.accessDisabled) { diff --git a/src/lib/server/auth/index.ts b/src/lib/server/auth/index.ts index 04c43783..b9a7a884 100644 --- a/src/lib/server/auth/index.ts +++ b/src/lib/server/auth/index.ts @@ -32,11 +32,8 @@ const { }, callbacks: { async redirect({ url, baseUrl }) { - if (url.startsWith('/auth')) { - throw redirect(303, '/') - } - - return baseUrl + // Redirect to / after signin + return '/' }, }, }) diff --git a/src/lib/server/settings/settings.ts b/src/lib/server/settings/settings.ts index 735a58e3..a9515f7c 100644 --- a/src/lib/server/settings/settings.ts +++ b/src/lib/server/settings/settings.ts @@ -25,6 +25,7 @@ export enum Setting { DEFAULT_SALE_FOOD_LEDGER = 'DEFAULT_SALE_FOOD_LEDGER', DEFAULT_SALE_OTHER_LEDGER = 'DEFAULT_SALE_OTHER_LEDGER', STRAFBAKKEN_VERDUBBELAAR_ENABLED = 'STRAFBAKKEN_VERDUBBELAAR_ENABLED', + DESCRIPTION_INVICTUS = 'DESCRIPTION_INVICTUS', } export const settings = { diff --git a/src/routes/(app)/activiteit/nieuw/+page.server.ts b/src/routes/(app)/activiteit/nieuw/+page.server.ts index 2ca23600..3cf2c55a 100644 --- a/src/routes/(app)/activiteit/nieuw/+page.server.ts +++ b/src/routes/(app)/activiteit/nieuw/+page.server.ts @@ -239,23 +239,6 @@ export const actions = { if (image.size > 0) { const filename = await uploadPhoto(image, event.locals.user, false) - // const buf = Buffer.from(await image.arrayBuffer()) - - // const photo = await uploadPhoto( - // { - // creator, - // uploader: event.locals.user, - // runProcessingJob: false, - // additionalName: 'Activiteit', - // invisible: true, - // upload: { - // buf, - // filename: image.name, - // }, - // }, - // tx, - // ) - await tx.activity.update({ where: { id: activity.id, diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte index a8d33e2f..7bd8f8fb 100644 --- a/src/routes/(app)/admin/+page.svelte +++ b/src/routes/(app)/admin/+page.svelte @@ -9,6 +9,7 @@ import TablerFiles from '~icons/tabler/files' import TablerAdjustmentsCog from '~icons/tabler/adjustments-cog' import TablerListNumbers from '~icons/tabler/list-numbers' + import TablerHome from '~icons/tabler/home' import TablerBeer from '~icons/tabler/beer' import TablerBackhoe from '~icons/tabler/backhoe' import { toast } from '$lib/notification' @@ -53,6 +54,16 @@ + + + + + + + Verander publieke homepage + + + diff --git a/src/routes/(app)/admin/home/+page.server.ts b/src/routes/(app)/admin/home/+page.server.ts new file mode 100644 index 00000000..03434ece --- /dev/null +++ b/src/routes/(app)/admin/home/+page.server.ts @@ -0,0 +1,10 @@ +import type { PageServerLoad } from './$types' +import db from '$lib/server/db' +import { Setting, settings } from '$lib/server/settings' + +export const load = (async () => { + const photos = await db.frontPageItem.findMany() + const description = settings.get(Setting.DESCRIPTION_INVICTUS) + + return { photos, description } +}) satisfies PageServerLoad diff --git a/src/routes/(app)/admin/home/+page.svelte b/src/routes/(app)/admin/home/+page.svelte new file mode 100644 index 00000000..891b5c15 --- /dev/null +++ b/src/routes/(app)/admin/home/+page.svelte @@ -0,0 +1,24 @@ + + + + +<h2>Groepsfoto</h2> + +<hr /> + +<h2>Tijdelijke foto</h2> + +<hr /> + +<h2>Omschrijving Invictus</h2> + +<hr /> + +<h2>Lichtingen</h2> + +<hr /> diff --git a/src/routes/(app)/admin/home/+server.ts b/src/routes/(app)/admin/home/+server.ts new file mode 100644 index 00000000..40a03e73 --- /dev/null +++ b/src/routes/(app)/admin/home/+server.ts @@ -0,0 +1,5 @@ +import type { RequestHandler } from './$types' + +export const GET: RequestHandler = async () => { + return new Response() +} diff --git a/src/routes/(public)/home/+page.server.ts b/src/routes/(public)/home/+page.server.ts new file mode 100644 index 00000000..1b49c513 --- /dev/null +++ b/src/routes/(public)/home/+page.server.ts @@ -0,0 +1,23 @@ +import db from '$lib/server/db' +import type { PageServerLoad } from './$types' + +export const load = (async ({ locals }) => { + const name = locals.user?.firstName ?? null + + const photos = await db.frontPageItem.findMany({ + where: { + visible: true, + }, + }) + + const temp = photos.find(p => p.key === 'temp') + const group = photos.find(p => p.key === 'group') + const lichtingen = photos.find(p => p.key.includes('lichting')) + + return { + name, + group, + lichtingen, + temp, + } +}) satisfies PageServerLoad diff --git a/src/routes/(public)/home/+page.svelte b/src/routes/(public)/home/+page.svelte new file mode 100644 index 00000000..ed7a9491 --- /dev/null +++ b/src/routes/(public)/home/+page.svelte @@ -0,0 +1,277 @@ +<script lang="ts"> + import { signIn } from '@auth/sveltekit/client' + import MoveDown from '~icons/tabler/circle-arrow-down' + import MoveUp from '~icons/tabler/circle-arrow-up' + import type { PageData } from './$types' + import { onMount } from 'svelte' + + export let data: PageData + + let currentElem = 0 + const elements = ['main', 'temp', 'group', 'lichtingen', 'contact'] + + function scroll() { + const scrollButton = document.querySelector('.scroll') + currentElem++ + + console.log(scrollButton) + + scrollButton?.classList.remove('rotate') + + if (currentElem > elements.length - 1) { + currentElem = 0 + } else if (currentElem > elements.length - 2) { + scrollButton?.classList.add('rotate') + } + + console.log('huts', elements[currentElem]) + const elem = document.querySelector(`#${elements[currentElem]}`) + + console.log(elem) + elem?.scrollIntoView() + } + + function login() { + if (data.name) { + window.location.href = '/' + } else { + signIn('authentik') + } + } + + function getPhoto(photo) {} +</script> + +<!-- heerlijke hack --> +<!-- de laatste css regel die geladen wordt is een display:none, die haalt dit weg --> +<!-- Voorkomt een content flash --> +<div id="overlay" style="position:absolute;top:0px;left:0px;background-color:#551b8a;width:100vw;height:100vh;z-index:9999;"></div> + +<main> + <section class="center first" id="main"> + <img src="logo.png" alt="invictus logo" /> + <button on:click={login}> + {data.name ? `Welkom, ${data.name}` : 'Login'} + </button> + <div class="text"> + <h1>Wij zijn O.D.D. Invictus</h1> + <h3>Onafhankelijk dispuut uit Enschede</h3> + </div> + + <div class="scroll" role="button" aria-pressed="false" tabindex={0} on:click={scroll}> + <i> + {#if currentElem < elements.length - 1} + <MoveDown /> + {:else} + <MoveUp /> + {/if} + </i> + </div> + </section> + + <div class="rest"> + {#if data.temp} + <section id="temp"> + <img src="no-activity.jpeg" alt="invictus logo" /> + Temp + </section> + {/if} + + <section id="group"> + <img src="no-activity.jpeg" alt="invictus logo" /> + Groep + </section> + + <section id="lichtingen"> + <img src="no-birthday.jpeg" alt="invictus logo" /> + lichtingen + </section> + + <section id="contact"> + <img src="logo_griffin.svg" alt="invictus logo" /> + deze zo van de zijkant is nice Contact + </section> + </div> +</main> + +<style lang="scss"> + $scroll-btn-size: 3rem; + $anim-h1-time: 2s; + $anim-h3-time: 3s; + $anim-scroll-delay: 4s; + + :root { + width: 100vw; + height: auto; + + scroll-snap-type: y mandatory; + scroll-behavior: smooth; + + overflow-y: auto; + } + + main { + height: 100%; + width: 100%; + color: var(--color-text-light); + + h1, + h3 { + color: var(--color-text-light); + } + } + + .rest { + background: rgb(85, 27, 138); + background: linear-gradient(180deg, rgba(85, 27, 138, 1) 0%, rgba(85, 27, 138, 0.8) 100%); + } + + section { + scroll-snap-align: start; + } + + section.first { + height: 100vh; + background: rgb(85, 27, 138); + + & > .text { + display: flex; + flex-direction: column; + + h1, + h3 { + overflow: hidden; + white-space: nowrap; + margin: 0 auto; + } + + h1 { + animation: scroll $anim-h1-time; + } + + h3 { + animation: scroll-later $anim-h3-time; + } + } + + & > button { + all: unset; + + cursor: pointer; + + background-color: white; + color: var(--color-text); + padding: 1rem; + + border-radius: var(--border-radius); + + position: absolute; + top: 20px; + right: 20px; + } + + & > .scroll { + position: fixed; + bottom: 1rem; + color: white; + + animation: bounce 0.5s; + animation-delay: $anim-scroll-delay; + animation-iteration-count: 1; + + &:hover { + color: rgb(224, 191, 255); + } + + i:hover { + cursor: pointer; + } + + i :global(svg) { + width: $scroll-btn-size; + height: $scroll-btn-size; + } + } + + h1 { + font-size: xxx-large; + } + + h3 { + font-size: x-large; + } + } + + .rotate { + animation: rotate 0.5s !important; + color: red !important; + } + + .rotate:hover { + color: red; + } + + @keyframes bounce { + 0% { + transform: translateY(0px); + } + + 25% { + transform: translateY(-10px); + } + + 75% { + transform: translateY(10px); + } + + 100% { + transform: translateY(0px); + } + } + + @keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } + } + + @keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } + } + + @keyframes scroll { + from { + transform: translateX(50vw); + } + to { + transform: translate(0); + } + } + + @keyframes scroll-later { + 0% { + transform: translateX(50vw); + } + + 25% { + transform: translateX(50vw); + } + + 100% { + transform: translate(0); + } + } + + #overlay { + display: none; + } +</style> diff --git a/src/routes/(public)/home/+page.ts b/src/routes/(public)/home/+page.ts new file mode 100644 index 00000000..b82babe8 --- /dev/null +++ b/src/routes/(public)/home/+page.ts @@ -0,0 +1,2 @@ +export const prerender = true +export const csr = true