From 7d1b86cae8c38b1b23a98dc6b3ae582b224abbbe Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 16 Jun 2023 22:18:50 +0200
Subject: [PATCH 1/3] [TASK] add 'fancy' login

---
 rot_app/src/app.css               |  8 +++++
 rot_app/src/routes/+layout.svelte |  2 +-
 rot_app/src/routes/+page.svelte   | 50 +++++++++++++++++++++----------
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/rot_app/src/app.css b/rot_app/src/app.css
index fea01ad..277ef83 100644
--- a/rot_app/src/app.css
+++ b/rot_app/src/app.css
@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+h1 {
+  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
+}
+
+.input {
+  @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
+}
+
 .btn {
   @apply inline-block rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
 
diff --git a/rot_app/src/routes/+layout.svelte b/rot_app/src/routes/+layout.svelte
index 8278aff..0dc2352 100644
--- a/rot_app/src/routes/+layout.svelte
+++ b/rot_app/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
     <Header />
   {/if}
 
-	<main class="flex min-h-screen {isLoggedIn ? 'items-center' : 'items-start'} justify-center px-4 py-12 sm:px-6 lg:px-8">
+	<main class="flex min-h-screen {isLoggedIn ? 'items-start' : 'items-center'} justify-center px-4 py-12 sm:px-6 lg:px-8">
 		<slot />
 	</main>
 
diff --git a/rot_app/src/routes/+page.svelte b/rot_app/src/routes/+page.svelte
index 5aba0ff..1477ed0 100644
--- a/rot_app/src/routes/+page.svelte
+++ b/rot_app/src/routes/+page.svelte
@@ -23,25 +23,45 @@
 	<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
 </svelte:head>
 
-<section>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
-			</picture>
-		</span>
-	</h1>
-
   {#if isLoggedIn}
     <p>Here comes the list</p>
     <button on:click={logout} class="btn btn-primary">
       Jetzt ausloggen
     </button>
   {:else}
-    <p>Login</p>
-    <button on:click={login} class="btn btn-primary">
-      Jetzt einloggen
-    </button>
+  <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>
   {/if}
-</section>

From 0154158c80a6a0d18fa073458b00f4fa93f7fcca Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 16 Jun 2023 23:24:44 +0200
Subject: [PATCH 2/3] [TASK] add header and first nested components

---
 rot_app/src/routes/+layout.svelte     |  14 +--
 rot_app/src/routes/+page.svelte       |  59 +---------
 rot_app/src/routes/Header.svelte      | 159 ++++++--------------------
 rot_app/src/routes/Login.svelte       |  43 +++++++
 rot_app/src/routes/admin/+page.svelte |  26 +++++
 rot_app/src/routes/admin/+page.ts     |   9 ++
 rot_app/src/routes/admin/FAQ.svelte   |  11 ++
 rot_app/src/store.js                  |   3 -
 rot_app/src/stores/User.js            |   8 ++
 9 files changed, 136 insertions(+), 196 deletions(-)
 create mode 100644 rot_app/src/routes/admin/+page.svelte
 create mode 100644 rot_app/src/routes/admin/+page.ts
 create mode 100644 rot_app/src/routes/admin/FAQ.svelte
 delete mode 100644 rot_app/src/store.js
 create mode 100644 rot_app/src/stores/User.js

diff --git a/rot_app/src/routes/+layout.svelte b/rot_app/src/routes/+layout.svelte
index 0dc2352..89ff3fd 100644
--- a/rot_app/src/routes/+layout.svelte
+++ b/rot_app/src/routes/+layout.svelte
@@ -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>
diff --git a/rot_app/src/routes/+page.svelte b/rot_app/src/routes/+page.svelte
index 1477ed0..7d30cd9 100644
--- a/rot_app/src/routes/+page.svelte
+++ b/rot_app/src/routes/+page.svelte
@@ -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}
diff --git a/rot_app/src/routes/Header.svelte b/rot_app/src/routes/Header.svelte
index 3c7a0a1..823ef50 100644
--- a/rot_app/src/routes/Header.svelte
+++ b/rot_app/src/routes/Header.svelte
@@ -1,132 +1,37 @@
-<script>
-	import { page } from '$app/stores';
-	import logo from '$lib/images/svelte-logo.svg';
-	import github from '$lib/images/github.svg';
+<script lang="ts">
+  import { page } from '$app/stores';
+  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" />
-		</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>
+<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>
 
-	<div class="corner">
-		<a href="https://github.com/sveltejs/kit">
-			<img src={github} alt="GitHub" />
-		</a>
-	</div>
+    <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>
diff --git a/rot_app/src/routes/Login.svelte b/rot_app/src/routes/Login.svelte
index e69de29..77b7246 100644
--- a/rot_app/src/routes/Login.svelte
+++ b/rot_app/src/routes/Login.svelte
@@ -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>
\ No newline at end of file
diff --git a/rot_app/src/routes/admin/+page.svelte b/rot_app/src/routes/admin/+page.svelte
new file mode 100644
index 0000000..7fc4384
--- /dev/null
+++ b/rot_app/src/routes/admin/+page.svelte
@@ -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>
\ No newline at end of file
diff --git a/rot_app/src/routes/admin/+page.ts b/rot_app/src/routes/admin/+page.ts
new file mode 100644
index 0000000..e739ef4
--- /dev/null
+++ b/rot_app/src/routes/admin/+page.ts
@@ -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;
diff --git a/rot_app/src/routes/admin/FAQ.svelte b/rot_app/src/routes/admin/FAQ.svelte
new file mode 100644
index 0000000..a036ac3
--- /dev/null
+++ b/rot_app/src/routes/admin/FAQ.svelte
@@ -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>
diff --git a/rot_app/src/store.js b/rot_app/src/store.js
deleted file mode 100644
index 25396ad..0000000
--- a/rot_app/src/store.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const loggedin = writable(false);
\ No newline at end of file
diff --git a/rot_app/src/stores/User.js b/rot_app/src/stores/User.js
new file mode 100644
index 0000000..6317fed
--- /dev/null
+++ b/rot_app/src/stores/User.js
@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+export const user = writable({
+  status: false,
+  isAdmin: true,
+  isCox: false,
+  name: 'Marie Birner'
+});
\ No newline at end of file

From 59636b513d8ce814fb64546d90e3ff0f698f0e5a Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sat, 17 Jun 2023 21:01:58 +0200
Subject: [PATCH 3/3] [TASK] delete FAQ page in admin route

---
 rot_app/src/routes/admin/FAQ.svelte | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 rot_app/src/routes/admin/FAQ.svelte

diff --git a/rot_app/src/routes/admin/FAQ.svelte b/rot_app/src/routes/admin/FAQ.svelte
deleted file mode 100644
index a036ac3..0000000
--- a/rot_app/src/routes/admin/FAQ.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<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>