{% extends "base.html" %}

{% block head %}
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var output = document.getElementById('logs');
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '{{ url_for('stream') }}', true);
      xhr.onload = (e) => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            log = xhr.responseText.split('\n').reverse().join('\n');
            output.innerHTML = log
            console.log(log)
          } else {
            console.error(xhr.statusText);
          }
        }
      };
      xhr.send();
    });

    myCSS = document.styleSheets[0]
    cssRules = myCSS.cssRules

    function getCSS(sel) {
      for (i of cssRules)
        if (i.selectorText && i.selectorText.includes(sel))
          return i
    }

    function clearlog() {
      var output = document.getElementById('logs');
      output.innerHTML = ""
    }

    function toggle(b, sel) {
      r = getCSS(sel)
      if (!r) {
          myCSS.insertRule(sel + '{ display: block; }')
          r = getCSS(sel)
      }

      if (r.style.display == "none") {
        r.style.display = "block"
        b.style.background = ""
      } else {
        r.style.display = "none"
        b.style.background = "none"
      }
    }

  </script>
{% endblock %}

{% block content %}
    <h1> ESP websocket hub : log </h1>
    <p>
        <div class="toggle"><button onclick="clearlog()">Clear</button></div>
        <div class="toggle"><button onclick="toggle(this, '.ts')">Timestamps</button></div>
        <div class="toggle"><button onclick="toggle(this, '.logitem.DEBUG')">DEBUG</button></div>
        <div class="toggle"><button onclick="toggle(this, '.logitem.INFO')">INFO</button></div>
        <div class="toggle"><button onclick="toggle(this, '.logitem.WARNING')">WARNING</button></div>
        <div class="toggle"><button onclick="toggle(this, '.logitem.ERROR')">ERROR</button></div>
        <div class="toggle"><button onclick="toggle(this, '.logitem.CRITICAL')">CRITICAL</button></div>
    </p>

    <div class="logs" id=logs></div>

    <script>
        sio_startup = {enter: "log"}
    </script>

{% endblock %}