Display Settings

src/components/AppIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <img :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
+</template>
+
+<script setup lang="ts">
+import { url } from "@/serverCom";
+</script>

src/components/admin/management/setting/AppSetting.vue

@@ -4,15 +4,39 @@
       <p class="text-lg font-semibold">Anwendungs Einstellungen</p>
     </div>
     <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
-      <input type="text" />
+      <div class="w-full">
+        <label for="name">Vereins-Name</label>
+        <input id="name" type="text" readonly :value="appSettings['app.custom_login_message']" />
+      </div>
+      <div class="w-full flex flex-row items-center gap-2">
+        <div
+          v-if="true"
+          class="border-2 border-gray-500 rounded-sm"
+          :class="appSettings['app.show_link_to_calendar'] ? 'bg-gray-500' : 'h-3 w-3'"
+        >
+          <CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
+        </div>
+        <input v-else id="name" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
+        <label for="name">Kalender-Link anzeigen</label>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 </script>
 
 <script lang="ts">
-export default defineComponent({});
+export default defineComponent({
+  computed: {
+    ...mapState(useSettingStore, ["readByTopic"]),
+    appSettings() {
+      return this.readByTopic("app");
+    },
+  },
+});
 </script>

src/components/admin/management/setting/BackupSetting.vue

@@ -4,15 +4,31 @@
       <p class="text-lg font-semibold">Backup Einstellungen</p>
     </div>
     <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
-      <input type="text" />
+      <div class="w-full">
+        <label for="name">Anzahl paralleler Backups</label>
+        <input id="name" type="text" readonly :value="backupSettings['backup.copies']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Intervall zur Backup-Erstellung</label>
+        <input id="name" type="text" readonly :value="backupSettings['backup.interval']" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 </script>
 
 <script lang="ts">
-export default defineComponent({});
+export default defineComponent({
+  computed: {
+    ...mapState(useSettingStore, ["readByTopic"]),
+    backupSettings() {
+      return this.readByTopic("backup");
+    },
+  },
+});
 </script>

src/components/admin/management/setting/ClubSetting.vue

@@ -4,15 +4,55 @@
       <p class="text-lg font-semibold">Vereins Einstellungen</p>
     </div>
     <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
-      <input type="text" />
+      <div class="w-full">
+        <p>Vereins-Icon</p>
+        <AppIcon v-if="clubSettings['club.icon'] != ''" class="h-10! max-w-full mx-auto" />
+        <div v-else class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm">
+          Kein Icon hochgeladen
+        </div>
+      </div>
+      <div class="w-full">
+        <p>Vereins-Logo</p>
+        <AppLogo v-if="clubSettings['club.logo'] != ''" class="h-10! max-w-full mx-auto" />
+        <div v-else class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm">
+          Kein Logo hochgeladen
+        </div>
+      </div>
+      <div class="w-full">
+        <label for="name">Vereins-Name</label>
+        <input id="name" type="text" readonly :value="clubSettings['club.name']" />
+      </div>
+      <div class="w-full">
+        <label for="imprint">Vereins-Impressum Link</label>
+        <input id="imprint" type="url" readonly :value="clubSettings['club.imprint']" />
+      </div>
+      <div class="w-full">
+        <label for="icon">Vereins-Datenschutz Link</label>
+        <input id="privacy" type="url" readonly :value="clubSettings['club.privacy']" />
+      </div>
+      <div class="w-full">
+        <label for="website">Vereins-Webseite Link</label>
+        <input id="website" type="url" readonly :value="clubSettings['club.website']" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import AppIcon from "@/components/AppIcon.vue";
+import AppLogo from "@/components/AppLogo.vue";
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 </script>
 
 <script lang="ts">
-export default defineComponent({});
+export default defineComponent({
+  computed: {
+    ...mapState(useSettingStore, ["readByTopic"]),
+    clubSettings() {
+      return this.readByTopic("club");
+    },
+  },
+});
 </script>

src/components/admin/management/setting/MailSetting.vue

@@ -4,15 +4,54 @@
       <p class="text-lg font-semibold">E-Mail Einstellungen</p>
     </div>
     <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
-      <input type="text" />
+      <div class="w-full">
+        <label for="name">Mailadresse</label>
+        <input id="name" type="text" readonly :value="mailSettings['mail.email']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Benutzername</label>
+        <input id="name" type="text" readonly :value="mailSettings['mail.username']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Server-Host</label>
+        <input id="name" type="text" readonly :value="mailSettings['mail.host']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Server-Port</label>
+        <input id="name" type="text" readonly :value="mailSettings['mail.port']" />
+      </div>
+      <div class="w-full flex flex-row items-center gap-2">
+        <div
+          v-if="true"
+          class="border-2 border-gray-500 rounded-sm"
+          :class="mailSettings['mail.secure'] ? 'bg-gray-500' : 'h-3 w-3'"
+        >
+          <CheckIcon v-if="mailSettings['mail.secure']" class="h-2.5 w-2.5 stroke-4 text-white" />
+        </div>
+        <input v-else id="name" type="checkbox" :checked="mailSettings['mail.secure']" />
+        <label for="name">Secure-Verbindung</label>
+      </div>
+      <div class="w-full">
+        <label for="name">Passwort</label>
+        <input id="name" type="password" readonly />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 </script>
 
 <script lang="ts">
-export default defineComponent({});
+export default defineComponent({
+  computed: {
+    ...mapState(useSettingStore, ["readByTopic"]),
+    mailSettings() {
+      return this.readByTopic("mail");
+    },
+  },
+});
 </script>

src/components/admin/management/setting/SessionSetting.vue

@@ -4,15 +4,35 @@
       <p class="text-lg font-semibold">Login-Session Einstellungen</p>
     </div>
     <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
-      <input type="text" />
+      <div class="w-full">
+        <label for="name">JWT-Gültigkeitsdauer</label>
+        <input id="name" type="text" readonly :value="sessionSettings['session.jwt_expiration']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Session-Gültigkeitsdauer</label>
+        <input id="name" type="text" readonly :value="sessionSettings['session.refresh_expiration']" />
+      </div>
+      <div class="w-full">
+        <label for="name">Sesion-Gültigkeitsdauer PWA</label>
+        <input id="name" type="text" readonly :value="sessionSettings['session.pwa_refresh_expiration']" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingStore } from "@/stores/admin/management/setting";
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 </script>
 
 <script lang="ts">
-export default defineComponent({});
+export default defineComponent({
+  computed: {
+    ...mapState(useSettingStore, ["readByTopic"]),
+    sessionSettings() {
+      return this.readByTopic("session");
+    },
+  },
+});
 </script>

src/stores/admin/management/setting.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
-import { type SettingString, type SettingValueMapping } from "@/types/settingTypes";
+import type { SettingString, SettingTopic, SettingValueMapping } from "@/types/settingTypes";
 import type { AxiosResponse } from "axios";
 
 export const useSettingStore = defineStore("setting", {
@@ -16,6 +16,19 @@ export const useSettingStore = defineStore("setting", {
       <K extends SettingString>(key: K): SettingValueMapping[K] => {
         return state.settings[key];
       },
+    readByTopic:
+      (state) =>
+      <T extends SettingTopic>(
+        topic: T
+      ): { [K in SettingString as K extends `${T}.${string}` ? K : never]: SettingValueMapping[K] } => {
+        return Object.entries(state.settings).reduce((acc, [key, value]) => {
+          const typedKey = key as SettingString;
+          if (key.startsWith(topic)) {
+            acc[typedKey] = value;
+          }
+          return acc;
+        }, {} as any);
+      },
   },
   actions: {
     fetchSettings() {