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>

frontend/src/main.ts

@@ -4,6 +4,7 @@ import App from "./App.vue";
 import PrimeVue from "primevue/config";
 import Button from "primevue/button";
 import Dropdown from "primevue/dropdown";
+import Menu from "primevue/menu";
 import Menubar from "primevue/menubar";
 import InputText from "primevue/inputtext";
 import InputSwitch from "primevue/inputswitch";
@@ -39,6 +40,7 @@ app.use(ToastService);
 app.use(pinia);
 app.use(DialogService);
 app.component("Button", Button);
+app.component("Menu", Menu);
 app.component("Menubar", Menubar);
 app.component("Dialog", Dialog);
 app.component("Dropdown", Dropdown);