Update package-lock.json and package.json to include 'globals' dependency and improve code formatting in various components for better readability.

pages/verein/galerie.vue

@@ -6,12 +6,22 @@
       </h1>
 
       <!-- Galerie-Grid -->
-      <div v-if="loading" class="text-center py-12">
-        <p class="text-gray-500">Bilder werden geladen...</p>
+      <div
+        v-if="loading"
+        class="text-center py-12"
+      >
+        <p class="text-gray-500">
+          Bilder werden geladen...
+        </p>
       </div>
 
-      <div v-else-if="images.length === 0" class="text-center py-12">
-        <p class="text-gray-500">Noch keine Bilder in der Galerie.</p>
+      <div
+        v-else-if="images.length === 0"
+        class="text-center py-12"
+      >
+        <p class="text-gray-500">
+          Noch keine Bilder in der Galerie.
+        </p>
       </div>
 
       <div v-else>
@@ -32,10 +42,15 @@
                 class="object-cover group-hover:scale-105 transition-transform duration-300 pointer-events-none"
                 style="max-width: 150px; max-height: 150px; width: auto; height: auto;"
                 loading="lazy"
-              />
+              >
             </div>
             <div class="p-4">
-              <h3 class="font-semibold text-gray-900 mb-1 cursor-pointer" @click="openModal(image)">{{ image.title }}</h3>
+              <h3
+                class="font-semibold text-gray-900 mb-1 cursor-pointer"
+                @click="openModal(image)"
+              >
+                {{ image.title }}
+              </h3>
               <div class="mt-2 flex items-center justify-between">
                 <span
                   v-if="!image.isPublic"
@@ -50,9 +65,9 @@
               <!-- Lösch-Button für Admins -->
               <button
                 v-if="isAdmin || isVorstand"
-                @click.stop="deleteImage(image.id)"
                 :disabled="deleting === image.id"
                 class="mt-2 w-full px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                @click.stop="deleteImage(image.id)"
               >
                 {{ deleting === image.id ? 'Wird gelöscht...' : 'Löschen' }}
               </button>
@@ -61,11 +76,14 @@
         </div>
 
         <!-- Pagination -->
-        <div v-if="pagination.totalPages > 1" class="flex justify-center items-center space-x-2 mb-8">
+        <div
+          v-if="pagination.totalPages > 1"
+          class="flex justify-center items-center space-x-2 mb-8"
+        >
           <button
-            @click="changePage(pagination.page - 1)"
             :disabled="pagination.page === 1"
             class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            @click="changePage(pagination.page - 1)"
           >
             Zurück
           </button>
@@ -73,9 +91,9 @@
             Seite {{ pagination.page }} von {{ pagination.totalPages }} ({{ pagination.total }} Bilder)
           </span>
           <button
-            @click="changePage(pagination.page + 1)"
             :disabled="pagination.page >= pagination.totalPages"
             class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            @click="changePage(pagination.page + 1)"
           >
             Weiter
           </button>
@@ -83,12 +101,17 @@
       </div>
 
       <!-- Upload-Bereich für Admins (Collapsible) -->
-      <div v-if="isAdmin || isVorstand" class="mt-12">
+      <div
+        v-if="isAdmin || isVorstand"
+        class="mt-12"
+      >
         <button
-          @click="showUploadForm = !showUploadForm"
           class="w-full flex items-center justify-between p-4 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 hover:bg-gray-100 transition-colors"
+          @click="showUploadForm = !showUploadForm"
         >
-          <h2 class="text-xl font-semibold text-gray-900">Bild hochladen</h2>
+          <h2 class="text-xl font-semibold text-gray-900">
+            Bild hochladen
+          </h2>
           <svg
             class="w-6 h-6 text-gray-600 transition-transform"
             :class="{ 'rotate-180': showUploadForm }"
@@ -96,23 +119,34 @@
             stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </button>
-        <div v-if="showUploadForm" class="mt-4 p-6 bg-gray-50 rounded-lg border border-gray-300">
-          <form @submit.prevent="uploadImage" class="space-y-4">
+        <div
+          v-if="showUploadForm"
+          class="mt-4 p-6 bg-gray-50 rounded-lg border border-gray-300"
+        >
+          <form
+            class="space-y-4"
+            @submit.prevent="uploadImage"
+          >
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">
                 Bilddatei
               </label>
               <input
-                type="file"
                 ref="fileInput"
-                @change="handleFileSelect"
+                type="file"
                 accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                 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-600 file:text-white hover:file:bg-primary-700"
                 required
-              />
+                @change="handleFileSelect"
+              >
             </div>
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">
@@ -124,7 +158,7 @@
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                 placeholder="Titel des Bildes"
                 required
-              />
+              >
             </div>
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">
@@ -139,12 +173,15 @@
             </div>
             <div class="flex items-center">
               <input
+                id="isPublic"
                 v-model="uploadForm.isPublic"
                 type="checkbox"
-                id="isPublic"
                 class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
-              />
-              <label for="isPublic" class="ml-2 block text-sm text-gray-700">
+              >
+              <label
+                for="isPublic"
+                class="ml-2 block text-sm text-gray-700"
+              >
                 Öffentlich sichtbar (für alle Besucher)
               </label>
             </div>
@@ -155,8 +192,18 @@
             >
               {{ uploading ? 'Wird hochgeladen...' : 'Bild hochladen' }}
             </button>
-            <p v-if="uploadError" class="text-red-600 text-sm">{{ uploadError }}</p>
-            <p v-if="uploadSuccess" class="text-green-600 text-sm">{{ uploadSuccess }}</p>
+            <p
+              v-if="uploadError"
+              class="text-red-600 text-sm"
+            >
+              {{ uploadError }}
+            </p>
+            <p
+              v-if="uploadSuccess"
+              class="text-green-600 text-sm"
+            >
+              {{ uploadSuccess }}
+            </p>
           </form>
         </div>
       </div>
@@ -167,38 +214,71 @@
         class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4"
         @click="closeModal"
       >
-        <div class="relative max-w-5xl max-h-full w-full" @click.stop>
+        <div
+          class="relative max-w-5xl max-h-full w-full"
+          @click.stop
+        >
           <!-- Schließen-Button -->
           <button
-            @click="closeModal"
             class="absolute top-4 right-4 text-white hover:text-gray-300 z-10 bg-black bg-opacity-50 rounded-full p-2"
+            @click="closeModal"
           >
-            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            <svg
+              class="w-8 h-8"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
 
           <!-- Vorheriges Bild Button -->
           <button
             v-if="hasPreviousImage"
-            @click.stop="showPreviousImage"
             class="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 z-10 bg-black bg-opacity-50 rounded-full p-3"
             aria-label="Vorheriges Bild"
+            @click.stop="showPreviousImage"
           >
-            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            <svg
+              class="w-8 h-8"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 19l-7-7 7-7"
+              />
             </svg>
           </button>
 
           <!-- Nächstes Bild Button -->
           <button
             v-if="hasNextImage"
-            @click.stop="showNextImage"
             class="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 z-10 bg-black bg-opacity-50 rounded-full p-3"
             aria-label="Nächstes Bild"
+            @click.stop="showNextImage"
           >
-            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            <svg
+              class="w-8 h-8"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
             </svg>
           </button>
 
@@ -206,10 +286,15 @@
             :src="`/api/galerie/${selectedImage.id}`"
             :alt="selectedImage.title"
             class="max-w-[90%] max-h-[90vh] object-contain mx-auto"
-          />
+          >
           <div class="mt-4 text-white text-center">
-            <h3 class="text-xl font-semibold">{{ selectedImage.title }}</h3>
-            <p v-if="selectedImage.description" class="mt-2 text-gray-300">
+            <h3 class="text-xl font-semibold">
+              {{ selectedImage.title }}
+            </h3>
+            <p
+              v-if="selectedImage.description"
+              class="mt-2 text-gray-300"
+            >
               {{ selectedImage.description }}
             </p>
             <p class="mt-2 text-sm text-gray-400">