<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>
  </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>-->
