feat:#94 finished delete and added translation

frontend/src/App.vue

@@ -19,6 +19,7 @@ const isDisabled = (routeName: RouteRecordName | null | undefined) => {
   <RouterView />
   <!-- show CalendarPreview but only on specific router views -->
   <CalendarPreview v-if="isDisabled($route.name)"/>
+  <Toast />
 </template>
 
 <style scoped></style>

frontend/src/api/createFeed.ts

@@ -38,3 +38,18 @@ export async function saveIndividualFeed(
     });
   return token;
 }
+
+export async function deleteIndividualFeed(token: string): Promise<void> {
+  await fetch("/api/feed?token=" + token, {
+    method: "DELETE",
+  }).then ((response) => {
+    if (response.ok) {
+        return Promise.resolve(response);
+    } else {
+      return Promise.reject(response);
+    }
+  }).catch((error) => {
+    return Promise.reject(error);
+  });
+
+}

frontend/src/components/CalendarLink.vue

@@ -79,7 +79,7 @@ const actions = [
 </script>
 
 <template>
-  <Toast />
+
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h2>

frontend/src/components/MenuBar.vue

@@ -46,8 +46,7 @@ const items = computed(() => [
         height="40"
         src="../../public/htwk.svg"
         alt="Logo"
-        class="h-10 w-10 mr-6"
-        style="margin-left: 1rem"
+        class="h-10 w-10 mr-3"
       />
     </template>
     <template #item="{ item }">

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -73,22 +73,6 @@ const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
 function selectChange() {
   selectAll.value = selectedModules.value.length === modules.value.length;
 }
-
-function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1
-    ? t("additionalModules.modules")
-    : t("additionalModules.module");
-}
-
-function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return (
-    selectedModules.length.toString() +
-    " " +
-    itemsLabel(selectedModules) +
-    " " +
-    t("additionalModules.dropDownFooterSelected")
-  );
-}
 </script>
 
 <template>
@@ -111,7 +95,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
         :show-toggle-all="false"
-        :selected-items-label="itemsLabelWithNumber(selectedModules)"
+        :selected-items-label="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
       >
@@ -138,11 +122,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         </template>
         <template #footer>
           <div class="py-2 px-3">
-            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            item{{
-              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
-            }}
-            selected.
+            {{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
           </div>
         </template>
       </MultiSelect>

frontend/src/components/editCalendar/EditModules.vue

@@ -3,15 +3,20 @@ import { computed, Ref, ref } from "vue";
 import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
 import { fetchAllModules } from "../../api/fetchCourse.ts";
-import { saveIndividualFeed } from "../../api/createFeed.ts";
+import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
+import { useToast } from "primevue/usetoast";
 const { t } = useI18n({ useScope: "global" });
 
+const toast = useToast();
+const visible = ref(false);
+
 const store = moduleStore();
+
 const tableData = computed(() =>
   store.getAllModules().map((module: Module) => {
     return {
@@ -21,7 +26,7 @@ const tableData = computed(() =>
   }),
 );
 
-const columns = ref([
+const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
   { field: "Module", header: t("moduleInformation.module") },
   { field: "Reminder", header: t("renameModules.reminder") },
@@ -49,6 +54,31 @@ async function finalStep() {
   await saveIndividualFeed(tokenStore().token, store.getAllModules());
   await router.push("/calendar-link");
 }
+
+async function deleteFeed() {
+  deleteIndividualFeed(tokenStore().token).then(
+    () => {
+      toast.add({
+        severity: "success",
+        summary: t('editCalendarView.toast.success'),
+        detail: t('editCalendarView.toast.successDetail'),
+        life: 3000,
+      });
+      visible.value = false;
+      router.push("/");
+
+    },
+    () => {
+      toast.add({
+        severity: "error",
+        summary: t('editCalendarView.toast.error'),
+        detail: t('editCalendarView.toast.errorDetail'),
+        life: 3000,
+      });
+    },
+  );
+}
+
 </script>
 
 <template>
@@ -152,14 +182,27 @@ async function finalStep() {
         </Column>
         <template #footer>
           <div class="card flex align-items-center justify-content-between border-round m-2">
-            <Button @click="finalStep()" >Delete</Button>
-            <Button @click="finalStep()">Add more Modules</Button>
-            <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
+            <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
+            <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
+            <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
           </div>
         </template>
       </DataTable>
     </div>
   </div>
+  <div class="card flex justify-content-center">
+    <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+      <template #header>
+        <div class="inline-flex align-items-center justify-content-center gap-2">
+          <span class="font-bold white-space-nowrap">{{ $t('editCalendarView.dialog.headline') }}</span>
+        </div>
+      </template>
+      <p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p>
+      <template #footer>
+        <Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" @click="deleteFeed()" autofocus />
+      </template>
+    </Dialog>
+  </div>
 </template>
 
 <style scoped></style>

frontend/src/i18n/translations/de.json

@@ -52,7 +52,21 @@
     "headline": "Bearbeite deinen HTWKalender",
     "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
     "loadCalendar": "Kalender laden",
-    "noCalendarFound": "Keinen Kalender gefunden"
+    "noCalendarFound": "Keinen Kalender gefunden",
+    "save": "Speichern",
+    "delete": "Löschen",
+    "addModules": "Module hinzufügen",
+    "dialog": {
+      "headline": "Kalender löschen",
+      "subTitle": "Sind Sie sicher, dass Sie Ihren Kalender löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.\nBitte entfernen Sie den Kalender anschließend aus Ihrer Kalender-App.",
+      "delete": "Löschen"
+    },
+    "toast": {
+      "success": "Erfolg",
+      "error": "Fehler",
+      "successDetail": "Kalender erfolgreich gelöscht",
+      "errorDetail": "Fehler beim Löschen des Kalenders"
+    }
   },
   "additionalModules": {
     "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",

frontend/src/i18n/translations/en.json

@@ -52,7 +52,21 @@
     "headline": "edit your HTWKalender",
     "subTitle": "please enter your link or calendar token",
     "loadCalendar": "load calendar",
-    "noCalendarFound": "no calendar found"
+    "noCalendarFound": "no calendar found",
+    "save": "save",
+    "delete": "delete",
+    "addModules": "add modules",
+    "dialog": {
+      "headline": "delete calendar",
+      "subTitle": "Are you sure you want to delete your calendar? This action cannot be undone.\nPlease remove the calendar afterwords from your calendar app.",
+      "delete": "delete"
+    },
+    "toast": {
+      "success": "Success",
+      "error": "Error",
+      "successDetail": "Calendar successfully deleted",
+      "errorDetail": "Calendar could not be deleted"
+    }
   },
   "additionalModules": {
     "subTitle": "Select additional modules that are not listed in the regular semester for your course",

frontend/src/main.ts

@@ -12,7 +12,7 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import ToggleButton from "primevue/togglebutton";
-import "primevue/resources/themes/viva-dark/theme.css";
+import "primevue/resources/themes/tailwind-light/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";

frontend/src/view/EditCalendarView.vue

@@ -66,7 +66,6 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <Toast />
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
       <h3 class="text-4xl">