Added Datebase to attractions

api-backend/src/index.ts

@@ -1,4 +1,5 @@
 import express from 'express';
+import cors from 'cors';
 import pathRoutes from './routes/parkRoutes.js';
 import coasterRoutes from './routes/coasterRoutes.js';
 
@@ -8,6 +9,8 @@ const port = 3000;
 // Middleware für JSON-Anfragen
 app.use(express.json());
 
+app.use(cors());
+
 // Routen hinzufügen
 app.use('/api/parks', pathRoutes);
 app.use('/api/coasters', coasterRoutes);

package-lock.json

@@ -8,6 +8,7 @@
       "name": "coasterdb",
       "version": "0.0.0",
       "dependencies": {
+        "cors": "^2.8.5",
         "express": "^5.1.0",
         "sqlite3": "^5.1.7",
         "vue": "^3.5.13"
@@ -2179,6 +2180,18 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -4076,7 +4089,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }

package.json

@@ -10,6 +10,7 @@
     "api-backend": "cross-env TS_NODE_PROJECT=./api-backend/tsconfig.json node --loader ts-node/esm api-backend/src/index.ts"
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^5.1.0",
     "sqlite3": "^5.1.7",
     "vue": "^3.5.13"

src/views/app/coasters/Coasters.vue

@@ -9,12 +9,30 @@ export default {
     },
     data() {
         return {
-            coasters: [
-                { name: 'Blue Fire', park: 'Europa Park' },
-                { name: 'Taron', park: 'Phantasialand' },
-                { name: 'Silver Star', park: 'Europa Park' },
-                { name: 'Karacho', park: 'Erlebnispark Tripsdrill' }
-            ]
+            coasters: [] as { id: number; name: string; location: string; average_visitor_count: number; ticket_price: string, park_id: number, park_name?: string }[]
+        }
+    },
+    async mounted() {
+        try {
+            const response = await fetch('http://localhost:3000/api/coasters');
+            if (response.ok) {
+                const data = await response.json();
+                this.coasters = await Promise.all(data.map(async (coaster: { [x: string]: any; id: number; name: string; location: string; average_visitor_count: number; ticket_price: string, park_id: number }) => {
+                    // Hole den Parknamen anhand der park_id
+                    const parkResponse = await fetch(`http://localhost:3000/api/parks/${coaster.park_id}`);
+                    if (parkResponse.ok) {
+                        const parkData = await parkResponse.json();
+                        coaster.park_name = parkData.name; // Füge den Parknamen zum Coaster hinzu
+                    } else {
+                        console.error(`Fehler beim Laden des Parks mit ID ${coaster.park_id}`);
+                    }
+                    return coaster;
+                }));
+            } else {
+                console.error('Fehler beim Laden der Achterbahnen:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Fehler beim Abrufen der Achterbahnen:', error);
         }
     }
 }
@@ -34,23 +52,22 @@ export default {
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
             <a
               v-for="coaster in coasters"
-              :key="coaster.name"
-              :href="`/app/coaster/${coaster.name.replace(' ', '_')}`"
+              :key="coaster.id"
+              :href="`/app/coaster/${coaster.id}`"
               class="bg-white dark:bg-gray-800 shadow-md sm:rounded-lg p-6 hover:shadow-lg transition-shadow"
             >
               <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                 {{ coaster.name }}
               </h2>
               <p class="text-gray-700 dark:text-gray-300">
-                <span class="font-semibold">Park:</span> {{ coaster.park }}
+                <span class="font-semibold">Park:</span> {{ coaster.park_name || 'Unbekannt' }}
               </p>
             </a>
           </div>
         </div>
       </main>
     </div>
-  </template>
-  
+</template>
 
 <style scoped>
 </style>