Finished entire frontend
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
import Footer from '../components/Footer.vue'
|
||||
|
||||
@@ -7,6 +6,30 @@ export default {
|
||||
components: {
|
||||
Navbar,
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parkCount: 0,
|
||||
coasterCount: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalEntries(): number {
|
||||
return this.parkCount + this.coasterCount;
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const parkRes = await fetch('http://localhost:3000/api/parks');
|
||||
const parks = await parkRes.json();
|
||||
this.parkCount = parks.length;
|
||||
|
||||
const coasterRes = await fetch('http://localhost:3000/api/coasters');
|
||||
const coasters = await coasterRes.json();
|
||||
this.coasterCount = coasters.length;
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Statistiken:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -14,38 +37,40 @@ export default {
|
||||
<template>
|
||||
<title>Home - CoasterDB</title>
|
||||
<Navbar />
|
||||
<main class="content">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
|
||||
<div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
|
||||
<h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white">Entdecke CoasterDB!</h2>
|
||||
<p class="mb-4 font-light">Finde interessante Fakten und on-board Videos von deutschen Achterbahnen.</p>
|
||||
<p class="mb-4 font-medium">In dieser Web-Anwendung findest du viele Fakten, technische Daten und anderes Material zu verschiedene Achterbahnen und Parks in Deutschland.</p>
|
||||
<a href="/app" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
|
||||
Öffne die Web-App
|
||||
<svg class="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
<main class="content">
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
|
||||
<div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
|
||||
<h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white">Entdecke CoasterDB!</h2>
|
||||
<p class="mb-4 font-light">Finde interessante Fakten und on-board Videos von deutschen Achterbahnen.</p>
|
||||
<p class="mb-4 font-medium">In dieser Web-Anwendung findest du viele Fakten, technische Daten und anderes Material zu verschiedene Achterbahnen und Parks in Deutschland.</p>
|
||||
<a href="/app" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
|
||||
Öffne die Web-App
|
||||
<svg class="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
|
||||
<dl class="grid max-w-screen-md gap-8 mx-auto text-gray-900 sm:grid-cols-3 dark:text-white">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">{{ parkCount }}</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Parks</dd>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
|
||||
<dl class="grid max-w-screen-md gap-8 mx-auto text-gray-900 sm:grid-cols-3 dark:text-white">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">27</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Parks</dd>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">400</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Achterbahnen</dd>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">785</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Datenbankeinträge</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">{{ coasterCount }}</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Achterbahnen</dd>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">{{ totalEntries }}</dt>
|
||||
<dd class="font-light text-gray-500 dark:text-gray-400">Datenbankeinträge</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -12,30 +12,42 @@ export default {
|
||||
stats: {
|
||||
totalParks: 0,
|
||||
totalCoasters: 0,
|
||||
totalVisitorsPerMonth: 500000, // bleibt statisch, da nicht aus API
|
||||
averageTicketPrice: 45.99, // bleibt statisch, da nicht aus API
|
||||
totalInversions: 0
|
||||
totalVisitorsPerMonth: 0,
|
||||
averageTicketPrice: 0,
|
||||
totalInversions: 0,
|
||||
databaseSize: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
// Parks abrufen
|
||||
const parksRes = await fetch('http://localhost:3000/api/parks');
|
||||
const parks = await parksRes.json();
|
||||
this.stats.totalParks = parks.length;
|
||||
try {
|
||||
const parksRes = await fetch('http://localhost:3000/api/parks');
|
||||
const parks = await parksRes.json();
|
||||
this.stats.totalParks = parks.length;
|
||||
|
||||
// Coaster abrufen
|
||||
const coastersRes = await fetch('http://localhost:3000/api/coasters');
|
||||
const coasters = await coastersRes.json();
|
||||
this.stats.totalCoasters = coasters.length;
|
||||
const totalVisitors = parks.reduce((sum: number, park: any) => sum + Number(park.average_visitor_count), 0);
|
||||
this.stats.totalVisitorsPerMonth = Math.round(totalVisitors / parks.length);
|
||||
|
||||
// Summe der Inversionen berechnen
|
||||
this.stats.totalInversions = coasters.reduce((sum: number, coaster: any) => sum + coaster.inversions, 0);
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden der Statistiken:', err);
|
||||
}
|
||||
const totalPrice = parks.reduce((sum: number, park: any) => {
|
||||
const price = parseFloat(park.ticket_price.replace('€', '').replace(',', '.'));
|
||||
return sum + price;
|
||||
}, 0);
|
||||
this.stats.averageTicketPrice = parseFloat((totalPrice / parks.length).toFixed(2));
|
||||
|
||||
const coastersRes = await fetch('http://localhost:3000/api/coasters');
|
||||
const coasters = await coastersRes.json();
|
||||
this.stats.totalCoasters = coasters.length;
|
||||
this.stats.totalInversions = coasters.reduce((sum: number, coaster: any) => sum + coaster.inversions, 0);
|
||||
|
||||
const sizeRes = await fetch('http://localhost:3000/api/filesize');
|
||||
const size = await sizeRes.json();
|
||||
this.stats.databaseSize = size.sizeMB;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden der Statistiken:', err);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -76,6 +88,10 @@ export default {
|
||||
<p class="text-gray-600 dark:text-gray-300">Anzahl der Inversionen:</p>
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.totalInversions }}</p>
|
||||
</div>
|
||||
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
|
||||
<p class="text-gray-600 dark:text-gray-300">Größe der Datenbank:</p>
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ stats.databaseSize }} MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
/**
|
||||
*
|
||||
* use this for template:
|
||||
* https://flowbite.com/blocks/
|
||||
* https://flowbite.com/blocks/marketing/blog/
|
||||
* https://flowbite.com/blocks/application/advanced-tables/
|
||||
*
|
||||
*/
|
||||
|
||||
import Header from '../../components/app/AppHeader.vue'
|
||||
import Sidebar from '../../components/app/AppSidebar.vue'
|
||||
import ListItem from '../../components/app/ListItem.vue'
|
||||
import Entry from '../../components/app/Entry.vue'
|
||||
import Documentation from "../../views/app/Documentation.vue"
|
||||
import Help from "../../views/app/Help.vue"
|
||||
|
||||
@@ -20,8 +9,6 @@ export default {
|
||||
components: {
|
||||
Header,
|
||||
Sidebar,
|
||||
ListItem,
|
||||
Entry,
|
||||
Documentation,
|
||||
Help
|
||||
},
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
<script lang="ts">
|
||||
|
||||
/**
|
||||
*
|
||||
* use this for template:
|
||||
* https://flowbite.com/blocks/
|
||||
* https://flowbite.com/blocks/marketing/blog/
|
||||
* https://flowbite.com/blocks/application/advanced-tables/
|
||||
*
|
||||
*/
|
||||
|
||||
import Header from '../../components/app/AppHeader.vue'
|
||||
import Sidebar from '../../components/app/AppSidebar.vue'
|
||||
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
<script lang="ts">
|
||||
|
||||
/**
|
||||
*
|
||||
* use this for template:
|
||||
* https://flowbite.com/blocks/
|
||||
* https://flowbite.com/blocks/marketing/blog/
|
||||
* https://flowbite.com/blocks/application/advanced-tables/
|
||||
*
|
||||
*/
|
||||
|
||||
import Header from '../../components/app/AppHeader.vue'
|
||||
import Sidebar from '../../components/app/AppSidebar.vue'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user