977 lines
25 KiB
Vue
977 lines
25 KiB
Vue
<template>
|
||
<VRow class="match-height">
|
||
<VCol
|
||
cols="12"
|
||
md="12"
|
||
>
|
||
<VCard
|
||
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>
|
||
|
||
<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)">
|
||
{{ selectedCheckbox }}
|
||
</div>
|
||
|
||
<div style="padding: 0 7rem;">
|
||
<VCol>
|
||
<CustomCheckboxesWithIcon
|
||
v-model:selected-checkbox="selectedCheckbox"
|
||
:checkbox-content="checkboxContent"
|
||
/>
|
||
</VCol>
|
||
</div>
|
||
|
||
|
||
<!-- ******* TEXT SUCHFELD!! ***** -->
|
||
|
||
<div style="padding: 0 5rem;">
|
||
<AppTextField
|
||
v-model="message"
|
||
clearable
|
||
label="Finde dein Buch!"
|
||
placeholder="Titel, Untertitel oder Auor eingeben"
|
||
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>
|
||
</template>
|
||
</AppTextField>
|
||
</div>
|
||
|
||
<br>
|
||
<!-- <hr>-->
|
||
|
||
</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:"
|
||
>
|
||
|
||
|
||
<!-- 👉 Hier werden die Bücher aufgelistet. -->
|
||
|
||
<VCol
|
||
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="150"
|
||
height="300px"
|
||
:src="harryPotter1"
|
||
/>
|
||
-->
|
||
</div>
|
||
|
||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||
|
||
<div>
|
||
<VCardTitle>Harry Potter</VCardTitle>
|
||
<VCardText>
|
||
<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>
|
||
<!--
|
||
<VCardText class="text-subtitle-1">
|
||
<span>Bestellen:</span> <span class="font-weight-medium">Amazon</span>
|
||
</VCardText>
|
||
-->
|
||
|
||
<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"
|
||
/>
|
||
</VCardActions>
|
||
</div>
|
||
</div>
|
||
</VCard>
|
||
</VCol>
|
||
|
||
|
||
<!-- ENDE: Genre -->
|
||
</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 { useTheme } from "vuetify"
|
||
|
||
const message = ref('')
|
||
const loading = ref(false)
|
||
|
||
const clickMe = () => {
|
||
loading.value = true
|
||
message.value = 'Warte darauf...'
|
||
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
message.value = ''
|
||
}, 2000)
|
||
}
|
||
|
||
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 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 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 isRow1Active = ref(false)
|
||
const isRow2Active = ref(false)
|
||
const isRow3Active = ref(false)
|
||
const isRow4Active = ref(false)
|
||
const isRow5Active = ref(false)
|
||
|
||
// const genre1 = ref(true)
|
||
// const genre2 = ref(true)
|
||
// const genre3 = ref(true)
|
||
|
||
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)*/
|
||
}
|
||
|
||
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()
|
||
}
|
||
|
||
// lifecycle hooks
|
||
/*onMounted(() => {
|
||
// rowFevercurveConnectors()
|
||
})*/
|
||
|
||
watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
||
if (isResetButtonPressed.value){
|
||
rowFevercurveConnectors()
|
||
}
|
||
})
|
||
|
||
/*computed() {
|
||
genreBackgroundColor() {
|
||
return (genreId) => {
|
||
return IsGenreActive(genreId) ? vuetifyTheme.current.value.colors.primary : '#acadac'
|
||
}
|
||
}
|
||
}*/
|
||
|
||
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;
|
||
}
|
||
</style>
|