From bf3e0cd24503770e251ca3669f8deaed165c03e1 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 5 Dec 2024 16:37:10 +0100
Subject: [PATCH] calendar link and typed link

---
 README.md                                     |   4 +
 .../admin/club/calendar/CalendarLinkModal.vue | 138 ++++++++++++++++++
 .../calendarType/CalendarTypeListItem.vue     |   1 +
 .../public/calendar/CalendarLinkModal.vue     |  36 +++++
 src/layouts/FullContent.vue                   |   2 +-
 src/router/index.ts                           |   5 +
 src/serverCom.ts                              |   7 +-
 src/views/admin/club/calendar/Calendar.vue    |   7 +
 src/views/public/calendar/Calendar.vue        |  17 ++-
 src/views/public/calendar/CalendarExplain.vue |  24 +++
 10 files changed, 236 insertions(+), 5 deletions(-)
 create mode 100644 src/components/admin/club/calendar/CalendarLinkModal.vue
 create mode 100644 src/components/public/calendar/CalendarLinkModal.vue
 create mode 100644 src/views/public/calendar/CalendarExplain.vue

diff --git a/README.md b/README.md
index 8d0d6eb..8efd469 100644
--- a/README.md
+++ b/README.md
@@ -30,11 +30,15 @@ services:
     container_name: ff_member_administration_ui
     restart: unless-stopped
 
+    #environment:
+    #  - SERVER_ADRESS=<backend_host> # wichtig: ohne https:// bzw http://
     #volumes:
     #  - <volume|local path>/favicon.png:/app/public/favicon.png
     #  - <volume|local path>/favicon.png:/app/public/FFW-Logo.svg
 ```
 
+Wenn keine Server-Adresse angegeben wird, wird versucht das Backend unter der URL des Frontends zu erreichen. Dazu muss das Backend auf der gleichen URL wie das Frontend laufen. Zur Unterscheidung von Frontend und Backend bei gleicher URL müssen alle Anfragen mit dem PathPrefix `/api` an das Backend weitergeleitet werden.
+
 Führen Sie dann den folgenden Befehl im Verzeichnis der compose-Datei aus, um den Container zu starten:
 
 ```sh
diff --git a/src/components/admin/club/calendar/CalendarLinkModal.vue b/src/components/admin/club/calendar/CalendarLinkModal.vue
new file mode 100644
index 0000000..12d43ab
--- /dev/null
+++ b/src/components/admin/club/calendar/CalendarLinkModal.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Kalenderlink</p>
+    </div>
+    <br />
+    <div class="flex flex-col gap-2">
+      <div>
+        <Listbox v-model="selectedTypes" name="type" multiple>
+          <ListboxLabel>Typen zur Anzeige auswählen</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start">
+                {{
+                  selectedTypes.length != 0
+                    ? selectedTypes?.map((t) => t.type).join(", ")
+                    : "Standard-Typen werden ausgeliefert"
+                }}
+              </span>
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
+                  <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
+                    <span :class="['font-normal', 'block truncate']">keine Auswahl vorhanden</span>
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="type in calendarTypes"
+                  :key="type.id"
+                  :value="type"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">
+                      {{ type.type }}
+                      <small v-if="type.passphrase">(passwortgeschützt)</small>
+                      <small v-if="type.nscdr">(standard-Auslieferung)</small>
+                    </span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <p class="flex flex-row text-sm">
+        <InformationCircleIcon class="text-gray-500 h-5 w-5" /> Wenn kein Typ ausgewählt ist, werden die Standard-Typen
+        zur Verfügung gestellt: <br />
+        -> {{ defaultTypes }}
+      </p>
+      <br />
+      <TextCopy :copyText="generatedLink" />
+      <br />
+    </div>
+
+    <RouterLink
+      :to="{ name: 'public-calendar' }"
+      title="Zur öffentlichen Kalender Anzeige"
+      class="absolute top-3 right-3"
+      target="_blank"
+    >
+      <CalendarDaysIcon class="text-gray-500 h-5 w-5" />
+    </RouterLink>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { RouterLink } from "vue-router";
+import { useModalStore } from "@/stores/modal";
+import { useCalendarTypeStore } from "@/stores/admin/calendarType";
+import type { CalendarTypeViewModel } from "@/viewmodels/admin/calendarType.models";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import TextCopy from "@/components/TextCopy.vue";
+import { CalendarDaysIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { host } from "@/serverCom";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      selectedTypes: [] as Array<CalendarTypeViewModel>,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useCalendarTypeStore, ["calendarTypes"]),
+    defaultTypes() {
+      return this.calendarTypes
+        .filter((t) => t.nscdr)
+        .map((t) => t.type)
+        .join(", ");
+    },
+    generatedLink() {
+      let extend = this.selectedTypes.map((t) => [t.type, t.passphrase].filter((at) => at).join(":"));
+      return `webcal://${host || window.location.host}/api/public/calendar${extend.length == 0 ? "" : "?types=" + extend.join("&types=")}`;
+    },
+  },
+  mounted() {
+    this.fetchCalendarTypes();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useCalendarTypeStore, ["fetchCalendarTypes"]),
+  },
+});
+</script>
diff --git a/src/components/admin/settings/calendarType/CalendarTypeListItem.vue b/src/components/admin/settings/calendarType/CalendarTypeListItem.vue
index db52377..f80cbc7 100644
--- a/src/components/admin/settings/calendarType/CalendarTypeListItem.vue
+++ b/src/components/admin/settings/calendarType/CalendarTypeListItem.vue
@@ -7,6 +7,7 @@
         </div>
         <p>{{ calendarType.type }}</p>
         <small v-if="calendarType.passphrase">(passwortgeschützt)</small>
+        <small v-if="calendarType.nscdr">(standard-Auslieferung)</small>
       </div>
       <div class="flex flex-row">
         <RouterLink
diff --git a/src/components/public/calendar/CalendarLinkModal.vue b/src/components/public/calendar/CalendarLinkModal.vue
new file mode 100644
index 0000000..c7793b3
--- /dev/null
+++ b/src/components/public/calendar/CalendarLinkModal.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Kalenderlink</p>
+    </div>
+    <br />
+    <TextCopy :copyText="generatedLink" />
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import TextCopy from "@/components/TextCopy.vue";
+import { host } from "@/serverCom";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    generatedLink() {
+      return `webcal://${host || window.location.host}/api/public/calendar`;
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>
diff --git a/src/layouts/FullContent.vue b/src/layouts/FullContent.vue
index ae0f638..494bb47 100644
--- a/src/layouts/FullContent.vue
+++ b/src/layouts/FullContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full flex flex-row gap-4">
-    <div class="max-w-full flex grow gap-4 md:flex-row flex-col">
+    <div class="max-w-full flex grow gap-4 flex-col">
       <slot name="main"></slot>
     </div>
   </div>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7b3272d..1abc0d1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -540,6 +540,11 @@ const router = createRouter({
           name: "public-calendar",
           component: () => import("@/views/public/calendar/Calendar.vue"),
         },
+        {
+          path: "calendar-explain",
+          name: "public-calendar-explain",
+          component: () => import("@/views/public/calendar/CalendarExplain.vue"),
+        },
       ],
     },
     {
diff --git a/src/serverCom.ts b/src/serverCom.ts
index 0c3e8bd..e6bdf38 100644
--- a/src/serverCom.ts
+++ b/src/serverCom.ts
@@ -4,8 +4,11 @@ import router from "./router";
 
 let devMode = process.env.NODE_ENV === "development";
 
+let host = devMode ? "localhost:5000" : process.env.SERVER_ADDRESS || "";
+let url = devMode ? "http://" + host : (host ? "https://" : "") + host;
+
 const http = axios.create({
-  baseURL: (devMode ? "http://localhost:5000" : "") + "/api",
+  baseURL: url + "/api",
   headers: {
     "Cache-Control": "no-cache",
     Pragma: "no-cache",
@@ -81,4 +84,4 @@ export async function refreshToken(): Promise<void> {
   });
 }
 
-export { http };
+export { http, host };
diff --git a/src/views/admin/club/calendar/Calendar.vue b/src/views/admin/club/calendar/Calendar.vue
index ecd206a..fbb4e25 100644
--- a/src/views/admin/club/calendar/Calendar.vue
+++ b/src/views/admin/club/calendar/Calendar.vue
@@ -3,6 +3,7 @@
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
     </template>
     <template #diffMain>
@@ -25,6 +26,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/calendar";
 import { useAbilityStore } from "@/stores/ability";
+import { LinkIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -87,6 +89,11 @@ export default defineComponent({
         e.event.id
       );
     },
+    openLinkModal(e: any) {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CalendarLinkModal.vue")))
+      );
+    },
   },
 });
 
diff --git a/src/views/public/calendar/Calendar.vue b/src/views/public/calendar/Calendar.vue
index cec6f11..2a185d2 100644
--- a/src/views/public/calendar/Calendar.vue
+++ b/src/views/public/calendar/Calendar.vue
@@ -1,8 +1,13 @@
 <template>
   <MainTemplate :showBack="false">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <div class="grow"></div>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        <RouterLink :to="{ name: 'public-calendar-explain' }">
+          <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />
+        </RouterLink>
       </div>
     </template>
     <template #diffMain>
@@ -14,14 +19,18 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useModalStore } from "@/stores/modal";
 import MainTemplate from "@/templates/Main.vue";
 import FullCalendar from "@fullcalendar/vue3";
 import deLocale from "@fullcalendar/core/locales/de";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
+import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline";
 import type { CalendarViewModel } from "@/viewmodels/admin/calendar.models";
+import { RouterLink } from "vue-router";
 </script>
 
 <script lang="ts">
@@ -71,6 +80,7 @@ export default defineComponent({
     this.fetchCalendars();
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
     fetchCalendars() {
       this.$http
         .get("/public/calendar?output=json")
@@ -79,6 +89,9 @@ export default defineComponent({
         })
         .catch((err) => {});
     },
+    openLinkModal(e: any) {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
+    },
   },
 });
 </script>
diff --git a/src/views/public/calendar/CalendarExplain.vue b/src/views/public/calendar/CalendarExplain.vue
new file mode 100644
index 0000000..0aa1ac2
--- /dev/null
+++ b/src/views/public/calendar/CalendarExplain.vue
@@ -0,0 +1,24 @@
+<template>
+  <MainTemplate :showBack="false">
+    <template #headerInsert>
+      <RouterLink
+        :to="{
+          name: 'public-calendar',
+        }"
+        class="mid:hidden text-primary"
+      >
+        zum Kalender
+      </RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kalender-Erklärung</h1>
+      </div>
+    </template>
+    <template #main> Kalender-Erklärung zur Nutzung </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>