2 add direct links to google and microsoft

frontend/src/components/CalendarLink.vue

@@ -7,6 +7,8 @@ const toast = useToast();
 
 const domain = window.location.hostname;
 
+const getLink = () => "https://" + domain + "/api/feed?token=" + tokenStore().token;
+
 const show = () => {
   toast.add({
     severity: "info",
@@ -27,11 +29,47 @@ function rerouteIfTokenIsEmpty() {
 }
 
 function copyToClipboard() {
-  const text = "https://" + domain + "/api/feed?token=" + tokenStore().token;
   // Copy the text inside the text field
-  navigator.clipboard.writeText(text);
-  show();
+  navigator.clipboard.writeText(getLink()).then(
+    show,
+    (err) => {
+      console.error("Could not copy text: ", err);
+      toast.add({
+        severity: "error",
+        summary: "Error",
+        detail: "Could not copy text",
+        life: 3000,
+      });
+    },
+  );
 }
+
+const forwardToGoogle = () => {
+  window.open("https://calendar.google.com/calendar/u/0/r?cid=" + encodeURI(getLink().replace("https://", "http://")));
+};
+
+const forwardToMicrosoft = () => {
+  window.open("https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" + encodeURI(getLink()));
+};
+
+const actions = [
+  {
+    label: "Copy to Clipboard",
+    icon: "pi pi-copy",
+    command: copyToClipboard,
+  },
+  {
+    label: "To Google Calendar",
+    icon: "pi pi-google",
+    command: forwardToGoogle,
+  },
+  {
+    label: "To Microsoft Calendar",
+    icon: "pi pi-microsoft",
+    command: forwardToMicrosoft,
+  },
+];
+
 </script>
 
 <template>
@@ -39,11 +77,11 @@ function copyToClipboard() {
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h2>
-        {{ "https://" + domain + "/api/feed?token=" + tokenStore().token }}
+        {{ getLink() }}
       </h2>
     </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="copyToClipboard">Copy iCal Link</Button>
+    <div class="flex align-items-center justify-content-center m-2">
+      <Menu :model="actions" />
     </div>
   </div>
 </template>