Merge branch '17-use-webshare-api' into 'main'

Resolve "use share api for room occupancies/calenders"

Closes #17

See merge request htwk-software/htwkalender-pwa!22

frontend/src/components/CalendarLink.vue

@@ -84,28 +84,76 @@ const forwardToHTWKalendar = () => {
   });
 };
 
-const actions = computed(() => [
-  {
-    label: t("calendarLink.copyToClipboard"),
-    icon: "pi pi-copy",
-    command: copyToClipboard,
-  },
-  {
-    label: t("calendarLink.toGoogleCalendar"),
-    icon: "pi pi-google",
-    command: forwardToGoogle,
-  },
-  {
-    label: t("calendarLink.toMicrosoftCalendar"),
-    icon: "pi pi-microsoft",
-    command: forwardToMicrosoft,
-  },
-  {
-    label: t("calendarLink.toHTWKalendar"),
-    icon: "pi pi-home",
-    command: forwardToHTWKalendar,
-  },
-]);
+const shareLink = () => {
+  if (typeof navigator.share === 'function' && navigator.canShare()) {
+    navigator
+      .share({
+        title: t("calendarLink.shareTitle"),
+        text: t("calendarLink.shareText") + getLink(),
+        url: "https://" + domain + "/",
+      })
+      .then(() => {
+        toast.add({
+          severity: "info",
+          summary: t("calendarLink.shareToastSummary"),
+          detail: t("calendarLink.shareToastNotification"),
+          life: 3000,
+        });
+      })
+      .catch(() => {
+        toast.add({
+          severity: "error",
+          summary: t("calendarLink.shareToastError"),
+          detail: t("calendarLink.shareToastErrorDetail"),
+          life: 3000,
+        });
+      });
+  } else {
+    toast.add({
+      severity: "error",
+      summary: t("calendarLink.shareToastError"),
+      detail: t("calendarLink.shareToastErrorDetail"),
+      life: 3000,
+    });
+  }
+};
+
+const actions = computed(() => {
+    const actionList = [
+    {
+      label: t("calendarLink.copyToClipboard"),
+      icon: "pi pi-copy",
+      command: copyToClipboard,
+    },
+    {
+      label: t("calendarLink.toGoogleCalendar"),
+      icon: "pi pi-google",
+      command: forwardToGoogle,
+    },
+    {
+      label: t("calendarLink.toMicrosoftCalendar"),
+      icon: "pi pi-microsoft",
+      command: forwardToMicrosoft,
+    },
+    {
+      label: t("calendarLink.toHTWKalendar"),
+      icon: "pi pi-home",
+      command: forwardToHTWKalendar,
+    }
+  ];
+
+  if (typeof navigator.share === 'function' && navigator.canShare()) {
+    actionList.push({
+      label: t("calendarLink.share"),
+      icon: "pi pi-share-alt",
+      command: shareLink,
+    });
+  }
+
+  return actionList;
+}
+
+);
 </script>
 
 <template>

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" :key="note">{{ 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>