From 8d17cad299514a680f0bd099a551d6e5d55e529a Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 13 Nov 2025 17:34:10 +0100
Subject: [PATCH] Add mobile tab navigation to DiaryView for improved user
 experience
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces a mobile-friendly tab navigation system in the DiaryView component, allowing users to switch between 'Trainingsplan', 'Teilnehmer', and 'Aktivitäten' seamlessly. The active tab state is managed with a new reactive property, enhancing the overall usability of the application on mobile devices.
---
 frontend/src/views/DiaryView.vue | 59 +++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 7684e37..5248b00 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -55,8 +55,32 @@
             </form>
         </div>
         <div v-if="date !== 'new' && date !== null" style="overflow: visible">
+            <!-- Tab-Navigation für Mobile -->
+            <div class="mobile-tabs">
+                <button 
+                    class="tab-button" 
+                    :class="{ active: activeTab === 'plan' }"
+                    @click="activeTab = 'plan'"
+                >
+                    Trainingsplan
+                </button>
+                <button 
+                    class="tab-button" 
+                    :class="{ active: activeTab === 'members' }"
+                    @click="activeTab = 'members'"
+                >
+                    Teilnehmer
+                </button>
+                <button 
+                    class="tab-button" 
+                    :class="{ active: activeTab === 'activities' }"
+                    @click="activeTab = 'activities'"
+                >
+                    Aktivitäten
+                </button>
+            </div>
             <div class="columns">
-                <div class="column">
+                <div class="column" :class="{ 'mobile-tab-content': true, 'active': activeTab === 'plan' }">
                     <h3 v-if="showGeneralData">Gruppenverwaltung</h3>
                     <div v-if="showGeneralData">
                         <h4>Vorhandene Gruppen</h4>
@@ -366,28 +390,15 @@
                             herunterladen</button>
                     </div>
                 </div>
-                <div class="column" style="padding-bottom:4em">
-                    <div>
-                        <button @click="addAccident">Unfall buchen</button>
-                        <div v-if="accidents.length > 0">
+                <div class="column mobile-sidebar" :class="{ 'mobile-tab-content': true, 'active': activeTab === 'members' || activeTab === 'activities' }" style="padding-bottom:4em">
+                    <!-- Mobile: Nur Mitglieder-Tab -->
+                    <div class="mobile-tab-section" v-show="activeTab === 'members'">
+                        <div>
+                            <button @click="addAccident">Unfall buchen</button>
+                            <div v-if="accidents.length > 0">
+                            </div>
                         </div>
-                    </div>
-                    <h3 class="clickable" @click="toggleActivitiesBox">Aktivitäten <span>{{ showActivitiesBox ? '-' :
-                            '+' }}</span></h3>
-                    <div v-if="showActivitiesBox" class="collapsible-box">
-                        <textarea v-model="newActivity"></textarea>
-                        <button @click="addActivity">Aktivität hinzufügen</button>
-                        <ul>
-                            <li v-for="activity in activities" :key="activity.id">
-                                {{ activity.description }}
-                            </li>
-                        </ul>
-                        <multiselect v-model="selectedActivityTags" :options="availableTags"
-                            placeholder="Tags auswählen" label="name" track-by="id" multiple :close-on-select="true"
-                            @tag="addNewTag" @remove="removeActivityTag" :allow-empty="false"
-                            @keydown.enter.prevent="addNewTagFromInput" />
-                    </div>
-                    <h3>Teilnehmer ({{ participants.length }})</h3>
+                        <h3>Teilnehmer ({{ participants.length }})</h3>
                     <ul>
                         <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item participant-row" 
                             :class="{ 
@@ -726,7 +737,9 @@ export default {
                 gender: ''
             },
             // Court Drawing Dialog
-            showDrawingDialog: false
+            showDrawingDialog: false,
+            // Tab-Navigation für Mobile
+            activeTab: 'plan' // 'plan', 'members', 'activities'
         };
     },
     watch: {