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 70b64be9e672c3cc7c7b6f5c76b5dd4e5a261b28..6f2ba340a27fa5df4faa7dbabb7b6d818f08f5ca 100644 (file)
--- 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 3671ff9a56c9c2d860b8b5a49afe8994f3a56455..1c89365e1e08c255e188a662f22a759fbbed1010 100644 (file)
--- 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 (file)
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 (file)
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 ad7cffa1cc5ef91cb1757b05d0713e0f44bb7521..b52bf384c692225049eec5fa9436e15384065fed 100644 (file)
--- 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