76 lines
2.4 KiB
Vue
76 lines
2.4 KiB
Vue
<template>
|
|
<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>
|
|
|
|
<!-- Snackbar -->
|
|
<VSnackbar v-model="snackbar" :timeout="2000" location="top right" color="success">
|
|
{{ snackbarText }}
|
|
</VSnackbar>
|
|
</VCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const liked = ref(false)
|
|
const readingStatus = ref(false)
|
|
const wishlist = ref(false)
|
|
const collection = ref(false)
|
|
|
|
const snackbar = ref(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 ❌')
|
|
}
|
|
</script>
|