Fieberkurve auslagern
This commit is contained in:
parent
29bcb6b605
commit
30da2fb495
@ -1,11 +1,469 @@
|
||||
<script setup>
|
||||
import { ref, watch, defineProps, defineEmits } from "vue"
|
||||
|
||||
const props = defineProps({
|
||||
showResetButton: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
showCategories: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
/*
|
||||
const emit = defineEmits(['buttonClicked'])
|
||||
|
||||
const emitButtonClick = () => {
|
||||
emit('buttonClicked', 1)
|
||||
}
|
||||
*/
|
||||
|
||||
const schwierigkeit = ref(4)
|
||||
const stimmung = ref(4)
|
||||
const spannung = ref(4)
|
||||
const gewalt = ref(4)
|
||||
const erotik = ref(4)
|
||||
|
||||
const ColorRow1 = ref('#a8a6a6')
|
||||
const ColorRow2 = ref('#a8a6a6')
|
||||
const ColorRow3 = ref('#a8a6a6')
|
||||
const ColorRow4 = ref('#a8a6a6')
|
||||
const ColorRow5 = ref('#a8a6a6')
|
||||
|
||||
const isRow1Active = ref(false)
|
||||
const isRow2Active = ref(false)
|
||||
const isRow3Active = ref(false)
|
||||
const isRow4Active = ref(false)
|
||||
const isRow5Active = ref(false)
|
||||
|
||||
const isResetButtonPressed = ref(false)
|
||||
const firstClick = ref(false)
|
||||
|
||||
function FevercurveIsClicked(RowValue) {
|
||||
isResetButtonPressed.value = true
|
||||
switch (RowValue) {
|
||||
case "schwierigkeit":
|
||||
console.log("Line: 1")
|
||||
ColorRow1.value = '#cccccc'
|
||||
isRow1Active.value = true
|
||||
break
|
||||
case "stimmung":
|
||||
console.log("Line: 2")
|
||||
ColorRow2.value = '#cccccc'
|
||||
isRow2Active.value = true
|
||||
break
|
||||
case "spannung":
|
||||
console.log("Line: 3")
|
||||
ColorRow3.value = '#cccccc'
|
||||
isRow3Active.value = true
|
||||
break
|
||||
case "gewalt":
|
||||
console.log("Line: 4")
|
||||
ColorRow4.value = '#cccccc'
|
||||
isRow4Active.value = true
|
||||
break
|
||||
case "erotik":
|
||||
console.log("Line: 5")
|
||||
ColorRow5.value = '#cccccc'
|
||||
isRow5Active.value = true
|
||||
break
|
||||
}
|
||||
console.log("firstClick:", firstClick.value)
|
||||
|
||||
if (!firstClick.value) {
|
||||
rowFevercurveConnectors()
|
||||
}
|
||||
firstClick.value = true
|
||||
}
|
||||
|
||||
|
||||
function resetFevercurve() {
|
||||
if (!isResetButtonPressed.value) {
|
||||
return
|
||||
}
|
||||
console.log("reset Fevercurve")
|
||||
|
||||
isResetButtonPressed.value = false
|
||||
firstClick.value = false
|
||||
|
||||
ColorRow1.value = '#a8a6a6'
|
||||
ColorRow2.value = '#a8a6a6'
|
||||
ColorRow3.value = '#a8a6a6'
|
||||
ColorRow4.value = '#a8a6a6'
|
||||
ColorRow5.value = '#a8a6a6'
|
||||
|
||||
isRow1Active.value = false
|
||||
isRow2Active.value = false
|
||||
isRow3Active.value = false
|
||||
isRow4Active.value = false
|
||||
isRow5Active.value = false
|
||||
|
||||
schwierigkeit.value = 4
|
||||
stimmung.value = 4
|
||||
spannung.value = 4
|
||||
gewalt.value = 4
|
||||
erotik.value = 4
|
||||
|
||||
clearFevercurveConnectors()
|
||||
}
|
||||
|
||||
function clearFevercurveConnectors() {
|
||||
console.log("Striche werden gecleart")
|
||||
|
||||
let c = document.getElementById("myCanvas")
|
||||
let ctx = c.getContext("2d")
|
||||
ctx.clearRect(0, 0, c.width, c.height)
|
||||
}
|
||||
|
||||
function rowFevercurveConnectors() {
|
||||
console.log("Funktion wird aufgerufen")
|
||||
|
||||
let c = document.getElementById("myCanvas")
|
||||
let ctx = c.getContext("2d")
|
||||
|
||||
//settings
|
||||
// let gradient = ctx.createLinearGradient(182, 5, 41, 100)
|
||||
// gradient.addColorStop("0", "#3f5efb")
|
||||
// gradient.addColorStop("1.0", "#b60529")
|
||||
// ctx.strokeStyle = gradient
|
||||
ctx.strokeStyle = "red"
|
||||
ctx.lineWidth = 4
|
||||
|
||||
// clear canvas
|
||||
ctx.clearRect(0, 0, c.width, c.height)
|
||||
ctx.beginPath()
|
||||
|
||||
let Breite = 240
|
||||
let Hoehe = 130
|
||||
let Kreis = 20
|
||||
|
||||
ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
||||
if (isResetButtonPressed.value){
|
||||
rowFevercurveConnectors()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
$END$
|
||||
<div>
|
||||
<div class="grid-container">
|
||||
<div
|
||||
v-if="props.showCategories"
|
||||
class="item1"
|
||||
>
|
||||
anspruchsvoll <br>
|
||||
lustig <br>
|
||||
spannend <br>
|
||||
brutal <br>
|
||||
sittsam
|
||||
</div>
|
||||
<div class="item2">
|
||||
<!-- Slider -->
|
||||
<div style="position: relative; height: 120px">
|
||||
<!-- Fieberkurve -->
|
||||
<canvas
|
||||
id="myCanvas"
|
||||
width="240"
|
||||
height="130"
|
||||
>
|
||||
Your browser does not support the HTML canvas tag.
|
||||
</canvas>
|
||||
|
||||
<div class="FieberkurveGesamt">
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('schwierigkeit')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="schwierigkeit"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:style="{ color: '#000000' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow1 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
||||
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('stimmung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="stimmung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow2 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('spannung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="spannung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow3 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('gewalt')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="gewalt"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow4 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('erotik')"
|
||||
>
|
||||
<input
|
||||
id="myRange5"
|
||||
v-model="erotik"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:class="{ backgroundColor: '#e70707' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow5 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.showCategories"
|
||||
class="item3"
|
||||
>
|
||||
leseleicht<br>
|
||||
traurig<br>
|
||||
entspannend<br>
|
||||
gewaltfrei<br>
|
||||
erotisch
|
||||
</div>
|
||||
</div>
|
||||
<!-- ENDE FIEBERKURVE -->
|
||||
<!-- Button Fieberkurve zurücksetzen -->
|
||||
<div
|
||||
v-if="props.showResetButton"
|
||||
style="
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: center;"
|
||||
>
|
||||
<VBtn
|
||||
size="small"
|
||||
@click="resetFevercurve"
|
||||
>
|
||||
Fieberkurve zurücksetzen
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//Grid Layout
|
||||
.item1 {
|
||||
grid-area: txtLinks;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
grid-area: Fieberkurve;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
grid-area: txtRechts;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: 'txtLinks Fieberkurve txtRechts';
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.grid-container > div {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
//Grid Layout END
|
||||
|
||||
|
||||
canvas {
|
||||
z-index: 2;
|
||||
//border:1px solid #000000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.FieberkurveGesamt {
|
||||
height: 130px;
|
||||
width: 240px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.Fieberkurve {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
//background: #27c21f;
|
||||
//padding: ;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.kreis {
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
background: #CECCCCDB;
|
||||
box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
//top: 10px;
|
||||
-webkit-appearance: none;
|
||||
|
||||
//background: #c29c1f;
|
||||
//height: 7.5px;
|
||||
//margin-top: 3.5px;
|
||||
|
||||
//background: rgba(50, 150, 11, 0.81);
|
||||
outline: none;
|
||||
//border: 5px solid rgba(232, 64, 64, 0.83);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
//background: #bb2626;
|
||||
height: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Kreis */
|
||||
/* for chrome/safari */
|
||||
.slider::-webkit-slider-thumb {
|
||||
//z-index: 4;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #F07D00;
|
||||
cursor: pointer;
|
||||
//border: 5px solid red;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* for firefox */
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
//border: 5px solid lawngreen;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,196 +8,14 @@
|
||||
title="Büchersuche"
|
||||
subtitle="Vorbeischauen – Vergleichen – Verlieben"
|
||||
>
|
||||
<div class="grid-container">
|
||||
<div class="item1">
|
||||
anspruchsvoll <br>
|
||||
lustig <br>
|
||||
spannend <br>
|
||||
brutal <br>
|
||||
sittsam
|
||||
</div>
|
||||
<div class="item2">
|
||||
<!-- Slider -->
|
||||
<div style="position: relative; height: 120px">
|
||||
<!-- Fieberkurve -->
|
||||
<canvas
|
||||
id="myCanvas"
|
||||
width="240"
|
||||
height="130"
|
||||
>
|
||||
Your browser does not support the HTML canvas tag.
|
||||
</canvas>
|
||||
<!-- ******* Fieberkurve ***** -->
|
||||
<Fieberkurve :show-reset-button="true" :show-categories="true" />
|
||||
|
||||
<div class="FieberkurveGesamt">
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('schwierigkeit')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="schwierigkeit"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:style="{ color: '#000000' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow1 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
||||
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('stimmung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="stimmung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow2 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('spannung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="spannung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow3 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('gewalt')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="gewalt"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow4 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('erotik')"
|
||||
>
|
||||
<input
|
||||
id="myRange5"
|
||||
v-model="erotik"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:class="{ backgroundColor: '#e70707' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow5 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ENDE FIEBERKURVE -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="item3">
|
||||
leseleicht<br>
|
||||
traurig<br>
|
||||
entspannend<br>
|
||||
gewaltfrei<br>
|
||||
erotisch
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: center;"
|
||||
>
|
||||
<VBtn
|
||||
size="small"
|
||||
@click="resetFevercurve"
|
||||
>
|
||||
Fieberkurve zurücksetzen
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top: 100px; left: 10px; color: rgba(185,17,17,0.85)">
|
||||
R1: {{ schwierigkeit }}, {{ isRow1Active }} <br>
|
||||
R2: {{ stimmung }}, {{ isRow2Active }} <br>
|
||||
R3: {{ spannung }}, {{ isRow3Active }} <br>
|
||||
R4: {{ gewalt }}, {{ isRow4Active }} <br>
|
||||
R5: {{ erotik }}, {{ isRow5Active }} <br>
|
||||
</div>
|
||||
<div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
|
||||
<!-- <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
|
||||
{{ selectedCheckbox }}
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- ******* Genre´s ***** -->
|
||||
<div style="padding: 0 7rem;">
|
||||
<VCol>
|
||||
<CustomCheckboxesWithIcon
|
||||
@ -207,7 +25,6 @@
|
||||
</VCol>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ******* TEXT SUCHFELD!! ***** -->
|
||||
|
||||
<div style="padding: 0 5rem;">
|
||||
@ -275,11 +92,14 @@
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- <hr>-->
|
||||
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="12"
|
||||
@ -294,8 +114,6 @@
|
||||
class="mb-6"
|
||||
title="Gefundene Bücher:"
|
||||
>
|
||||
|
||||
|
||||
<!-- 👉 Hier werden die Bücher aufgelistet. -->
|
||||
|
||||
<VCol
|
||||
@ -305,13 +123,11 @@
|
||||
<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="150"
|
||||
width="200px"
|
||||
height="300px"
|
||||
:src="harryPotter1"
|
||||
:src="harry_potter"
|
||||
/>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
@ -319,149 +135,11 @@
|
||||
<div>
|
||||
<VCardTitle>Harry Potter</VCardTitle>
|
||||
<VCardText>
|
||||
<div style="position: relative; height: 120px">
|
||||
<!-- <div style="position: relative; height: 120px">-->
|
||||
<!-- Fieberkurve -->
|
||||
<canvas
|
||||
id="myCanvas"
|
||||
width="240"
|
||||
height="130"
|
||||
>
|
||||
Your browser does not support the HTML canvas tag.
|
||||
</canvas>
|
||||
|
||||
<div class="FieberkurveGesamt">
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('schwierigkeit')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="schwierigkeit"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:style="{ color: '#000000' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow1 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
||||
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('stimmung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="stimmung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow2 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('spannung')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="spannung"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow3 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('gewalt')"
|
||||
>
|
||||
<input
|
||||
id="myRange"
|
||||
v-model="gewalt"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow4 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="Fieberkurve"
|
||||
@click="FevercurveIsClicked('erotik')"
|
||||
>
|
||||
<input
|
||||
id="myRange5"
|
||||
v-model="erotik"
|
||||
type="range"
|
||||
min="1"
|
||||
max="7"
|
||||
class="slider"
|
||||
:class="{ backgroundColor: '#e70707' }"
|
||||
>
|
||||
<div
|
||||
class="slider-track"
|
||||
:style="{ backgroundColor: ColorRow5 }"
|
||||
/>
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
<div class="kreis" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
|
||||
<VCardText>
|
||||
Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
|
||||
</VCardText>
|
||||
@ -498,6 +176,8 @@
|
||||
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 { useTheme } from "vuetify"
|
||||
|
||||
const message = ref('')
|
||||
@ -596,40 +276,18 @@ const checkboxContent = [
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref([])
|
||||
const toggleCheckboxOne = ref(true)
|
||||
|
||||
const schwierigkeit = ref(4)
|
||||
const stimmung = ref(4)
|
||||
const spannung = ref(4)
|
||||
const gewalt = ref(4)
|
||||
const erotik = ref(4)
|
||||
// const toggleCheckboxOne = ref(true)
|
||||
// const genreBool = ref(false)
|
||||
|
||||
const genreBool = ref(false)
|
||||
|
||||
const isResetButtonPressed = ref(false)
|
||||
const firstClick = ref(false)
|
||||
|
||||
const ColorRow1 = ref('#a8a6a6')
|
||||
const ColorRow2 = ref('#a8a6a6')
|
||||
const ColorRow3 = ref('#a8a6a6')
|
||||
const ColorRow4 = ref('#a8a6a6')
|
||||
const ColorRow5 = ref('#a8a6a6')
|
||||
|
||||
const genre1Color = ref('#a8a6a6')
|
||||
// const genre1Color = ref('#a8a6a6')
|
||||
|
||||
const isRow1Active = ref(false)
|
||||
const isRow2Active = ref(false)
|
||||
const isRow3Active = ref(false)
|
||||
const isRow4Active = ref(false)
|
||||
const isRow5Active = ref(false)
|
||||
// let activeGenre = []
|
||||
|
||||
// const genre1 = ref(true)
|
||||
// const genre2 = ref(true)
|
||||
// const genre3 = ref(true)
|
||||
|
||||
let activeGenre = []
|
||||
|
||||
let genres = [{
|
||||
/*let genres = [{
|
||||
id: 1,
|
||||
name: "Horror",
|
||||
icon: "tabler-ghost-2",
|
||||
@ -657,27 +315,25 @@ let genres = [{
|
||||
color: "#9fa8da",
|
||||
icon: "tabler-ghost-2",
|
||||
bool: false,
|
||||
}]
|
||||
}]*/
|
||||
|
||||
const abenteuerBool = ref(false)
|
||||
const people = ref(['Mike'])
|
||||
// const abenteuerBool = ref(false)
|
||||
// const people = ref(['Mike'])
|
||||
|
||||
function TestGenreActive(genre, bool){
|
||||
/*function TestGenreActive(genre, bool){
|
||||
console.log("Hey Genre:", genre, bool)
|
||||
bool = !bool
|
||||
console.log("Bye Genre:", genre, bool)
|
||||
|
||||
return bool
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
function IsGenreActive(genre) {
|
||||
/*function IsGenreActive(genre) {
|
||||
return activeGenre.includes(genre)
|
||||
}
|
||||
}*/
|
||||
|
||||
function ToggleIsGenreSelected(genre) {
|
||||
/*function ToggleIsGenreSelected(genre) {
|
||||
console.log('IsGenreActive', IsGenreActive(genre))
|
||||
console.log('ToggleIsGenreSelected genre', genre)
|
||||
if (IsGenreActive(genre)){
|
||||
@ -691,17 +347,15 @@ function ToggleIsGenreSelected(genre) {
|
||||
console.log(`else values: ${activeGenre}`)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// this.genreBool = !this.genreBool
|
||||
/*genre.bool = !genre.bool
|
||||
/!*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)
|
||||
@ -709,7 +363,7 @@ function ToggleIsGenreSelected(genre) {
|
||||
// console.log("genres id", genre.id)
|
||||
// console.log("genres icon", genre.icon)
|
||||
// console.log("genres color", genre.color)
|
||||
/*genre.selected = !genre.selected
|
||||
/!*genre.selected = !genre.selected
|
||||
if (!genre.selected) {
|
||||
genre.color = "#cccccc" + "!important"
|
||||
console.log("IF !genre.selected", genre.selected, genre.color)
|
||||
@ -719,87 +373,14 @@ function ToggleIsGenreSelected(genre) {
|
||||
}
|
||||
|
||||
// genre.color = "#cccccc" + "!important"
|
||||
console.log("genreNew", genre, genre.color)*/
|
||||
}
|
||||
|
||||
function FevercurveIsClicked(RowValue) {
|
||||
isResetButtonPressed.value = true
|
||||
switch (RowValue) {
|
||||
case "schwierigkeit":
|
||||
console.log("Line: 1")
|
||||
ColorRow1.value = '#cccccc'
|
||||
isRow1Active.value = true
|
||||
break
|
||||
case "stimmung":
|
||||
console.log("Line: 2")
|
||||
ColorRow2.value = '#cccccc'
|
||||
isRow2Active.value = true
|
||||
break
|
||||
case "spannung":
|
||||
console.log("Line: 3")
|
||||
ColorRow3.value = '#cccccc'
|
||||
isRow3Active.value = true
|
||||
break
|
||||
case "gewalt":
|
||||
console.log("Line: 4")
|
||||
ColorRow4.value = '#cccccc'
|
||||
isRow4Active.value = true
|
||||
break
|
||||
case "erotik":
|
||||
console.log("Line: 5")
|
||||
ColorRow5.value = '#cccccc'
|
||||
isRow5Active.value = true
|
||||
break
|
||||
}
|
||||
console.log("firstClick:", firstClick.value)
|
||||
|
||||
if (!firstClick.value) {
|
||||
rowFevercurveConnectors()
|
||||
}
|
||||
firstClick.value = true
|
||||
}
|
||||
|
||||
function resetFevercurve() {
|
||||
if (!isResetButtonPressed.value) {
|
||||
return
|
||||
}
|
||||
console.log("reset Fevercurve")
|
||||
|
||||
isResetButtonPressed.value = false
|
||||
firstClick.value = false
|
||||
|
||||
ColorRow1.value = '#a8a6a6'
|
||||
ColorRow2.value = '#a8a6a6'
|
||||
ColorRow3.value = '#a8a6a6'
|
||||
ColorRow4.value = '#a8a6a6'
|
||||
ColorRow5.value = '#a8a6a6'
|
||||
|
||||
isRow1Active.value = false
|
||||
isRow2Active.value = false
|
||||
isRow3Active.value = false
|
||||
isRow4Active.value = false
|
||||
isRow5Active.value = false
|
||||
|
||||
schwierigkeit.value = 4
|
||||
stimmung.value = 4
|
||||
spannung.value = 4
|
||||
gewalt.value = 4
|
||||
erotik.value = 4
|
||||
|
||||
clearFevercurveConnectors()
|
||||
}
|
||||
console.log("genreNew", genre, genre.color)*!/
|
||||
}*/
|
||||
|
||||
// lifecycle hooks
|
||||
/*onMounted(() => {
|
||||
// rowFevercurveConnectors()
|
||||
})*/
|
||||
|
||||
watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
||||
if (isResetButtonPressed.value){
|
||||
rowFevercurveConnectors()
|
||||
}
|
||||
})
|
||||
|
||||
/*computed() {
|
||||
genreBackgroundColor() {
|
||||
return (genreId) => {
|
||||
@ -807,169 +388,9 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
function clearFevercurveConnectors() {
|
||||
console.log("Striche werden gecleart")
|
||||
|
||||
let c = document.getElementById("myCanvas")
|
||||
let ctx = c.getContext("2d")
|
||||
ctx.clearRect(0, 0, c.width, c.height)
|
||||
}
|
||||
|
||||
|
||||
function rowFevercurveConnectors() {
|
||||
console.log("Funktion wird aufgerufen")
|
||||
|
||||
let c = document.getElementById("myCanvas")
|
||||
let ctx = c.getContext("2d")
|
||||
|
||||
//settings
|
||||
// let gradient = ctx.createLinearGradient(182, 5, 41, 100)
|
||||
// gradient.addColorStop("0", "#3f5efb")
|
||||
// gradient.addColorStop("1.0", "#b60529")
|
||||
// ctx.strokeStyle = gradient
|
||||
ctx.strokeStyle = "red"
|
||||
ctx.lineWidth = 4
|
||||
|
||||
// clear canvas
|
||||
ctx.clearRect(0, 0, c.width, c.height)
|
||||
ctx.beginPath()
|
||||
|
||||
let Breite = 240
|
||||
let Hoehe = 130
|
||||
let Kreis = 20
|
||||
|
||||
ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||
|
||||
ctx.stroke()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//Grid Layout
|
||||
.item1 {
|
||||
grid-area: txtLinks;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
grid-area: Fieberkurve;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
grid-area: txtRechts;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: 'txtLinks Fieberkurve txtRechts';
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.grid-container > div {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
//Grid Layout END
|
||||
|
||||
|
||||
canvas {
|
||||
z-index: 2;
|
||||
//border:1px solid #000000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.FieberkurveGesamt {
|
||||
height: 130px;
|
||||
width: 240px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.Fieberkurve {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
//background: #27c21f;
|
||||
//padding: ;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.kreis {
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
background: #CECCCCDB;
|
||||
box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
|
||||
}
|
||||
|
||||
|
||||
.slider {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
//top: 10px;
|
||||
-webkit-appearance: none;
|
||||
|
||||
//background: #c29c1f;
|
||||
//height: 7.5px;
|
||||
//margin-top: 3.5px;
|
||||
|
||||
//background: rgba(50, 150, 11, 0.81);
|
||||
outline: none;
|
||||
//border: 5px solid rgba(232, 64, 64, 0.83);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
//background: #bb2626;
|
||||
height: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Kreis */
|
||||
/* for chrome/safari */
|
||||
.slider::-webkit-slider-thumb {
|
||||
//z-index: 4;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #F07D00;
|
||||
cursor: pointer;
|
||||
//border: 5px solid red;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* for firefox */
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
//border: 5px solid lawngreen;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.genre-section-main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
<script setup>
|
||||
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
$END$
|
||||
<Fieberkurve :show-reset-button="true" :show-categories="true" />
|
||||
<hr>
|
||||
<br>
|
||||
<Fieberkurve :show-reset-button="false" :show-categories="true" />
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<Fieberkurve :show-reset-button="false" :show-categories="false" />
|
||||
<br>
|
||||
<hr>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user