{% extends "layout.html" %}
{% set active_page = "relay" %}
{% set help_page = ["relays", _('Relays')] %}

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

{% block head %}
<script>
  function gpioState() {
    var url = '/gpiostate';
    $.getJSON(url,
      function(data, responseText, jqXHR) {
        if (jqXHR.status != 204) {
          $.each(data,
            function(relay_id, state) {
              if (state) {
                document.getElementById(relay_id + "-relay-state").className = "row active-background";
                document.getElementById(relay_id + "-input-relay-state").value = 'ID ' + relay_id + ', {{ _('Active')}}';
              }
              else {
                document.getElementById(relay_id + "-relay-state").className = "row inactive-background";
                document.getElementById(relay_id + "-input-relay-state").value = 'ID ' + relay_id + ', {{ _('Inactive')}}';
              }
            }
          );
        }
      }
    );
  }

  function liveGPIOData() {
    // Update when page first loads
    gpioState();
    setInterval(function () {
      // Update after every 30 seconds
      gpioState();
    }, 5000);
  }

  {% set relay_has_gpio = [] %}
  {% for each_relay in relay if -1 < each_relay.pin < 40 -%}
    {% do relay_has_gpio.append(1) %}
  {%- endfor -%}
  {% if relay_has_gpio -%}
  $(function() {
    liveGPIOData();
  });
  {% endif %}
</script>
{% endblock %}

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

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

    <p>{{_('Relays enable a low power signal (3.3 DC volts from a Raspberry Pi) to switch a greater voltage/current (such as household appliances that require 120/240 AC volts). Add and configure relays to manipulate them and allow them be used throughout Mycodo.')}}</p>

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

    <div class="row small-gutters" style="padding-left: 1em">
      <form method="post" action="/relay">
        {{form_add_relay.hidden_tag()}}
        <div class="col-xs-2 col-sm-1 small-gutters">
          {{form_add_relay.relay_quantity(class_='form-control', type="number", value=1, **{'title':_('Quantity')})}}
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3 small-gutters">
          <select class="form-control form-tooltip form-dropdown" id="relay_type" name="relay_type" data-placement="top" title="{{_('Relay Type')}}">
            <option value="wired">Wired</option>
            <option value="wireless_433MHz_pi_switch">Wireless (433MHz, pi_switch)</option>
            <option value="command">Execute Commands</option>
          </select>
        </div>
        <div class="col-xs-4 col-sm-3 col-lg-2 small-gutters">
          {{form_add_relay.relay_add(class_='form-control btn btn-default')}}
        </div>
      </form>

      <form method="post" action="/relay">
        {{form_conditional.conditional_type(class_='form-control', value='relay')}}
        <div class="col-xs-2 col-sm-1 col-sm-offset-1 small-gutters">
          {{form_conditional.quantity(class_='form-control', type="number", value=1, **{'title':_('Quantity')})}}
        </div>
        <div class="col-xs-4 col-sm-3 col-lg-2 small-gutters">
          {{form_conditional.add_cond(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_relay in relay if each_relay.id == order -%}

      <div class="container" style="border: 2px solid #ddd; border-radius: 5px;">
        <form method="post" action="/relay">
        {{form_mod_relay.csrf_token}}
        {{form_mod_relay.relay_id(class_='form-control', value=each_relay.id)}}
        {{form_mod_relay.relay_pin(class_='form-control', value=each_relay.pin)}}
        <div class="row pause-background" style="padding: 0.5em; border-bottom: 2px solid #ddd;" id="{{each_relay.id}}-relay-state">
          <div class="col-xs-2 col-sm-1 text-center icon-fh">
            <a data-toggle="collapse" href="#collapseContainer{{each_relay.id}}" aria-expanded="false" aria-controls="collapseContainer{{each_relay.id}}">
              <span class="collapse-button{{each_relay.id}} fa fa-3x fa-plus-square"></span>
            </a>
          </div>
          <div class="col-xs-5 col-sm-3 col-md-3 small-gutters">
            {{form_mod_relay.name(class_='form-control', value=each_relay.name, **{'title':_('Name')})}}
          </div>
          <div class="col-xs-5 col-sm-2 col-md-2 small-gutters">
            <input class="form-control btn btn-default" disabled="" id="{{each_relay.id}}-input-relay-state" title="UUID: {{each_relay.unique_id}}" value="ID {{each_relay.id}}, {{ _('Unconfigured')}}" type="text">
          </div>
          <div class="col-xs-5 col-xs-offset-2 col-sm-3 col-sm-offset-0 col-md-3 small-gutters">
            <div class="col-xs-6 col-sm-6 col-md-6 small-gutters">
              {{form_mod_relay.turn_on(class_='form-control btn btn-default')}}
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 small-gutters">
              {{form_mod_relay.turn_off(class_='form-control btn btn-default')}}
            </div>
          </div>
          <div class="col-xs-5 col-sm-3 col-md-3 small-gutters">
            <div class="col-xs-6 col-sm-6 col-md-6 small-gutters">
              {{form_mod_relay.order_up(class_='form-control btn btn-default')}}
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 small-gutters">
              {{form_mod_relay.order_down(class_='form-control btn btn-default')}}
            </div>
          </div>
        </div>

        <div class="row small-gutters collapse" id="collapseContainer{{each_relay.id}}" style="border-bottom: 2px solid #ddd; padding: 0.5em">
          <div class="col-xs-6 col-sm-6 col-md-4">
            <input class="form-control" disabled="" value="{{each_relay.relay_type}}" type="text">
          </div>
          <div class="col-xs-3 col-sm-3 col-md-4">
            {{form_mod_relay.save(class_='form-control btn btn-default')}}
          </div>
          <div class="col-xs-3 col-sm-3 col-md-4">
            {{form_mod_relay.delete(class_='form-control btn btn-default', **{'onclick':'return confirm("Are you sure you want to delete this relay?")'})}}
          </div>

        {% for each_relay_template in relay_templates if each_relay_template[:-5] == each_relay.relay_type %}
          {% include 'pages/relay_options/'+each_relay_template %}
        {% endfor %}

          <div class="col-xs-6 col-sm-4 col-md-2">
            {{form_mod_relay.amps.label(class_='control-label')}}
            <div>
              {{form_mod_relay.amps(class_='form-control', value=each_relay.amps, **{'title':_('The number of amps the device connected to the relay draws (at 120/240 VAC)')})}}
             </div>
          </div>

          {{form_mod_relay.csrf_token}}
          {{form_mod_relay.relay_id(class_='form-control', value=each_relay.id)}}
          {{form_mod_relay.relay_pin(class_='form-control', value=each_relay.pin)}}
          <div class="col-xs-12">
            {{form_mod_relay.sec_on.label(class_='control-label')}}
          </div>
          <div class="col-xs-12 small-gutters">
            <div class="col-xs-6 col-sm-4 col-md-2 no-gutters">
              {{form_mod_relay.sec_on(class_='form-control', **{'title':_('Turn this relay on for a specific number of seconds (used to test relay)')})}}
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2 no-gutters">
              {{form_mod_relay.sec_on_submit(class_='form-control btn btn-default')}}
            </div>
          </div>
        </div>
        </form>

      </div>

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

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

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

    {% if conditional %}
      <h4>{{_('Conditionals')}} <a href="/help#conditional-statements"><span style="font-size: 16px" class="glyphicon glyphicon-question-sign"></span></a></h4>
      <p>{{_('Conditionals allow certain actions to be carried out when a certain set of conditions are met.')}} See the <a href="/help#conditional-statements">manual</a> for more information.</p>
    {% endif %}

    {%- for each_cond in conditional -%}

      <div class="container" style="border: 2px solid #ddd; border-radius: 5px;">

        <form method="post" action="/relay">
        {{form_conditional.csrf_token}}
        {{form_conditional.conditional_id(class_='form-control', value=each_cond.id)}}

        <div class="row {% if each_cond.is_activated -%}active-background
                          {% else -%}inactive-background
                          {% endif -%}" style="padding-top: 1em; padding-bottom: 0.5em;">
          <div class="col-xs-12 col-sm-3 col-md-3">
            {{form_conditional.name(class_='form-control', value=each_cond.name, **{'title':_('Name')})}}
          </div>
          <div class="col-xs-4 col-sm-3 col-md-3">
            {%- if each_cond.is_activated %}
              {{form_conditional.deactivate_cond(class_='form-control btn btn-default')}}
            {%- else %}
              {{form_conditional.activate_cond(class_='form-control btn btn-default')}}
            {%- endif -%}
          </div>
          <div class="col-xs-4 col-sm-3 col-md-3">
            {{form_conditional.save_cond(class_='form-control btn btn-default')}}
          </div>
          <div class="col-xs-4 col-sm-3 col-md-3">
            {{form_conditional.delete_cond(class_='form-control btn btn-default',**{'onclick':'return confirm("Are you sure you want to delete this Relay Conditional?")'})}}
          </div>
        </div>
      
        <div class="row small-gutters {% if each_cond.is_activated -%}active-background
                          {% else -%}inactive-background
                          {% endif -%}" style="border-bottom: 2px solid #ddd; padding-bottom: 1em">
          <div class="col-xs-1 col-sm-1 col-md-1 text-center">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              <label class='control-label'>If</label>
            </div>
          </div>
          <div class="col-xs-3 col-sm-4 col-md-3">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              <select class="form-control form-tooltip form-dropdown" id="if_relay_id" name="if_relay_id" data-placement="top" title="{{_('Trigger this conditional to act when this relay turns on or off')}}">
                <option value=""></option>
                {%- for each_relay in relay -%}
                  <option value="{{each_relay.id}}"{% if each_cond.if_relay_id == each_relay.id %} selected{% endif %}>{{each_relay.id}} ({{each_relay.name}})</option>
                {%- endfor -%}
              </select>
            </div>
          </div>
          <div class="col-xs-2 col-sm-1 col-md-1 text-center">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              <label class='control-label'>Turns</label>
            </div>
          </div>
          <div class="col-xs-2 col-sm-3 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            <select class="form-control form-tooltip form-dropdown" id="if_relay_state" name="if_relay_state" data-placement="top" title="{{_('What action will trigger this conditional statement, on or off?')}}">
              <option value=""></option>
              <option value="on"{% if each_cond.if_relay_state == 'on' %} selected{% endif %}>{{_('On')}}</option>
              <option value="off"{% if each_cond.if_relay_state == 'off' %} selected{% endif %}>{{_('Off')}}</option>
            </select>
          </div>
          <div class="col-xs-1 col-sm-1 col-md-1 text-center">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              <label class='control-label'>For</label>
            </div>
          </div>
          <div class="col-xs-2 col-sm-2 col-md-2">
            <label class='control-label'>Seconds</label>
            <div>
             {{form_conditional.if_relay_duration(class_='form-control', value=each_cond.if_relay_duration, **{'title':_('(Optional) Set this to a specific duration of time if the conditional should trigger when the relay On duration equals this amount'), 'size':'3'})}}
            </div>
          </div>
        </div>

        </form>
        
        {% for each_cond_action in conditional_actions if each_cond_action.conditional_id == each_cond.id %}

        <form method="post" action="/relay">
        {{form_conditional_actions.csrf_token}}
        {{form_conditional_actions.conditional_id(class_='form-control', value=each_cond.id)}}
        {{form_conditional_actions.conditional_action_id(class_='form-control', value=each_cond_action.id)}}

        <div class="row small-gutters" style="padding-top: 0.5em">
          <div class="col-sm-1 col-md-1">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              Then ({{loop.index}})
            </div>
          </div>
          <div class="col-sm-2 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            <select class="form-control form-tooltip form-dropdown" id="do_action" name="do_action" data-placement="top" title="{{_('The action to perform when the conditional is True')}}">
              {% for each_action, each_action_string in conditional_actions_list.items() %}
                <option value="{{each_action}}"{% if each_cond_action.do_action == each_action %} selected{% endif %}>{{_(each_action_string)}}</option>
              {% endfor %}
            </select>
          </div>

        {% if each_cond_action.do_action == 'relay' %}

          <div class="col-sm-2 col-md-3">
            {{form_conditional_actions.do_relay_id.label(class_='control-label')}}
            <select class="form-control form-tooltip form-dropdown" id="do_relay_id" name="do_relay_id" data-placement="top" title="{{_('What relay to manipulate')}}">
              <option value=""></option>
              {%- for each_relay in relay -%}
                <option value="{{each_relay.id}}"{% if each_cond_action.do_relay_id == each_relay.id %} selected{% endif %}>{{each_relay.id}} ({{each_relay.name}})</option>
              {%- endfor -%}
            </select>
          </div>
          <div class="col-sm-2 col-md-2">
            <label class='control-label'>Turn</label>
            <select class="form-control form-tooltip form-dropdown" id="do_relay_state" name="do_relay_state" data-placement="top" title="{{_('Turn the relay on or off')}}">
              <option value=""></option>
              <option value="on"{% if each_cond_action.do_relay_state == 'on' %} selected{% endif %}>{{_('On')}}</option>
              <option value="off"{% if each_cond_action.do_relay_state == 'off' %} selected{% endif %}>{{_('Off')}}</option>
            </select>
          </div>
          <div class="col-sm-1 col-md-2">
            <label class='control-label'>Sec.</label>
            {{form_conditional_actions.do_relay_duration(class_='form-control', value=each_cond_action.do_relay_duration, **{'title':_('How long to turn the relay on (optional)'), 'size':'3'})}}
          </div>

        {% elif each_cond_action.do_action == 'email' %}

          <div class="col-sm-5 col-md-7">
            <label class='control-label'>Email Address</label>
            <select class="form-control form-tooltip form-dropdown" id="do_action_string" name="do_action_string" data-placement="top" title="{{_('Email address to notify')}}">
              <option value=""></option>
              {%- for each_user in user -%}
                <option value="{{each_user.email}}"{% if each_cond_action.do_action_string == each_user.email %} selected{% endif %}>{{each_user.email}}</option>
              {%- endfor -%}
            </select>
          </div>

        {% elif each_cond_action.do_action == 'flash_lcd' %}

          <div class="col-sm-5 col-md-7">
            <label class='control-label'>LCD</label>
            <select class="form-control form-tooltip form-dropdown" id="do_lcd_id" name="do_lcd_id" data-placement="top" title="{{_('LCD to flash')}}">
              <option value=""></option>
              {%- for each_lcd in lcd -%}
                <option value="{{each_lcd.id}}"{% if each_cond_action.do_lcd_id == each_lcd.id %} selected{% endif %}>{{each_lcd.id}} ({{each_lcd.name}})</option>
              {%- endfor -%}
            </select>
          </div>

        {% elif each_cond_action.do_action == 'photo' %}

          <div class="col-sm-5 col-md-7">
            <label class='control-label'>Camera</label>
            <select class="form-control form-tooltip form-dropdown" id="do_camera_id" name="do_camera_id" data-placement="top" title="{{_('Camera to capture with')}}">
              <option value=""></option>
              {%- for each_camera in camera -%}
                <option value="{{each_camera.id}}"{% if each_cond_action.do_camera_id == each_camera.id %} selected{% endif %}>{{each_camera.id}} ({{each_camera.name}})</option>
              {%- endfor -%}
            </select>
          </div>

        {% elif each_cond_action.do_action == 'video' %}

          <div class="col-sm-3 col-md-5">
            <label class='control-label'>Camera</label>
            <select class="form-control form-tooltip form-dropdown" id="do_camera_id" name="do_camera_id" data-placement="top" title="{{_('Camera to capture with')}}">
              <option value=""></option>
              {%- for each_camera in camera -%}
                <option value="{{each_camera.id}}"{% if each_cond_action.do_camera_id == each_camera.id %} selected{% endif %}>{{each_camera.id}} ({{each_camera.name}})</option>
              {%- endfor -%}
            </select>
          </div>
          <div class="col-sm-2 col-md-2">
            {{form_conditional_actions.do_camera_duration.label(class_='control-label')}}
            {{form_conditional_actions.do_camera_duration(class_='form-control', value=each_cond_action.do_camera_duration, **{'title':_('Duration to record video (sec)')})}}
          </div>

        {% elif each_cond_action.do_action == 'command' %}

          <div class="col-sm-5 col-md-7">
            <label class='control-label'>Command</label>
            {{form_conditional_actions.do_action_string(class_='form-control', value=each_cond_action.do_action_string, **{'title':_('Command to execute (as user "mycodo")')})}}
          </div>

        {% endif %}

          <div class="col-sm-2 col-md-1">
            <label class='control-label' style="padding-top: 1em"></label>
            {{form_conditional_actions.save_action(class_='form-control btn btn-default')}}
          </div>
          <div class="col-sm-2 col-md-1">
            <label class='control-label' style="padding-top: 1em"></label>
            {{form_conditional_actions.delete_action(class_='form-control btn btn-default')}}
          </div>
        </div>

        </form>
          
        {% endfor %}

        <form method="post" action="/relay">
        {{form_conditional_actions.csrf_token}}
        {{form_conditional_actions.conditional_id(class_='form-control', value=each_cond.id)}}
      
        <div class="row small-gutters" style="padding-bottom: 1em">
          <div class="col-xs-2 col-sm-2 col-md-1 text-center">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              Action
            </div>
          </div>
          <div class="col-xs-6 col-sm-4 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            <select class="form-control form-tooltip form-dropdown" id="do_action" name="do_action" data-placement="top" title="{{_('The action to perform when the conditional is True')}}">
              {% for each_action, each_action_string in conditional_actions_list.items() %}
                <option value="{{each_action}}">{{_(each_action_string)}}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            {{form_conditional_actions.add_action(class_='form-control btn btn-default')}}
          </div>
        </div>

        </form>
      </div>

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

    {%- endfor -%}

  </div>

  <div style="clear: both; padding: 0.5em 0;"></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 %}