{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
      Connection Monitoring
    </h1>
  </div>
  <form method="get" style="margin-bottom: 1em;">
    <label for="hours">Zeitraum:</label>
    <select id="hours" name="hours" onchange="this.form.submit()">
      <option value="2" {% if selected_hours==2 %}selected{% endif %}>letzte 2 Stunden</option>
      <option value="6" {% if selected_hours==6 %}selected{% endif %}>letzte 6 Stunden</option>
      <option value="24" {% if selected_hours==24 %}selected{% endif %}>letzte 24 Stunden</option>
      <option value="48" {% if selected_hours==48 %}selected{% endif %}>letzte 48 Stunden</option>
    </select>
  </form>
  <canvas id="wsChart" height="100"></canvas>
  {% for endpoint, values in peak_per_endpoint.items() %}
  <p><strong>{{ endpoint }} wallbox&rarr;broker:</strong> Spitzenwert {{ values.wallbox_to_broker }} | Letzter Wert {{ latest_per_endpoint[endpoint].wallbox_to_broker }}</p>
  <p><strong>{{ endpoint }} broker&rarr;backend:</strong> Spitzenwert {{ values.broker_to_backend }} | Letzter Wert {{ latest_per_endpoint[endpoint].broker_to_backend }}</p>
  {% endfor %}
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = {{ labels|tojson }};
const datasets = {{ datasets|tojson }};
const ctx = document.getElementById('wsChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    scales: {
      x: {
        ticks: { maxRotation: 90, minRotation: 45 }
      }
    }
  }
});
</script>
{% endblock %}