Add dark mode

Fixes #26

resources/text/home/de.json

@@ -1,3 +1,4 @@
 {
-    "empty": "Ziemlich leer hier"
+    "empty": "Ziemlich leer hier",
+    "entries": "Einträge"
 }

resources/text/home/en.json

@@ -1,3 +1,4 @@
 {
-    "empty": "Pretty empty..."
+    "empty": "Pretty empty...",
+    "entries": "entries"
 }

resources/text/settings/de.json

@@ -2,6 +2,7 @@
     "logout": "Abmelden",
     "class-name": "Klassen Name",
     "send-notifications": "Benachrichtigungen Senden",
+    "dark-mode": "Dunkler Modus",
     "lang": "Sprache",
     "cancel": "Abbrechen",
     "ok": "Ok",

resources/text/settings/en.json

@@ -1,7 +1,8 @@
 {
     "logout": "Log out",
-    "class-name": "Class Name",
-    "send-notifications": "Send Notifications",
+    "class-name": "Class name",
+    "send-notifications": "Send notifications",
+    "dark-mode": "Dark mode",
     "lang": "Language",
     "cancel": "Cancel",
     "ok": "Ok",

src/store/mutations.ts

@@ -1,5 +1,5 @@
 import { Account, Settings } from "@/utility/account";
-import { LoadingStates } from "@/utility/utils";
+import { LoadingStates, toggleDarkMode } from "@/utility/utils";
 import { Storage } from "@ionic/storage";
 import Dsbmobile, {
     DocumentPostCollection,
@@ -53,5 +53,7 @@ export const mutations = {
             "account",
             JSON.stringify(state.account.toJSON()),
         );
+
+        toggleDarkMode(settings.darkMode);
     },
 } as MutationTree<State>;

src/utility/account.ts

@@ -2,6 +2,7 @@ export interface Settings {
     sendNotifications: boolean;
     lang: string;
     className: string;
+    darkMode: boolean;
 }
 
 export class Account {
@@ -13,6 +14,7 @@ export class Account {
             sendNotifications: true,
             lang: window.navigator.language === "de" ? "de" : "en",
             className: "",
+            darkMode: false,
         },
     ) {}
 

src/utility/utils.ts

@@ -15,3 +15,7 @@ export function appearAnimation(element: Element, delay: number): Animation {
         .fromTo("transform", "translateY(-20px)", "translateY(0px)")
         .fromTo("opacity", "0", "100%");
 }
+
+export function toggleDarkMode(turnOn: any) {
+    document.body.setAttribute("data-theme", turnOn ? "dark" : "light");
+}

src/views/Home.vue

@@ -15,6 +15,11 @@
                 </h2>
             </div>
             <div v-else-if="timeTable !== undefined">
+                <div style="text-align: center">
+                    <h3>
+                        {{ timeTable.entries.length }} {{ text["entries"] }}
+                    </h3>
+                </div>
                 <div
                     v-for="(entry, index) of timeTable.findByClassName(
                         settings.className,
@@ -64,6 +69,7 @@ export default defineComponent({
     methods: {
         async refresh(event: any) {
             await store.dispatch("update");
+            console.log(this.timeTable);
             event.target.complete();
         },
         async loadText() {

src/views/News.vue

@@ -43,7 +43,7 @@ export default defineComponent({
             new NewsPost(
                 "Irgndwelche Neuigkeiten",
                 new Date(),
-                "Lorem ipsum somet amet lorem ipsum somet amet",
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
             ),
         ]);
         return {

src/views/Settings.vue

@@ -11,6 +11,7 @@
                                     type="text"
                                     v-model="className"></ion-input>
                             </ion-item>
+
                             <ion-item>
                                 <ion-label>{{ text["lang"] }}:</ion-label>
                                 <ion-select
@@ -26,16 +27,22 @@
                                     >
                                 </ion-select>
                             </ion-item>
+
                             <ion-item>
                                 <ion-label
                                     >{{
                                         text["send-notifications"]
                                     }}:</ion-label
                                 >
-                                <ion-checkbox
-                                    type="text"
-                                    v-model="sendNotifications"></ion-checkbox>
+                                <ion-toggle
+                                    v-model="sendNotifications"></ion-toggle>
                             </ion-item>
+
+                            <ion-item>
+                                <ion-label>{{ text["dark-mode"] }}:</ion-label>
+                                <ion-toggle v-model="darkMode"></ion-toggle>
+                            </ion-item>
+
                             <ion-item>
                                 <ion-button @click="save">{{
                                     text["save"]
@@ -69,7 +76,7 @@ import {
     IonItem,
     IonInput,
     IonLabel,
-    IonCheckbox,
+    IonToggle,
     IonSelect,
     IonSelectOption,
 } from "@ionic/vue";
@@ -82,6 +89,7 @@ interface Data {
     className: string;
     lang: string;
     text: object;
+    darkMode: boolean;
 }
 
 interface Methods {
@@ -104,7 +112,7 @@ export default defineComponent<Data, Methods>({
         IonInput,
         NavBar,
         IonLabel,
-        IonCheckbox,
+        IonToggle,
         IonSelect,
         IonSelectOption,
     },
@@ -115,6 +123,7 @@ export default defineComponent<Data, Methods>({
             sendNotifications: settings.sendNotifications,
             className: settings.className,
             lang: settings.lang,
+            darkMode: settings.darkMode,
             text: {},
         };
     },
@@ -127,6 +136,7 @@ export default defineComponent<Data, Methods>({
                 className: this.className,
                 sendNotifications: this.sendNotifications,
                 lang: this.lang,
+                darkMode: this.darkMode,
             } as Settings);
             this.loadText();
         },