Buchdetailseite: Design, Struktur und Features
This commit is contained in:
parent
876ee84bd7
commit
604facd288
@ -2,29 +2,71 @@
|
||||
<VContainer class="py-6">
|
||||
<VCard class="pa-4" elevation="2">
|
||||
<VRow>
|
||||
<!-- Cover & Shops + Community -->
|
||||
<!-- Cover & Blöcke -->
|
||||
<VCol cols="12" md="3">
|
||||
<div class="mb-4" style="aspect-ratio: 2/3; overflow: hidden;">
|
||||
<VImg :src="book.image" height="100%" width="100%" cover class="elevation-1" />
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<VBtn block color="black" variant="outlined" href="https://www.amazon.de" target="_blank">
|
||||
<VIcon start icon="tabler-brand-amazon" /> Amazon
|
||||
</VBtn>
|
||||
<VBtn block color="blue" variant="outlined">
|
||||
<VIcon start icon="tabler-book" /> Hugendubel
|
||||
</VBtn>
|
||||
<VBtn block color="grey" variant="outlined">
|
||||
<VIcon start icon="tabler-brand-apple" /> Apple
|
||||
</VBtn>
|
||||
<VBtn block color="green" variant="outlined">
|
||||
<VIcon start icon="tabler-book-2" /> Thalia
|
||||
</VBtn>
|
||||
</div>
|
||||
<!-- Shoplinks mit Farben -->
|
||||
<VCard class="pa-3 mb-4" variant="outlined">
|
||||
<VCardTitle>Shops</VCardTitle>
|
||||
<VCardText>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
<VBtn block variant="outlined" style="border-color: #FF9900; background-color: #FFF3E0;" class="text-black shop-btn">
|
||||
<VIcon start icon="tabler-brand-amazon" /> Amazon
|
||||
</VBtn>
|
||||
|
||||
<VBtn block variant="outlined" style="border-color: #005B9F; background-color: #E3F2FD;" class="text-black shop-btn">
|
||||
<VIcon start icon="tabler-book" /> Hugendubel
|
||||
</VBtn>
|
||||
|
||||
<VBtn block variant="outlined" style="border-color: #333333; background-color: #F5F5F5;" class="text-black shop-btn">
|
||||
<VIcon start icon="tabler-brand-apple" /> Apple
|
||||
</VBtn>
|
||||
|
||||
<VBtn block variant="outlined" style="border-color: #009245; background-color: #E8F5E9;" class="text-black shop-btn">
|
||||
<VIcon start icon="tabler-book-2" /> Thalia
|
||||
</VBtn>
|
||||
|
||||
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Benutzeraktionen -->
|
||||
<VCard class="pa-3 mb-4" variant="outlined">
|
||||
<VCardTitle>Deine Aktionen</VCardTitle>
|
||||
<VCardText>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<VBtn :color="liked ? 'primary' : 'grey'" @click="toggleLike" variant="outlined">
|
||||
<VIcon
|
||||
start
|
||||
:icon="liked ? 'tabler-heart-filled' : 'tabler-heart'"
|
||||
class="transition-transform"
|
||||
:class="liked ? 'scale-125' : ''"
|
||||
/>
|
||||
{{ liked ? 'Gefällt mir' : 'Gefällt mir nicht mehr' }}
|
||||
</VBtn>
|
||||
<VBtn :color="readingStatus ? 'primary' : 'grey'" @click="toggleReadingStatus" variant="outlined">
|
||||
<VIcon icon="tabler-book" start />
|
||||
{{ readingStatus ? 'Gelesen' : 'Noch nicht gelesen' }}
|
||||
</VBtn>
|
||||
<VBtn :color="wishlist ? 'primary' : 'grey'" @click="toggleWishlist" variant="outlined">
|
||||
<VIcon icon="tabler-bookmark" start />
|
||||
{{ wishlist ? 'Auf der Wunschliste' : 'Zur Wunschliste' }}
|
||||
</VBtn>
|
||||
<VBtn :color="collection ? 'primary' : 'grey'" @click="toggleCollection" variant="outlined">
|
||||
<VIcon icon="tabler-archive" start />
|
||||
{{ collection ? 'In Sammlung' : 'Zur Sammlung hinzufügen' }}
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Community-Statistik -->
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCard class="pa-3" variant="outlined">
|
||||
<VCardTitle>Community-Statistik</VCardTitle>
|
||||
<VCardText>
|
||||
<VList density="compact">
|
||||
@ -57,20 +99,34 @@
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<!-- Neue statische Fieberkurve -->
|
||||
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" class="my-4" />
|
||||
<!-- Fieberkurve -->
|
||||
<VCard class="mb-6 elevation-3" variant="outlined" style="border: 2px dashed var(--v-theme-primary);">
|
||||
<VCardTitle>
|
||||
<VIcon icon="tabler-activity" start /> Fieberkurve (Lesedynamik)
|
||||
</VCardTitle>
|
||||
<VCardText>
|
||||
<Fieberkurve :isStatic="true" :defaultValues="book.fieberkurve" class="mb-2" />
|
||||
<!-- <p class="text-caption text-muted">
|
||||
Die Skoutz-Fieberkurve zeigt, wie emotional spannend das Buch im Verlauf empfunden wird.
|
||||
</p>-->
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Inhaltsangabe -->
|
||||
<VCard class="mb-4" variant="outlined" style="min-height: 180px;">
|
||||
<VCardTitle>Inhaltsangabe</VCardTitle>
|
||||
<VCardText>{{ book.blurb }}</VCardText>
|
||||
<VCard class="mb-4 elevation-1" variant="outlined" style="border-left: 6px solid var(--v-theme-primary); background-color: #f9f9ff;">
|
||||
<VCardTitle>
|
||||
<VIcon icon="tabler-quote" start /> Inhaltsangabe
|
||||
</VCardTitle>
|
||||
<VCardText class="text-body-1">{{ book.blurb }}</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Buchdetails & Infos -->
|
||||
<VRow>
|
||||
<VCol cols="12" md="6">
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCardTitle>Buchdetails</VCardTitle>
|
||||
<VCard class="pa-3 elevation-1" variant="outlined" style="border-left: 6px solid var(--v-theme-primary); background-color: #f9f9ff;">
|
||||
<VCardTitle>
|
||||
<VIcon icon="tabler-info-circle" start /> Buchdetails
|
||||
</VCardTitle>
|
||||
<VCardText>
|
||||
<strong>ISBN:</strong> {{ book.isbn || '–' }}<br />
|
||||
<strong>Sprache:</strong> {{ book.language }}<br />
|
||||
@ -81,8 +137,10 @@
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCardTitle>Weitere Informationen</VCardTitle>
|
||||
<VCard class="pa-3 elevation-1" variant="outlined">
|
||||
<VCardTitle>
|
||||
<VIcon icon="tabler-link" start /> Weitere Informationen
|
||||
</VCardTitle>
|
||||
<VCardText>
|
||||
<ul class="pa-0" style="list-style: none">
|
||||
<li><a href="#">Alle Ausgaben in der Übersicht</a></li>
|
||||
@ -97,50 +155,64 @@
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- Weitere Bücher vom Autor -->
|
||||
<VCard class="mt-6 mb-6" elevation="0">
|
||||
<VCardTitle>Bücher von {{ book.authors[0]?.name }}</VCardTitle>
|
||||
<!-- Bücher vom gleichen Autor -->
|
||||
<VCard class="mt-6" elevation="0">
|
||||
<VCardTitle>Weitere Bücher von {{ book.authors[0]?.name }}</VCardTitle>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol v-for="item in authorBooks" :key="item.id" cols="12" sm="6" md="3">
|
||||
<RouterLink :to="`/buchdetailseite/${item.id}`">
|
||||
<VCol
|
||||
v-for="b in authorBooks"
|
||||
:key="b.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<RouterLink :to="`/buchdetailseite/${b.id}`">
|
||||
<VCard class="hover:scale-105 transition-transform duration-200">
|
||||
<VImg :src="item.image" height="180" cover />
|
||||
<VCardText>
|
||||
<div class="text-sm font-semibold">{{ item.title }}</div>
|
||||
<VImg :src="b.image" height="180" cover />
|
||||
<VCardText class="text-sm font-semibold">
|
||||
{{ b.title }}
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
<!-- Beispielbücher -->
|
||||
<VCol cols="12" sm="6" md="3">
|
||||
<VCard>
|
||||
<VImg src="https://m.media-amazon.com/images/I/81bsw6fnUiL.jpg" height="180" cover />
|
||||
<VCardText>
|
||||
<div class="text-sm font-semibold">Rich Dad's Cashflow Quadrant</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols="12" sm="6" md="3">
|
||||
<VCard>
|
||||
<VImg src="https://m.media-amazon.com/images/I/81eUwF5QzIL.jpg" height="180" cover />
|
||||
<VCardText>
|
||||
<div class="text-sm font-semibold">Rich Dad's Guide to Investing</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Rezensionen -->
|
||||
<VCard elevation="0">
|
||||
<VCardTitle>Rezensionen & Bewertungen</VCardTitle>
|
||||
<VCard class="mt-6" variant="outlined">
|
||||
<VCardTitle><VIcon icon="tabler-star" start /> Rezensionen & Bewertungen</VCardTitle>
|
||||
<VCardText>
|
||||
<p class="mb-2">⭐⭐⭐⭐☆ 4,3 / 5 Sterne (15 Stimmen)</p>
|
||||
<em>Hier könnten später echte Rezensionen von Nutzern folgen.</em>
|
||||
<VCard
|
||||
v-for="(review, index) in reviews"
|
||||
:key="index"
|
||||
class="mb-3 pa-3"
|
||||
variant="outlined"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<span><strong>{{ review.name }}</strong> am {{ review.date }}</span>
|
||||
<VRating v-model="review.rating" readonly density="compact" size="small" />
|
||||
</div>
|
||||
<p class="mt-2">{{ review.text }}</p>
|
||||
</VCard>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<!-- eigene Rezensionen abgeben -->
|
||||
<VCardText>
|
||||
<VTextarea label="Eigene Rezension schreiben" rows="3" variant="outlined" />
|
||||
<VBtn color="primary" class="mt-2">Absenden</VBtn>
|
||||
</VCardText>
|
||||
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar v-model="snackbar" :timeout="2000" location="top right" color="success">
|
||||
{{ snackbarText }}
|
||||
</VSnackbar>
|
||||
|
||||
<!-- Ähnliche Bücher -->
|
||||
<VCard class="mt-6" elevation="0">
|
||||
@ -173,7 +245,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { books } from '@/components/buecherdatenbank'
|
||||
import Fieberkurve from '@/components/Fieberkurve.vue'
|
||||
@ -182,6 +254,36 @@ const route = useRoute()
|
||||
const id = parseInt(route.params.id)
|
||||
const book = books.find(b => b.id === id) || {}
|
||||
|
||||
const liked = ref(false)
|
||||
const readingStatus = ref(false)
|
||||
const wishlist = ref(false)
|
||||
const collection = ref(false)
|
||||
const snackbar = ref(false)
|
||||
snackbar.value = false
|
||||
const snackbarText = ref('')
|
||||
|
||||
function showFeedback(text) {
|
||||
snackbarText.value = text
|
||||
snackbar.value = true
|
||||
}
|
||||
|
||||
function toggleLike() {
|
||||
liked.value = !liked.value
|
||||
showFeedback(liked.value ? 'Zur Favoritenliste hinzugefügt ✅' : 'Aus Favoriten entfernt ❌')
|
||||
}
|
||||
function toggleReadingStatus() {
|
||||
readingStatus.value = !readingStatus.value
|
||||
showFeedback(readingStatus.value ? 'Als gelesen markiert 📘' : 'Markierung entfernt ❌')
|
||||
}
|
||||
function toggleWishlist() {
|
||||
wishlist.value = !wishlist.value
|
||||
showFeedback(wishlist.value ? 'Zur Wunschliste hinzugefügt 🎁' : 'Von Wunschliste entfernt ❌')
|
||||
}
|
||||
function toggleCollection() {
|
||||
collection.value = !collection.value
|
||||
showFeedback(collection.value ? 'Zur Sammlung hinzugefügt 📚' : 'Aus Sammlung entfernt ❌')
|
||||
}
|
||||
|
||||
const authorBooks = computed(() => {
|
||||
if (!book?.authors?.[0]?.name) return []
|
||||
return books.filter(b => b.authors?.[0]?.name === book.authors[0].name && b.id !== book.id)
|
||||
@ -195,6 +297,12 @@ const similarBooks = computed(() => {
|
||||
).slice(0, 4)
|
||||
})
|
||||
|
||||
const reviews = ref([
|
||||
{ name: 'Anna L.', date: '03.04.2025', rating: 4, text: 'Ein inspirierendes Buch – hat mich zum Nachdenken gebracht!' },
|
||||
{ name: 'Jonas M.', date: '18.02.2025', rating: 3, text: 'Starker Mittelteil, etwas schwaches Ende. Trotzdem lesenswert.' },
|
||||
{ name: 'LeserIn', date: '22.01.2025', rating: 5, text: 'Ich konnte es nicht aus der Hand legen! Spannung pur.' },
|
||||
])
|
||||
|
||||
const genreIcon = genre => {
|
||||
const icons = {
|
||||
Crime: 'tabler-fingerprint',
|
||||
@ -211,3 +319,11 @@ const genreIcon = genre => {
|
||||
return icons[genre] || 'tabler-book'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shop-btn:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user