Implement Setting to toggle the local homework storage

src/components/homeworkList.vue

@@ -3,9 +3,12 @@ import HomeworkListItem from '@/components/homeworkListItem.vue'
 import { onBeforeMount, reactive, ref } from 'vue'
 import apiService from '@/scripts/api.service'
 import type { homework } from '@/scripts/types/homework.interface'
+import storageService from '@/scripts/storage.service'
 
 let dataIsHere = ref(false)
-let old_dataisHere = ref(false)
+let old_dataIsHere = ref(false)
+
+const localHomeworkStorage = storageService.get_setting('localHomeworkStorage')
 
 defineExpose({ dataIsHere })
 
@@ -26,11 +29,10 @@ onBeforeMount(() => {
   getHomework()
 })
 
-function getHomework() {
-
+async function getHomework() {
   const old_data = localStorage.getItem('homework')
 
-  if (old_data) {
+  if (old_data && localHomeworkStorage) {
     const jsonData = JSON.parse(old_data)
 
     const parsedData = jsonData.map((element: homework) => {
@@ -60,36 +62,57 @@ function getHomework() {
       }
     })
 
-    old_dataisHere.value = true
+    old_dataIsHere.value = true
+    console.log('old_dataIsHere: ' + old_dataIsHere.value)
+  } else {
+    localStorage.removeItem('homework')
   }
 
-  apiService.all().then((response) => {
-    response.sort((a: homework, b: homework) => {
-      return +new Date(a.dateDue) - +new Date(b.dateDue)
-    })
+  let parsedData: homework[]
+
+  if (localHomeworkStorage) {
+    await apiService.all()
 
-    response.forEach((homework) => {
+    const jsonData = JSON.parse(localStorage.getItem('homework') as string)
 
-      //check if the entry is already in any of the lists
-      if (
-        uncompleted_homework.homeworkEntries.find((element) => element.id === homework.id) ||
-        completed_homework.homeworkEntries.find((element) => element.id === homework.id) ||
-        old_entries.homeworkEntries.find((element) => element.id === homework.id)
-      ) {
-        return
+    parsedData = jsonData.map((element: homework) => {
+      return {
+        id: element.id,
+        dateAdded: new Date(element.dateAdded),
+        dateDue: new Date(element.dateDue),
+        text: element.text,
+        remark: element.remark,
+        teacher: element.teacher,
+        subject: element.subject,
+        completed: element.completed
       }
+    })
+  } else {
+    parsedData = await apiService.all()
+  }
 
+  if (parsedData) {
+    let uncompleted_tmp: homework[] = []
+    let completed_tmp: homework[] = []
+    let old_tmp: homework[] = []
+
+    parsedData.forEach((homework: homework) => {
       if (!homework.completed) {
-        uncompleted_homework.homeworkEntries.push(homework)
+        uncompleted_tmp.push(homework)
       } else if (homework.dateDue > new Date()) {
-        completed_homework.homeworkEntries.push(homework)
+        completed_tmp.push(homework)
       } else {
-        old_entries.homeworkEntries.push(homework)
+        old_tmp.push(homework)
       }
     })
 
+    uncompleted_homework.homeworkEntries = uncompleted_tmp
+    completed_homework.homeworkEntries = completed_tmp
+    old_entries.homeworkEntries = old_tmp
+
     dataIsHere.value = true
-  })
+    console.log('dataIsHere: ' + dataIsHere.value)
+  }
 }
 
 function compareDate(homeworkToCheck: homework, completed: boolean) {
@@ -257,7 +280,7 @@ function onDelete(id: number, array: number) {
   <div class="body">
     <!-- Spinner using bootstrap-->
     <div
-      v-if="!dataIsHere && !old_dataisHere"
+      v-if="!dataIsHere && !old_dataIsHere"
       class="d-flex justify-content-center align-items-center"
       style="height: 100vh"
     >
@@ -266,16 +289,18 @@ function onDelete(id: number, array: number) {
       </div>
     </div>
 
-    <div v-if="old_dataisHere || dataIsHere">
+    <div v-if="old_dataIsHere || dataIsHere">
       <div class="uncompleted">
-
         <div class="d-flex justify-content-between align-items-center">
           <h1 class="mb-0">Unabgeschlossen</h1>
 
-          <div v-if="old_dataisHere && !dataIsHere" class="spinner-border spinner-small" role="status">
+          <div
+            v-if="old_dataIsHere && !dataIsHere"
+            class="spinner-border spinner-small"
+            role="status"
+          >
             <span class="visually-hidden">Loading...</span>
           </div>
-
         </div>
 
         <div v-if="uncompleted_homework.homeworkEntries.length">

src/components/welcomeText.vue

@@ -1,15 +1,18 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="body">
     <header class="welcome-header">
       <img src="/src/assets/UntisHomeworkLogo.png" class="logo" alt="logo" />
       <h1>Webuntis Hausaufgaben</h1>
-
     </header>
 
-    <p>Hier kannst du deine Hausaufgaben von Webuntis ansehen und abhaken/erledigen. Du kannst auch selber welche hinzufügen und dir den Mensaplan ansehen. Melde dich einfach nur mit deinen Webuntis Anmeldedaten hier an  (Momentan nur verfügbar für Webuntis Aloisiuskolleg)</p>  </div>
+    <p>
+      Hier kannst du deine Hausaufgaben von Webuntis ansehen und abhaken/erledigen. Du kannst auch
+      selber welche hinzufügen und dir den Mensaplan ansehen. Melde dich einfach nur mit deinen
+      Webuntis Anmeldedaten hier an (Momentan nur verfügbar für Webuntis Aloisiuskolleg)
+    </p>
+  </div>
 </template>
 
 <style scoped>
@@ -51,5 +54,4 @@
 
   pointer-events: none;
 }
-
 </style>

src/main.ts

@@ -12,4 +12,3 @@ const app = createApp(App)
 app.use(router)
 
 app.mount('#app')
-

src/scripts/api.service.ts

@@ -68,9 +68,13 @@ class ApiService {
         homeworks.push(newHomework)
       })
 
-      const homework_string = JSON.stringify(homeworks)
+      homeworks.sort((a, b) => a.dateDue.getTime() - b.dateDue.getTime())
 
-      localStorage.setItem('homework', homework_string)
+      if (storageService.get_setting('localHomeworkStorage')) {
+        const homework_string = JSON.stringify(homeworks)
+
+        localStorage.setItem('homework', homework_string)
+      }
 
       return homeworks
     } catch (e) {
@@ -80,6 +84,10 @@ class ApiService {
   }
 
   async updateHomework(id: number, completed: boolean) {
+    if (storageService.get_setting('localHomeworkStorage')) {
+      storageService.update_homework(id, completed)
+    }
+
     const authorization = storageService.retrieve_credentials()
 
     if (authorization === null) {
@@ -111,6 +119,10 @@ class ApiService {
   }
 
   async deleteHomework(id: number) {
+    if (storageService.get_setting('localHomeworkStorage')) {
+      storageService.delete_homework(id)
+    }
+
     const authorization = storageService.retrieve_credentials()
 
     if (authorization === null) {

src/scripts/storage.service.ts

@@ -89,8 +89,63 @@ class StorageService {
   }
 
   async logout() {
+    const settings = ['localHomeworkStorage']
+
+    settings.forEach((setting) => {
+      localStorage.removeItem(setting)
+    })
+
     localStorage.removeItem('username')
     localStorage.removeItem('credentials')
+    localStorage.removeItem('homework')
+
+    sessionStorage.removeItem('username')
+    sessionStorage.removeItem('credentials')
+  }
+
+  update_homework(id: number, completed: Boolean) {
+    const homework = localStorage.getItem('homework')
+    if (homework === null) {
+      return
+    }
+
+    const parsed_homework = JSON.parse(homework)
+    const index = parsed_homework.findIndex((element: any) => element.id === id)
+    if (index === -1) {
+      return
+    }
+
+    parsed_homework[index].completed = completed
+    localStorage.setItem('homework', JSON.stringify(parsed_homework))
+  }
+
+  delete_homework(id: number) {
+    const homework = localStorage.getItem('homework')
+    if (homework === null) {
+      return
+    }
+
+    const parsed_homework = JSON.parse(homework)
+    const index = parsed_homework.findIndex((element: any) => element.id === id)
+    if (index === -1) {
+      return
+    }
+
+    parsed_homework.splice(index, 1)
+    localStorage.setItem('homework', JSON.stringify(parsed_homework))
+  }
+
+  set_setting(setting: string, value: boolean) {
+    localStorage.setItem(setting, value.toString())
+  }
+
+  get_setting(setting: string): boolean {
+    const value = localStorage.getItem(setting)
+    if (value === null) {
+      return false
+    } else {
+      return value === 'true'
+    }
   }
 }
 

src/views/SettingsView.vue

@@ -1,15 +1,59 @@
 <script setup lang="ts">
 import HomeworkHeader from '@/components/homeworkHeader.vue'
+import storageService from '@/scripts/storage.service'
+
+import { ref } from 'vue'
+
+let localHomeworkStorage = ref(storageService.get_setting('localHomeworkStorage'))
+
+const toggleFunction = () => {
+  storageService.set_setting('localHomeworkStorage', localHomeworkStorage.value)
+
+  if (!localHomeworkStorage.value) {
+    localStorage.removeItem('homework')
+  }
+}
 </script>
 
 <template>
   <homework-header title="Einstellungen" :button="false" />
 
-  <h2>kommt bald</h2>
+  <div class="container mt-5">
+    <div class="card">
+      <div class="card-body d-flex justify-content-between align-items-center">
+        <div style="margin-right: 5rem">
+          <h5 class="card-title mb-0">
+            Hausaufgaben lokal Zwischenspeichern <i style="opacity: 0.6">(experimental)</i>
+          </h5>
+          <br />
+          <p class="card-text">
+            Die Hausaufgaben werden lokal im Browser gespeichert, damit die Liste beim nächsten
+            Besuch direkt geladen ist. Kann unerwartetes Verhalten erzeugen.
+          </p>
+        </div>
+        <div class="form-check form-switch">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            role="switch"
+            id="customSwitch1"
+            v-model="localHomeworkStorage"
+            @change="toggleFunction"
+          />
+          <label class="custom-control-label" for="customSwitch1"></label>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 * {
   color: var(--text-primary-color);
+  background-color: var(--background-color-primary);
+}
+
+.form-check-input {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
 }
 </style>