MCMichinator/skoutz-relaunch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Files (2x static DB (Genres & Books) and test static fevercurve for books)

Browse Source
This commit is contained in:
Michi Tomaschko 2025-01-25 12:24:07 +01:00
parent def6cac592
commit b5aa8f066e
5 changed files with 374 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/buecherdatenbank.js Normal file
View File

93
src/components/genredatenbank.js Normal file
View File

@ -0,0 +1,93 @@
export const books = [
{
id: 1,
title: 'Rich Dad Poor Dad',
description: 'Ein Buch über finanzielle Bildung und Investitionen.',
image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
fieberkurve: [
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
],
},
{
id: 2,
title: 'Harry Potter und der Stein der Weisen',
description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 7 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 3,
title: 'Der Herr der Ringe',
description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 5 },
{ value: 4 },
{ value: 6 },
{ value: 4 },
{ value: 2 },
],
},
{
id: 4,
title: 'Die Tribute von Panem',
description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 4 },
{ value: 7 },
{ value: 4 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 5,
title: 'Game of Thrones',
description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 7 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 6,
title: '1984',
description: 'Ein dystopischer Klassiker von George Orwell.',
image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 4 },
{ value: 4 },
{ value: 5 },
],
},
{
id: 7,
title: 'Sakrileg - The Da Vinci Code',
description: 'Ein spannender Thriller von Dan Brown.',
image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
fieberkurve: [
{ value: 1 },
{ value: 7 },
{ value: 7 },
{ value: 3 },
{ value: 1 },
],
},
]

101
src/pages/buecherdatenbank.vue Normal file
View File

@ -0,0 +1,101 @@
<script setup>
export const books = [
{
id: 1,
title: 'Rich Dad Poor Dad',
description: 'Ein Buch über finanzielle Bildung und Investitionen.',
image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
fieberkurve: [
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
],
},
{
id: 2,
title: 'Harry Potter und der Stein der Weisen',
description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 7 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 3,
title: 'Der Herr der Ringe',
description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 5 },
{ value: 4 },
{ value: 6 },
{ value: 4 },
{ value: 2 },
],
},
{
id: 4,
title: 'Die Tribute von Panem',
description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 4 },
{ value: 7 },
{ value: 4 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 5,
title: 'Game of Thrones',
description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 7 },
{ value: 3 },
{ value: 5 },
],
},
{
id: 6,
title: '1984',
description: 'Ein dystopischer Klassiker von George Orwell.',
image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
fieberkurve: [
{ value: 5 },
{ value: 2 },
{ value: 4 },
{ value: 4 },
{ value: 5 },
],
},
{
id: 7,
title: 'Sakrileg - The Da Vinci Code',
description: 'Ein spannender Thriller von Dan Brown.',
image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
fieberkurve: [
{ value: 1 },
{ value: 7 },
{ value: 7 },
{ value: 3 },
{ value: 1 },
],
},
];
</script>
<template>
</template>
<style scoped lang="scss">
</style>

29
src/pages/genredatenbank.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup>
import { books } from '@/components/buecherdatenbank'; // Importiere die Bücher-Datenbank
import Fieberkurve from "@/components/Fieberkurve.vue";
</script>
<template>
<h2>Bücherdatenbank:</h2>
<p>(Alle statisch angelegte Testbücher in "buecherdatenbank.js")</p>
<hr>
<br>
<VRow>
<VCol
v-for="book in books"
:key="book.id"
sm="6"
cols="12"
>
id: {{ book.id }} <br>
title: {{ book.title }} <br>
description: {{ book.description }} <br>
image: {{ book.image }} <br>
fieberkurve: {{ book.fieberkurve }} <br>
</VCol>
</VRow>
</template>
<style scoped lang="scss">
</style>

151
src/pages/statische-fieberkurven.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div>
<h1>Fieberkurve Beispielseite</h1>
<!-- Interaktive Fieberkurve -->
<div>
<h2>Interaktive Fieberkurve</h2>
<Fieberkurve :isStatic="false" @update:values="updateValues" />
</div>
<br>
<!-- Button zum Laden der Daten -->
<div class="button-container">
<button @click="loadValues">Daten laden</button>
</div>
<!-- Statische Fieberkurve -->
<div>
<h2>Dynamische Fieberkurve</h2>
<Fieberkurve :isStatic="true" :defaultValues="staticValues" />
{{ staticValues }}
</div>
<!-- Statische Fieberkurve -->
<div>
<hr>
<br>
<h2>Statische Fieberkurve</h2>
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Fieberkurve from "@/components/Fieberkurve.vue";
// Werte der interaktiven Fieberkurve
const staticValues = ref([
{ value: 4 },
{ value: 4 },
{ value: 4 },
{ value: 4 },
{ value: 4 }
]);
// Temporäre Werte für interaktive Fieberkurve
const temporaryValues = ref([]);
// Funktion zum Aktualisieren der temporären Werte
function updateValues(values) {
temporaryValues.value = values.map(value => ({ value }));
}
// Funktion zum Laden der temporären Werte in die statische Fieberkurve
function loadValues() {
if (temporaryValues.value != 0){
staticValues.value = [...temporaryValues.value]; // Neuzuweisung des Arrays
}
// console.log(staticValues.value, temporaryValues.value)
}
</script>
<style scoped>
h1 {
text-align: center;
margin-bottom: 20px;
}
h2 {
margin: 20px 0;
text-align: left;
}
.button-container {
text-align: center;
margin: 20px 0;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
div {
margin-bottom: 40px;
}
</style>
<!--<script setup>
import Fieberkurve from "@/components/Fieberkurve.vue";
</script>
<template>
<VCard
title="Fieberkurven Vorschauseite"
subtitle="Hier werden nur ein paar Varianten der Fieberkurve gezeigt!"
>
<h4>Interaktive Fieberkurve:</h4>
&lt;!&ndash; Interaktive Fieberkurve &ndash;&gt;
<Fieberkurve :isStatic="false" />
<br>
<br>
<Fieberkurve :isStatic="false" />
<br>
<hr>
<br>
<h4>Statische Fieberkurve mit vordefinierten Werten:</h4>
&lt;!&ndash; Statische Fieberkurve mit vordefinierten Werten &ndash;&gt;
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
<br>
<br>
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 2 }, { value: 2 }, { value: 3 }, { value: 1 }]" />
<br>
<br>
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }]" />
<br>
<br>
</VCard>
</template>
<style scoped lang="scss">
</style>-->