syncing

src/components/admin/club/protocol/CreateProtocolModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Protokoll erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" required autocomplete="false" />
+      </div>
+      <div>
+        <label for="date">Datum</label>
+        <input type="date" id="date" required />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useProtocolStore } from "@/stores/admin/protocol";
+import type { CreateProtocolViewModel } from "@/viewmodels/admin/protocol.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useProtocolStore, ["createProtocol"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createProtocol: CreateProtocolViewModel = {
+        title: formData.title.value,
+        date: formData.date.value,
+      };
+      this.createProtocol(createProtocol)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/club/protocol/CurrentlySyncingModal.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Protokoll wird noch synchronisiert</p>
+    </div>
+    <br />
+
+    <p>Es gibt noch Daten, welche synchronisiert werden müssen.</p>
+    <p>Dieses PopUp entfernt sich von selbst nach erfolgreicher Synchronisierung.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useProtocolStore } from "@/stores/admin/protocol";
+import type { CreateProtocolViewModel } from "@/viewmodels/admin/protocol.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/club/protocol/ProtocolListItem.vue

@@ -4,10 +4,10 @@
       :to="{ name: 'admin-club-protocol-overview', params: { protocolId: protocol.id } }"
       class="bg-primary p-2 text-white flex flex-row justify-between items-center"
     >
-      <p>{{ protocol.title }}</p>
+      <p>{{ protocol.title }} - {{ protocol.date }}</p>
     </RouterLink>
-    <div class="p-2">
-      <p>Infos</p>
+    <div class="p-2 max-h-48 overflow-y-auto">
+      <p v-html="protocol.summary"></p>
     </div>
   </div>
 </template>

src/components/admin/club/protocol/ProtocolSyncing.vue

@@ -0,0 +1,72 @@
+<template>
+  <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
+  <CloudArrowUpIcon v-else-if="syncing == 'detectedChanges'" class="w-5 h-5 cursor-pointer" @click="syncAll" />
+  <ArrowPathIcon v-else-if="syncing == 'syncing'" class="w-5 h-5 animate-spin" />
+  <ExclamationTriangleIcon v-else class="w-5 h-5 animate-[ping_1s_ease-in-out_3] text-red-500" />
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useProtocolStore } from "@/stores/admin/protocol";
+import { ArrowPathIcon, CloudArrowUpIcon, CloudIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["executeSyncAll"],
+  watch: {
+    executeSyncAll() {
+      this.syncAll();
+    },
+    syncing() {
+      this.$emit("syncState", this.syncing);
+    },
+    detectedChangeProtocol() {
+      clearTimeout(this.protocolTimer);
+      if (this.detectedChangeProtocol == false) {
+        return;
+      }
+      this.setProtocolSyncingState("detectedChanges");
+      this.protocolTimer = setTimeout(() => {
+        this.synchronizeActiveProtocol();
+      }, 10000);
+    },
+  },
+  emits: {
+    syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      return typeof state == "string";
+    },
+  },
+  data() {
+    return {
+      protocolTimer: undefined as undefined | any,
+    };
+  },
+  mounted() {
+    this.$emit("syncState", this.syncing);
+  },
+  beforeUnmount() {
+    if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+  },
+  computed: {
+    ...mapState(useProtocolStore, ["activeProtocolObj", "syncingProtocol", "detectedChangeProtocol"]),
+
+    syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
+      let states = [this.syncingProtocol];
+
+      if (states.includes("failed")) return "failed";
+      else if (states.includes("syncing")) return "syncing";
+      else if (states.includes("detectedChanges")) return "detectedChanges";
+      else return "synced";
+    },
+  },
+  methods: {
+    ...mapActions(useProtocolStore, ["synchronizeActiveProtocol", "setProtocolSyncingState"]),
+    syncAll() {
+      if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+      this.synchronizeActiveProtocol();
+    },
+  },
+});
+</script>