Refactor training time input fields in Einstellungen component to improve layout and usability. Add optional information field for training times and ensure proper handling of group data. Update rendering logic in Training component to display additional information if provided.

This commit is contained in:
Torsten Schulz (local)
2025-12-19 10:23:58 +01:00
parent 6b24ac0071
commit 7e8d693832
2 changed files with 34 additions and 20 deletions

View File

@@ -211,22 +211,31 @@
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
/> />
</div> </div>
<div class="sm:col-span-2"> <div>
<label class="block text-sm font-medium text-gray-700 mb-2">Gruppe</label> <label class="block text-sm font-medium text-gray-700 mb-2">Gruppe</label>
<div class="flex space-x-2"> <input
<input v-model="zeit.gruppe"
v-model="zeit.gruppe" type="text"
type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
/> </div>
<button </div>
@click="removeTrainingTime(index)" <div class="mt-4">
class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" <label class="block text-sm font-medium text-gray-700 mb-2">Zusätzliche Information (optional)</label>
title="Löschen" <div class="flex space-x-2">
> <input
<Trash2 :size="18" /> v-model="zeit.info"
</button> type="text"
</div> placeholder="z.B. 'Nur in der Schulzeit', 'Ab 10 Jahren', etc."
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
/>
<button
@click="removeTrainingTime(index)"
class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
title="Löschen"
>
<Trash2 :size="18" />
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -584,7 +593,8 @@ const addTrainingTime = () => {
tag: 'Montag', tag: 'Montag',
von: '19:00', von: '19:00',
bis: '22:00', bis: '22:00',
gruppe: `Gruppe ${naechsteGruppeNummer}` gruppe: `Gruppe ${naechsteGruppeNummer}`,
info: ''
}) })
} }

View File

@@ -44,13 +44,17 @@
<div> <div>
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">{{ gruppe }}</h3> <h3 class="text-xl font-display font-bold text-gray-900 mb-2">{{ gruppe }}</h3>
<div class="space-y-2"> <div class="space-y-2">
<p <div
v-for="zeit in zeiten" v-for="zeit in zeiten"
:key="zeit.id" :key="zeit.id"
class="text-lg font-semibold text-primary-600"
> >
{{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr <p class="text-lg font-semibold text-primary-600">
</p> {{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr
</p>
<p v-if="zeit.info" class="text-sm text-gray-600 mt-1 italic">
{{ zeit.info }}
</p>
</div>
</div> </div>
</div> </div>
<Clock :size="32" class="text-primary-600" /> <Clock :size="32" class="text-primary-600" />