[TASK] add header and first nested components
This commit is contained in:
Marie Birner
parent
7d1b86cae8
commit
0154158c80
@ -1,28 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { loggedin } from '../store.js';
|
||||
import { user } from '../stores/User.js';
|
||||
import Header from './Header.svelte';
|
||||
import '../app.css';
|
||||
|
||||
const date = new Date();
|
||||
|
||||
let isLoggedIn: Boolean;
|
||||
|
||||
loggedin.subscribe(value => {
|
||||
isLoggedIn = value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div class="bg-gray-100">
|
||||
{#if isLoggedIn}
|
||||
{#if $user.status}
|
||||
<Header />
|
||||
{/if}
|
||||
|
||||
<main class="flex min-h-screen {isLoggedIn ? 'items-start' : 'items-center'} justify-center px-4 py-12 sm:px-6 lg:px-8">
|
||||
<main class="flex min-h-screen { $user.status ? 'items-start' : 'items-center'} justify-center px-4 py-12 sm:px-6 lg:px-8">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
{#if isLoggedIn}
|
||||
{#if $user.status}
|
||||
<footer class="bg-primary-950 text-white w-full flex justify-center p-3">
|
||||
<div class="max-w-screen-xl w-full flex justify-between">
|
||||
<div>
|
||||
|
||||
@ -1,67 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { loggedin } from '../store.js';
|
||||
import welcome from '$lib/images/svelte-welcome.webp';
|
||||
import welcome_fallback from '$lib/images/svelte-welcome.png';
|
||||
import { user } from '../stores/User.js';
|
||||
import Login from './Login.svelte';
|
||||
|
||||
let isLoggedIn: Boolean;
|
||||
|
||||
loggedin.subscribe(value => {
|
||||
isLoggedIn = value;
|
||||
});
|
||||
|
||||
function login() {
|
||||
loggedin.set(true);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
loggedin.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if isLoggedIn}
|
||||
{#if $user.status}
|
||||
<p>Here comes the list</p>
|
||||
<button on:click={logout} class="btn btn-primary">
|
||||
Jetzt ausloggen
|
||||
</button>
|
||||
{:else}
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div>
|
||||
<img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Logo Ruderassistent">
|
||||
<h1 class="mt-6 h1">Ruderassistent</h1>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" method="post" action="/auth">
|
||||
<input type="hidden" name="remember" value="true">
|
||||
<div class="-space-y-px rounded-md shadow-sm">
|
||||
<div>
|
||||
<div>
|
||||
<label for="name" class=" sr-only ">Name</label>
|
||||
<input id="name" name="name" type="input" value="" class="input rounded-t-md" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="password" class=" sr-only ">Passwort</label>
|
||||
<input id="password" name="password" type="password" value="" class="input rounded-b-md" placeholder="Passwort">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button on:click={login} type="submit" class="group relative flex w-full justify-center btn btn-primary">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
Einloggen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<Login/>
|
||||
{/if}
|
||||
|
||||
@ -1,132 +1,37 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import logo from '$lib/images/svelte-logo.svg';
|
||||
import github from '$lib/images/github.svg';
|
||||
import { user } from '../stores/User.js';
|
||||
|
||||
function logout() {
|
||||
$user.status = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="corner">
|
||||
<a href="https://kit.svelte.dev">
|
||||
<img src={logo} alt="SvelteKit" />
|
||||
|
||||
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
|
||||
<div class="max-w-screen-xl w-full flex justify-between items-center">
|
||||
<div>
|
||||
<a href="/">
|
||||
Hü {$user.name}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<svg viewBox="0 0 2 3" aria-hidden="true">
|
||||
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
|
||||
</svg>
|
||||
<ul>
|
||||
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
|
||||
<a href="/sverdle">Sverdle</a>
|
||||
</li>
|
||||
<li aria-current={$page.url.pathname === '/test' ? 'page' : undefined}>
|
||||
<a href="/test">Test</a>
|
||||
</li>
|
||||
</ul>
|
||||
<svg viewBox="0 0 2 3" aria-hidden="true">
|
||||
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
|
||||
</svg>
|
||||
</nav>
|
||||
|
||||
<div class="corner">
|
||||
<a href="https://github.com/sveltejs/kit">
|
||||
<img src={github} alt="GitHub" />
|
||||
<div>
|
||||
<a href="/faq" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
|
||||
<svg class="flex-shrink-0 w-4 h-4 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
|
||||
<span class="sr-only">FAQs</span>
|
||||
</a>
|
||||
{#if $user.isAdmin}
|
||||
<a href="/admin" aria-current={$page.url.pathname === '/admin' ? 'page' : undefined} class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
|
||||
<svg class="inline h-4 bi bi-person-lines-fill" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/> </svg>
|
||||
<span class="sr-only">Userverwaltung</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a href="/" on:click={logout} class="inline-flex justify-center rounded-md bg-primary-600 ml-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
|
||||
<svg class="feather feather-log-out inline h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span class="sr-only">Ausloggen</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.corner {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.corner a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.corner img {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
--background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: var(--background);
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
background: var(--background);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li[aria-current='page']::before {
|
||||
--size: 6px;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - var(--size));
|
||||
border: var(--size) solid transparent;
|
||||
border-top: var(--size) solid var(--color-theme-1);
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 0.5rem;
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s linear;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-theme-1);
|
||||
}
|
||||
</style>
|
||||
<div class="h-8"></div>
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import { user } from '../stores/User.js';
|
||||
|
||||
function login() {
|
||||
$user.status = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div>
|
||||
<img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Logo Ruderassistent">
|
||||
<h1 class="mt-6 h1">Ruderassistent</h1>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" method="post" action="/">
|
||||
<input type="hidden" name="remember" value="true">
|
||||
<div class="-space-y-px rounded-md shadow-sm">
|
||||
<div>
|
||||
<div>
|
||||
<label for="name" class=" sr-only ">Name</label>
|
||||
<input id="name" name="name" type="input" value="" class="input rounded-t-md" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="password" class=" sr-only ">Passwort</label>
|
||||
<input id="password" name="password" type="password" value="" class="input rounded-b-md" placeholder="Passwort">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button on:click={login} type="submit" class="group relative flex w-full justify-center btn btn-primary">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
Einloggen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
26
rot_app/src/routes/admin/+page.svelte
Normal file
26
rot_app/src/routes/admin/+page.svelte
Normal file
@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { user } from '../../stores/User.js';
|
||||
import FAQ from './FAQ.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>FAQ - ASKÖ Ruderverein Donau Linz</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="max-w-screen-lg w-full">
|
||||
<h1 class="h1">FAQs</h1>
|
||||
|
||||
<div class="grid pt-8 text-left gap-10">
|
||||
|
||||
{#if $user.isCox}
|
||||
<FAQ
|
||||
question={'Wie kann ich eine erstellte Ausfahrt absagen?'}
|
||||
answer={'Du kannst bei deinen selbst angelegten Ausfahrten auf Details klicken und hier unter Ausfahrt bearbeiten die <strong>Anzahl der Ruderer auf 0 setzen</strong>. Danach wird die Ausfahrt als abgesagt markiert. Bedenke allerdings, dass dadurch nicht automatisch alle Mitruderer informiert werden. Bitte zusätzlich in die Signal Gruppe schreiben oder den Betroffenen persönlich Bescheid geben.'} />
|
||||
{/if}
|
||||
|
||||
<FAQ
|
||||
question={'Wie kann ich eine erstellte Ausfahrt absagen?'}
|
||||
answer={'Du kannst bei deinen selbst angelegten Ausfahrten auf Details klicken und hier unter Ausfahrt bearbeiten die <strong>Anzahl der Ruderer auf 0 setzen</strong>. Danach wird die Ausfahrt als abgesagt markiert. Bedenke allerdings, dass dadurch nicht automatisch alle Mitruderer informiert werden. Bitte zusätzlich in die Signal Gruppe schreiben oder den Betroffenen persönlich Bescheid geben.'} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
9
rot_app/src/routes/admin/+page.ts
Normal file
9
rot_app/src/routes/admin/+page.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
// we don't need any JS on this page, though we'll load
|
||||
// it in dev so that we get hot module replacement
|
||||
export const csr = dev;
|
||||
|
||||
// since there's no dynamic data here, we can prerender
|
||||
// it so that it gets served as a static asset in production
|
||||
export const prerender = true;
|
||||
11
rot_app/src/routes/admin/FAQ.svelte
Normal file
11
rot_app/src/routes/admin/FAQ.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let question: string;
|
||||
export let answer: string;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h2 class="flex mb-4 text-lg font-bold text-primary-900">
|
||||
{@html question }
|
||||
</h2>
|
||||
<p class="text-primary-950">{@html answer }</p>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const loggedin = writable(false);
|
||||
8
rot_app/src/stores/User.js
Normal file
8
rot_app/src/stores/User.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const user = writable({
|
||||
status: false,
|
||||
isAdmin: true,
|
||||
isCox: false,
|
||||
name: 'Marie Birner'
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user