Genre Datenbank für Testzwecke im Frontend (statisch)
This commit is contained in:
parent
2f45025ffa
commit
e6016a7729
@ -1,93 +1,72 @@
|
||||
export const books = [
|
||||
export const genres = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Rich Dad Poor Dad',
|
||||
description: 'Ein Buch über finanzielle Bildung und Investitionen.',
|
||||
image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
],
|
||||
value: 'Abenteuer',
|
||||
icon: {
|
||||
icon: 'tabler-compass',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Harry Potter und der Stein der Weisen',
|
||||
description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
|
||||
image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
value: 'Contemporary',
|
||||
icon: {
|
||||
icon: 'tabler-building-skyscraper',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Der Herr der Ringe',
|
||||
description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
|
||||
image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 4 },
|
||||
{ value: 6 },
|
||||
{ value: 4 },
|
||||
{ value: 2 },
|
||||
],
|
||||
value: 'Crime',
|
||||
icon: {
|
||||
icon: 'tabler-fingerprint',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Die Tribute von Panem',
|
||||
description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
|
||||
image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 4 },
|
||||
{ value: 7 },
|
||||
{ value: 4 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
value: 'Erotik',
|
||||
icon: {
|
||||
icon: 'tabler-bed',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Game of Thrones',
|
||||
description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
|
||||
image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
value: 'Fantasy',
|
||||
icon: {
|
||||
icon: 'tabler-paw',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '1984',
|
||||
description: 'Ein dystopischer Klassiker von George Orwell.',
|
||||
image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 4 },
|
||||
{ value: 4 },
|
||||
{ value: 5 },
|
||||
],
|
||||
value: 'History',
|
||||
icon: {
|
||||
icon: 'tabler-swords',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Sakrileg - The Da Vinci Code',
|
||||
description: 'Ein spannender Thriller von Dan Brown.',
|
||||
image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
|
||||
fieberkurve: [
|
||||
{ value: 1 },
|
||||
{ value: 7 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 1 },
|
||||
],
|
||||
value: 'Horror',
|
||||
icon: {
|
||||
icon: 'tabler-ghost-2',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Humor',
|
||||
icon: {
|
||||
icon: 'tabler-mood-xd',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Romance',
|
||||
icon: {
|
||||
icon: 'tabler-hearts',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'ScienceFiction',
|
||||
icon: {
|
||||
icon: 'tabler-ufo',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
@ -1,28 +1,52 @@
|
||||
<script setup>
|
||||
import { books } from '@/components/buecherdatenbank'; // Importiere die Bücher-Datenbank
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||
import { genres } from '@/components/genredatenbank' // Importiere die Genres-Datenbank
|
||||
|
||||
// Erzeuge eine neue Datenstruktur mit IDs
|
||||
const tableData = genres.map((genre, index) => ({
|
||||
id: index + 1, // Füge eine ID hinzu
|
||||
name: genre.value, // Nutze den "value"-Schlüssel für den Namen
|
||||
icon: genre.icon.icon, // Icon-Daten
|
||||
iconSize: genre.icon.size, // Icon-Größe
|
||||
}))
|
||||
|
||||
// Definiere die Header der Tabelle
|
||||
const headers = [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: 'Genre-Name',
|
||||
key: 'name',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: 'Icon',
|
||||
key: 'icon',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2>Bücherdatenbank:</h2>
|
||||
<p>(Alle statisch angelegte Testbücher in "buecherdatenbank.js")</p>
|
||||
<h2>Genredatenbank:</h2>
|
||||
<p>(Alle statisch angelegten Genres in "genredatenbank.js")</p>
|
||||
<hr>
|
||||
<br>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="book in books"
|
||||
:key="book.id"
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
id: {{ book.id }} <br>
|
||||
title: {{ book.title }} <br>
|
||||
description: {{ book.description }} <br>
|
||||
image: {{ book.image }} <br>
|
||||
fieberkurve: {{ book.fieberkurve }} <br>
|
||||
|
||||
</VCol>
|
||||
</VRow>
|
||||
<!-- Data Table - Dense -->
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="tableData"
|
||||
density="compact"
|
||||
:items-per-page="10"
|
||||
>
|
||||
<!-- Custom Slot für Icons -->
|
||||
<template #item.icon="{ item }">
|
||||
<span :class="item.icon" :style="{ fontSize: `${item.iconSize}px` }"></span>
|
||||
</template>
|
||||
</VDataTable>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user