Add PDF upload system for Satzung with text extraction

pages/cms/index.vue

@@ -54,6 +54,24 @@
             Tischtennis-Regeln bearbeiten (WYSIWYG)
           </p>
         </NuxtLink>
+
+        <!-- Satzung -->
+        <NuxtLink
+          to="/cms/satzung"
+          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
+        >
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-slate-600 transition-colors">
+              <svg class="w-6 h-6 text-slate-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </div>
+            <h2 class="ml-4 text-xl font-semibold text-gray-900">Satzung</h2>
+          </div>
+          <p class="text-gray-600">
+            Satzung als PDF hochladen
+          </p>
+        </NuxtLink>
         <!-- Interne News -->
         <NuxtLink
           to="/mitgliederbereich/news"

pages/cms/satzung.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="min-h-full py-16 bg-gray-50">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">Satzung verwalten</h1>
+      </div>
+
+      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+        <h2 class="text-xl font-semibold mb-4">PDF-Upload</h2>
+        
+        <form @submit.prevent="uploadPdf" enctype="multipart/form-data" class="space-y-4">
+          <div>
+            <label for="pdf-file" class="block text-sm font-medium text-gray-700 mb-2">
+              Neue Satzung hochladen (PDF)
+            </label>
+            <input
+              ref="fileInput"
+              id="pdf-file"
+              type="file"
+              accept=".pdf"
+              @change="handleFileSelect"
+              class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+            />
+            <p class="mt-1 text-sm text-gray-500">
+              Nur PDF-Dateien bis 10MB sind erlaubt
+            </p>
+          </div>
+          
+          <button
+            type="submit"
+            :disabled="!selectedFile || uploading"
+            class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <svg v-if="uploading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            {{ uploading ? 'Wird hochgeladen...' : 'PDF hochladen' }}
+          </button>
+        </form>
+      </div>
+
+      <div v-if="currentPdfUrl" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <h2 class="text-xl font-semibold mb-4">Aktuelle Satzung</h2>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-gray-600">PDF-Datei verfügbar</p>
+            <a 
+              :href="currentPdfUrl" 
+              target="_blank" 
+              class="text-primary-600 hover:text-primary-700 font-medium"
+            >
+              Satzung anzeigen →
+            </a>
+          </div>
+          <div class="text-sm text-gray-500">
+            Zuletzt aktualisiert: {{ lastUpdated }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="message" class="mt-4 p-4 rounded-lg" :class="messageType === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'">
+        {{ message }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'CMS: Satzung' })
+
+const fileInput = ref(null)
+const selectedFile = ref(null)
+const uploading = ref(false)
+const currentPdfUrl = ref('')
+const lastUpdated = ref('')
+const message = ref('')
+const messageType = ref('')
+
+async function loadCurrentSatzung() {
+  try {
+    const data = await $fetch('/api/config')
+    const satzung = data?.seiten?.satzung
+    if (satzung?.pdfUrl) {
+      currentPdfUrl.value = satzung.pdfUrl
+      // Einfache Zeitstempel-Simulation
+      lastUpdated.value = new Date().toLocaleDateString('de-DE')
+    }
+  } catch (e) {
+    console.error('Fehler beim Laden der aktuellen Satzung:', e)
+  }
+}
+
+function handleFileSelect(event) {
+  const file = event.target.files[0]
+  if (file) {
+    if (file.type !== 'application/pdf') {
+      message.value = 'Bitte wählen Sie eine PDF-Datei aus'
+      messageType.value = 'error'
+      return
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      message.value = 'Die Datei ist zu groß (max. 10MB)'
+      messageType.value = 'error'
+      return
+    }
+    selectedFile.value = file
+    message.value = ''
+  }
+}
+
+async function uploadPdf() {
+  if (!selectedFile.value) return
+  
+  uploading.value = true
+  message.value = ''
+  
+  try {
+    const formData = new FormData()
+    formData.append('pdf', selectedFile.value)
+    
+    const result = await $fetch('/api/cms/satzung-upload', {
+      method: 'POST',
+      body: formData
+    })
+    
+    message.value = result.message
+    messageType.value = 'success'
+    
+    // Aktuelle Satzung neu laden
+    await loadCurrentSatzung()
+    
+    // Formular zurücksetzen
+    selectedFile.value = null
+    if (fileInput.value) fileInput.value.value = ''
+    
+  } catch (error) {
+    message.value = error.data?.message || 'Fehler beim Hochladen der PDF-Datei'
+    messageType.value = 'error'
+  } finally {
+    uploading.value = false
+  }
+}
+
+onMounted(loadCurrentSatzung)
+</script>

pages/verein/satzung.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="min-h-full py-16 bg-white">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
+        Satzung
+      </h1>
+      
+      <div class="prose prose-lg max-w-none mb-8" v-html="content" />
+      
+      <div v-if="pdfUrl" class="mt-8 p-6 bg-gray-50 rounded-lg">
+        <h3 class="text-lg font-semibold mb-4">PDF-Download</h3>
+        <a 
+          :href="pdfUrl" 
+          target="_blank" 
+          class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
+        >
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Satzung als PDF herunterladen
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const content = ref('')
+const pdfUrl = ref('')
+
+useHead({
+  title: 'Satzung - Harheimer TC',
+})
+
+async function loadConfig() {
+  try {
+    const data = await $fetch('/api/config')
+    const satzung = data?.seiten?.satzung
+    if (satzung) {
+      content.value = satzung.content || ''
+      pdfUrl.value = satzung.pdfUrl || ''
+    }
+  } catch (e) {
+    content.value = ''
+    pdfUrl.value = ''
+  }
+}
+
+onMounted(loadConfig)
+</script>