Simple Database + Endpoints

GUI/src/components/ResponsiveTabsOrList.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+defineProps<{
+  items: TabItem[];
+  tabColor?: string;
+}>();
+
+const display = useDisplay();
+const tab = ref('1');
+</script>
+
+<template>
+  <!-- Desktop: Tabs mit einzelner Anzeige -->
+  <template v-if="!display.mobile.value">
+    <v-tabs :color="tabColor ?? '#b62b2b'" v-model="tab">
+      <v-tab v-for="item in items" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </v-tab>
+    </v-tabs>
+
+    <v-divider></v-divider>
+
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item v-for="item in items" :key="item.value" :value="item.value">
+        <slot :name="item.value"></slot>
+      </v-tabs-window-item>
+    </v-tabs-window>
+  </template>
+
+  <!-- Mobile: Alle Einträge untereinander -->
+  <template v-else>
+    <template v-for="item in items" :key="item.value">
+      <slot :name="item.value"></slot>
+    </template>
+  </template>
+</template>

GUI/src/routes/Home.vue

@@ -2,9 +2,13 @@
 import CarouselItemWithTitle from '@/components/CarouselItemWithTitle.vue';
 import HomeEntrie from '@/components/HomeEntrie.vue';
 import HomeEntrieWithImagePreset from '@/components/HomeEntrieWithImagePreset.vue';
-import { ref } from 'vue';
+import ResponsiveTabsOrList from '@/components/ResponsiveTabsOrList.vue';
 
-const tab = ref("1");
+const tabItems = [
+  { value: '1', label: 'Nikolausturnier' },
+  { value: '2', label: 'Wettkämpfe' },
+  { value: '3', label: 'Kinoabende' },
+];
 </script>
 
 <template>
@@ -90,16 +94,9 @@ const tab = ref("1");
         </home-entrie>
 
         <home-entrie title="Und sonst so?"></home-entrie>
-        <v-tabs color="#b62b2b" v-model="tab" :show-arrows="$vuetify.display.mobile">
-          <v-tab value="1">Nikolausturnier</v-tab>
-          <v-tab value="2">Wettkämpfe</v-tab>
-          <v-tab value="3">Kinoabende</v-tab>
-        </v-tabs>
 
-        <v-divider></v-divider>
-
-        <v-tabs-window v-model="tab">
-          <v-tabs-window-item value="1">
+        <responsive-tabs-or-list :items="tabItems">
+          <template #1>
             <home-entrie-with-image-preset
               title="Nikolausturnier"
               image="/static/images/nikolausturnier/total.png"
@@ -110,8 +107,9 @@ const tab = ref("1");
                 gemeinsam Spaß zu haben.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-          <v-tabs-window-item value="2">
+          </template>
+
+          <template #2>
             <home-entrie-with-image-preset
               title="Wettkämpfe"
               image="/static/images/wettkampf/total.jpg"
@@ -122,8 +120,9 @@ const tab = ref("1");
                 nationalen Meisterschaften.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-          <v-tabs-window-item value="3">
+          </template>
+
+          <template #3>
             <home-entrie-with-image-preset
               title="Kinoabende"
               image="/static/images/kinoabend/total.jpg"
@@ -134,8 +133,8 @@ const tab = ref("1");
                 entspannen, Snacks teilen und über Filme und Sport plaudern.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-        </v-tabs-window>
+          </template>
+        </responsive-tabs-or-list>
       </v-container>
     </main>
   </v-container>