{% 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">
      Quality of Service Monitoring {{ source_url }}
    </h1>
  </div>
  <form method="get" style="margin-bottom: 1em;">
    <input type="hidden" name="source_url" value="{{ source_url }}">
    <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="pingChart" height="100"></canvas>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = {{ labels|tojson }};
const values = {{ values|tojson }};
const ctx = document.getElementById('pingChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'RTT (ms)',
      data: values,
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.1,
    }]
  },
  options: {
    scales: {
      x: {
        ticks: { maxRotation: 90, minRotation: 45 }
      }
    }
  }
});
</script>
{% endblock %}