From: PhiTux <redacted>
Date: Wed, 8 Jan 2025 21:41:00 +0000 (+0100)
Subject: added read-page
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=3254881afc713da9a307525fd4ed121f4c81da52;p=DailyTxT.git

added read-page
---

diff --git a/frontend/src/lib/datepickerLogic.svelte b/frontend/src/lib/DatepickerLogic.svelte
similarity index 94%
rename from frontend/src/lib/datepickerLogic.svelte
rename to frontend/src/lib/DatepickerLogic.svelte
index 70b64be..6f2ba34 100644
--- a/frontend/src/lib/datepickerLogic.svelte
+++ b/frontend/src/lib/DatepickerLogic.svelte
@@ -13,7 +13,6 @@
 	let lastYear = $cal.currentYear;
 	let isLoadingMarkedDays = false;
 	function loadMarkedDays() {
-		console.log('a');
 		if ($cal.currentMonth === lastMonth && $cal.currentYear === lastYear) {
 			return;
 		}
@@ -21,7 +20,6 @@
 		if (isLoadingMarkedDays) {
 			return;
 		}
-		console.log('b');
 		isLoadingMarkedDays = true;
 
 		axios
@@ -42,7 +40,6 @@
 				lastMonth = $cal.currentMonth;
 				lastYear = $cal.currentYear;
 				isLoadingMarkedDays = false;
-				console.log('c');
 			});
 	}
 </script>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3671ff9..1c89365 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -22,9 +22,13 @@
 	let inDuration = 150;
 	let outDuration = 150;
 
-	/*let API_URL = dev
-		? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
-		: window.location.pathname.replace(/\/+$/, '');*/
+	$effect(() => {
+		if ($readingMode) {
+			goto('/read');
+		} else {
+			goto('/write');
+		}
+	});
 
 	function logout() {
 		axios
diff --git a/frontend/src/routes/read/+page.js b/frontend/src/routes/read/+page.js
new file mode 100644
index 0000000..d48ea95
--- /dev/null
+++ b/frontend/src/routes/read/+page.js
@@ -0,0 +1,8 @@
+import {redirect} from '@sveltejs/kit'
+
+export const load = () => {
+  const user = JSON.parse(localStorage.getItem('user'));
+		if (!user) {
+			throw redirect(307, '/login');
+		}
+}
\ No newline at end of file
diff --git a/frontend/src/routes/read/+page.svelte b/frontend/src/routes/read/+page.svelte
new file mode 100644
index 0000000..5c67822
--- /dev/null
+++ b/frontend/src/routes/read/+page.svelte
@@ -0,0 +1,82 @@
+<script>
+	import { API_URL } from '$lib/APIurl.js';
+	import axios from 'axios';
+	import { cal } from '$lib/calendarStore.js';
+	import DatepickerLogic from '$lib/DatepickerLogic.svelte';
+	import Sidenav from '$lib/Sidenav.svelte';
+	import { onMount } from 'svelte';
+
+	let readingData = $state([]);
+	let search = $state('');
+
+	onMount(() => {
+		loadMonthForReading();
+	});
+
+	//#TODO Muss in die separate /read page (diese hier in /write umbenennen)
+	let isLoadingMonthForReading = false;
+	function loadMonthForReading() {
+		if (isLoadingMonthForReading) {
+			return;
+		}
+		isLoadingMonthForReading = true;
+
+		axios
+			.get(API_URL + '/logs/loadMonthForReading', {
+				params: {
+					month: $cal.currentMonth + 1,
+					year: $cal.currentYear
+				}
+			})
+			.then((response) => {
+				readingData = response.data;
+			})
+			.catch((error) => {
+				console.error(error);
+			})
+			.finally(() => {
+				isLoadingMonthForReading = false;
+			});
+	}
+</script>
+
+<DatepickerLogic />
+
+<!-- shown on small Screen, when triggered -->
+<div class="offcanvas-md d-md-none offcanvas-start p-3" id="sidenav" tabindex="-1">
+	<div class="offcanvas-header">
+		<button
+			type="button"
+			class="btn-close"
+			data-bs-dismiss="offcanvas"
+			data-bs-target="#sidenav"
+			aria-label="Close"
+		></button>
+	</div>
+	<Sidenav {search} />
+</div>
+
+<div class="d-flex flex-row justify-content-between h-100">
+	<!-- shown on large Screen -->
+	<div class="d-md-block d-none sidenav p-3">
+		<Sidenav {search} />
+	</div>
+
+	<!-- Center -->
+	<div class="d-flex flex-column mt-4 mx-4 flex-fill">
+		<!-- Input-Area -->
+		<div class="d-flex flex-column">
+			<div class="d-flex flex-row textAreaHeader">
+				<div class="flex-fill textAreaWrittenAt"></div>
+				<div class="textAreaHistory">history</div>
+				<div class="textAreaDelete">delete</div>
+			</div>
+			<div id="log" class="focus-ring">
+				<div id="toolbar"></div>
+				<div id="editor"></div>
+			</div>
+		</div>
+	</div>
+
+	<div id="right">Right</div>
+</div>
diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte
index ad7cffa..b52bf38 100644
--- a/frontend/src/routes/write/+page.svelte
+++ b/frontend/src/routes/write/+page.svelte
@@ -13,7 +13,7 @@
 	import { readingMode } from '$lib/settingsStore';
 	//import { read } from '$app/server';
 	import { API_URL } from '$lib/APIurl.js';
-	import DatepickerLogic from '$lib/datepickerLogic.svelte';
+	import DatepickerLogic from '$lib/DatepickerLogic.svelte';
 
 	/*let API_URL = dev
 		? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
@@ -256,32 +256,6 @@
 				toast.show();
 			});
 	}
-
-	//#TODO Muss in die separate /read page (diese hier in /write umbenennen)
-	let isLoadingMonthForReading = false;
-	function loadMonthForReading() {
-		if (isLoadingMonthForReading) {
-			return;
-		}
-		isLoadingMonthForReading = true;
-
-		axios
-			.get(API_URL + '/logs/loadMonthForReading', {
-				params: {
-					month: $cal.currentMonth + 1,
-					year: $cal.currentYear
-				}
-			})
-			.then((response) => {
-				readingData = response.data;
-			})
-			.catch((error) => {
-				console.error(error);
-			})
-			.finally(() => {
-				isLoadingMonthForReading = false;
-			});
-	}
 </script>
 
 <DatepickerLogic />
@@ -307,55 +281,36 @@
 		<Sidenav {search} />
 	</div>
 
-	{#if !$readingMode}
-		<!-- Center -->
-		<div class="d-flex flex-column mt-4 mx-4 flex-fill">
-			<!-- Input-Area -->
-			<div class="d-flex flex-column">
-				<div class="d-flex flex-row textAreaHeader">
-					<div class="flex-fill textAreaDate">
-						{$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}<br />
-						{$selectedDate.toLocaleDateString('locale', {
-							day: '2-digit',
-							month: '2-digit',
-							year: 'numeric'
-						})}
-					</div>
-					<div class="flex-fill textAreaWrittenAt">
-						<div class={logDateWritten ? '' : 'opacity-50'}>Geschrieben am:</div>
-						{logDateWritten}
-					</div>
-					<div class="textAreaHistory">history</div>
-					<div class="textAreaDelete">delete</div>
+	<!-- Center -->
+	<div class="d-flex flex-column mt-4 mx-4 flex-fill">
+		<!-- Input-Area -->
+		<div class="d-flex flex-column">
+			<div class="d-flex flex-row textAreaHeader">
+				<div class="flex-fill textAreaDate">
+					{$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}<br />
+					{$selectedDate.toLocaleDateString('locale', {
+						day: '2-digit',
+						month: '2-digit',
+						year: 'numeric'
+					})}
 				</div>
-				<!-- <textarea
-				bind:value={currentLog}
-				oninput={handleInput}
-				class="form-control {currentLog !== savedLog ? 'notSaved' : ''}"
-				rows="10"
-			></textarea> -->
-				<div id="log" class="focus-ring">
-					<div id="toolbar"></div>
-					<div id="editor"></div>
+				<div class="flex-fill textAreaWrittenAt">
+					<div class={logDateWritten ? '' : 'opacity-50'}>Geschrieben am:</div>
+					{logDateWritten}
 				</div>
-				{$selectedDate}<br />
-				{lastSelectedDate}
+				<div class="textAreaHistory">history</div>
+				<div class="textAreaDelete">delete</div>
 			</div>
+			<div id="log" class="focus-ring">
+				<div id="toolbar"></div>
+				<div id="editor"></div>
+			</div>
+			{$selectedDate}<br />
+			{lastSelectedDate}
 		</div>
+	</div>
 
-		<div id="right">Right</div>
-	{:else}
-		<div class="w-100">
-			{#each readingData as log}
-				<div class="card">
-					<div class="card-header">{log.day} | {log.date_written}</div>
-					<div class="card-body">
-						{@html log.text}
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/if}
+	<div id="right">Right</div>
 
 	<div class="toast-container position-fixed bottom-0 end-0 p-3">
 		<div