{% extends "layout.html" %}
{% set active_page = "live" %}
{% set help_page = ["live-measurements", _('Live Leasurements')] %}

{% block title %} - {{_('Live')}}{% endblock %}

{% block head %}
  <script>
    function updateMeasurements(sensor_id, sensor_measurement, period, convert_c) {
      var url = '/last/' + sensor_measurement + '/' + sensor_id + '/' + period.toString();
      $.ajax(url, {
        success: function(data, responseText, jqXHR) {
          if (jqXHR.status === 204) {
            document.getElementById(sensor_id + "-" + sensor_measurement + "-time").innerHTML = "No Data Last " + period.toString() + "m";
            document.getElementById(sensor_id + "-" + sensor_measurement + "-value").innerHTML = "0";
          }
          else {
            var time = data[0];
            var measurement = data[1];
            var date = new Date(parseFloat(time));
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = "0" + date.getMinutes();
            var seconds = "0" + date.getSeconds();
            var formattedTime = year + "/" + month + "/" + day + " " + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
            document.getElementById(sensor_id + "-" + sensor_measurement + "-time").innerHTML = formattedTime;
            document.getElementById(sensor_id + "-" + sensor_measurement + "-value").innerHTML = measurement;
            if (convert_c) {
              document.getElementById(sensor_id + "-" + sensor_measurement + "-value-F").innerHTML = (measurement * 9 / 5 + 32).toFixed(2).toString();
            }
          }
        },
        cache: false
      });
    }

    function liveTextData(sensor_id, sensor_measurement, period, convert_c) {
      // Update when page first loads
      updateMeasurements(sensor_id, sensor_measurement, period, convert_c);
      setInterval(function () {
        // Update after every 30 seconds
        updateMeasurements(sensor_id, sensor_measurement, period, convert_c);
      }, 30000);
    }

    $(function() {
      {%- set temperatures = ['dewpoint',
                              'temperature',
                              'temperature_die',
                              'temperature_object'] -%}
      {%- for each_sensor in sensor if each_sensor.is_activated -%}
        {%- set measurement_list = each_sensor.measurements.split(',') -%}
        {%- for each_measurement in measurement_list %}
          {%- set c_to_f = 'true' if each_measurement in temperatures else 'false' %}
          liveTextData('{{each_sensor.unique_id}}', '{{each_measurement}}', 30, {{c_to_f}});
          {%- if each_measurement == 'voltage' %}
            liveTextData('{{each_sensor.unique_id}}', '{{each_sensor.adc_measure}}', 30, {{c_to_f}});
          {%- endif -%}
        {%- endfor -%}
      {%- endfor -%}
    });
  </script>
{% endblock %}

{%- block body %}
  <!-- Route: /live -->
  <div class="container">
    {% include 'flash_messages.html' %}

    {%- if sensorDisplayOrderSorted|length == 0 -%}
    <div>
      No Sensors Activated. <a href="/input">Click here</a> to go to the sensor page. Read the <a href="/help">Manual</a> to become more familiar with the system and configuration options.
    </div>
    {%- endif -%}

    {%- if sensorDisplayOrderSorted -%}
    {%- for sensor_order in sensorDisplayOrderSorted -%}
      {%- set collapse_container_number = loop.index -%}

      {%- for each_sensor in sensor if each_sensor.id == sensor_order -%}

    <div style="padding: 0.5em; margin-bottom: 0.7em; border: 2px solid #ddd; border-radius: 5px;">

      <div class="row">
        <div class="col-xs-12 col-sm-6 text-left">
          {%- set sensor_has_pid = [] -%}
          {%- if pidDisplayOrder -%}
            {%- for pid_order in pidDisplayOrder -%}
              {%- for each_pid in pid if each_pid.id == pid_order and each_pid.is_activated and each_pid.sensor_id == each_sensor.id -%}
                {%- do sensor_has_pid.append(1) -%}
              {%- endfor -%}
            {%- endfor -%}
          {%- endif -%}
          {%- if sensor_has_pid -%}
            <a style="padding-right: 0.5em" data-toggle="collapse" href="#collapseContainer{{collapse_container_number}}" aria-expanded="false" aria-controls="collapseContainer{{collapse_container_number}}"><span class='collapse-button{{collapse_container_number}} fa fa-2x fa-plus-square'></span></a>
          {%- endif -%}
          {{each_sensor.name}} ({{each_sensor.id}})
          {%- if each_sensor.device != 'EDGE' -%}
            <div>
               {{_('%(type)s Sensor, %(sec)s second interval', type=each_sensor.device, sec=each_sensor.period)}}
            </div>
          {%- endif -%}
        </div>

        <div class="col-xs-12 col-sm-6 text-right">
          {{_('Measurement')}} | {{_('Timestamp')}}
          <div>
            {% for each_measure in each_sensor.measurements.split(',') %}
              {% if measurement_units[each_measure]['meas'] == 'temperature' %}
                <b><span id="{{each_sensor.unique_id}}-{{each_measure}}-value">0.0</span> {{measurement_units[each_measure]['unit']}} (<span id="{{each_sensor.unique_id}}-{{each_measure}}-value-F">0.0</span> &deg;F)
                  {%- if each_measure == 'dewpoint' %} DP
                  {% elif each_measure == 'temperature_object' %} Obj
                  {% elif each_measure == 'temperature_die' %} Die
                  {%- endif -%}</b> | <span id="{{each_sensor.unique_id}}-{{each_measure}}-time">&lt;{{_('Please wait')}}&gt;</span><br>
              {% else %}
                <b><span id="{{each_sensor.unique_id}}-{{each_measure}}-value">0.0</span> {{measurement_units[each_measure]['unit']}}</b> | <span id="{{each_sensor.unique_id}}-{{each_measure}}-time">&lt;{{_('Please wait')}}&gt;</span><br>
              {% endif %}
            {% endfor %}
            {%- if each_sensor.device in ['ADS1x15', 'MCP342x'] %}
              <b><span id="{{each_sensor.unique_id}}-{{each_sensor.adc_measure}}-value">0.0</span> {{each_sensor.adc_measure_units}} {{each_sensor.adc_measure}}</b> | <span id="{{each_sensor.unique_id}}-{{each_sensor.adc_measure}}-time">&lt;{{_('Please wait')}}&gt;</span>
            {% endif %}
          </div>
        </div>
      </div>

        {%- if pidDisplayOrder -%}
        {%- for pid_order in pidDisplayOrder -%}
          {%- for each_pid in pid if each_pid.id == pid_order and each_pid.is_activated and each_pid.sensor_id == each_sensor.id -%}

      <div class="collapse" id="collapseContainer{{collapse_container_number}}" style="padding: 0.5em 0;">

        <div class="row" style="padding-top: 0.5em">
          <div class="col-xs-12 col-sm-6">
            {{each_pid.name}} ({{each_pid.id}})
            <div>
              Every {{each_pid.period}} seconds, apply PID to {% if each_pid.direction == 'both' -%}raise or lower{%- else -%}{{each_pid.direction}}{%- endif %} {{each_pid.measurement}} to {{each_pid.setpoint}}
            </div>
          </div>
          <div class="col-xs-12 col-sm-6">
            {{_('Gain')}}
            <div>
              K<sub>P</sub>: {{each_pid.p}}, K<sub>I</sub>: {{each_pid.i}}, K<sub>D</sub>: {{each_pid.d}}
            </div>
          </div>
        </div>

            {%- for rel in relay if rel.id == each_pid.raise_relay_id -%}

        <div class="row" style="padding-top: 0.5em">
          <div class="col-xs-12 col-sm-3 col-md-2">
            {{_('Output (Raise)')}}
            <div>
              {{rel.name}} ({{rel.id}})
            </div>
          </div>
          <div class="col-xs-4 col-sm-3 col-md-2">
              {% if each_pid.pid_type != 'pwm' -%}
                {{_('On Duration (sec.)')}}
              {% else -%}
                {{_('Duty Cycle (%%)')}}
              {% endif %}
            <div>
              {{_('Min')}}: {{each_pid.raise_min_duration}}, {{_('Max')}}: {{each_pid.raise_max_duration}}
             </div>
          </div>
          {% if each_pid.pid_type != 'pwm' -%}
          <div class="col-xs-4 col-sm-3 col-md-2">
            {{_('Off Duration (sec.)')}}
            <div>
              {{_('Min')}}: {{each_pid.raise_min_off_duration}}
            </div>
          </div>
          {% endif %}
          <div class="col-xs-4 col-sm-3 col-md-2">
            {{_('Current Draw')}}
            <div>
              {{rel.amps}} {{_('amps')}}
            </div>
          </div>
        </div>

            {%- endfor -%}

            {%- for rel in relay if rel.id == each_pid.lower_relay_id -%}

        <div class="row" style="padding-top: 0.5em">
          <div class="col-xs-12 col-sm-3 col-md-2">
            {{_('Output (Lower)')}}
            <div>
              {{rel.name}} ({{rel.id}})
            </div>
          </div>
          <div class="col-xs-4 col-sm-3 col-md-2">
            {% if each_pid.pid_type != 'pwm' -%}
              {{_('On Duration (sec.)')}}
            {% else -%}
              {{_('Duty Cycle (%%)')}}
            {% endif %}
            <div>
              {{_('Min')}}: {{each_pid.lower_min_duration}}, {{_('Max')}}: {{each_pid.lower_max_duration}}
            </div>
          </div>
          {% if each_pid.pid_type != 'pwm' -%}
          <div class="col-xs-4 col-sm-3 col-md-2">
            {{_('Off Duration (sec.)')}}
            <div>
              {{_('Min')}}: {{each_pid.lower_min_off_duration}}
            </div>
          </div>
          {% endif %}
          <div class="col-xs-4 col-sm-3 col-md-2">
            {{_('Current Draw')}}
            <div>
              {{rel.amps}} {{_('amps')}}
            </div>
          </div>
        </div>

            {%- endfor -%}

            {%- for each_method in method if each_method.id == each_pid.method_id -%}

        <div class="row">
          <div class="col-xs-12">
            {{_('Method Enabled')}}: <a href="/method-build/{{each_method.id}}">{{each_method.name}} ({{each_method.id}})</a>
          </div>
        </div>

            {%- endfor -%}

      </div>

          {%- endfor -%}
        {%- endfor -%}
        {%- endif -%}

    </div>

      {%- endfor -%}
    {%- endfor -%}
    {%- endif -%}

  </div>

  <script>
    $('.collapse').on('show.bs.collapse', function(){
      $(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
    }).on('hide.bs.collapse', function(){
      $(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
    });
  </script>

{% endblock -%}