buchdetailseite: Statisch zu dynamischer Seite verwandelt mittels id´s (kann jetzt aufgerufen werden über Büchersuche)
This commit is contained in:
parent
85073834fa
commit
2818ec4a60
@ -6,7 +6,8 @@
|
|||||||
sm="6"
|
sm="6"
|
||||||
md="4"
|
md="4"
|
||||||
>
|
>
|
||||||
<RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
|
<!-- <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">-->
|
||||||
|
<RouterLink :to="`buchdetailseite/${book.id}`">
|
||||||
<VCard class="pa-3 hover-card" elevation="2">
|
<VCard class="pa-3 hover-card" elevation="2">
|
||||||
<div class="buchkarten-grid">
|
<div class="buchkarten-grid">
|
||||||
<!-- Cover links, volle Höhe -->
|
<!-- Cover links, volle Höhe -->
|
||||||
|
|||||||
@ -29,11 +29,11 @@ export default [
|
|||||||
icon: { icon: 'tabler-timeline' },
|
icon: { icon: 'tabler-timeline' },
|
||||||
},
|
},
|
||||||
{ heading: 'Buch' },
|
{ heading: 'Buch' },
|
||||||
{
|
/*{
|
||||||
title: 'Buch Detailseite',
|
title: 'Buch Detailseite',
|
||||||
to: { name: 'buchdetailseite' },
|
to: { name: '1' },
|
||||||
icon: { icon: 'tabler-list-details' },
|
icon: { icon: 'tabler-list-details' },
|
||||||
},
|
},*/
|
||||||
{ heading: 'Datenbank' },
|
{ heading: 'Datenbank' },
|
||||||
{
|
{
|
||||||
title: 'Bücher',
|
title: 'Bücher',
|
||||||
|
|||||||
@ -1,183 +0,0 @@
|
|||||||
<!--<script setup>
|
|
||||||
import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VRow class="match-height">
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="12"
|
|
||||||
>
|
|
||||||
<VCard title="Detailseite">
|
|
||||||
<VImg
|
|
||||||
width="200px"
|
|
||||||
height="300px"
|
|
||||||
:src="harryPotter"
|
|
||||||
/>
|
|
||||||
</VCard>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
|
||||||
// import HarryPotterCover from "@images/harry_potter_stein_weisen_rowling.jpg";
|
|
||||||
|
|
||||||
// Beispiel-Daten für das Buch
|
|
||||||
const book = ref({
|
|
||||||
title: "Rich Dad Poor Dad",
|
|
||||||
subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
|
|
||||||
authors: [{ name: "Robert T. Kiyosaki" }],
|
|
||||||
rating: 4.5,
|
|
||||||
reviews: 11234,
|
|
||||||
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! Dieses Buch zeigt, wie man finanzielle Freiheit erreichen kann.",
|
|
||||||
genres: ["Finanzen", "Bildung", "Motivation"],
|
|
||||||
publishers: ["Plassen Verlag"],
|
|
||||||
pageCount: 240,
|
|
||||||
language: "Deutsch",
|
|
||||||
publishedDate: "2014-12",
|
|
||||||
isbn: "9783898798822",
|
|
||||||
format: "Taschenbuch",
|
|
||||||
coverUrl: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
|
|
||||||
purchaseLinks: [
|
|
||||||
{
|
|
||||||
name: "Amazon",
|
|
||||||
url: "https://www.amazon.de",
|
|
||||||
logo: "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Thalia",
|
|
||||||
url: "https://www.thalia.de",
|
|
||||||
logo: "https://upload.wikimedia.org/wikipedia/commons/8/87/Thalia_Logo.svg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Hugendubel",
|
|
||||||
url: "https://www.hugendubel.de",
|
|
||||||
logo: "https://upload.wikimedia.org/wikipedia/commons/4/47/Hugendubel_Logo.svg",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VContainer>
|
|
||||||
<!-- Hauptkarte für Buchdetails -->
|
|
||||||
<!-- <VCard
|
|
||||||
title="Buchdetails: {{ book.title }}"
|
|
||||||
subtitle="{{ book.subtitle }}"
|
|
||||||
class="mb-6"
|
|
||||||
>-->
|
|
||||||
<VCard
|
|
||||||
title="Buchdetails"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<VRow>
|
|
||||||
<!-- Buchcover -->
|
|
||||||
<VCol cols="12" md="4" class="text-center">
|
|
||||||
<VImg
|
|
||||||
:src="book.coverUrl"
|
|
||||||
alt="Buchcover"
|
|
||||||
max-height="400px"
|
|
||||||
max-width="300px"
|
|
||||||
/>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<!-- Buchinformationen -->
|
|
||||||
<VCol cols="12" md="8">
|
|
||||||
<h2 class="mb-1">{{ book.title }}</h2>
|
|
||||||
<h4 class="text-muted mb-4">{{ book.subtitle }}</h4>
|
|
||||||
<h5>von {{ book.authors.map(author => author.name).join(", ") }}</h5>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Statische Fieberkurve mit vordefinierten Werten -->
|
|
||||||
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
|
|
||||||
|
|
||||||
<!-- Bewertung -->
|
|
||||||
<div class="d-flex align-center mb-3">
|
|
||||||
<VRating
|
|
||||||
v-model="book.rating"
|
|
||||||
readonly
|
|
||||||
length="5"
|
|
||||||
class="mr-2"
|
|
||||||
color="yellow"
|
|
||||||
/>
|
|
||||||
<span>({{ book.reviews }} Bewertungen)</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Beschreibung -->
|
|
||||||
<p>{{ book.blurb }}</p>
|
|
||||||
|
|
||||||
<!-- Zusätzliche Details -->
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li><strong>Genres:</strong> {{ book.genres.join(", ") }}</li>
|
|
||||||
<li><strong>Verlag:</strong> {{ book.publishers.join(", ") }}</li>
|
|
||||||
<li><strong>Seitenanzahl:</strong> {{ book.pageCount }}</li>
|
|
||||||
<li><strong>Sprache:</strong> {{ book.language }}</li>
|
|
||||||
<li><strong>Veröffentlicht:</strong> {{ book.publishedDate }}</li>
|
|
||||||
<li><strong>ISBN:</strong> {{ book.isbn }}</li>
|
|
||||||
<li><strong>Format:</strong> {{ book.format }}</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Kaufmöglichkeiten -->
|
|
||||||
<div class="mt-4">
|
|
||||||
<h5>Kaufen bei:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<VBtn
|
|
||||||
v-for="link in book.purchaseLinks"
|
|
||||||
:key="link.name"
|
|
||||||
:href="link.url"
|
|
||||||
target="_blank"
|
|
||||||
class="ma-2"
|
|
||||||
outlined
|
|
||||||
>
|
|
||||||
<VImg :src="link.logo" max-width="24px" class="mr-2" /> {{ link.name }}
|
|
||||||
</VBtn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</VCard>
|
|
||||||
</VContainer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.5rem !important;
|
|
||||||
margin-bottom: 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1rem !important;
|
|
||||||
line-height: 1.5 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.VImg {
|
|
||||||
margin-right: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.VBtn {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
102
src/pages/buchdetailseite/[id].vue
Normal file
102
src/pages/buchdetailseite/[id].vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<VContainer class="pt-6">
|
||||||
|
<VRow>
|
||||||
|
<VCol cols="12" md="4">
|
||||||
|
<VImg
|
||||||
|
:src="book.image"
|
||||||
|
max-height="500"
|
||||||
|
max-width="100%"
|
||||||
|
contain
|
||||||
|
class="rounded"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<VCol cols="12" md="8">
|
||||||
|
<VCard class="pa-4">
|
||||||
|
<VCardTitle class="text-h5 font-weight-bold">
|
||||||
|
{{ book.title }}<br>
|
||||||
|
<span class="text-subtitle-1" v-if="book.subtitle">{{ book.subtitle }}</span>
|
||||||
|
</VCardTitle>
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
<div v-if="book.authors?.length" class="mb-2">
|
||||||
|
<strong>Autor(en):</strong>
|
||||||
|
{{ book.authors.map(a => a.name).join(', ') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Genres mit Icons -->
|
||||||
|
<div class="d-flex flex-wrap align-center mb-3">
|
||||||
|
<VChip
|
||||||
|
v-for="genre in book.genres"
|
||||||
|
:key="genre"
|
||||||
|
color="primary"
|
||||||
|
class="ma-1"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
v-if="genreIconMap[genre]"
|
||||||
|
:icon="genreIconMap[genre].icon"
|
||||||
|
:size="genreIconMap[genre].size"
|
||||||
|
class="me-1"
|
||||||
|
/>
|
||||||
|
{{ genre }}
|
||||||
|
</VChip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fieberkurve -->
|
||||||
|
<Fieberkurve :is-static="true" :default-values="book.fieberkurve" :hide-text="true" class="mb-4" />
|
||||||
|
|
||||||
|
<!-- Beschreibung -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<strong>Beschreibung:</strong>
|
||||||
|
<p class="mt-1">{{ book.blurb }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Detailtabelle -->
|
||||||
|
<VTable dense>
|
||||||
|
<tbody>
|
||||||
|
<tr><td><strong>Seitenzahl</strong></td><td>{{ book.pageCount }}</td></tr>
|
||||||
|
<tr><td><strong>Sprache</strong></td><td>{{ book.language }}</td></tr>
|
||||||
|
<tr v-if="book.publishers"><td><strong>Verlag</strong></td><td>{{ book.publishers }}</td></tr>
|
||||||
|
<tr><td><strong>Veröffentlicht</strong></td><td>{{ book.publishedDate }}</td></tr>
|
||||||
|
<tr v-if="book.isbn"><td><strong>ISBN</strong></td><td>{{ book.isbn }}</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</VTable>
|
||||||
|
|
||||||
|
<!-- Shoplink (Platzhalter) -->
|
||||||
|
<div class="mt-4">
|
||||||
|
<VBtn color="success" variant="flat">
|
||||||
|
<VIcon icon="tabler-shopping-cart" class="me-2" />
|
||||||
|
Bei Amazon suchen
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</VContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { books } from '@/components/buecherdatenbank.js'
|
||||||
|
import { genres as genreIcons } from '@/components/genredatenbank.js'
|
||||||
|
import Fieberkurve from '@/components/Fieberkurve.vue'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const bookId = parseInt(route.params.id)
|
||||||
|
const book = books.find(b => b.id === bookId) || {}
|
||||||
|
|
||||||
|
const genreIconMap = genreIcons.reduce((acc, g) => {
|
||||||
|
acc[g.value] = g.icon
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
p {
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2
typed-router.d.ts
vendored
2
typed-router.d.ts
vendored
@ -41,7 +41,7 @@ declare module 'vue-router/auto/routes' {
|
|||||||
export interface RouteNamedMap {
|
export interface RouteNamedMap {
|
||||||
'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
|
'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
|
||||||
'$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
|
'$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
|
||||||
'buchdetailseite': RouteRecordInfo<'buchdetailseite', '/buchdetailseite', Record<never, never>, Record<never, never>>,
|
'buchdetailseite-id': RouteRecordInfo<'buchdetailseite-id', '/buchdetailseite/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||||
'buecher-eintragen': RouteRecordInfo<'buecher-eintragen', '/buecher-eintragen', Record<never, never>, Record<never, never>>,
|
'buecher-eintragen': RouteRecordInfo<'buecher-eintragen', '/buecher-eintragen', Record<never, never>, Record<never, never>>,
|
||||||
'buecherdatenbank': RouteRecordInfo<'buecherdatenbank', '/buecherdatenbank', Record<never, never>, Record<never, never>>,
|
'buecherdatenbank': RouteRecordInfo<'buecherdatenbank', '/buecherdatenbank', Record<never, never>, Record<never, never>>,
|
||||||
'buechersuche': RouteRecordInfo<'buechersuche', '/buechersuche', Record<never, never>, Record<never, never>>,
|
'buechersuche': RouteRecordInfo<'buechersuche', '/buechersuche', Record<never, never>, Record<never, never>>,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user