



<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Highcharts Sensorwerte</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <style>
    body { font-family: sans-serif; margin: 10px; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
    #chart { width: 100%; height: 60vh; }
    @media (max-width: 600px) { .controls { flex-direction: column; } }
	<link rel='stylesheet' type='text/css' href='styles.css' />
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  </style>
  
  <link rel='stylesheet' type='text/css' href='styles.css' />
  
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.php'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Charts</span></a>
      <ul>
         <li><a href='highchart_sht.html'><span>Temp/Hum/Druck</span></a></li>
         <li><a href='highchart_sht2.html'><span>Regen/UV/Lux</span></a></li>
         <li><a href='highchart_wind.html'><span>Wind</span></a></li>
         <li><a href='/windrose/windrose.html'><span>Windrose</span></a></li>
        <li class='last'><a href='highchart_strom.html'><span>Strom</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Zusatzdaten</span></a>
      <ul>
         <li><a href='/moon2/moon.html'><span>Mond</span></a></li>
          <li class='last'><a href='uvforecast.php'><span>UV-Index</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Statistik</span></a>
      <ul>
         <li><a href='data_temp_druck.html'><span>Statistik Temperaturen und Luftdruck</span></a></li>
         <li><a href='data_temp_hz.html'><span>Statistik Heizung</span></a></li>
         <li><a href='data_strom.html'><span>Statistik Strom</span></a></li>
         <li class='last'><a href='data_rest.html'><span>Statistik Wind, UV, Lux, Regen</span></a></li>
      </ul>
   </li>
</ul>
</div>

<h2>📊 Sensorwerte Temp/Hum/Druck</h2>
<div class="controls">
  <label for="von_datum">Von Datum:</label>
  <input type="date" id="von_datum">
  <label for="von_zeit">Von Zeit:</label>
  <input type="time" id="von_zeit" value="00:00">

  <label for="bis_datum">Bis Datum:</label>
  <input type="date" id="bis_datum">
  <label for="bis_zeit">Bis Zeit:</label>
  <input type="time" id="bis_zeit" value="23:59">

  <label for="wert">Werte:</label>
  <select id="wert" multiple size="6">
    <option value="Temp_Aussen">🌡️ Temp Außen</option>
    <option value="Hum_Aussen">💧 Hum Außen</option>
    <option value="Temp_Innen">🌡️ Temp Innen</option>
    <option value="Hum_Innen">💧 Hum Innen</option>
    <option value="Luftdruck">🌬️ Luftdruck</option>
    <option value="Humidex">🥵 Humidex</option>
    <option value="Dewpoint">💧 Taupunkt</option>
    <option value="Ruecklauf">↩️ Rücklauf</option>
    <option value="Puffer_Oben">🔝 Puffer Oben</option>
    <option value="Puffer_Mitte">🔸 Puffer Mitte</option>
    <option value="Kessel">🔥 Kessel</option>
    <option value="Vorlauf">➡️ Vorlauf</option>
    <option value="Schlafzimmer">🛏️ Schlafzimmer</option>
  </select>
  <button onclick="ladeDaten()">🔍 Anzeigen</button>
  <label><input type="checkbox" id="live"> 🔁 Live</label>
</div>
<div id="chart"></div>
<script>
let chart;

function ladeDaten() {
  const vonDatum = document.getElementById("von_datum").value;
  const vonZeit = document.getElementById("von_zeit").value;
  const bisDatum = document.getElementById("bis_datum").value;
  const bisZeit = document.getElementById("bis_zeit").value;

  if (!vonDatum || !bisDatum) return;

  // Combine date and time in Berlin timezone
  const vonDateTimeBerlin = new Date(`${vonDatum}T${vonZeit}:00`);
  const bisDateTimeBerlin = new Date(`${bisDatum}T${bisZeit}:00`);

  // Convert to UTC+0 strings for the backend
  const vonUTC = vonDateTimeBerlin.toISOString().slice(0, 19).replace('T', ' '); // YYYY-MM-DD HH:MM:SS format
  const bisUTC = bisDateTimeBerlin.toISOString().slice(0, 19).replace('T', ' '); // YYYY-MM-DD HH:MM:SS format

  const selected = Array.from(document.getElementById("wert").selectedOptions).map(opt => opt.value);
  if (selected.length === 0) return;

  fetch(`daten_highchart_sht.php?von=${vonUTC}&bis=${bisUTC}&werte=${selected.join(",")}`)
    .then(res => res.json())
    .then(json => {
      const einheiten = json.units;
      const daten = json.data;
      // Highcharts expects timestamps in UTC milliseconds
      const zeitstempel = json.labels.map(d => {
          // Assuming the backend returns UTC strings, create Date objects from them
          return new Date(d + 'Z').getTime(); // Append 'Z' to treat as UTC
      });

      const yAchsenZuordnung = {
        "Temp_Aussen": "temp", "Temp_Innen": "temp", "Humidex": "temp",
        "Dewpoint": "temp", "Ruecklauf": "temp", "Puffer_Oben": "temp",
        "Puffer_Mitte": "temp", "Kessel": "temp", "Vorlauf": "temp",
        "Schlafzimmer": "temp", "Hum_Aussen": "hum", "Hum_Innen": "hum",
        "Luftdruck": "druck"
      };

      const serien = Object.keys(daten).map(key => ({
        name: `${key} (${einheiten[key]})`,
        data: daten[key].map((y, i) => [zeitstempel[i], parseFloat(y)]),
        tooltip: { valueSuffix: ` ${einheiten[key]}` },
        yAxis: yAchsenZuordnung[key] || 'temp'
      }));

      if (chart) chart.destroy();

      Highcharts.setOptions({
          time: {
              // Set timezone to Europe/Berlin for display on the chart's xAxis
              timezone: 'Europe/Berlin'
          }
      });

      chart = Highcharts.chart('chart', {
        chart: { type: 'spline' },
        title: { text: null },
        xAxis: { type: 'datetime', title: { text: 'Zeit' } },
        yAxis: [{
          id: 'temp',
          title: { text: 'Temperatur (°C)' },
          min: -20, max: 70,
          opposite: false
        }, {
          id: 'hum',
          title: { text: 'Feuchtigkeit (%)' },
          min: 0, max: 100,
          opposite: true
        }, {
          id: 'druck',
          title: { text: 'Luftdruck (hPa)' },
          min: 950, max: 1050,
          opposite: true
        }],
        tooltip: {
          shared: true,
          crosshairs: true,
          xDateFormat: '%Y-%m-%d %H:%M'
        },
        series: serien,
        credits: { enabled: false }
      });
    });
}

setInterval(() => {
  if (document.getElementById("live").checked) ladeDaten();
}, 10000);

window.onload = () => {
  const heute = new Date();
  const heuteISO = heute.toISOString().split("T")[0];
  document.getElementById("von_datum").value = heuteISO;
  document.getElementById("bis_datum").value = heuteISO;

  // Set default times to 00:00 and 23:59 for Berlin timezone
  document.getElementById("von_zeit").value = "00:00";
  document.getElementById("bis_zeit").value = "23:59";
};
</script>
</body>
</html>