77 lines
3.5 KiB
Vue
77 lines
3.5 KiB
Vue
<script lang="ts">
|
|
import Navbar from '../components/Navbar.vue'
|
|
import Footer from '../components/Footer.vue'
|
|
|
|
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>
|
|
|
|
<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>
|
|
</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 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>
|