Enhance Vereinsmeisterschaften and Vorstand pages with image support for players and board members. Implement lightbox functionality for player images in Vereinsmeisterschaften. Update CSV handling to include image filenames for better data management. Refactor components to utilize PersonCard for board members, improving code readability and maintainability.
This commit is contained in:
Torsten Schulz (local)
@@ -295,6 +295,12 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<ImageUpload
|
||||
v-model="trainer.imageFilename"
|
||||
label="Foto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -459,6 +465,12 @@
|
||||
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 class="sm:col-span-2">
|
||||
<ImageUpload
|
||||
v-model="position.imageFilename"
|
||||
label="Foto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,9 +123,28 @@
|
||||
<span class="w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{{ result.platz }}
|
||||
</span>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div v-if="result.imageFilename1" class="flex-shrink-0">
|
||||
<img
|
||||
:src="`/api/personen/${result.imageFilename1}?width=32&height=32`"
|
||||
:alt="result.spieler1"
|
||||
class="w-8 h-8 rounded-full object-cover border border-gray-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<span class="font-medium text-gray-900">{{ result.spieler1 }}</span>
|
||||
<span v-if="result.spieler2" class="text-gray-600"> & {{ result.spieler2 }}</span>
|
||||
<span v-if="result.spieler2" class="text-gray-600 flex items-center gap-2">
|
||||
&
|
||||
<div v-if="result.imageFilename2" class="flex-shrink-0">
|
||||
<img
|
||||
:src="`/api/personen/${result.imageFilename2}?width=32&height=32`"
|
||||
:alt="result.spieler2"
|
||||
class="w-8 h-8 rounded-full object-cover border border-gray-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{{ result.spieler2 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
@@ -170,12 +189,15 @@
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
|
||||
@click.self="closeModal"
|
||||
>
|
||||
<div class="bg-white rounded-lg max-w-md w-full p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
||||
{{ editingResult ? 'Ergebnis bearbeiten' : 'Neues Ergebnis hinzufügen' }}
|
||||
</h3>
|
||||
<div class="bg-white rounded-lg max-w-md w-full max-h-[90vh] flex flex-col">
|
||||
<div class="p-6 border-b border-gray-200 flex-shrink-0">
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
{{ editingResult ? 'Ergebnis bearbeiten' : 'Neues Ergebnis hinzufügen' }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="saveResult" class="space-y-4">
|
||||
<div class="overflow-y-auto flex-1 p-6">
|
||||
<form id="result-form" @submit.prevent="saveResult" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Jahr</label>
|
||||
<input
|
||||
@@ -236,6 +258,20 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ImageUpload
|
||||
v-model="formData.imageFilename1"
|
||||
label="Foto Spieler 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.kategorie === 'Doppel' || formData.kategorie === 'Mixed'">
|
||||
<ImageUpload
|
||||
v-model="formData.imageFilename2"
|
||||
label="Foto Spieler 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Bemerkung (optional)</label>
|
||||
<textarea
|
||||
@@ -245,22 +281,25 @@
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
|
||||
>
|
||||
{{ editingResult ? 'Aktualisieren' : 'Hinzufügen' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 flex-shrink-0 flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
form="result-form"
|
||||
class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
|
||||
>
|
||||
{{ editingResult ? 'Aktualisieren' : 'Hinzufügen' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -330,7 +369,9 @@ const formData = ref({
|
||||
platz: '',
|
||||
spieler1: '',
|
||||
spieler2: '',
|
||||
bemerkung: ''
|
||||
bemerkung: '',
|
||||
imageFilename1: '',
|
||||
imageFilename2: ''
|
||||
})
|
||||
|
||||
const loadResults = async () => {
|
||||
@@ -370,6 +411,7 @@ const loadResults = async () => {
|
||||
}
|
||||
values.push(current.trim())
|
||||
|
||||
// Mindestens 6 Spalten erforderlich (die neuen Bildspalten sind optional)
|
||||
if (values.length < 6) return null
|
||||
|
||||
return {
|
||||
@@ -378,7 +420,9 @@ const loadResults = async () => {
|
||||
platz: values[2].trim(),
|
||||
spieler1: values[3].trim(),
|
||||
spieler2: values[4].trim(),
|
||||
bemerkung: values[5].trim()
|
||||
bemerkung: values[5].trim(),
|
||||
imageFilename1: values[6]?.trim() || '',
|
||||
imageFilename2: values[7]?.trim() || ''
|
||||
}
|
||||
}).filter(result => result !== null)
|
||||
} catch (error) {
|
||||
@@ -445,7 +489,9 @@ const addNewResult = () => {
|
||||
platz: '',
|
||||
spieler1: '',
|
||||
spieler2: '',
|
||||
bemerkung: ''
|
||||
bemerkung: '',
|
||||
imageFilename1: '',
|
||||
imageFilename2: ''
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
@@ -461,7 +507,9 @@ const addResultForYear = (jahr) => {
|
||||
platz: '',
|
||||
spieler1: '',
|
||||
spieler2: '',
|
||||
bemerkung: ''
|
||||
bemerkung: '',
|
||||
imageFilename1: '',
|
||||
imageFilename2: ''
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
@@ -477,7 +525,9 @@ const addResultForKategorie = (jahr, kategorie) => {
|
||||
platz: '',
|
||||
spieler1: '',
|
||||
spieler2: '',
|
||||
bemerkung: ''
|
||||
bemerkung: '',
|
||||
imageFilename1: '',
|
||||
imageFilename2: ''
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
@@ -493,7 +543,9 @@ const editResult = (result, jahr, kategorie, index) => {
|
||||
platz: result.platz,
|
||||
spieler1: result.spieler1,
|
||||
spieler2: result.spieler2,
|
||||
bemerkung: result.bemerkung
|
||||
bemerkung: result.bemerkung,
|
||||
imageFilename1: result.imageFilename1 || '',
|
||||
imageFilename2: result.imageFilename2 || ''
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
@@ -649,7 +701,7 @@ const closeBemerkungModal = () => {
|
||||
const save = async () => {
|
||||
try {
|
||||
// CSV generieren
|
||||
const csvHeader = 'Jahr,Kategorie,Platz,Spieler1,Spieler2,Bemerkung'
|
||||
const csvHeader = 'Jahr,Kategorie,Platz,Spieler1,Spieler2,Bemerkung,imageFilename1,imageFilename2'
|
||||
const csvRows = results.value.map(result => {
|
||||
return [
|
||||
result.jahr,
|
||||
@@ -657,7 +709,9 @@ const save = async () => {
|
||||
result.platz,
|
||||
result.spieler1,
|
||||
result.spieler2,
|
||||
result.bemerkung
|
||||
result.bemerkung,
|
||||
result.imageFilename1 || '',
|
||||
result.imageFilename2 || ''
|
||||
].map(field => `"${field}"`).join(',')
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user