fix:#16 refactored code duplication

frontend/src/helpers/url.ts

@@ -0,0 +1,25 @@
+//Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+//Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+//This program is free software: you can redistribute it and/or modify
+//it under the terms of the GNU Affero General Public License as published by
+//the Free Software Foundation, either version 3 of the License, or
+//(at your option) any later version.
+
+//This program is distributed in the hope that it will be useful,
+//but WITHOUT ANY WARRANTY; without even the implied warranty of
+//MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//GNU Affero General Public License for more details.
+
+//You should have received a copy of the GNU Affero General Public License
+//along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { inject } from "vue";
+
+const domain = import.meta.env.SSR
+  ? inject<string>("domain")!
+  : window.location.hostname;
+
+export function getLink(path: string, selectedRoom: string) {
+  return "https://" + domain + path + selectedRoom;
+}

frontend/src/view/CalendarLink.vue

@@ -19,19 +19,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 <script lang="ts" setup>
 import tokenStore from "@/store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
-import { computed, inject, onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { router } from "@/main";
 import { useI18n } from "vue-i18n";
+import { getLink } from "@/helpers/url.ts";
 
 const { t } = useI18n({ useScope: "global" });
 
 const toast = useToast();
-const domain = import.meta.env.SSR
-  ? inject<string>("domain")!
-  : window.location.hostname;
-
-const getLink = () =>
-  "https://" + domain + "/api/feed?token=" + tokenStore().token;
 
 const show = () => {
   toast.add({
@@ -42,6 +37,15 @@ const show = () => {
   });
 };
 
+const failedClipboard = () => {
+  toast.add({
+    severity: "error",
+    summary: t("calendarLink.copyToastError"),
+    detail: t("calendarLink.copyToastErrorDetail"),
+    life: 3000,
+  });
+};
+
 onMounted(() => {
   rerouteIfTokenIsEmpty();
 });
@@ -54,27 +58,20 @@ function rerouteIfTokenIsEmpty() {
 
 function copyToClipboard() {
   // Copy the text inside the text field
-  navigator.clipboard.writeText(getLink()).then(show, () => {
+  navigator.clipboard.writeText(getLink("/api/feed?token=", tokenStore().token)).then(() => show(),() => failedClipboard());
-    toast.add({
-      severity: "error",
-      summary: t("calendarLink.copyToastError"),
-      detail: t("calendarLink.copyToastErrorDetail"),
-      life: 3000,
-    });
-  });
 }
 
 const forwardToGoogle = () => {
   window.open(
     "https://calendar.google.com/calendar/u/0/r?cid=" +
-      encodeURI(getLink().replace("https://", "http://")),
+      encodeURI(getLink("/api/feed?token=", tokenStore().token).replace("https://", "http://")),
   );
 };
 
 const forwardToMicrosoft = () => {
   window.open(
     "https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" +
-      encodeURI(getLink()),
+      encodeURI(getLink("/api/feed?token=", tokenStore().token)),
   );
 };
 
@@ -117,7 +114,7 @@ const actions = computed(() => [
   <div class="flex flex-column mt-8">
     <div class="flex align-items-center justify-content-center m-2">
       <h2 class="text-base md:text-2xl">
-        {{ getLink() }}
+        {{ getLink("/api/feed?token=", tokenStore().token) }}
       </h2>
     </div>
     <div class="flex align-items-center justify-content-center m-2">

frontend/src/view/rooms/FreeRooms.vue

@@ -118,7 +118,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
         :rows="10"
         :global-filter-fields="['room']"
       >
-        <Column field="room" sortable :header="$t('freeRooms.room')">
+        <Column field="room" :sortable="true" :header="$t('freeRooms.room')">
           <template #filter="{ filterModel, filterCallback }">
             <InputText
               v-model="filterModel.value"

frontend/src/view/rooms/RoomFinder.vue

@@ -17,7 +17,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { Ref, computed, ref, watch, inject } from "vue";
+import { Ref, computed, ref, watch } from "vue";
 import { fetchRoom } from "@/api/fetchRoom.ts";
 import DynamicPage from "@/view/DynamicPage.vue";
 import RoomOccupation from "@/components/RoomOccupation.vue";
@@ -25,6 +25,7 @@ import { computedAsync } from "@vueuse/core";
 import { router } from "@/main";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";
+import { getLink } from "@/helpers/url.ts";
 const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
 
@@ -103,12 +104,6 @@ watch(selectedRoom, (newRoom: Room) => {
   }
 });
 
-const domain = import.meta.env.SSR
-  ? inject<string>("domain")!
-  : window.location.hostname;
-
-const getLink = (selectedRoom: string) =>
-  "https://" + domain + "/api/feed/room?id=" + selectedRoom;
 
 const button = computed(() => {
   return {
@@ -118,7 +113,7 @@ const button = computed(() => {
     onClick: () => {
       // Copy iCal link to clipboard
       // localhost/api/feed/room?id=selectedRoom.value.name
-      navigator.clipboard.writeText(getLink(selectedRoom.value.name)).then(show, () => failedClipboard())
+      navigator.clipboard.writeText(getLink("/api/feed/room?id=",  selectedRoom.value.name)).then(() => show, () => failedClipboard)
     },
   };
 });
@@ -148,12 +143,10 @@ const button = computed(() => {
     <template #content>
       <RoomOccupation :room="selectedRoom.name" />
     </template>
-    <template #footer>
       <Button
         class="col-12 md:col-4 mt-3"
         :label="$t('roomFinderPage.reset')"
         @click="selectedRoom.name = ''"
       />
-    </template>
   </DynamicPage>
 </template>