feat:#17 share link in user calendar + overlay refinements

frontend/src/components/CalendarViewer.vue

@@ -46,12 +46,21 @@ const props = defineProps({
   },
 });
 
+type CalendarEvent = {
+  title: string;
+  start: Date | null;
+  end: Date | null;
+  notes: string;
+  allDay: boolean;
+  location: string;
+};
+
 const op = ref();
-const clickedEvent = ref();
+const clickedEvent : Ref<CalendarEvent | null> = ref(null);
 
 const toggle = (info: EventClickArg) => {
-  const start = !info.event.start ? "" : info.event.start;
-  const end = !info.event.end ? "" : info.event.end;
+  const start = !info.event.start ? null : info.event.start;
+  const end = !info.event.end ? null : info.event.end;
 
   if (op.value.visible) {
     clickedEvent.value = null;
@@ -199,12 +208,13 @@ watch(mobilePage, () => {
   </FullCalendar>
 
   <OverlayPanel ref="op">
-    <div>
+    <div v-if="clickedEvent">
       <h3>{{ clickedEvent.title }}</h3>
-      <p>Location: {{ clickedEvent.location }}</p>
-      <p>Start: {{ clickedEvent.start?.toLocaleString() }}</p>
-      <p>End: {{ clickedEvent.end?.toLocaleString() }}</p>
-      <p>Notes: {{ clickedEvent.notes }}</p>
+      <p><b>{{ $t("calendarViewer.location") }}:</b> {{ clickedEvent.location }}</p>
+      <p><b>{{ $t("calendarViewer.start") }}:</b> {{ clickedEvent.start ? $d(clickedEvent.start, "long") : ""}}</p>
+      <p><b>{{ $t("calendarViewer.end") }}:</b> {{ clickedEvent.end ? $d(clickedEvent.end, "long") : "" }}</p>
+      <p><b>{{ $t("calendarViewer.notes") }}:</b></p>
+      <p v-for="note in clickedEvent.notes.split('\n')" class="note-line">{{ note }}</p>
     </div>
   </OverlayPanel>
 </template>
@@ -215,4 +225,9 @@ watch(mobilePage, () => {
   justify-content: space-between;
   gap: 0.5rem;
 }
+
+.note-line {
+  margin: 0;
+  margin-left: 2rem;
+}
 </style>

frontend/src/i18n/index.ts

@@ -34,6 +34,56 @@ function setup() {
       de,
       ja,
     },
+    datetimeFormats: {
+      en: {
+        short: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        },
+        long: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          weekday: "short",
+          hour: "numeric",
+          minute: "numeric",
+          hour12: true,
+        },
+      },
+      de: {
+        short: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        },
+        long: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          weekday: "short",
+          hour: "numeric",
+          minute: "numeric",
+          hour12: false,
+        },
+      },
+      ja: {
+        short: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        },
+        long: {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          weekday: "short",
+          hour: "numeric",
+          minute: "numeric",
+          hour12: true,
+        },
+      },
+    },
   });
   return _i18n;
 }

frontend/src/i18n/translations/de.json

@@ -162,6 +162,12 @@
     "module": "Modul",
     "course": "Gruppe"
   },
+  "calendarViewer": {
+    "location": "Ort",
+    "start": "Beginn",
+    "end": "Ende",
+    "notes": "Notizen"
+  },
   "faqView": {
     "headline": "Fragen und Antworten",
     "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
@@ -260,7 +266,8 @@
     "headline": "Dein Kalender",
     "subTitle": "Hier findest du die Kalenderansicht von deinem persönlichen Feed.",
     "searchPlaceholder": "Token",
-    "searchButton": "Kalender laden"
+    "searchButton": "Kalender laden",
+    "invalidToken": "Ungültiger Token"
   },
   "settings": {
     "headline": "Einstellungen",

frontend/src/i18n/translations/en.json

@@ -167,6 +167,12 @@
     "module": "module",
     "course": "course"
   },
+  "calendarViewer": {
+    "location": "location",
+    "start": "start",
+    "end": "end",
+    "notes": "notes"
+  },
   "faqView": {
     "headline": "faq",
     "firstQuestion": "How does calendar creation work with HTWKalender?",
@@ -265,7 +271,8 @@
     "headline": "user calendar",
     "subTitle": "Here you can find the calendar view of your personal feed.",
     "searchPlaceholder": "calendar token",
-    "searchButton": "load calendar"
+    "searchButton": "load calendar",
+    "invalidToken": "invalid token"
   },
   "settings": {
     "headline": "Settings",

frontend/src/i18n/translations/ja.json

@@ -162,6 +162,12 @@
     "module": "モジュール",
     "course": "コース"
   },
+  "calendarViewer": {
+    "location": "場所",
+    "start": "開始",
+    "end": "終了",
+    "notes": "メモ"
+  },
   "faqView": {
     "headline": "よくある質問",
     "firstQuestion": "HTWカレンダーを使用してカレンダーを作成するにはどうすればよいですか？",
@@ -260,7 +266,8 @@
     "headline": "ユーザーカレンダー",
     "subTitle": "ここでは、個人のフィードのカレンダー表示を見つけることができます。",
     "searchPlaceholder": "カレンダートークン",
-    "searchButton": "ロードカレンダー"
+    "searchButton": "ロードカレンダー",
+    "invalidToken": "無効なトークン"
   },
   "settings": {
     "headline": "設定",

frontend/src/main.ts

@@ -22,6 +22,7 @@ import App from "./App.vue";
 import PrimeVue from "primevue/config";
 import Badge from "primevue/badge";
 import Button from "primevue/button";
+import ButtonGroup from "primevue/buttongroup";
 import Dropdown from "primevue/dropdown";
 import Menu from "primevue/menu";
 import Menubar from "primevue/menubar";
@@ -85,6 +86,7 @@ i18n.setup();
 app.use(i18n.vueI18n);
 app.component("Badge", Badge);
 app.component("Button", Button);
+app.component("ButtonGroup", ButtonGroup);
 app.component("Menu", Menu);
 app.component("Menubar", Menubar);
 app.component("Dialog", Dialog);

frontend/src/view/UserCalendar.vue

@@ -3,10 +3,11 @@ import CalendarViewer from "@/components/CalendarViewer.vue";
 import DynamicPage from "@/view/DynamicPage.vue";
 import { useI18n } from "vue-i18n";
 import { onMounted, ref } from "vue";
-import { extractToken } from "@/helpers/token.ts";
+import { extractToken, isToken } from "@/helpers/token.ts";
 import { useToast } from "primevue/usetoast";
 import moduleStore from "@/store/moduleStore.ts";
 import tokenStore from "@/store/tokenStore.ts";
+import router from "@/router";
 
 const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
@@ -49,6 +50,33 @@ function loadCalendar() {
   });
 }
 
+function shareLink() {
+  let datePart = router.currentRoute.value.query.date;
+  if (datePart != undefined) {
+    datePart = "&date=" + datePart;
+  } else {
+    datePart = "";
+  }
+
+  const link = "https://" + window.location.hostname + "/calendar/view?token=" + token.value + datePart;
+  if (typeof navigator.share === "function" && navigator.canShare()) {
+    navigator.share({
+      title: t("calendarLink.shareLinkTitle"),
+      text: t("calendarLink.shareLinkText"),
+      url: link,
+    });
+  } else {
+    navigator.clipboard.writeText(link).then(() => {
+      toast.add({
+        severity: "info",
+        summary: t("calendarLink.copyToastSummary"),
+        detail: t("calendarLink.copyToastNotification"),
+        life: 3000,
+      });
+    });
+  }
+}
+
 onMounted(() => {
   if (token.value && token.value !== "") {
     //loadCalendar();
@@ -69,11 +97,23 @@ onMounted(() => {
         :class="flexSpecs"
         @keyup.enter="loadCalendar()"
       />
-      <Button
-        :label="$t('userCalender.searchButton')"
-        icon="pi pi-refresh"
-        @click="loadCalendar()"
-      ></Button>
+      <ButtonGroup
+        :class="flexSpecs"
+        class="flex no-wrap"
+        :style="{ 'justify-content': 'space-between' }"
+      >
+       <Button
+          :label="$t('userCalender.searchButton')"
+          icon="pi pi-refresh"
+          class="flex-grow-1"
+          @click="loadCalendar()"
+        ></Button>
+        <Button
+          icon="pi pi-share-alt"
+          @click="shareLink()"
+          :disabled="!isToken(token)"
+        ></Button>   
+      </ButtonGroup>
     </template>
     <template #content>
       <CalendarViewer ref="calendarViewerRef" :token="tokenStore().token" />