finished german and english translations

src/lib/lang/de.json

@@ -23,6 +23,13 @@
     "friday": "Freitag",
     "saturday": "Samstag",
     "sunday": "Sonntag",
+    "monday-short": "Mo",
+    "tuesday-short": "Di",
+    "wednesday-short": "Mi",
+    "thursday-short": "Do",
+    "friday-short": "Fr",
+    "saturday-short": "Sa",
+    "sunday-short": "So",
     "inputs": "Eingaben",
     "input-field": "Eingabefeld",
     "input-type": "Eingabeart",

src/lib/lang/en.json

@@ -1,5 +1,64 @@
 {
+    "app-title": "Booker",
     "appointments": "Appointments",
     "bookings": "Bookings",
-    "create-appointment": "Create appointment"
-}
+    "create-appointment": "Create Appointment",
+    "share": "Share",
+    "lock": "Lock",
+    "locked": "Locked",
+    "edit": "Edit",
+    "delete": "Delete",
+    "participants": "Participants",
+    "topic": "Topic",
+    "location": "Location",
+    "description": "Description",
+    "due-date": "Due Date",
+    "participant-count": "Number of Participants",
+    "week": "Week",
+    "duration": "Duration",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "sunday": "Sunday",
+    "monday-short": "Mon",
+    "tuesday-short": "Tue",
+    "wednesday-short": "Wed",
+    "thursday-short": "Thu",
+    "friday-short": "Fri",
+    "saturday-short": "Sat",
+    "sunday-short": "Sun",
+    "inputs": "Inputs",
+    "input-field": "Input Field",
+    "input-type": "Input Type",
+    "text-input": "Text Input",
+    "email": "Email",
+    "phone-number": "Phone Number",
+    "save": "Save",
+    "minutes": "Minutes",
+    "hour": "Hour",
+    "date": "Date",
+    "time": "Time",
+    "sucess-creator-save": "Successfully Saved",
+    "sucess-booking": "Successful Booking",
+    "error-booking": "Invalid Booking",
+    "error-server": "Server Error",
+    "error-parameters": "Invalid Parameters",
+    "error-invalid-parameters": "Invalid Input",
+    "error-invalid-credentials": "Invalid Credentials",
+    "410": "Registration Not Available",
+    "404": "Appointment Not Found",
+    "register": "Register",
+    "login": "Login",
+    "auth": "Authentication",
+    "password": "Password",
+    "book": "Book",
+    "cancel": "Cancel",
+    "week-short": "Short Week (KW)",
+    "times": "Times",
+    "actions": "Actions",
+    "action-confirm": "Confirm Action"
+  }
+  

src/lib/modules/AppointmentConfirmDialog.svelte

@@ -19,8 +19,8 @@
 	let time: string = '00:00';
 
 	function createEventICS() {
-    const formattedDate: string = toLocalDTSTAMP(moment.utc(date.toLocaleString()));
-    console.log(formattedDate);
+		const formattedDate: string = toLocalDTSTAMP(moment.utc(date.toLocaleString()));
+		console.log(formattedDate);
 
 		createEvent(
 			{
@@ -40,8 +40,7 @@
         setTimeout(() => {
             window.location.href = url; // Triggers opening on supported devices
         }, 1000);
-			}
-		);
+		});
 	}
 
 	$: {

src/lib/modules/CreatorInputs.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <fieldset>
-	<legend>Eingaben</legend>
+	<legend>{$t("common.inputs")}</legend>
 	<button on:click={addInput} class="large circle tertiary">
 		<i>add</i>
 	</button>

src/lib/modules/CreatorTimeInputs.svelte

@@ -16,7 +16,6 @@
 </script>
 
 <fieldset>
-	<legend>Select one or more</legend>
 	<nav class="vertical">
 		{#each weekdays as day, index}
 			<label class="checkbox">

src/lib/modules/DatePicker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { AppointmentDateTimes } from '$lib/dbdata';
 	import { isSameDate } from '$lib/funcs';
+	import { t } from '$lib/translations';
 	import moment, { type Moment } from 'moment';
 	import { onMount } from 'svelte';
 
@@ -28,16 +29,21 @@
 	 * Updates the calendar display by calculating the days of the current month.
 	 */
 	const renderCalendar = (): void => {
-		const mDate: Moment = moment(currentDate);
+		const mDate: Moment = moment(currentDate).locale("de");
 		const year: number = currentDate.getFullYear();
 		const month: number = mDate.month();
 
+		let locale: string = "en-US";
+
+		if (navigator.language.includes("de")) locale = "de";
+
 		// make sure to properly translate this
-		currentMonth = currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+		currentMonth = currentDate.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
 
 		const firstDayOfMonth: Date = new Date(year, month, 1);
 		const lastDayOfMonth: Date = new Date(year, month + 1, 0);
-		const firstDayIndex: number = firstDayOfMonth.getDay();
+		let firstDayIndex: number = firstDayOfMonth.getDay() - 1;
+		if (firstDayIndex === -1) firstDayIndex = 6;
 		const daysInMonth: number = lastDayOfMonth.getDate();
 
 		// Reset days array
@@ -97,13 +103,13 @@
 	</div>
 	<div class="date-picker-grid">
 		<!-- Days of the week -->
-		<div class="date-picker-day">Sun</div>
-		<div class="date-picker-day">Mon</div>
-		<div class="date-picker-day">Tue</div>
-		<div class="date-picker-day">Wed</div>
-		<div class="date-picker-day">Thu</div>
-		<div class="date-picker-day">Fri</div>
-		<div class="date-picker-day">Sat</div>
+		<div class="date-picker-day">{$t("common.monday-short")}</div>
+		<div class="date-picker-day">{$t("common.tuesday-short")}</div>
+		<div class="date-picker-day">{$t("common.wednesday-short")}</div>
+		<div class="date-picker-day">{$t("common.thursday-short")}</div>
+		<div class="date-picker-day">{$t("common.friday-short")}</div>
+		<div class="date-picker-day">{$t("common.saturday-short")}</div>
+		<div class="date-picker-day">{$t("common.sunday-short")}</div>
 
 		<!-- Render days -->
 		{#each days as { day, isActive, isAvailable }, index}

src/routes/+layout.svelte

@@ -5,14 +5,10 @@
 <script lang="ts">
 	import { authToken } from "$lib";
 	import { onMount } from "svelte";
-    import { loadTranslations } from '$lib/translations';
-
+    
     onMount(async () => {
 
-        await loadTranslations
-
         if (localStorage) {
-            console.log("execute");
             $authToken = localStorage.getItem("token") || "";
         }
     });

src/routes/+layout.ts

@@ -5,8 +5,14 @@ import { loadTranslations } from '$lib/translations';
 export const load = async ({ url }) => {
   const { pathname } = url;
 
-  const initLocale = 'de'; // get from cookie, user session, ...
+  let initLocale = 'en'; // get from cookie, user session, ...
 
+  console.log(navigator.language);
+
+  if (navigator.language.includes('de')) {
+    initLocale = 'de';    
+  }
+  
   await loadTranslations(initLocale, pathname); // keep this just before the `return`
 
   return {};

src/routes/appointment/+page.svelte

@@ -43,8 +43,6 @@
         dynamicInputs = js.inputs;
 	}
 
-	$: console.log(selectedDate);
-
 	onMount(async () => {
 		const id = $page.url.searchParams.get('id');
 		if (!id) {