Appointment creator added missing inputs and set time and date formatting to locale

src/lib/dbdata.ts

@@ -53,6 +53,13 @@ export interface DynamicJson {
 
 export interface AppointmentBooking {
     appointment: string;
-    time: Date;
+    time: string;
     inputs: DynamicJson[];
+}
+
+export interface WeekSelection {
+    week: number;
+    yearWeek: number;
+    start: Date;
+    end: Date;
 }

src/lib/funcs.ts

@@ -1,5 +1,5 @@
 import moment from "moment";
-import type { AppointmentTimes } from "./dbdata";
+import type { AppointmentTimes, WeekSelection } from "./dbdata";
 import { goto } from "$app/navigation";
 
 export function isSameDate(dateA: Date, dateB: Date) {
@@ -9,12 +9,12 @@ export function isSameDate(dateA: Date, dateB: Date) {
     return date1 === date2;
 }
 
-export function extractTime(date: Date): string {
-    return moment(date).format("HH:mm");
+export function extractTime(date: string): string {
+    return new Date(date).toLocaleTimeString();
 }
 
-export function extractDate(date: Date): string {
-    return moment(date).format("DD.MM.YYYY");
+export function extractDate(date: string): string {
+    return new Date(date).toLocaleDateString();
 }
 
 export function getTimeSlots(startDate: string, startTime: string, endTime: string, intervalMinutes: number = 15): AppointmentTimes[] {
@@ -49,4 +49,23 @@ export async function authFetch(input: RequestInfo | URL, init?: RequestInit): P
         throw new Error("Unauthorized");
     }
     return response;
+}
+
+export function generateDateArray(weeks: number): WeekSelection[] {
+    const result: WeekSelection[] = [];
+    
+    // Get the start of the current week
+    let currentDate = moment().startOf("isoWeek");
+
+    for (let i = 0; i < weeks; i++) {
+        result.push({
+            yearWeek: parseInt(currentDate.format("YYYYWW"), 10),
+            week: parseInt(currentDate.format("WW"), 10),
+            start: currentDate.toDate(),
+            end: currentDate.endOf("isoWeek").toDate()
+        });
+        currentDate.add(1, "week"); // Move to the next week
+    }
+
+    return result;
 }

src/lib/modules/CreatorBaseInputs.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+	import type { WeekSelection } from "$lib/dbdata";
+
     export let topic: string;
     export let location: string;
     export let selectedWeek: number;
     export let duration: number;
+    export let description: string;
+    export let dueDate: Date;
+    export let weeks: WeekSelection[];
 
     export let changeWeek = function a(){};
 
-
     // TODO auto gen weeks
 </script>
 
@@ -15,17 +19,26 @@
     <label for="topic">Thema</label>
 </div>
 
+<div class="field textarea border">
+    <textarea id="description" bind:value={description} placeholder="Beschreibung"></textarea>
+    <label for="description">Beschreibung</label>
+  </div>  
+
+<div class="field border">
+    <input bind:value={dueDate} type="date" id="due-date" placeholder="">
+    <label for="topic">Frist</label>
+</div>
+
 <div class="field border">
     <input bind:value={location} id="location" placeholder="Ort">
     <label for="location">Ort</label>
 </div>
 
 <div class="field label border">
-    <select bind:value={selectedWeek} on:input={changeWeek} id="week">
-        <option value={202501}>01 KW (01.01.2024 - 05.01.2024)</option>
-        <option value={202502}>02 KW (06.01.2024 - 12.01.2024)</option>
-        <option value={202503}>03 KW (13.01.2024 - 19.01.2024)</option>
-        <option value={202504}>04 KW (20.01.2024 - 26.01.2024)</option>
+    <select bind:value={selectedWeek} on:change={changeWeek} id="week">
+        {#each weeks as currentWeek}
+            <option value={currentWeek.yearWeek}>{currentWeek.week} KW ({currentWeek.start.toLocaleDateString()} - {currentWeek.end.toLocaleDateString()})</option>
+        {/each}
     </select>
     <label for="week">Woche</label>
 </div>

src/routes/+page.server.ts

@@ -1,3 +1,3 @@
 export const ssr = false;
 export const csr = true;
-export const prerender = true;
+export const prerender = false;

src/routes/user/creator/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { api_host, authToken } from '$lib';
-	import type { AppointmentInputs, AppointmentList, AppointmentTimes, WeekdayAppointment } from '$lib/dbdata';
-	import { authFetch, getTimeSlots } from '$lib/funcs';
+	import type { AppointmentInputs, AppointmentList, AppointmentTimes, WeekdayAppointment, WeekSelection } from '$lib/dbdata';
+	import { authFetch, generateDateArray, getTimeSlots } from '$lib/funcs';
 	import CreatorBaseInputs from '$lib/modules/CreatorBaseInputs.svelte';
 	import CreatorInputs from '$lib/modules/CreatorInputs.svelte';
 	import CreatorTimeInputs from '$lib/modules/CreatorTimeInputs.svelte';
@@ -11,12 +11,14 @@
 	let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
 	let topic: string;
 	let location: string;
-	let selectedWeek: number = 202502;
+	let selectedWeek: number = parseInt(moment().startOf("isoWeek").format("YYYYWW"), 10);
 	let previousWeek: number = selectedWeek;
 	let duration: number = 15;
 	let dueDate: Date = new Date();
 	let description: string = "test";
 	let renderTimeSelection: boolean = false;
+	let appointmentSaved: boolean = false;
+	let weekSelection: WeekSelection[] = generateDateArray(50);
 
 	let appointmentList: AppointmentList[] = [
 		{
@@ -148,6 +150,12 @@
                 })
             });
 
+			appointmentSaved = response.status === 200;
+
+			setTimeout(() => {
+				appointmentSaved = false;
+			}, 5000);
+
         } catch (error) {
             console.log(error);
         }
@@ -155,6 +163,7 @@
 
 	onMount(() => {
 		// implement editor if query id param was detected
+		
 	});
 
 	// get time slots before sending
@@ -163,7 +172,7 @@
 <h3 class="center-align top-padding bottom-padding">Termine</h3>
 
 <fieldset>
-	<CreatorBaseInputs changeWeek={changeWeek} bind:topic bind:location bind:selectedWeek bind:duration />
+	<CreatorBaseInputs changeWeek={changeWeek} bind:weeks={weekSelection} bind:description bind:dueDate bind:topic bind:location bind:selectedWeek bind:duration />
 
 	{#if selectedWeekAppointments}
 		{#key renderTimeSelection}
@@ -179,6 +188,10 @@
 	<button on:click={saveAppointment} class="top-margin s12 large">Speichern</button>
 </div>
 
+{#if appointmentSaved}
+	<div class="snackbar green active">Erfolgreich erstellt</div>
+{/if}
+
 <style>
 	fieldset {
 		max-width: 90%;