Compare commits
No commits in common. "85073834fab5ba8a51aa45d52302074f53bd8110" and "5dcfa8cd969341ee364f7b6bc0be57fc262b1cc6" have entirely different histories.
85073834fa
...
5dcfa8cd96
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -26,7 +26,6 @@ declare module 'vue' {
|
||||
AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
|
||||
AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
|
||||
AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
|
||||
Buchkarten: typeof import('./src/components/Buchkarten.vue')['default']
|
||||
Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
|
||||
BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
|
||||
CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<VCol
|
||||
v-for="book in books"
|
||||
:key="book.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
|
||||
<VCard class="pa-3 hover-card" elevation="2">
|
||||
<div class="buchkarten-grid">
|
||||
<!-- Cover links, volle Höhe -->
|
||||
<VImg
|
||||
:src="book.image"
|
||||
class="buch-cover"
|
||||
cover
|
||||
/>
|
||||
|
||||
<!-- Inhalt rechts -->
|
||||
<div class="buch-details">
|
||||
<div class="titel-und-icon">
|
||||
<div class="text-subtitle-1 font-weight-bold">
|
||||
{{ book.title }}
|
||||
</div>
|
||||
<VIcon icon="tabler-search" class="search-icon" />
|
||||
</div>
|
||||
|
||||
<div v-if="book.authors?.length" class="text-caption text-medium-emphasis mb-2">
|
||||
von {{ book.authors.map(a => a.name).join(', ') }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap mb-2">
|
||||
<VChip
|
||||
v-for="genre in book.genres"
|
||||
:key="genre"
|
||||
color="primary"
|
||||
size="small"
|
||||
class="ma-1"
|
||||
>
|
||||
{{ genre }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<Fieberkurve
|
||||
:is-static="true"
|
||||
:default-values="book.fieberkurve"
|
||||
:hide-text="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Fieberkurve from '@/components/Fieberkurve.vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
defineProps({
|
||||
books: Array
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buchkarten-router-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.buchkarten-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buch-cover {
|
||||
width: 160px;
|
||||
height: 240px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.buch-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 240px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titel-und-icon {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.hover-card:hover .search-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-card {
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.hover-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@ export const books = [
|
||||
isbn: "9783898798822",
|
||||
title: "Rich Dad Poor Dad",
|
||||
authors: [{ id: null, name: "Robert T. Kiyosaki" }],
|
||||
blurb: "Warum bleiben die Reichen reich und die Armen arm?",
|
||||
blurb: "Warum bleiben die Reichen reich und die Armen arm? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! ...",
|
||||
genres: ["Crime", "Erotik"],
|
||||
subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
|
||||
publishers: null,
|
||||
@ -12,7 +12,13 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "2014-12",
|
||||
image: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
|
||||
fieberkurve: [{ value: 1 }, { value: 1 }, { value: 1 }, { value: 1 }, { value: 1 }],
|
||||
fieberkurve: [
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
{ value: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -27,14 +33,20 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "1997-07",
|
||||
image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
|
||||
fieberkurve: [{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }],
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
isbn: null,
|
||||
title: "Der Herr der Ringe",
|
||||
authors: [{ id: null, name: "J.R.R. Tolkien" }],
|
||||
blurb: "Ein episches Fantasy-Abenteuer.",
|
||||
blurb: "Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.",
|
||||
genres: ["Abenteuer", "Contemporary"],
|
||||
subtitle: null,
|
||||
publishers: null,
|
||||
@ -42,7 +54,13 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "1954-07",
|
||||
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 }],
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 4 },
|
||||
{ value: 6 },
|
||||
{ value: 4 },
|
||||
{ value: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -57,14 +75,20 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "2008-09",
|
||||
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 }],
|
||||
fieberkurve: [
|
||||
{ value: 4 },
|
||||
{ value: 7 },
|
||||
{ value: 4 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
isbn: null,
|
||||
title: "Game of Thrones",
|
||||
authors: [{ id: null, name: "George R.R. Martin" }],
|
||||
blurb: "Der Auftakt zur epischen Saga.",
|
||||
blurb: "Der Auftakt zur epischen Saga von George R.R. Martin.",
|
||||
genres: ["Fantasy", "ScienceFiction"],
|
||||
subtitle: null,
|
||||
publishers: null,
|
||||
@ -72,14 +96,20 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "1996-08",
|
||||
image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
|
||||
fieberkurve: [{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }],
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
isbn: null,
|
||||
title: "1984",
|
||||
authors: [{ id: null, name: "George Orwell" }],
|
||||
blurb: "Ein dystopischer Klassiker.",
|
||||
blurb: "Ein dystopischer Klassiker von George Orwell.",
|
||||
genres: ["History"],
|
||||
subtitle: null,
|
||||
publishers: null,
|
||||
@ -87,14 +117,20 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "1949-06",
|
||||
image: "https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg",
|
||||
fieberkurve: [{ value: 5 }, { value: 2 }, { value: 4 }, { value: 4 }, { value: 5 }],
|
||||
fieberkurve: [
|
||||
{ value: 5 },
|
||||
{ value: 2 },
|
||||
{ value: 4 },
|
||||
{ value: 4 },
|
||||
{ value: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
isbn: null,
|
||||
title: "Sakrileg - The Da Vinci Code",
|
||||
authors: [{ id: null, name: "Dan Brown" }],
|
||||
blurb: "Ein spannender Thriller.",
|
||||
blurb: "Ein spannender Thriller von Dan Brown.",
|
||||
genres: ["Horror", "Fantasy", "Romance"],
|
||||
subtitle: null,
|
||||
publishers: null,
|
||||
@ -102,126 +138,12 @@ export const books = [
|
||||
language: "de",
|
||||
publishedDate: "2003-03",
|
||||
image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
|
||||
fieberkurve: [{ value: 1 }, { value: 7 }, { value: 7 }, { value: 3 }, { value: 1 }],
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
isbn: "9783423246690",
|
||||
title: "Der Alchimist",
|
||||
authors: [{ id: null, name: "Paulo Coelho" }],
|
||||
blurb: "Ein andalusischer Hirte sucht seinen Schatz.",
|
||||
genres: ["Contemporary", "Romance"],
|
||||
subtitle: null,
|
||||
publishers: "Diogenes",
|
||||
pageCount: 192,
|
||||
language: "de",
|
||||
publishedDate: "2002-03",
|
||||
image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
|
||||
fieberkurve: [{ value: 3 }, { value: 4 }, { value: 6 }, { value: 2 }, { value: 4 }],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
isbn: "9783442159477",
|
||||
title: "Der Schwarm",
|
||||
authors: [{ id: null, name: "Frank Schätzing" }],
|
||||
blurb: "Die Rache der Natur.",
|
||||
genres: ["ScienceFiction", "Horror"],
|
||||
subtitle: null,
|
||||
publishers: "Kiepenheuer & Witsch",
|
||||
pageCount: 1008,
|
||||
language: "de",
|
||||
publishedDate: "2004-09",
|
||||
image: "https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg",
|
||||
fieberkurve: [{ value: 6 }, { value: 5 }, { value: 7 }, { value: 4 }, { value: 2 }],
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
isbn: "9783453436270",
|
||||
title: "Die Physiker",
|
||||
authors: [{ id: null, name: "Friedrich Dürrenmatt" }],
|
||||
blurb: "Wissenschaft und Verantwortung.",
|
||||
genres: ["History", "Philosophy"],
|
||||
subtitle: null,
|
||||
publishers: "Diogenes",
|
||||
pageCount: 144,
|
||||
language: "de",
|
||||
publishedDate: "1962-01",
|
||||
image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
|
||||
fieberkurve: [{ value: 4 }, { value: 3 }, { value: 2 }, { value: 2 }, { value: 6 }],
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
isbn: "9783551317532",
|
||||
title: "Tintenherz",
|
||||
authors: [{ id: null, name: "Cornelia Funke" }],
|
||||
blurb: "Eine Geschichte über Magie und Bücher.",
|
||||
genres: ["Fantasy", "Abenteuer"],
|
||||
subtitle: null,
|
||||
publishers: "Dressler",
|
||||
pageCount: 576,
|
||||
language: "de",
|
||||
publishedDate: "2003-09",
|
||||
image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
|
||||
fieberkurve: [{ value: 6 }, { value: 2 }, { value: 5 }, { value: 3 }, { value: 4 }],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
isbn: "9783453434207",
|
||||
title: "Der kleine Prinz",
|
||||
authors: [{ id: null, name: "Antoine de Saint-Exupéry" }],
|
||||
blurb: "Ein poetisches Märchen.",
|
||||
genres: ["Philosophy", "Romance"],
|
||||
subtitle: null,
|
||||
publishers: "Karl Rauch Verlag",
|
||||
pageCount: 112,
|
||||
language: "de",
|
||||
publishedDate: "1943-04",
|
||||
image: "https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg",
|
||||
fieberkurve: [{ value: 3 }, { value: 1 }, { value: 5 }, { value: 1 }, { value: 6 }],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
isbn: "9783453409533",
|
||||
title: "Inferno",
|
||||
authors: [{ id: null, name: "Dan Brown" }],
|
||||
blurb: "Ein tödliches Rätsel rund um Dante.",
|
||||
genres: ["Thriller", "Mystery"],
|
||||
subtitle: null,
|
||||
publishers: "Lübbe",
|
||||
pageCount: 672,
|
||||
language: "de",
|
||||
publishedDate: "2013-05",
|
||||
image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
|
||||
fieberkurve: [{ value: 4 }, { value: 6 }, { value: 7 }, { value: 5 }, { value: 2 }],
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
isbn: "9783257230012",
|
||||
title: "Homo Faber",
|
||||
authors: [{ id: null, name: "Max Frisch" }],
|
||||
blurb: "Technik trifft auf Leben.",
|
||||
genres: ["Philosophy", "Contemporary"],
|
||||
subtitle: null,
|
||||
publishers: "Suhrkamp",
|
||||
pageCount: 192,
|
||||
language: "de",
|
||||
publishedDate: "1957-03",
|
||||
image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
|
||||
fieberkurve: [{ value: 2 }, { value: 3 }, { value: 4 }, { value: 2 }, { value: 5 }],
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
isbn: "9783499255858",
|
||||
title: "Er ist wieder da",
|
||||
authors: [{ id: null, name: "Timur Vermes" }],
|
||||
blurb: "Hitler erwacht 2011 – eine Satire.",
|
||||
genres: ["Satire", "History"],
|
||||
subtitle: null,
|
||||
publishers: "Bastei Lübbe",
|
||||
pageCount: 400,
|
||||
language: "de",
|
||||
publishedDate: "2012-09",
|
||||
image: "https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg",
|
||||
fieberkurve: [{ value: 6 }, { value: 5 }, { value: 4 }, { value: 2 }, { value: 3 }],
|
||||
fieberkurve: [
|
||||
{ value: 1 },
|
||||
{ value: 7 },
|
||||
{ value: 7 },
|
||||
{ value: 3 },
|
||||
{ value: 1 },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@ -74,23 +74,88 @@
|
||||
<br />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<!-- Trefferanzahl -->
|
||||
<!-- <VDivider class="my-2" />-->
|
||||
<VCardTitle class="text-h5 px-6 pt-4 pb-2">
|
||||
{{ filteredBooks.length }} {{ filteredBooks.length === 1 ? 'Buch' : 'Bücher' }} gefunden
|
||||
</VCardTitle>
|
||||
<!-- <VDivider class="my-2" />-->
|
||||
<!-- Gefundene Bücher -->
|
||||
<VRow>
|
||||
<Buchkarten :books="filteredBooks" />
|
||||
|
||||
|
||||
<!-- Gefundene Bücher -->
|
||||
<VCol cols="12" md="12">
|
||||
<VCard class="mb-6">
|
||||
<!-- Trefferanzahl -->
|
||||
<VCardTitle class="text-h5 px-6 pt-4 pb-2">
|
||||
{{ resultCount }} {{ resultCount === 1 ? 'Buch' : 'Bücher' }} gefunden
|
||||
</VCardTitle>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<VRow>
|
||||
<VCol v-for="book in filteredBooks" :key="book.id" cols="12" sm="6" md="4">
|
||||
<VCard class="pa-2">
|
||||
<VCardText class="d-flex flex-column align-center">
|
||||
<!-- Bild -->
|
||||
<VImg
|
||||
:src="book.image"
|
||||
width="160"
|
||||
height="240"
|
||||
class="mb-3 rounded"
|
||||
cover
|
||||
/>
|
||||
|
||||
<!-- Titel -->
|
||||
<div class="text-h6 font-weight-bold text-center">
|
||||
{{ book.title }}
|
||||
</div>
|
||||
|
||||
<!-- Autoren -->
|
||||
<div v-if="book.authors?.length" class="text-caption mb-2 text-center">
|
||||
von {{ book.authors.map(a => a.name).join(', ') }}
|
||||
</div>
|
||||
|
||||
<!-- Genres -->
|
||||
<div class="d-flex flex-wrap justify-center mb-2">
|
||||
<VChip
|
||||
v-for="genre in book.genres"
|
||||
:key="genre"
|
||||
color="primary"
|
||||
size="small"
|
||||
class="ma-1"
|
||||
>
|
||||
{{ genre }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<!-- Beschreibung (Blurb) -->
|
||||
<div
|
||||
class="text-truncate mb-3 text-center"
|
||||
style="max-width: 90%; max-height: 3em; overflow: hidden;"
|
||||
>
|
||||
{{ book.blurb }}
|
||||
</div>
|
||||
|
||||
<!-- Fieberkurve -->
|
||||
<Fieberkurve
|
||||
:is-static="true"
|
||||
:default-values="book.fieberkurve"
|
||||
:hide-text="true"
|
||||
/>
|
||||
|
||||
<!-- Aktionen -->
|
||||
<VCardActions class="justify-center mt-2">
|
||||
<VBtn size="small" variant="outlined">
|
||||
<VIcon icon="tabler-list-details" />
|
||||
<span class="ms-2">Detail Seite</span>
|
||||
</VBtn>
|
||||
<IconBtn color="secondary" icon="tabler-share" />
|
||||
</VCardActions>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||
import Buchkarten from '@/components/Buchkarten.vue';
|
||||
import { books } from "@/components/buecherdatenbank";
|
||||
import { genres } from "@/components/genredatenbank";
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user