{% extends "layout.html" %}
{% set active_page = "pid" %}
{% set help_page = ["pids", _('PID Controllers')] %}

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

{% block head %}
  <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-clockpicker.min.css">
{% endblock %}

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

    <h4>{{_('PID Controllers')}} <a href="/help#pids" target="_blank"><span style="font-size: 16px" class="glyphicon glyphicon-question-sign"></span></a></h4>

    <p>{{_('PID controllers couple a sensor with a device connected to a relay to regulate an environmental condition. For example, this could be a heater and a temperature sensor, allowing the regulation of temperature.')}}</p>

    <div style="clear: both; padding: 0.5em 0;"></div>

    <div class="row small-gutters" style="padding-left: 1em">
      <form method="post" action="/pid">
      <input type="hidden" name="form-name" value="addPID">
      {{form_add_pid.hidden_tag()}}
      <div class="col-xs-6 col-sm-2 col-lg-2 no-gutters">
        {{form_add_pid.numberPIDs(class_='form-control', value=1, type="number")}}
      </div>
      <div class="col-xs-6 col-sm-3 col-lg-2 no-gutters">
        {{form_add_pid.pidAddSubmit(class_='form-control btn btn-default')}}
      </div>
      </form>
    </div>

    <div style="clear: both; padding: 1em 0;"></div>

    {%- if displayOrder -%}
    {%- for order in displayOrder -%}
      {%- for each_pid in pids if each_pid.id == order -%}

        <div class="container" style="margin-bottom: 0.5em; border: 2px solid #ddd; border-radius: 5px;">
          <form method="post" action="/pid">
          <input type="hidden" name="form-name" value="modPID">
          {{form_mod_pid.csrf_token}}
          {{form_mod_pid.pid_id(value=each_pid.id)}}
          <div class="{% if each_pid.is_activated and not each_pid.is_paused -%}active-background
                      {% elif each_pid.is_activated and each_pid.is_paused -%}pause-background
                      {% elif each_pid.is_held -%}hold-background
                      {% else -%}inactive-background
                      {% endif %} row small-gutters" style="border-bottom: 2px solid #ddd; padding: 0.5em;">
            <div class="col-xs-12 small-gutters">
              <div class="col-xs-6 col-md-6 no-gutters">
                {{form_mod_pid.name(class_='form-control', value=each_pid.name, **{'title':_('Name for this PID controller.')})}}
              </div>
              <div class="col-xs-6 no-gutters">
                <input class="form-control btn btn-default" title="UUID: {{each_pid.unique_id}}" disabled="" value="ID: {{each_pid.id}}, State:
                {%- if each_pid.is_activated and not each_pid.is_paused -%} {{_('Active')}}
                {%- elif each_pid.is_activated and each_pid.is_paused -%} {{_('Paused')}}
                {%- elif each_pid.is_held -%} {{_('On Hold')}}
                {%- else -%} {{_('Inactive')}}
                {%-endif -%}
                " type="text">
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 small-gutters">
              {%- if each_pid.is_activated %}
                <div class="col-xs-12 col-sm-12 col-md-6 no-gutters">
                  {{form_mod_pid.deactivate(class_='form-control btn btn-default')}}
                </div>
                {%- if each_pid.is_paused or each_pid.is_held %}
                  <div class="col-xs-6 col-sm-6 col-md-3 no-gutters">
                    {{form_mod_pid.resume(class_='form-control btn btn-default')}}
                  </div>
                {%- else %}
                  <div class="col-xs-6 col-sm-6 col-md-3 no-gutters">
                    {{form_mod_pid.pause(class_='form-control btn btn-default')}}
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-3 no-gutters">
                    {{form_mod_pid.hold(class_='form-control btn btn-default')}}
                  </div>
                {%- endif -%}
              {%- else %}
                <div class="col-xs-12 no-gutters">
                  {{form_mod_pid.activate(class_='form-control btn btn-default')}}
                </div>
              {%- endif -%}
            </div>
            <div class="col-xs-6 col-sm-3 small-gutters">
              <div class="col-xs-6 col-sm-12 col-md-6 no-gutters">
                {{form_mod_pid.save(class_='form-control btn btn-default')}}
              </div>
              <div class="col-xs-6 col-sm-12 col-md-6 no-gutters">
                {{form_mod_pid.delete(class_='form-control btn btn-default',**{'onclick':'return confirm("Are you sure you want to delete this PID controller?")'})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-gutters">
              <div class="col-xs-6 col-sm-12 col-md-6 no-gutters">
                {{form_mod_pid.reorder_up(class_='form-control btn btn-default')}}
              </div>
              <div class="col-xs-6 col-sm-12 col-md-6 no-gutters">
                {{form_mod_pid.reorder_down(class_='form-control btn btn-default')}}
              </div>
            </div>
          </div>

          <div class="row small-gutters">
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.sensor_id.label(class_='control-label')}}
              <div>
                <select class="form-control" id="sensor_id" name="sensor_id" title="" data-original-title="Select the sensor to monitor.">
                  <option value="">{{_('Must Select One')}}</option>
                  {%- for each_sensor in sensor -%}
                    <option value="{{each_sensor.id}}"{% if each_pid.sensor_id == each_sensor.id %} selected{% endif %}>{{each_sensor.id}} ({{each_sensor.name}})</option>
                  {%- endfor -%}
                </select>
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.measurement.label(class_='control-label')}}
              <div>
                <select class="form-control" id="measurement" name="measurement" title="" data-original-title="{{_('Select the environmental condition to regulate')}}.">
                  <option value="">{{_('Must Select One')}}</option>
                  <option value="temperature"{% if each_pid.measurement == 'temperature' %} selected{% endif %}>Temperature</option>
                  <option value="temperature_object"{% if each_pid.measurement == 'temperature_object' %} selected{% endif %}>Temperature (Object)</option>
                  <option value="temperature_die"{% if each_pid.measurement == 'temperature_die' %} selected{% endif %}>Temperature (Die)</option>
                  <option value="humidity"{% if each_pid.measurement == 'humidity' %} selected{% endif %}>Humidity</option>
                  <option value="dewpoint"{% if each_pid.measurement == 'dewpoint' %} selected{% endif %}>Dew Point</option>
                  <option value="co2"{% if each_pid.measurement == 'co2' %} selected{% endif %}>CO2</option>
                  <option value="lux"{% if each_pid.measurement == 'lux' %} selected{% endif %}>Luminosity</option>
                  <option value="moisture"{% if each_pid.measurement == 'moisture' %} selected{% endif %}>Moisture</option>
                  <option value="pressure"{% if each_pid.measurement == 'pressure' %} selected{% endif %}>Pressure</option>
                  <option value="altitude"{% if each_pid.measurement == 'altitude' %} selected{% endif %}>Altitude</option>
                  <option value="voltage"{% if each_pid.measurement == 'voltage' %} selected{% endif %}>Voltage (ADC)</option>
                  {% for each_sensor in sensor if each_sensor.adc_measure %}
                    <option value="{{each_sensor.adc_measure}}"{% if each_pid.measurement == each_sensor.adc_measure %} selected{% endif %}>{{each_sensor.adc_measure}} (ADC)</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-xs-4 col-sm-2 col-lg-1">
              {{form_mod_pid.direction.label(class_='control-label')}}
              <div>
                <select class="form-control" id="direction" name="direction" title="" data-original-title="{{_('What direction to regulate the chosen environmental condition?')}}">
                  <option value="raise"{% if each_pid.direction == 'raise' %} selected{% endif %}>Raise</option>
                  <option value="lower"{% if each_pid.direction == 'lower' %} selected{% endif %}>Lower</option>
                  <option value="both"{% if each_pid.direction == 'both' %} selected{% endif %}>Both</option>
                </select>
              </div>
            </div>
            <div class="col-xs-4 col-sm-2 col-lg-1">
              {{form_mod_pid.period.label(class_='control-label')}}
              <div>
                {{form_mod_pid.period(class_='form-control', value=each_pid.period, **{'title':_('The duration between calculating a new PID output to power the raise and lower relays.')})}}
              </div>
            </div>
            <div class="col-xs-4 col-sm-2 col-lg-2">
              {{form_mod_pid.max_measure_age.label(class_='control-label')}}
              <div>
                {{form_mod_pid.max_measure_age(class_='form-control', value=each_pid.max_measure_age, **{'title':_('Maximum allowable sensor measurement age (to allow the PID controller to manipulate relays, the sensor measurement must have occurred in the past x seconds)')})}}
              </div>
            </div>
            <div class="col-sm-3 col-lg-1">
              {{form_mod_pid.setpoint.label(class_='control-label')}}
              <div>
                {{form_mod_pid.setpoint(class_='form-control', value=each_pid.setpoint, **{'title':_('This is the desired state of a perticular environmental condition. For instance, this could be the desired temperature in Celsius.')})}}
              </div>
            </div>
            <div class="col-xs-4 col-sm-3 col-lg-1">
              {{form_mod_pid.k_p.label(class_='control-label')}}
              <div>
                {{form_mod_pid.k_p(class_='form-control', value=each_pid.p, **{'title':_('Proportional gain')})}}
              </div>
            </div>
            <div class="col-xs-4 col-sm-3 col-lg-1">
              {{form_mod_pid.k_i.label(class_='control-label')}}
              <div>
                {{form_mod_pid.k_i(class_='form-control', value=each_pid.i, **{'title':_('Integral gain')})}}
              </div>
            </div>
            <div class="col-xs-4 col-sm-3 col-lg-1">
              {{form_mod_pid.k_d.label(class_='control-label')}}
              <div>
                {{form_mod_pid.k_d(class_='form-control', value=each_pid.d, **{'title':_('Derivative gain')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.integrator_max.label(class_='control-label')}}
              <div>
                {{form_mod_pid.integrator_max(class_='form-control', value=each_pid.integrator_min, **{'title':_('Limit the integrator minimum, for calculating Ki_total: (Ki_total = Ki * integrator; and PID output = Kp_total + Ki_total + Kd_total)')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.integrator_min.label(class_='control-label')}}
              <div>
                {{form_mod_pid.integrator_min(class_='form-control', value=each_pid.integrator_max, **{'title':_('Limit the integrator maximum, for calculating Ki_total: (Ki_total = Ki * integrator; and PID output = Kp_total + Ki_total + Kd_total)')})}}
              </div>
            </div>
          </div>

          <div class="row small-gutters">
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.raise_relay_id.label(class_='control-label')}}
              <div>
                <select class="form-control" id="raise_relay_id" name="raise_relay_id" title="" data-original-title="{{_('The Relay that will raise the selected environmental condition (Measure Type)')}}.">
                  <option value="">{{_('Disabled')}}</option>
                  {%- for each_relay in relay -%}
                    <option value="{{each_relay.id}}"{% if each_pid.raise_relay_id == each_relay.id %} selected{% endif %}>{{each_relay.id}} ({{each_relay.name}})</option>
                  {%- endfor -%}
                </select>
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.raise_min_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.raise_min_duration(class_='form-control', value=each_pid.raise_min_duration, **{'title':_('The minimum duration (in seconds) required for the Raise Relay to activate. If an On duration is below this value, the Raise Relay will not turn on.')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.raise_max_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.raise_max_duration(class_='form-control', value=each_pid.raise_max_duration, **{'title':_('The maximum duration (in seconds) allowed for the Raise Relay to be on for, per period. If an On duration is above this value, the Raise Relay will turn on for this set duration.')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.raise_min_off_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.raise_min_off_duration(class_='form-control', value=each_pid.raise_min_off_duration, **{'title':_('This relay will remain off for at least this duration fo time.')})}}
              </div>
            </div>
          </div>

          <div class="row small-gutters">
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.lower_relay_id.label(class_='control-label')}}
              <div>
                <select class="form-control" id="lower_relay_id" name="lower_relay_id" title="" data-original-title="{{_('The relay that will lower the selected environmental condition (Measure Type)')}}.">
                  <option value="">{{_('Disabled')}}</option>
                  {%- for each_relay in relay -%}
                    <option value="{{each_relay.id}}"{% if each_pid.lower_relay_id == each_relay.id %} selected{% endif %}>{{each_relay.id}} ({{each_relay.name}})</option>
                  {%- endfor -%}
                </select>
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.lower_min_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.lower_min_duration(class_='form-control', value=each_pid.lower_min_duration, **{'title':_('The minimum duration (in seconds) required for the Lower Relay to activate. If an On duration is below this value, the Lower Relay will not turn on.')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.lower_max_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.lower_max_duration(class_='form-control', value=each_pid.lower_max_duration, **{'title':_('The maximum duration (in seconds) allowed for the Lower Relay to be on for, per period. If an ON duration is above this value, the Lower Relay will turn on for this set duration.')})}}
              </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              {{form_mod_pid.lower_min_off_duration.label(class_='control-label')}}
              <div>
                {{form_mod_pid.lower_min_off_duration(class_='form-control', value=each_pid.lower_min_off_duration, **{'title':_('This relay will remain off for at least this duration fo time.')})}}
              </div>
            </div>
          </div>

          <div class="row small-gutters" style="padding-bottom: 0.3em">
            <div class="col-xs-12 col-sm-12">
              {{form_mod_pid.method_id.label(class_='control-label')}}
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              <select class="form-control" id="method_id" name="method_id" title="" data-original-title="{{_('Select the method to use when calculating the setpoint. When enabled, the setpoint(s) of the method override the PID setpoint above.')}}">
                {%- if method == [] -%}
                  <option value="0">{{_('No methods exist. Create one with this button')}} -></option>
                {%- else -%}
                  <option value="0">{{_('Disabled')}}</option>
                {%- endif-%}

                {%- set valid_saved_method = [] -%}
                {%- for each_method in method -%}
                  {%- if each_method.id == each_pid.method_id -%}
                    {%- do valid_saved_method.append(1) -%}
                  {%- endif -%}
                  <option value="{{each_method.id}}"{% if each_pid.method_id == each_method.id %} selected{% endif %}>{{each_method.id}} ({{each_method.name}})</option>
                {%- endfor -%}
                {%- if not valid_saved_method and each_pid.method_id -%}
                  <option value="" selected>{{_('Invalid saved method. Save another method from this list.')}}</option>
                {%- endif -%}
              </select>
            </div>
            <div class="col-xs-6 col-sm-3 col-lg-2">
              <a href="/method" class="form-control btn btn-default" role="button">{{_('Manage Methods')}}</a>
            </div>
          </div>
        </form>

        </div>

      {%- endfor -%}

        <div style="clear: both; padding:1em 0;"></div>
    {%- endfor -%}
    {%- endif -%}

  </div>

  <script type="text/javascript" src="/static/js/bootstrap-clockpicker.min.js"></script>
  <script type="text/javascript">
    $('.clockpicker').clockpicker({
      donetext: 'Done'
    });
  </script>

{% endblock %}