chorechef_frontend/package.json

 {
-  "name": "chorechef",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/vue-fontawesome": "^3.0.8",
-    "@headlessui/vue": "^1.7.23",
-    "@heroicons/vue": "^2.1.5",
-    "air-datepicker": "^3.5.3",
-    "date-fns": "^4.0.0-beta.1",
-    "moment": "^2.30.1",
-    "vue": "^3.4.29",
-    "vue-luxon": "^0.10.0",
-    "vue-moment": "^4.1.0",
-    "vue-router": "^4.3.3",
-    "vue-toastification": "^2.0.0-rc.5"
-  },
-  "devDependencies": {
-    "@tailwindcss/forms": "^0.5.9",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.14.5",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
-    "npm-run-all2": "^6.2.0",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
-    "typescript": "~5.4.0",
-    "vite": "^5.3.1",
-    "vue-tsc": "^2.0.21"
-  }
+    "name": "chorechef",
+    "version": "0.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "run-p type-check \"build-only {@}\" --",
+        "preview": "vite preview",
+        "build-only": "vite build",
+        "type-check": "vue-tsc --build --force"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-brands-svg-icons": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
+        "@headlessui/vue": "^1.7.23",
+        "@heroicons/vue": "^2.1.5",
+        "air-datepicker": "^3.5.3",
+        "date-fns": "^4.0.0-beta.1",
+        "vue": "^3.4.29",
+        "vue-router": "^4.3.3"
+    },
+    "devDependencies": {
+        "@tailwindcss/forms": "^0.5.9",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/node": "^20.14.5",
+        "@vitejs/plugin-vue": "^5.0.5",
+        "@vue/tsconfig": "^0.5.1",
+        "autoprefixer": "^10.4.19",
+        "npm-run-all2": "^6.2.0",
+        "postcss": "^8.4.40",
+        "tailwindcss": "^3.4.7",
+        "typescript": "~5.4.0",
+        "vite": "^5.3.1",
+        "vue-tsc": "^2.0.21"
+    }
 }

chorechef_frontend/src/components/Chores.vue

@@ -128,7 +128,6 @@ import "air-datepicker/air-datepicker.css";
       <!-- Chore User -->
       <div v-if="editingChore === chore" class="w-2/12">
         <select
-          v-on:keyup.enter="updateChore(chore)"
           v-model="chore.chore_user"
           class="rounded-xl px-3 shadow-lg py-0 bg-secondary-50 border-none focus:ring-2 focus:ring-secondary-600 w-7/12"
         >
@@ -269,10 +268,10 @@ import "air-datepicker/air-datepicker.css";
             v-model="addingChore.chore_user"
             class="rounded-xl px-3 shadow-lg py-0 bg-secondary-50 border-none focus:ring-2 focus:ring-secondary-600 w-7/12"
             :class="{
-              'border-red-600 border-4': addingChore.chore_user === '',
+              'border-red-600 border-4': addingChore.chore_user === -1,
             }"
           >
-            <option value="" disabled>Nutzer</option>
+            <option value="-1" disabled>Nutzer</option>
             <option
               v-for="user in users"
               :value="user.user_id"
@@ -288,7 +287,7 @@ import "air-datepicker/air-datepicker.css";
           <div
             class="rounded-xl shadow-lg bg-secondary-100 hover:scale-110 hover:drop-shadow-lg hover:cursor-pointer px-1"
             v-if="
-              addingChore.chore_name === '' || addingChore.chore_user === ''
+              addingChore.chore_name === '' || addingChore.chore_user === -1
             "
           >
             <FontAwesomeIcon
@@ -321,18 +320,14 @@ interface Chore {
   chore_user: number;
   chore_date: string;
   chore_done: boolean;
+  chore_frequency: number;
+  chore_frequency_unit: string;
 }
 interface User {
   user_id: number;
   username: string;
 }
 
-var unitConversion = {
-  Tage: "days",
-  Wochen: "weeks",
-  Monate: "months",
-};
-
 export default {
   data() {
     return {
@@ -344,11 +339,24 @@ export default {
   },
   props: { onDashboard: Boolean, currDate: Date },
   methods: {
+    unitConversion(unitString: string): string {
+      switch (unitString) {
+        case "Tage":
+          return "days";
+        case "Wochen":
+          return "weeks";
+        case "Monate":
+          return "months";
+        default:
+          return "days";
+      }
+    },
     forwardChore(chore: Chore) {
       // change date to next date
+      let unit = this.unitConversion(chore.chore_frequency_unit);
       let newDate: string = format(
         add(chore.chore_date, {
-          [unitConversion[chore.chore_frequency_unit]]: chore.chore_frequency,
+          [unit]: chore.chore_frequency,
         }),
         "yyyy-MM-dd",
       );
@@ -378,9 +386,10 @@ export default {
     },
     backwardChore(chore: Chore) {
       // change date to previous date
+      let unit = this.unitConversion(chore.chore_frequency_unit);
       let newDate: string = format(
         add(chore.chore_date, {
-          [unitConversion[chore.chore_frequency_unit]]: -chore.chore_frequency,
+          [unit]: -chore.chore_frequency,
         }),
         "yyyy-MM-dd",
       );
@@ -410,7 +419,8 @@ export default {
     addChore() {
       this.addingChore = {
         chore_name: "",
-        chore_user: "",
+        chore_user: -1,
+        chore_id: -1,
         chore_date: format(new Date(), "yyyy-MM-dd"),
         chore_done: false,
         chore_frequency: 1,
@@ -422,17 +432,27 @@ export default {
           locale: localeDe,
           dateFormat: "dd.MM.yyyy",
           onSelect: (ret) => {
-            console.log(ret.date);
-            console.log(ret.formattedDate);
-            this.addingChore.chore_date = format(ret.date, "yyyy-MM-dd");
+            if (!this.addingChore) {
+              return;
+            }
+            if (ret.date instanceof Date) {
+              this.addingChore.chore_date = format(ret.date, "yyyy-MM-dd");
+            } else {
+              this.addingChore.chore_date = format(new Date(), "yyyy-MM-dd");
+            }
           },
         });
       });
     },
     saveNewChore() {
+      if (!this.addingChore) {
+        return;
+      }
       if (
         this.addingChore.chore_name === "" ||
-        this.addingChore.chore_user === ""
+        this.users.find(
+          (user) => user.user_id === this.addingChore?.chore_user,
+        ) === undefined
       ) {
         return;
       }
@@ -444,12 +464,14 @@ export default {
         },
         body: JSON.stringify(this.addingChore),
       }).then(() => {
-        this.allChores.push(this.addingChore);
+        this.allChores.push(
+          this.addingChore ? this.addingChore : ({} as Chore),
+        );
         this.addingChore = null;
       });
     },
     editChore(chore: Chore) {
-      this.editingChore = chore;
+      this.editingChore = chore ? chore : ({} as Chore);
       //wait for next tick to create the datepicker
       this.$nextTick(() => {
         new AirDatepicker("#chore-date-picker", {
@@ -459,7 +481,14 @@ export default {
           onSelect: (ret) => {
             console.log(ret.date);
             console.log(ret.formattedDate);
-            this.editingChore.chore_date = format(ret.date, "yyyy-MM-dd");
+            if (!this.editingChore) {
+              return;
+            }
+            if (ret.date instanceof Date) {
+              this.editingChore.chore_date = format(ret.date, "yyyy-MM-dd");
+            } else {
+              this.editingChore.chore_date = format(new Date(), "yyyy-MM-dd");
+            }
           },
         });
       });
@@ -472,7 +501,7 @@ export default {
         },
         body: JSON.stringify(chore),
       }).then(() => {
-        chore = this.editingChore;
+        chore = this.editingChore ? this.editingChore : chore;
         this.editingChore = null;
       });
     },
@@ -513,6 +542,8 @@ export default {
       let theDate: Date;
       if (typeof date === "string") {
         theDate = new Date(date);
+      } else {
+        theDate = date;
       }
       return format(theDate, "dd.MM.yyyy");
     },
@@ -523,7 +554,10 @@ export default {
         return this.allChores
           .filter((chore: Chore) => {
             return (
-              this.compareDates(new Date(chore.chore_date), this.currDate) <= 0
+              this.compareDates(
+                new Date(chore.chore_date),
+                this.currDate ? this.currDate : new Date(),
+              ) <= 0
             );
           })
           .sort((a: Chore, b: Chore) => {
@@ -532,7 +566,7 @@ export default {
       } else {
         return this.allChores
           .sort((a: Chore, b: Chore) => {
-            a.chore_id - b.chore_id;
+            return a.chore_id - b.chore_id;
           })
           .sort((a: Chore, b: Chore) => {
             return compareAsc(a.chore_date, b.chore_date);

chorechef_frontend/src/components/Mealplan.vue

@@ -71,7 +71,10 @@ import { ref } from "vue";
           meals.find(
             (meal) =>
               meal.meal_date ===
-              format(add(currDate, { days: n - 1 }), "yyyy-MM-dd"),
+              format(
+                add(currDate ? currDate : new Date(), { days: n - 1 }),
+                "yyyy-MM-dd",
+              ),
           )?.meal_name
         }}
       </div>
@@ -89,7 +92,10 @@ import { ref } from "vue";
           meals.find(
             (meal) =>
               meal.meal_date ===
-              format(add(currDate, { days: n - 1 }), "yyyy-MM-dd"),
+              format(
+                add(currDate ? currDate : new Date(), { days: n - 1 }),
+                "yyyy-MM-dd",
+              ),
           )?.meal_description
         }}
       </div>
@@ -130,9 +136,12 @@ export default {
     },
   },
   methods: {
-    mealOnPos(n: int) {
+    mealOnPos(n: number) {
       console.log("mealOnPos");
-      const date = format(add(this.currDate, { days: n - 1 }), "yyyy-MM-dd");
+      const date = format(
+        add(this.currDate ? this.currDate : new Date(), { days: n - 1 }),
+        "yyyy-MM-dd",
+      );
       return (
         this.meals.find((meal) => meal.meal_date === date) || {
           meal_name: "",
@@ -142,11 +151,17 @@ export default {
         }
       );
     },
-    dateOnPos(n: int) {
-      return format(add(this.currDate, { days: n - 1 }), "EEEEEE, d. MMM");
+    dateOnPos(n: number) {
+      return format(
+        add(this.currDate ? this.currDate : new Date(), { days: n - 1 }),
+        "EEEEEE, d. MMM",
+      );
     },
-    compDateOnPos(n: int) {
-      return format(add(this.currDate, { days: n - 1 }), "yyyy-MM-dd");
+    compDateOnPos(n: number) {
+      return format(
+        add(this.currDate ? this.currDate : new Date(), { days: n - 1 }),
+        "yyyy-MM-dd",
+      );
     },
 
     async fetchMeals() {
@@ -154,12 +169,15 @@ export default {
       const data = await response.json();
       return data as Meal[];
     },
-    startEditing(n: int) {
+    startEditing(n: number) {
       this.editingMeal = this.mealOnPos(n);
       this.rollBackMeal = { ...this.editingMeal };
     },
-    deleteMeal(n: int) {
-      const date = format(add(this.currDate, { days: n - 1 }), "yyyy-MM-dd");
+    deleteMeal(n: number) {
+      const date = format(
+        add(this.currDate ? this.currDate : new Date(), { days: n - 1 }),
+        "yyyy-MM-dd",
+      );
       const index = this.meals.findIndex((meal) => meal.meal_date === date);
       if (index !== -1) {
         this.meals.splice(index, 1);

chorechef_frontend/src/components/Settings.vue

@@ -117,7 +117,7 @@ export default {
       this.users = await response.json();
     },
     addUser() {
-      this.userToAdd = {};
+      this.userToAdd = {} as User;
     },
     editUser(user: User) {
       this.userToEdit = user;