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

components/Spielplan.vue

@@ -2,56 +2,137 @@
   <section class="py-16 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold text-gray-900 mb-4">Nächste Spiele</h2>
+        <h2 class="text-3xl font-bold text-gray-900 mb-4">
+          Nächste Spiele
+        </h2>
       </div>
 
       <!-- Loading State -->
-      <div v-if="isLoading" class="text-center py-8">
-        <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-8"
+      >
+        <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="text-center py-8">
-        <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="error"
+        class="text-center py-8"
+      >
+        <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>
-        <p class="text-gray-600 mb-4">{{ error }}</p>
-        <NuxtLink to="/mannschaften/spielplaene" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+        <p class="text-gray-600 mb-4">
+          {{ error }}
+        </p>
+        <NuxtLink
+          to="/mannschaften/spielplaene"
+          class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
           Zum Spielplan
         </NuxtLink>
       </div>
 
       <!-- Empty State -->
-      <div v-else-if="!upcomingGames || upcomingGames.length === 0" class="text-center py-8">
-        <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="!upcomingGames || upcomingGames.length === 0"
+        class="text-center py-8"
+      >
+        <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">Keine kommenden Spiele</h3>
-        <p class="text-gray-600 mb-4">Derzeit sind keine Spiele geplant.</p>
-        <NuxtLink to="/mannschaften/spielplaene" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+        <h3 class="text-lg font-medium text-gray-900 mb-2">
+          Keine kommenden Spiele
+        </h3>
+        <p class="text-gray-600 mb-4">
+          Derzeit sind keine Spiele geplant.
+        </p>
+        <NuxtLink
+          to="/mannschaften/spielplaene"
+          class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
           Zum Spielplan
         </NuxtLink>
       </div>
 
       <!-- Games Grid -->
-      <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <div v-for="game in upcomingGames" :key="`${game.Termin}-${game.HeimMannschaft}`" 
-             class="bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-shadow">
+      <div
+        v-else
+        class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
+      >
+        <div
+          v-for="game in upcomingGames"
+          :key="`${game.Termin}-${game.HeimMannschaft}`" 
+          class="bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-shadow"
+        >
           <div class="p-6">
             <!-- Date and Time -->
             <div class="flex items-center justify-between mb-4">
               <div class="flex items-center">
-                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                <svg
+                  class="w-5 h-5 text-primary-600 mr-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
                 </svg>
                 <span class="text-sm font-medium text-gray-900">{{ formatDate(game.Termin) }}</span>
               </div>
               <div class="flex items-center text-sm text-gray-600">
-                <svg class="w-4 h-4 text-gray-400 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="w-4 h-4 text-gray-400 mr-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 {{ formatTime(game.Termin) }}
               </div>
@@ -61,8 +142,12 @@
             <div class="mb-4">
               <div class="flex items-center justify-between">
                 <div class="flex-1">
-                  <p class="text-sm text-gray-600 mb-1">Heim</p>
-                  <p class="font-semibold text-gray-900">{{ formatTeamName(game.HeimMannschaft, game.HeimMannschaftAltersklasse) }}</p>
+                  <p class="text-sm text-gray-600 mb-1">
+                    Heim
+                  </p>
+                  <p class="font-semibold text-gray-900">
+                    {{ formatTeamName(game.HeimMannschaft, game.HeimMannschaftAltersklasse) }}
+                  </p>
                 </div>
                 <div class="text-center mx-4">
                   <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
@@ -70,16 +155,33 @@
                   </div>
                 </div>
                 <div class="flex-1 text-right">
-                  <p class="text-sm text-gray-600 mb-1">Gast</p>
-                  <p class="font-semibold text-gray-900">{{ formatTeamName(game.GastMannschaft, game.GastMannschaftAltersklasse) }}</p>
+                  <p class="text-sm text-gray-600 mb-1">
+                    Gast
+                  </p>
+                  <p class="font-semibold text-gray-900">
+                    {{ formatTeamName(game.GastMannschaft, game.GastMannschaftAltersklasse) }}
+                  </p>
                 </div>
               </div>
             </div>
 
             <!-- Competition Info -->
-            <div v-if="game.Runde" class="flex items-center text-sm text-gray-600">
-              <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div
+              v-if="game.Runde"
+              class="flex items-center text-sm text-gray-600"
+            >
+              <svg
+                class="w-4 h-4 text-gray-400 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               {{ formatRunde(game.Runde) }}
             </div>
@@ -88,12 +190,27 @@
       </div>
 
       <!-- View All Button -->
-      <div v-if="upcomingGames && upcomingGames.length > 0" class="text-center mt-8">
-        <NuxtLink to="/mannschaften/spielplaene" 
-                  class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+      <div
+        v-if="upcomingGames && upcomingGames.length > 0"
+        class="text-center mt-8"
+      >
+        <NuxtLink
+          to="/mannschaften/spielplaene" 
+          class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
           Alle Spiele anzeigen
-          <svg class="w-4 h-4 ml-2" 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-4 h-4 ml-2"
+            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>
         </NuxtLink>
       </div>