{% extends 'base.html' %}
{% load static%}
{% block extra-header %}
{% endblock %}
{% block content %}
<div class="text-center p-2 text-igp">
  <h1>Realtime Experiments at JRO</h1>
</div>
{% include 'cartas.html' %}
{% endblock content %}
{% block script %}
<script>
  function pad(num) {
    return ("0"+num).slice(-2);
  }
  function hhmmss(secs) {
    var minutes = Math.floor(secs / 60);
    secs = secs%60;
    var hours = Math.floor(minutes/60)
    minutes = minutes%60;
    return pad(hours)+":"+pad(minutes)+":"+pad(secs);
  }
  $("#loader").css("display", "none");
    
    /* This part create a new socket named "socket" to comunicate
       if there is new data we could be able to change some attributes of a class*/
    var socket = new WebSocket('ws://' + window.location.host +'/main/9999/none/');
    socket.onopen = function open() {
      console.log('Main WebSockets connection created.'); 
    };
    
    socket.onmessage = function message(event) {
      var data = JSON.parse(event.data);
      console.log(data);
      code =  data.code;
      value = data.value;
      time = moment(new Date(data.time*1000)).format('hh:mm:ss a');
    
    /*This conditional ask if value(send by server) is online, and if it is then
      change value to online in div with id="#alert_"+code*/  
      
      $("#date_"+code).text("Last data: "+time);
      $("#card_"+code).removeClass().addClass("card mb-4 box-shadow text-"+value+" border-"+value);
      $("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);
      $("#card_body_"+code).find("a").removeClass().addClass("btn btn-outline-"+value);
    };

    if (socket.readyState == WebSocket.OPEN) {
      socket.onopen();
    };
</script>
{% endblock script %}