MiauRizius/CoasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added dynamic loading for every page

Browse Source
This commit is contained in:
Maurice L.
2025-05-07 15:53:18 +02:00
parent 5b6a46d81b
commit 60a054a4bb
6 changed files with 143 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/router.ts
View File

@@ -36,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
component: () => import('./views/app/coasters/Coasters.vue')
},
{
path: '/app/coaster/:coasterId',
path: '/app/coaster/:id',
component: () => import('./views/app/coasters/Coaster.vue')
},
@@ -46,7 +46,7 @@ const routes: Array<RouteRecordRaw> = [
component: () => import('./views/app/parks/Parks.vue')
},
{
path: '/app/park/:parkId',
path: '/app/park/:id',
component: () => import('./views/app/parks/Park.vue')
},

77
src/views/app/coasters/Coaster.vue
View File

@@ -3,29 +3,64 @@ import Header from '../../../components/app/AppHeader.vue'
import Sidebar from '../../../components/app/AppSidebar.vue'
export default {
components: {
Header,
Sidebar
},
data() {
return {
coaster: {
name: "Blue Fire",
park: "Europa Park",
length: "1050 m",
height: "38 m",
speed: "100 km/h",
launch: "LSM-Launch",
inversions: 4,
duration: "2:30 min",
manufacturer: "MACK Rides",
opened: "2009"
}
};
components: {
Header,
Sidebar
},
data() {
return {
coaster: {
name: '',
park: '',
length: '',
height: '',
speed: '',
launch: '',
inversions: 0,
duration: '',
manufacturer: '',
opened: '',
video_key: '',
park_id: 0
}
};
},
async mounted() {
const coasterId = this.$route.params.id;
try {
// Coaster-Daten laden
const coasterRes = await fetch(`http://localhost:3000/api/coasters/${coasterId}`);
if (!coasterRes.ok) throw new Error('Fehler beim Laden des Coasters');
const coasterData = await coasterRes.json();
// Parkname holen
const parkRes = await fetch(`http://localhost:3000/api/parks/${coasterData.park_id}`);
if (!parkRes.ok) throw new Error('Fehler beim Laden des Parks');
const parkData = await parkRes.json();
this.coaster = {
name: coasterData.name,
park: parkData.name,
length: `${coasterData.length} m`,
height: `${coasterData.height} m`,
speed: `${coasterData.velocity} km/h`,
launch: coasterData.type,
inversions: coasterData.inversions,
duration: `${coasterData.duration} min`,
manufacturer: coasterData.manufacturer,
opened: `${coasterData.release_year}`,
video_key: coasterData.video_key,
park_id: coasterData.park_id
};
} catch (err) {
console.error(err);
}
}
};
</script>
<template>
<title>{{ coaster.name }} - CoasterDB</title>
@@ -47,7 +82,7 @@ export default {
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
Park:
<span class="font-medium text-gray-900 dark:text-white">
<a :href="`/app/park/${coaster.park.replace(' ', '_')}`">{{ coaster.park }}</a>
<a :href="`/app/park/${coaster.park_id}`">{{ coaster.park }}</a>
</span>
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -75,7 +110,7 @@ export default {
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/P7m8SNRj_hI"
:src="`https://www.youtube.com/embed/${ coaster.video_key }`"
title="Blue Fire On-Ride Video"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

64
src/views/app/parks/Park.vue
View File

@@ -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>

25
src/views/app/parks/Parks.vue
View File

@@ -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>