Compare commits
No commits in common. "604facd288e3e4c96329e20e716862e1bd888442" and "6679083789062777a2c10461c989fe4be6b1def6" have entirely different histories.
604facd288
...
6679083789
@ -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? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! Die meisten Angestellten verbringen im Laufe ihrer Ausbildung Jahr um Jahr in Schule und Universität, wo sie nichts über Geld lernen, statt selbst erfolgreich zu werden. Robert T. Kiyosaki hatte in seiner Jugend einen „Rich Dad“ und einen „Poor Dad“. Nachdem er die Ratschläge des Ersteren beherzigt hatte, konnte er sich mit 47 Jahren zur Ruhe setzen. Er hatte gelernt, Geld für sich arbeiten zu lassen, statt andersherum. In „Rich Dad Poor Dad“ teilt er sein Wissen und zeigt, wie jeder erfolgreich sein kann.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! Die meisten Angestellten verbringen im Laufe ihrer Ausbildung Jahr um Jahr in Schule und Universität, wo sie nichts über Geld lernen, statt selbst erfolgreich zu werden. Robert T. Kiyosaki hatte in seiner Jugend einen „Rich Dad“ und einen „Poor Dad“. Nachdem er die Ratschläge des Ersteren beherzigt hatte, konnte er sich mit 47 Jahren zur Ruhe setzen. Er hatte gelernt, Geld für sich arbeiten zu lassen, statt andersherum. In „Rich Dad Poor Dad“ teilt er sein Wissen und zeigt, wie jeder erfolgreich sein kann.",
|
||||
blurb: "Warum bleiben die Reichen reich und die Armen arm?",
|
||||
genres: ["Crime", "Erotik"],
|
||||
subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
|
||||
publishers: null,
|
||||
@ -224,34 +224,4 @@ export const books = [
|
||||
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 }],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
isbn: "9783898798822",
|
||||
title: "Rich Dad Poor Dad (Test Buch 2)",
|
||||
authors: [{ id: null, name: "Robert T. Kiyosaki" }],
|
||||
blurb: "Warum bleiben die Reichen reich und die Armen arm?",
|
||||
genres: ["Crime", "Erotik"],
|
||||
subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
|
||||
publishers: null,
|
||||
pageCount: 240,
|
||||
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 }],
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
isbn: "9783898798822",
|
||||
title: "Rich Dad Poor Dad (Test Buch 3)",
|
||||
authors: [{ id: null, name: "Robert T. Kiyosaki" }],
|
||||
blurb: "Warum bleiben die Reichen reich und die Armen arm?",
|
||||
genres: ["Crime", "Erotik"],
|
||||
subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
|
||||
publishers: null,
|
||||
pageCount: 240,
|
||||
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 }],
|
||||
},
|
||||
]
|
||||
|
||||
@ -2,71 +2,29 @@
|
||||
<VContainer class="py-6">
|
||||
<VCard class="pa-4" elevation="2">
|
||||
<VRow>
|
||||
<!-- Cover & Blöcke -->
|
||||
<!-- Cover & Shops + Community -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- Community-Statistik -->
|
||||
<VCard class="pa-3" variant="outlined">
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCardTitle>Community-Statistik</VCardTitle>
|
||||
<VCardText>
|
||||
<VList density="compact">
|
||||
@ -99,34 +57,20 @@
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Neue statische Fieberkurve -->
|
||||
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" class="my-4" />
|
||||
|
||||
<!-- Inhaltsangabe -->
|
||||
<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 class="mb-4" variant="outlined" style="min-height: 180px;">
|
||||
<VCardTitle>Inhaltsangabe</VCardTitle>
|
||||
<VCardText>{{ book.blurb }}</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Buchdetails & Infos -->
|
||||
<VRow>
|
||||
<VCol cols="12" md="6">
|
||||
<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>
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCardTitle>Buchdetails</VCardTitle>
|
||||
<VCardText>
|
||||
<strong>ISBN:</strong> {{ book.isbn || '–' }}<br />
|
||||
<strong>Sprache:</strong> {{ book.language }}<br />
|
||||
@ -137,10 +81,8 @@
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VCard class="pa-3 elevation-1" variant="outlined">
|
||||
<VCardTitle>
|
||||
<VIcon icon="tabler-link" start /> Weitere Informationen
|
||||
</VCardTitle>
|
||||
<VCard class="pa-3" variant="outlined" style="min-height: 220px;">
|
||||
<VCardTitle>Weitere Informationen</VCardTitle>
|
||||
<VCardText>
|
||||
<ul class="pa-0" style="list-style: none">
|
||||
<li><a href="#">Alle Ausgaben in der Übersicht</a></li>
|
||||
@ -155,64 +97,50 @@
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- Bücher vom gleichen Autor -->
|
||||
<VCard class="mt-6" elevation="0">
|
||||
<VCardTitle>Weitere Bücher von {{ book.authors[0]?.name }}</VCardTitle>
|
||||
<!-- Weitere Bücher vom Autor -->
|
||||
<VCard class="mt-6 mb-6" elevation="0">
|
||||
<VCardTitle>Bücher von {{ book.authors[0]?.name }}</VCardTitle>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="b in authorBooks"
|
||||
:key="b.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<RouterLink :to="`/buchdetailseite/${b.id}`">
|
||||
<VCol v-for="item in authorBooks" :key="item.id" cols="12" sm="6" md="3">
|
||||
<RouterLink :to="`/buchdetailseite/${item.id}`">
|
||||
<VCard class="hover:scale-105 transition-transform duration-200">
|
||||
<VImg :src="b.image" height="180" cover />
|
||||
<VCardText class="text-sm font-semibold">
|
||||
{{ b.title }}
|
||||
<VImg :src="item.image" height="180" cover />
|
||||
<VCardText>
|
||||
<div class="text-sm font-semibold">{{ item.title }}</div>
|
||||
</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 class="mt-6" variant="outlined">
|
||||
<VCardTitle><VIcon icon="tabler-star" start /> Rezensionen & Bewertungen</VCardTitle>
|
||||
<VCard elevation="0">
|
||||
<VCardTitle>Rezensionen & Bewertungen</VCardTitle>
|
||||
<VCardText>
|
||||
<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>
|
||||
<p class="mb-2">⭐⭐⭐⭐☆ 4,3 / 5 Sterne (15 Stimmen)</p>
|
||||
<em>Hier könnten später echte Rezensionen von Nutzern folgen.</em>
|
||||
</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">
|
||||
@ -245,7 +173,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { books } from '@/components/buecherdatenbank'
|
||||
import Fieberkurve from '@/components/Fieberkurve.vue'
|
||||
@ -254,36 +182,6 @@ 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)
|
||||
@ -297,12 +195,6 @@ 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',
|
||||
@ -319,11 +211,3 @@ 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