From 8495ed716c5116f655e187d6c7765c13a8e7822d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A4ssin=20Aouani?= <aouanijassin@gmail.com>
Date: Mon, 11 Nov 2024 12:46:22 +0100
Subject: [PATCH] implement caching data

---
 pages/stundenplan.vue | 148 +++++++++++++++++++++++++-----------------
 1 file changed, 88 insertions(+), 60 deletions(-)

diff --git a/pages/stundenplan.vue b/pages/stundenplan.vue
index 386621e..416dfbc 100644
--- a/pages/stundenplan.vue
+++ b/pages/stundenplan.vue
@@ -4,89 +4,117 @@
 			<p class="text-3xl font-bold mb-4">Stundenplan</p>
 			<p class="text-lg mb-4" v-show="data.length">
 				{{
-					new Date(Number(Object.keys(groupedByDay)[page - 1])).toLocaleDateString("de-DE", { weekday: "long", year: "numeric", month: "long", day: "numeric" })
+					new Date(Number(Object.keys(groupedByDay)[page - 1])).toLocaleDateString("de-DE", {
+						weekday: "long",
+						year: "numeric", month: "long", day: "numeric"
+					})
 				}}
 			</p>
 			<span class="mb-4 flex text-center items-center space-x-4">
 				<UPagination v-model="page" :total="data.length" />
-				<UButton
-					v-if="Object.keys(groupedByDay).indexOf(today.toString()) !== -1"
-					:class="{ 'opacity-0': page == Object.keys(groupedByDay).indexOf(today.toString())+1 }"
-					class="py-2"
-					@click="page = Object.keys(groupedByDay).indexOf(today.toString())+1">
+				<UButton v-if="Object.keys(groupedByDay).indexOf(today.toString()) !== -1"
+					:class="{ 'opacity-0': page == Object.keys(groupedByDay).indexOf(today.toString()) + 1 }"
+					class="py-2" @click="page = Object.keys(groupedByDay).indexOf(today.toString()) + 1">
 					Zurück zu Heute
 				</UButton>
 			</span>
-			<UTable :rows="schedule[page - 1]" class="w-full" :loading="!hasLoaded" :loading-state="{ label: 'Laden...' }" />
+			<UTable :rows="schedule[page - 1]" class="w-full" :loading="!hasLoaded"
+				:loading-state="{ label: 'Laden...' }" />
 			<button @click="logout()" class="mt-5 p-2 bg-primary text-white rounded">Anmeldedaten zurücksetzen</button>
 		</div>
 	</ClientOnly>
 </template>
 
 <script setup>
-	const router = useRouter();
 
-	const username = useCookie("username");
-	const password = useCookie("password");
+const localData = ref([]);
 
-	const today = new Date().setHours(0, 0, 0, 0);
-	const page = ref(1);
+const router = useRouter();
 
-	const groupedByDay = useState('groupedByDay', (() => ({})));
-	const data = useState('stundenplan', (() => []));
-	const schedule = computed(() => Object.values(groupedByDay.value));
+const username = useCookie("username");
+const password = useCookie("password");
 
-	const hasLoaded = useState('hasLoaded', (() => false));
+const today = new Date().setHours(0, 0, 0, 0);
+const page = ref(1);
 
-	watch(groupedByDay.value, (newVal) => {
-		const todayIndex = Object.keys(newVal).indexOf(today.toString());
-		if (todayIndex !== -1) {
-			page.value = todayIndex + 1;
-		} else {
-			const futureDates = Object.keys(newVal).filter(date => Number(date) > today);
-			if (futureDates.length > 0) {
-				page.value = Object.keys(newVal).indexOf(futureDates[0]) + 1;
-			} else {
-				page.value = 1;
-			}
+const data = useState('stundenplan', (() => []));
+
+const groupedByDay = useState('groupedByDay', (() => ({})));
+
+const schedule = computed(() => Object.values(groupedByDay.value));
+
+const hasLoaded = useState('hasLoaded', (() => false));
+
+watch(data, (newVal) => {
+	groupedByDay.value = {};
+	newVal.forEach((item) => {
+		const day = new Date(item["start"] * 1000).setHours(0, 0, 0, 0);
+
+		if (!groupedByDay.value[day]) {
+			groupedByDay.value[day] = [];
 		}
+		groupedByDay.value[day].push({
+			Kurs: item["description"],
+			Raum: item["sroom"],
+			Dozent: item["sinstructor"] || "---",
+			Von: new Date(item["start"] * 1000).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", hour12: false }),
+			Bis: new Date(item["end"] * 1000).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", hour12: false }),
+			Bemerkungen: item["remarks"] || "---",
+		});
 	});
+	for (const key in groupedByDay.value) {
+		if (Number(key) < new Date().setHours(0, 0, 0, 0) - 86400000) {
+			delete groupedByDay.value[key];
+		}
+	}
+});
 
-	onMounted(async () => {
-		if (data.value.length !== 0) return;
-
-		const response = await $fetch(
-			`https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Froom%2Fjson%3Fuserid%3D${username.value}%26hash%3D${password.value}%26t%3D${Math.floor(Date.now() / 1000)}%26_%3D${Date.now()}`
-		);
-		data.value = response;
-
-		data.value.forEach((item) => {
-			const day = new Date(item["start"] * 1000).setHours(0, 0, 0, 0);
-
-			if (!groupedByDay.value[day]) {
-				groupedByDay.value[day] = [];
-			}
-			groupedByDay.value[day].push({
-				Kurs: item["description"],
-				Raum: item["sroom"],
-				Dozent: item["sinstructor"] || "---",
-				Von: new Date(item["start"] * 1000).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", hour12: false }),
-				Bis: new Date(item["end"] * 1000).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", hour12: false }),
-				Bemerkungen: item["remarks"] || "---",
-			});
-		});
-		for (const key in groupedByDay.value) {
-			if (Number(key) < new Date().setHours(0, 0, 0, 0) - 86400000) {
-				delete groupedByDay.value[key];
-			}
+watch(groupedByDay.value, (newVal) => {
+	const todayIndex = Object.keys(newVal).indexOf(today.toString());
+	if (todayIndex !== -1) {
+		page.value = todayIndex + 1;
+	} else {
+		const futureDates = Object.keys(newVal).filter(date => Number(date) > today);
+		if (futureDates.length > 0) {
+			page.value = Object.keys(newVal).indexOf(futureDates[0]) + 1;
+		} else {
+			page.value = 1;
 		}
+	}
+});
 
-		hasLoaded.value = true;
-	});
+onMounted(async () => {
+	if (data.value.length !== 0) return;
+
+	const storedValue = localStorage.getItem('stundenplan');
+	localData.value = storedValue ? JSON.parse(storedValue) : []
 
-	function logout() {
-		username.value = "";
-		password.value = "";
-		router.push("/login");
+	console.log(localData.value.length);
+	if (localData.value.length !== 0) {
+		data.value = localData.value;
 	}
+
+
+	// Watch for changes in the data and update localStorage
+	watch(localData, (newValue) => {
+		localStorage.setItem('stundenplan', JSON.stringify(newValue));
+	}, { deep: true });
+
+
+
+	const response = await $fetch(
+		`https://corsproxy.io/?https%3A%2F%2Fselfservice.campus-dual.de%2Froom%2Fjson%3Fuserid%3D${username.value}%26hash%3D${password.value}%26t%3D${Math.floor(Date.now() / 1000)}%26_%3D${Date.now()}`
+	);
+
+	data.value = response;
+	localData.value = data.value;
+
+	hasLoaded.value = true;
+});
+
+function logout() {
+	username.value = "";
+	password.value = "";
+	router.push("/login");
+}
 </script>