upadetd forms and image upload, added mermaid readme

README.md

@@ -1,38 +1,7 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+```mermaid
+  graph TD;
+      A-->B;
+      A-->C;
+      B-->D;
+      C-->D;
+```

src/lib/components/AddEvent.svelte

@@ -9,7 +9,7 @@
 
 <div>
     <h3>Neues Event</h3>
-    <form action="createEvent" method="POST">
+    <form action="?/createEvent" method="POST">
         <Input name="opponent" bind:value={opponent} label="Gegnerisches Team" data={teamArr} iconPath="/team.svg" />
         <Input
             bind:value={opponent}
@@ -19,7 +19,7 @@
         />
         <Input bind:value={gameDate} name="gameDay" iconPath="/calendar.svg" label="Spieltag" type="date" />
         <Input bind:value={gameTime} name="gameTime" iconPath="/time.svg" label="Spielzeit" type="time" />
-        <input formaction="?/delete" type="submit" value="Delete" />
-        <input formaction="?/createEvent" type="submit" value="Veröffentlichen" />
+        <!-- <input formaction="?/delete" type="submit" value="Delete" /> -->
+        <Input type="submit" value="Veröffentlichen" />
     </form>
 </div>

src/lib/components/AddSponsor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Input from '$lib/components/forms/Input.svelte';
+	let url: string;
+</script>
+
+<div>
+	<form action="?/createSponsor" method="post" enctype="multipart/form-data">
+		<Input label="Sponsorname" />
+		<Input bind:value={url} name="sponsorLogo" type="file" accept="image/*" />
+		<Input type="submit" value="Sponsor erstellen" />
+	</form>
+</div>
+
+<style>
+	
+</style>

src/lib/components/AddTeam.svelte

@@ -1,67 +1,28 @@
 <script lang="ts">
 	import Input from '$lib/components/forms/Input.svelte';
-    import { createEventDispatcher } from 'svelte';
-    import { supabase } from '$lib/supabase';
+	import { createEventDispatcher } from 'svelte';
+	import { supabase } from '$lib/supabase';
 	const dispatch = createEventDispatcher();
 
-	let files: FileList;
-
 	// Sportart
 	// Geschlecht
 	// Altersgruppe
 	// Liga
 	let url: string;
-	let uploading = false;
-	const uploadLogo = async () => {
-        console.log("trying to upload")
-		try {
-			uploading = true;
-
-			if (!files || files.length === 0) {
-				throw new Error('You must select an image to upload.');
-			}
-
-			const file = files[0];
-			const fileExt = file.name.split('.').pop();
-			url = `${Math.random()}.${fileExt}`;
-
-			let { error } = await supabase.storage.from('clubs/logos').upload(url, file);
-
-			if (error) {
-				throw error;
-			}
-
-			dispatch('upload');
-		} catch (error) {
-			if (error instanceof Error) {
-				alert(error.message);
-			}
-		} finally {
-			uploading = false;
-		}
-	};
 </script>
 
 <div>
-	<form action="?/createTeam" method="post">
-		<Input label="Wie heißt dein Team?" />
+	<form action="?/createTeam" method="post" enctype="multipart/form-data">
+		<Input name="teamName" label="Wie heißt dein Team?" />
 		<Input name="sportArt" label="Welche Sportart übt dein Team aus?" />
 		<Input name="geschlecht" type="radio" label="Wähle das Geschlecht des Teams: " />
 		<Input name="altersgruppe" label="Altersgruppe" />
 		<!-- 		<Input bind:files name="clubLogo" type="file" label="Lade euer Vereinslogo hoch" />
  -->
-		<label class="button primary block" for="oneLogo">
-			{uploading ? 'Uploading ...' : 'Upload'}
-		</label>
-		<input
-			type="file"
-			id="oneLogo"
-			accept="image/*"
-			bind:files
-			on:change={uploadLogo}
-			disabled={uploading}
-		/>
-		<input type="submit" value="Team erstellen" />
+
+		<input name="truePath" bind:value={url} hidden />
+		<Input bind:value={url} name="teamLogoPath" type="file" accept="image/*" />
+		<Input type="submit" value="Team erstellen" />
 	</form>
 </div>
 

src/lib/components/AdminSidebar.svelte

@@ -2,15 +2,13 @@
     import MenuLinks from "./MenuLinks.svelte";
     import Logo from './Logo.svelte'
 </script>
-
 <div class="dashboardSidebar">
     <div class="logoSidebar">
         <Logo/>
     </div>
     <div class="sidebarLinks">
         <MenuLinks class="sidebar-item"/>
     </div>
-
 </div>
 
 <style>
@@ -43,4 +41,5 @@
         color: #f2f2f2 !important;
         text-decoration: none;
     }
+    
 </style>

src/lib/components/EventsOverviewSingle.svelte

@@ -4,9 +4,10 @@
     export let startingTime="";
 
     let fullDate = new Date(startingTime)
-    let date = fullDate.getDate() + "." +  fullDate.getMonth() + "." + fullDate.getFullYear()
-    let time = fullDate.getHours() + ":" + "" + (((fullDate.getMinutes() + "").length === 1) ? (fullDate.getMinutes() + "0") : (fullDate.getMinutes())) 
 
+    let date = ("0" + fullDate.getDate()).slice(-2) + "." + ("0" + fullDate.getMonth()).slice(-2) + "." + fullDate.getFullYear()
+    let time = fullDate.getHours() + ":" + "" + (((fullDate.getMinutes() + "").length === 1) ? (fullDate.getMinutes() + "0") : (fullDate.getMinutes())) 
+	
     // for accordion
 	import { slide } from 'svelte/transition';
 	let isOpen = false;
@@ -27,10 +28,7 @@
         </div>
         <div class="event-details">
             <div class="game-date">
-                <p>{date}</p>
-            </div>
-            <div class="game-time">
-                <p>{time}</p>
+                <p>{date} - {time}</p>
             </div>
         </div>
         <button class="toggleButton" on:click={toggle} aria-expanded={isOpen}>

src/lib/components/SponsorOverview.svelte

@@ -0,0 +1,4 @@
+<div>
+    <h2>Unsere Sponsoren</h2>
+
+</div>

src/lib/components/forms/AutoCompleteInput.svelte

@@ -22,10 +22,10 @@
 
 		let storageArr = [];
 		// only shows events when input is not empty
-		if (inputValue) {
+		if (value) {
 			data.forEach((element) => {
 				// switch to includes when it should match by search
-				if (element.toLowerCase().startsWith(inputValue.toLowerCase())) {
+				if (element.toLowerCase().startsWith(value.toLowerCase())) {
 					storageArr = [...storageArr, makeMatchBold(element)];
 				}
 			});
@@ -34,29 +34,23 @@
 	};
 
 	let searchInput;
-	let inputValue = '';
+	
 
-	$: if (!inputValue) {
+	$: if (!value) {
 		filteredElements = [];
 		hiLiteIndex = null;
 	}
 
-	const clearInput = () => {
-		inputValue = '';
-		searchInput.focus();
-	};
-
 	const setInputVal = (elementName) => {
-		inputValue = removeBold(elementName);
+		value = removeBold(elementName);
 		filteredElements = [];
 		hiLiteIndex = null;
-		value = inputValue;
 		document.querySelector('#element-input').focus();
 	};
 
 	const makeMatchBold = (str) => {
 		// replace part of (country name === inputValue) with strong tags
-		let matched = str.substring(0, inputValue.length);
+		let matched = str.substring(0, value.length);
 		let makeBold = `<strong>${matched}</strong>`;
 		let boldedMatch = str.replace(matched, makeBold);
 		return boldedMatch;
@@ -94,8 +88,9 @@
 			id="element-input"
 			{name}
 			type="text"
+			{placeholder}
 			bind:this={searchInput}
-			bind:value={inputValue}
+			bind:value={value}
 			on:change={handleInput}
 			on:input={filterElements}
 			on:submit={handleInput}

src/lib/components/forms/Input.svelte

@@ -10,7 +10,7 @@
 	export let type = "";
 	export let id = "";
 	export let data = [];
-	
+	export let accept= "";
 
 	let iconPadding = iconPath !== '' ? "iconExists" : "noIconExists" ;
 	let normalOrRadio = type === "radio" ? "radio" : "input";
@@ -38,8 +38,8 @@
 
 		{:else if type === 'time'}
 			<DateAndTime name={name} type="time" bind:value />
-		<!-- {:else if type === 'file'}
-		<input bind:files {id} {name} type="file" {placeholder} on:change={handleInput} on:input={handleInput} /> -->
+		{:else if type === 'file'}
+			<input {id} {name} type="file" accept={accept} bind:value on:change={handleInput} on:input={handleInput} /> 
 		{:else if type === 'radio'} 
 			<fieldset>
 				<input type="radio" id="mc" name="Geschlecht" value="Herren">
@@ -49,6 +49,8 @@
 				<input type="radio" id="ae" name="Geschlecht" value="AmericanExpress">
 				<label for="ae"> Divers</label> 
 			</fieldset>
+		{:else if type === "submit"}
+			<input type="submit" {value}/>
 		{:else}
 			<input {id} {name} {type} {placeholder} on:change={handleInput} on:input={handleInput} />
 		{/if}
@@ -112,4 +114,18 @@
 	:global(.noIconExists input) {
 		padding: 6px 3px 6px 10px;
 	}
+	input[type='file']::file-selector-button {
+		margin-right: 20px;
+		border: none;
+		background: #084cdf;
+		padding: 10px 20px;
+		border-radius: 10px;
+		color: #fff;
+		cursor: pointer;
+		transition: background 0.2s ease-in-out;
+	}
+
+	input[type='file']::file-selector-button:hover {
+		background: #0d45a5;
+	}
 </style>

src/routes/+layout.svelte

@@ -42,10 +42,13 @@
 	}
 	.mainPage {
 		width: 100%;
+		margin-left: 20%;
 	}
 	.adminsidebar-Wrapper {
 		width: 20%;
 		height: 100vh;
+		position: fixed;
+		
 	}
 
 	@media (max-width: 768px) {