Neue Büchersuche Seite
This commit is contained in:
parent
76f83cbae9
commit
701e1ba9e3
@ -1,32 +1,48 @@
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="12"
|
||||
>
|
||||
<VCard
|
||||
title="Büchersuche"
|
||||
subtitle="Vorbeischauen – Vergleichen – Verlieben"
|
||||
>
|
||||
<!-- ******* Fieberkurve ***** -->
|
||||
<Fieberkurve :show-reset-button="true" :show-categories="true" />
|
||||
<VCol cols="12" md="12">
|
||||
<VCard title="Büchersuche" subtitle="Vorbeischauen – Vergleichen – Verlieben">
|
||||
<VCardTitle class="text-center text-h4 font-weight-bold">
|
||||
SKOUTZ BUCHSUCHE
|
||||
</VCardTitle>
|
||||
|
||||
<!-- <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
|
||||
{{ selectedCheckbox }}
|
||||
</div>-->
|
||||
|
||||
<!-- ******* Genre´s ***** -->
|
||||
<div style="padding: 0 7rem;">
|
||||
<VCol>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
<!-- Fieberkurve -->
|
||||
<Fieberkurve
|
||||
ref="fieberkurveRef"
|
||||
:show-reset-button="true"
|
||||
:show-categories="true"
|
||||
@update:values="updateFieberkurveValues"
|
||||
@filter-by-row="filterByRow"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Genres -->
|
||||
<div class="genre-section-main">
|
||||
<div
|
||||
v-for="genre in genres"
|
||||
:key="genre.value"
|
||||
class="custom-checkbox"
|
||||
:class="{ active: selectedCheckbox.includes(genre.value) }"
|
||||
@click="toggleGenre(genre.value)"
|
||||
>
|
||||
<VTooltip location="top">
|
||||
{{ genre.value }}
|
||||
<template #activator="{ props }">
|
||||
<div v-bind="props" class="icon">
|
||||
<VIcon :icon="genre.icon.icon" />
|
||||
</div>
|
||||
</template>
|
||||
</VTooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ******* TEXT SUCHFELD!! ***** -->
|
||||
<!-- Button zum Zurücksetzen der Genres -->
|
||||
<VBtn class="my-3 mx-auto d-block" color="primary" @click="clearGenres">
|
||||
Alle Genres Zurücksetzen
|
||||
</VBtn>
|
||||
|
||||
<!-- Text Suchfeld -->
|
||||
<div style="padding: 0 5rem;">
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
@ -36,392 +52,186 @@
|
||||
type="text"
|
||||
class="textfield-demo-icon-slot"
|
||||
>
|
||||
<!-- Prepend -->
|
||||
<template #prepend>
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="tabler-help"
|
||||
/>
|
||||
</template>
|
||||
Skoutz ist die Buchsuche, <br>
|
||||
die deinen Geschmack trifft. <br>
|
||||
5 Klicks 🖱 statt 5 Sterne ⭐ und du <br>
|
||||
findest genau, was du willst. <br>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- AppendInner -->
|
||||
<template #append-inner>
|
||||
<VFadeTransition leave-absolute>
|
||||
<VProgressCircular
|
||||
v-if="loading"
|
||||
color="primary"
|
||||
width="3"
|
||||
size="24"
|
||||
indeterminate
|
||||
/>
|
||||
|
||||
<VNodeRenderer
|
||||
v-else
|
||||
class="text-2xl"
|
||||
:nodes="themeConfig.app.logo"
|
||||
/>
|
||||
</VFadeTransition>
|
||||
</template>
|
||||
|
||||
<!-- Append -->
|
||||
<template #append>
|
||||
<VBtn
|
||||
:icon="$vuetify.display.smAndDown"
|
||||
@click="clickMe"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-search"
|
||||
color="#fff"
|
||||
size="22"
|
||||
/>
|
||||
<span
|
||||
v-if="$vuetify.display.mdAndUp"
|
||||
class="ms-3"
|
||||
>Suchen</span>
|
||||
<VBtn :icon="$vuetify.display.smAndDown" @click="searchBooks">
|
||||
<VIcon icon="tabler-search" color="#fff" size="22" />
|
||||
<span v-if="$vuetify.display.mdAndUp" class="ms-3">Suchen</span>
|
||||
</VBtn>
|
||||
</template>
|
||||
</AppTextField>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- Button zum Zurücksetzen der Einstellungen -->
|
||||
<VBtn
|
||||
class="my-3 mx-auto d-block"
|
||||
:color="resetFeedback ? 'success' : 'error'"
|
||||
@click="resetAllSettings"
|
||||
>
|
||||
{{ resetFeedback ? 'Zurückgesetzt!' : 'Alle Einstellungen zurücksetzen' }}
|
||||
</VBtn>
|
||||
|
||||
<br />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="12"
|
||||
>
|
||||
<!--
|
||||
<VCard
|
||||
title="Bücher eintragen"
|
||||
subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
|
||||
>
|
||||
-->
|
||||
<VCard
|
||||
class="mb-6"
|
||||
title="Gefundene Bücher:"
|
||||
>
|
||||
|
||||
Hallo Hier ist die API:
|
||||
{{book}}
|
||||
<div v-if="book">
|
||||
<p>Titel: {{ book.title }}</p>
|
||||
<!-- <p>Autor: {{ book.author }}</p>-->
|
||||
</div>
|
||||
|
||||
<!-- 👉 Hier werden die Bücher aufgelistet. -->
|
||||
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCol cols="12" md="12">
|
||||
<VCard class="mb-6" title="Gefundene Bücher:">
|
||||
<VRow>
|
||||
<VCol v-for="book in filteredBooks" :key="book.id" sm="6" cols="12">
|
||||
<VCard>
|
||||
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
width="200px"
|
||||
height="300px"
|
||||
:src="harry_potter"
|
||||
/>
|
||||
<VImg width="200px" height="300px" :src="book.image" />
|
||||
</div>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<div>
|
||||
<VCardTitle>Harry Potter</VCardTitle>
|
||||
<VCardText>
|
||||
<!-- <div style="position: relative; height: 120px">-->
|
||||
<!-- Fieberkurve -->
|
||||
</VCardText>
|
||||
|
||||
|
||||
<VCardText>
|
||||
Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
|
||||
</VCardText>
|
||||
<!--
|
||||
<VCardText class="text-subtitle-1">
|
||||
<span>Bestellen:</span> <span class="font-weight-medium">Amazon</span>
|
||||
</VCardText>
|
||||
-->
|
||||
|
||||
<VCardTitle>{{ book.title }}</VCardTitle>
|
||||
<VCardText>{{ book.description }}</VCardText>
|
||||
<Fieberkurve
|
||||
:is-static="true"
|
||||
:default-values="book.fieberkurve"
|
||||
:hide-text="true"
|
||||
/>
|
||||
<VCardActions class="justify-space-between">
|
||||
<VBtn>
|
||||
<VIcon icon="tabler-list-details" />
|
||||
<span class="ms-2">Detail Seite</span>
|
||||
</VBtn>
|
||||
|
||||
<IconBtn
|
||||
color="secondary"
|
||||
icon="tabler-share"
|
||||
/>
|
||||
<IconBtn color="secondary" icon="tabler-share" />
|
||||
</VCardActions>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
|
||||
<!-- ENDE: Genre -->
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue"
|
||||
import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
|
||||
import BookService from './BookService'
|
||||
import { useTheme } from "vuetify"
|
||||
import { ref, computed } from "vue";
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||
import { books } from "@/components/buecherdatenbank";
|
||||
import { genres } from "@/components/genredatenbank";
|
||||
|
||||
const message = ref('')
|
||||
const loading = ref(false)
|
||||
const message = ref("");
|
||||
const loading = ref(false);
|
||||
const selectedCheckbox = ref([]);
|
||||
const fieberkurveValues = ref([4, 4, 4, 4, 4]); // Standardwerte für die Fieberkurve
|
||||
const fieberkurveRowFilter = ref({ rowIndex: null, value: null });
|
||||
|
||||
const clickMe = () => {
|
||||
loading.value = true
|
||||
message.value = 'Warte darauf...'
|
||||
const filteredBooks = computed(() => {
|
||||
return books.filter((book) => {
|
||||
const matchesGenres =
|
||||
selectedCheckbox.value.length === 0 ||
|
||||
selectedCheckbox.value.some((genre) => book.genres.includes(genre));
|
||||
|
||||
const matchesText =
|
||||
!message.value ||
|
||||
book.title.toLowerCase().includes(message.value.toLowerCase()) ||
|
||||
book.authors?.some((author) =>
|
||||
author.name.toLowerCase().includes(message.value.toLowerCase())
|
||||
) ||
|
||||
book.isbn?.includes(message.value);
|
||||
|
||||
const matchesFieberkurve = fieberkurveValues.value.every((value, index) => {
|
||||
const bookValue = book.fieberkurve[index]?.value || 4;
|
||||
return value === 4 || value === bookValue;
|
||||
});
|
||||
|
||||
const matchesRowFilter =
|
||||
fieberkurveRowFilter.value.rowIndex === null ||
|
||||
book.fieberkurve[fieberkurveRowFilter.value.rowIndex].value ===
|
||||
fieberkurveRowFilter.value.value;
|
||||
|
||||
return matchesGenres && matchesText && matchesFieberkurve && matchesRowFilter;
|
||||
});
|
||||
});
|
||||
|
||||
const searchBooks = () => {
|
||||
console.log("Suche gestartet mit Text:", message.value);
|
||||
};
|
||||
|
||||
const toggleGenre = (genre) => {
|
||||
if (selectedCheckbox.value.includes(genre)) {
|
||||
selectedCheckbox.value = selectedCheckbox.value.filter((g) => g !== genre);
|
||||
} else {
|
||||
selectedCheckbox.value.push(genre);
|
||||
}
|
||||
};
|
||||
|
||||
const clearGenres = () => {
|
||||
selectedCheckbox.value = [];
|
||||
};
|
||||
|
||||
const fieberkurveRef = ref(null);
|
||||
const resetFeedback = ref(false);
|
||||
|
||||
const resetAllSettings = () => {
|
||||
selectedCheckbox.value = [];
|
||||
fieberkurveRef.value?.resetSliders();
|
||||
message.value = "";
|
||||
fieberkurveRowFilter.value = { rowIndex: null, value: null };
|
||||
resetFeedback.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
message.value = ''
|
||||
}, 2000)
|
||||
}
|
||||
resetFeedback.value = false;
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkboxContent = [
|
||||
/*{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: {
|
||||
icon: 'tabler-server-2',
|
||||
size: '28',
|
||||
},
|
||||
},*/
|
||||
{
|
||||
value: 'Abendteuer',
|
||||
icon: {
|
||||
icon: 'tabler-compass',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Contemporary',
|
||||
icon: {
|
||||
icon: 'tabler-building-skyscraper',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Crime',
|
||||
icon: {
|
||||
icon: 'tabler-fingerprint',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Erotik',
|
||||
icon: {
|
||||
icon: 'tabler-bed',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Fantasy',
|
||||
icon: {
|
||||
icon: 'tabler-paw',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'History',
|
||||
icon: {
|
||||
icon: 'tabler-swords',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Horror',
|
||||
icon: {
|
||||
icon: 'tabler-ghost-2',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Humor',
|
||||
icon: {
|
||||
icon: 'tabler-mood-xd',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'Romance',
|
||||
icon: {
|
||||
icon: 'tabler-hearts',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'ScienceFiction',
|
||||
icon: {
|
||||
icon: 'tabler-ufo',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
const updateFieberkurveValues = (values) => {
|
||||
fieberkurveValues.value = values;
|
||||
};
|
||||
|
||||
const selectedCheckbox = ref([])
|
||||
|
||||
|
||||
|
||||
// Hier ist der Abschnitt für die API (BACKEND)
|
||||
let book = null
|
||||
|
||||
onMounted(() => {
|
||||
const isbn = '9783898798822' // Ersetze durch die gewünschte ISBN
|
||||
|
||||
BookService.getBookByIsbn(isbn)
|
||||
.then(response => {
|
||||
// book = response.data
|
||||
book = response
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
// const toggleCheckboxOne = ref(true)
|
||||
// const genreBool = ref(false)
|
||||
|
||||
|
||||
|
||||
|
||||
// const genre1Color = ref('#a8a6a6')
|
||||
|
||||
// let activeGenre = []
|
||||
|
||||
/*let genres = [{
|
||||
id: 1,
|
||||
name: "Horror",
|
||||
icon: "tabler-ghost-2",
|
||||
|
||||
color: "#a8a6a6",
|
||||
bool: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Test",
|
||||
color: "#a8a6a6",
|
||||
icon: "tabler-ghost-2",
|
||||
bool: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "History",
|
||||
color: "#9fa8da",
|
||||
icon: "tabler-timeline",
|
||||
bool: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Anton",
|
||||
color: "#9fa8da",
|
||||
icon: "tabler-ghost-2",
|
||||
bool: false,
|
||||
}]*/
|
||||
|
||||
// const abenteuerBool = ref(false)
|
||||
// const people = ref(['Mike'])
|
||||
|
||||
/*function TestGenreActive(genre, bool){
|
||||
console.log("Hey Genre:", genre, bool)
|
||||
bool = !bool
|
||||
console.log("Bye Genre:", genre, bool)
|
||||
|
||||
return bool
|
||||
|
||||
}*/
|
||||
|
||||
/*function IsGenreActive(genre) {
|
||||
return activeGenre.includes(genre)
|
||||
}*/
|
||||
|
||||
/*function ToggleIsGenreSelected(genre) {
|
||||
console.log('IsGenreActive', IsGenreActive(genre))
|
||||
console.log('ToggleIsGenreSelected genre', genre)
|
||||
if (IsGenreActive(genre)){
|
||||
const index = activeGenre.indexOf(genre)
|
||||
|
||||
activeGenre.splice(index, 1)
|
||||
|
||||
console.log(`if values: ${activeGenre}`)
|
||||
} else {
|
||||
activeGenre.push(genre)
|
||||
console.log(`else values: ${activeGenre}`)
|
||||
}
|
||||
|
||||
// this.genreBool = !this.genreBool
|
||||
/!*genre.bool = !genre.bool
|
||||
genre = {
|
||||
id: genre.id,
|
||||
name: genre.name,
|
||||
color: genre.color,
|
||||
icon: genre.icon,
|
||||
bool: genre.bool
|
||||
}*!/
|
||||
// console.log("genreBool", genreBool)
|
||||
// console.log("genre", genre)
|
||||
// console.log("genreselected", genre.selected)
|
||||
// console.log("genres name", genre.name)
|
||||
// console.log("genres id", genre.id)
|
||||
// console.log("genres icon", genre.icon)
|
||||
// console.log("genres color", genre.color)
|
||||
/!*genre.selected = !genre.selected
|
||||
if (!genre.selected) {
|
||||
genre.color = "#cccccc" + "!important"
|
||||
console.log("IF !genre.selected", genre.selected, genre.color)
|
||||
} else {
|
||||
genre.color = vuetifyTheme.current.value.colors.primary
|
||||
console.log("ELSE genre.selected", genre.selected, genre.color)
|
||||
}
|
||||
|
||||
// genre.color = "#cccccc" + "!important"
|
||||
console.log("genreNew", genre, genre.color)*!/
|
||||
}*/
|
||||
|
||||
// lifecycle hooks
|
||||
/*onMounted(() => {
|
||||
// rowFevercurveConnectors()
|
||||
})*/
|
||||
|
||||
/*computed() {
|
||||
genreBackgroundColor() {
|
||||
return (genreId) => {
|
||||
return IsGenreActive(genreId) ? vuetifyTheme.current.value.colors.primary : '#acadac'
|
||||
}
|
||||
}
|
||||
}*/
|
||||
const filterByRow = (filter) => {
|
||||
fieberkurveRowFilter.value = filter;
|
||||
console.log("Filter gesetzt:", filter);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.genre-section-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.genre-section-main > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.genre-section-main > div.active {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
color: white;
|
||||
border-color: #4e60e4;
|
||||
}
|
||||
|
||||
.genre-section-main > div:hover {
|
||||
background-color: #e6e8f0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.genre-section-main .icon {
|
||||
font-size: 18px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.v-text-field {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user