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

pages/spielplan.vue

@@ -5,18 +5,46 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div class="flex items-center justify-between">
           <div>
-            <h1 class="text-3xl font-bold text-gray-900">Spielplan</h1>
-            <p class="mt-2 text-gray-600">Aktuelle Termine und Spiele des Vereins</p>
+            <h1 class="text-3xl font-bold text-gray-900">
+              Spielplan
+            </h1>
+            <p class="mt-2 text-gray-600">
+              Aktuelle Termine und Spiele des Vereins
+            </p>
           </div>
           <div class="flex items-center space-x-4">
-            <button @click="refreshData" 
-                    :disabled="isLoading"
-                    class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:bg-gray-400">
-              <svg v-if="isLoading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            <button
+              :disabled="isLoading" 
+              class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:bg-gray-400"
+              @click="refreshData"
+            >
+              <svg
+                v-if="isLoading"
+                class="w-4 h-4 animate-spin"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
               </svg>
-              <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              <svg
+                v-else
+                class="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
               </svg>
               Aktualisieren
             </button>
@@ -28,60 +56,134 @@
     <!-- Content -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Loading State -->
-      <div v-if="isLoading" class="text-center py-12">
-        <svg class="w-8 h-8 text-gray-400 mx-auto mb-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+      <div
+        v-if="isLoading"
+        class="text-center py-12"
+      >
+        <svg
+          class="w-8 h-8 text-gray-400 mx-auto mb-4 animate-spin"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+          />
         </svg>
-        <p class="text-gray-600">Spielplan wird geladen...</p>
+        <p class="text-gray-600">
+          Spielplan wird geladen...
+        </p>
       </div>
 
       <!-- Error State -->
-      <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
-        <svg class="w-12 h-12 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+      <div
+        v-else-if="error"
+        class="bg-red-50 border border-red-200 rounded-lg p-6 text-center"
+      >
+        <svg
+          class="w-12 h-12 text-red-400 mx-auto mb-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+          />
         </svg>
-        <h3 class="text-lg font-medium text-red-800 mb-2">Fehler beim Laden</h3>
-        <p class="text-red-600 mb-4">{{ error }}</p>
-        <button @click="loadData" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
+        <h3 class="text-lg font-medium text-red-800 mb-2">
+          Fehler beim Laden
+        </h3>
+        <p class="text-red-600 mb-4">
+          {{ error }}
+        </p>
+        <button
+          class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          @click="loadData"
+        >
           Erneut versuchen
         </button>
       </div>
 
       <!-- Empty State -->
-      <div v-else-if="!spielplanData || spielplanData.length === 0" class="text-center py-12 bg-white rounded-xl shadow-lg">
-        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+      <div
+        v-else-if="!spielplanData || spielplanData.length === 0"
+        class="text-center py-12 bg-white rounded-xl shadow-lg"
+      >
+        <svg
+          class="w-12 h-12 text-gray-400 mx-auto mb-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+          />
         </svg>
-        <h3 class="text-lg font-medium text-gray-900 mb-2">Kein Spielplan verfügbar</h3>
-        <p class="text-gray-600">Es wurden noch keine Spielplandaten hochgeladen.</p>
+        <h3 class="text-lg font-medium text-gray-900 mb-2">
+          Kein Spielplan verfügbar
+        </h3>
+        <p class="text-gray-600">
+          Es wurden noch keine Spielplandaten hochgeladen.
+        </p>
       </div>
 
       <!-- Spielplan Table -->
-      <div v-else class="bg-white rounded-xl shadow-lg overflow-hidden">
+      <div
+        v-else
+        class="bg-white rounded-xl shadow-lg overflow-hidden"
+      >
         <div class="px-6 py-4 border-b border-gray-200">
-          <h2 class="text-xl font-semibold text-gray-900">Aktuelle Spiele</h2>
-          <p class="text-sm text-gray-600 mt-1">{{ spielplanData.length }} Einträge</p>
+          <h2 class="text-xl font-semibold text-gray-900">
+            Aktuelle Spiele
+          </h2>
+          <p class="text-sm text-gray-600 mt-1">
+            {{ spielplanData.length }} Einträge
+          </p>
         </div>
         
         <div class="overflow-x-auto">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
-                <th v-for="header in headers" :key="header" 
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th
+                  v-for="header in headers"
+                  :key="header" 
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
                   {{ formatHeader(header) }}
                 </th>
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              <tr v-for="(row, index) in spielplanData" :key="index" 
-                  :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
-                <td v-for="header in headers" :key="header" 
-                    class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                  <span v-if="header.toLowerCase().includes('datum')" class="font-mono">
+              <tr
+                v-for="(row, index) in spielplanData"
+                :key="index" 
+                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+              >
+                <td
+                  v-for="header in headers"
+                  :key="header" 
+                  class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
+                >
+                  <span
+                    v-if="header.toLowerCase().includes('datum')"
+                    class="font-mono"
+                  >
                     {{ formatDate(row[header]) }}
                   </span>
-                  <span v-else-if="header.toLowerCase().includes('uhrzeit')" class="font-mono">
+                  <span
+                    v-else-if="header.toLowerCase().includes('uhrzeit')"
+                    class="font-mono"
+                  >
                     {{ formatTime(row[header]) }}
                   </span>
                   <span v-else>