Added dynamic loading for every page

src/views/app/parks/Park.vue

@@ -9,20 +9,51 @@ export default {
   },
   data() {
     return {
-      park: {
-        name: 'Europa Park',
-        location: 'Rust, Deutschland',
-        averageVisitorsPerMonth: 450000,
-        averageTicketPrice: 57.5,
-        area: '95 Hektar',
-        openingYear: 1975
+      park: {} as {
+        name: string;
+        location: string;
+        averageVisitorsPerMonth: number;
+        averageTicketPrice: number;
+        area: string;
+        openingYear: number;
       },
-      coasters: [
-        { name: 'Silver Star' },
-        { name: 'Blue Fire Megacoaster' },
-        { name: 'Wodan Timburcoaster' },
-        { name: 'Eurosat - CanCan Coaster' }
-      ]
+      coasters: [] as { name: string, id: number }[]
+    }
+  },
+  async mounted() {
+    const parkId = this.$route.params.id; // Park ID aus der URL
+
+    try {
+      // Abrufen der Parkdaten
+      const parkResponse = await fetch(`http://localhost:3000/api/parks/${parkId}`);
+      if (parkResponse.ok) {
+        const parkData = await parkResponse.json();
+        this.park = {
+          name: parkData.name,
+          location: parkData.location,
+          averageVisitorsPerMonth: parkData.average_visitor_count,
+          averageTicketPrice: parkData.ticket_price,
+          area: parkData.area,
+          openingYear: parkData.opening_year
+        };
+      } else {
+        console.error('Fehler beim Laden des Parks:', parkResponse.statusText);
+      }
+
+      // Abrufen der Achterbahndaten
+      const coastersResponse = await fetch(`http://localhost:3000/api/coasters/p/${parkId}`);
+      if (coastersResponse.ok) {
+        const coastersData = await coastersResponse.json();
+        this.coasters = coastersData.map((coaster: { name: string, id: number }) => ({
+          name: coaster.name,
+          id: coaster.id
+        }));
+      } else {
+        console.error('Fehler beim Laden der Achterbahnen:', coastersResponse.statusText);
+      }
+
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Daten:', error);
     }
   }
 }
@@ -49,11 +80,11 @@ export default {
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-gray-700 dark:text-gray-300 mt-4">
             <div>
               <span class="font-semibold">Ø Besucher / Monat:</span>
-              {{ park.averageVisitorsPerMonth.toLocaleString() }}
+              {{ park.averageVisitorsPerMonth }}
             </div>
             <div>
               <span class="font-semibold">Ø Ticketpreis:</span>
-              {{ park.averageTicketPrice.toFixed(2) }} €
+              {{ park.averageTicketPrice }} €
             </div>
             <div>
               <span class="font-semibold">Fläche:</span>
@@ -74,7 +105,7 @@ export default {
               v-for="coaster in coasters"
               :key="coaster.name"
               class="bg-white dark:bg-gray-800 shadow p-4 rounded-lg hover:shadow-lg transition-shadow"
-              :href="`/app/coaster/${coaster.name.replace(' ', '_')}`"
+              :href="`/app/coaster/${coaster.id}`"
             >
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ coaster.name }}</h3>
             </a>
@@ -85,6 +116,5 @@ export default {
   </div>
 </template>
 
-
 <style scoped>
 </style>

src/views/app/parks/Parks.vue

@@ -9,12 +9,20 @@ export default {
     },
     data() {
         return {
-            parks: [
-                { name: 'Europa Park', location: 'Rust, Deutschland' },
-                { name: 'Phantasialand', location: 'Brühl, Deutschland' },
-                { name: 'Erlebnispark Tripsdrill', location: 'Cleebronn, Deutschland' },
-                { name: 'Heide Park', location: 'Soltau, Deutschland' }
-            ]
+            parks: [] as { id: number; name: string; location: string; average_visitor_count: number; ticket_price: string }[]
+        }
+    },
+    async mounted() {
+        try {
+            const response = await fetch('http://localhost:3000/api/parks');
+            if (response.ok) {
+                const data = await response.json();
+                this.parks = data;
+            } else {
+                console.error('Fehler beim Laden der Parks:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Fehler beim Abrufen der Parks:', error);
         }
     }
 }
@@ -35,8 +43,8 @@ export default {
             <a
               v-for="park in parks"
               :key="park.name"
+              :href="`/app/park/${park.id}`"
               class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 hover:shadow-lg transition-shadow"
-              :href="`/app/park/${park.name.replace(' ', '_')}`"
             >
               <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ park.name }}</h2>
               <p class="text-gray-700 dark:text-gray-300">
@@ -47,8 +55,7 @@ export default {
         </div>
       </main>
     </div>
-  </template>
-  
+</template>
 
 <style scoped>
 </style>