{% extends "layout.html" %}
{% set active_page = "method_list" %}
{% set help_page = ["methods", _('Methods')] %}

{% block title %} - {{_('Method-Builder')}}{% endblock %}

{% block head %}
  <script src="/static/js/highcharts.js"></script>
  {% if current_user.theme in ['cyborg', 'darkly', 'slate', 'superhero'] %}
    <script src="/static/js/dark-unica.js"></script>
  {% endif %}
{% endblock %}

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

    {%- set method_setpoint = [] -%}
    {%- for each_method_line in method_data
          if each_method_line.method_id == method.id and
              each_method_line.setpoint_start != None -%}
      {%- do method_setpoint.append(1) -%}
    {%- endfor -%}

    <a href="/method" class="btn btn-default" role="button">&lt;&lt; {{_('Back to Method Management')}}</a>

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

    <div class="container" style="margin-bottom: 1.5em; padding: 1em; border: 2px solid #ddd; border-radius: 5px;">
      <div>
        {{_('Method-Builder')}} ({{method.method_type}} {{_('Method ID')}}: {{method.id}})
      </div>

      <div class="row">
        <form method="post" action="/method-build/{{method.id}}">
        <input type="hidden" name="form-name" value="renameMethod">
        {{form_mod_method.csrf_token}}
        {{form_mod_method.method_id(class_='form-control', value=method.id)}}
        <div class="col-sm-6 col-md-4">
          {{form_mod_method.name.label(class_='control-label')}}
          <div>
            {{form_mod_method.name(class_='form-control', value=method.name)}}
          </div>
        </div>
        <div class="col-sm-6 col-md-2 small-gutters">
          <label style="padding-top: 1em"></label>
          <div>
            {{form_mod_method.rename(class_='form-control btn btn-default')}}
          </div>
        </div>
        </form>
      </div>

      <form method="post" action="/method-build/{{method.id}}">
      <input type="hidden" name="form-name" value="addMethod">
      {{form_add_method.csrf_token}}
      {{form_add_method.method_id(class_='form-control', value=method.id)}}

      <div class="row">

        {%- if method.method_type == "Duration" -%}

        <div class="col-sm-6 col-md-4 " style="padding-bottom: 1.5em">
          {{form_add_method.duration.label(class_='control-label')}}
          <div>
            {{form_add_method.duration(class_='form-control')}}
          </div>
        </div>

        {%- endif -%}

        {%- if method.method_type == "Date" -%}

        <div class="col-sm-12">
          <input type="radio" name="method_select" value="setpoint" checked="checked"> {{_('Define the setpoint over a period of time based on specific times/dates.')}}
          <br>{{_("The new entry's start time may be equal to the last entry's end time, but it cannot overlap. The default setpoint for the PID will be used if there is any unaccounted time.")}}
        </div>
        <div class="col-sm-6 col-md-4">
          {{form_add_method.time_start.label(class_='control-label')}}
          <div>
            {{form_add_method.time_start(class_='form-control', value=last_end_time)}}
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          {{form_add_method.time_end.label(class_='control-label')}}
          <div>
            {{form_add_method.time_end(class_='form-control')}}
          </div>
        </div>

        {%- elif method.method_type == "Daily" -%}

        <div class="col-md-12">
          <input type="radio" name="method_select" value="setpoint" checked="checked"> {{_('Define the setpoint over a period of time based on specific times of the day. This method will repeat daily. Start the first entry at midnight (00:00) if you wish to fill the entire day.')}}
          <br>{{_("The new entry's start time may be equal to the last entry's end time, but it cannot overlap. The default setpoint for the PID will be used if there is any unaccounted time.")}}
        </div>

        <div class="col-sm-6 col-md-4">
          {{form_add_method.daily_time_start.label(class_='control-label')}}
          <div>
            {{form_add_method.daily_time_start(class_='form-control', value=last_end_time)}}
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          {{form_add_method.daily_time_end.label(class_='control-label')}}
          <div>
            {{form_add_method.daily_time_end(class_='form-control')}}
          </div>
        </div>

        {%- elif method.method_type == "DailySine" -%}

        <div class="col-sm-12">
          <input class="form-control" id="method_select" name="method_select" type="hidden" value="setpoint">{{_('Define the setpoint over the day based on a sinusoidal wave defined by y = [A * sin(B * x + C)] + D, where A is amplitude, B is frequency, C is the angle shift, and D is the y-axis shift. This method will repeat daily.')}}
        </div>
        <div class="col-md-3">
          {{form_add_method.amplitude.label(class_='control-label')}}
          <div>
            {{form_add_method.amplitude(class_='form-control', value=last_sine_method.amplitude)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.frequency.label(class_='control-label')}}
          <div>
            {{form_add_method.frequency(class_='form-control', value=last_sine_method.frequency)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.shift_angle.label(class_='control-label')}}
          <div>
            {{form_add_method.shift_angle(class_='form-control', value=last_sine_method.shift_angle)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.shiftY.label(class_='control-label')}}
          <div>
            {{form_add_method.shiftY(class_='form-control', value=last_sine_method.shift_y)}}
          </div>
        </div>

        {%- elif method.method_type == "DailyBezier" -%}

        <div class="col-sm-12">
          <input class="form-control" id="method_select" name="method_select" type="hidden" value="setpoint">{{_('Define the setpoint over the day based on a cubic Bezier curve. If unfamiliar with a Bezier curve, it is recommended you use the <a href="https://www.desmos.com/calculator/cahqdxeshd" target="_blank">graphical Bezier curve generator</a> and use the 8 variables it creates for 4 points (each a set of x and y). The x-axis start (x3) and end (x0) will be automatically stretched or skewed to fit within a 24-hour period and this method will repeat daily.')}}
        </div>

        <div class="col-md-3">
          {{form_add_method.x0.label(class_='control-label')}}
          <div>
            {{form_add_method.x0(class_='form-control', value=last_bezier_method.x0)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.y0.label(class_='control-label')}}
          <div>
            {{form_add_method.y0(class_='form-control', value=last_bezier_method.y0)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.x1.label(class_='control-label')}}
          <div>
            {{form_add_method.x1(class_='form-control', value=last_bezier_method.x1)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.y1.label(class_='control-label')}}
          <div>
            {{form_add_method.y1(class_='form-control', value=last_bezier_method.y1)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.x2.label(class_='control-label')}}
          <div>
            {{form_add_method.x2(class_='form-control', value=last_bezier_method.x2)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.y2.label(class_='control-label')}}
          <div>
            {{form_add_method.y2(class_='form-control', value=last_bezier_method.y2)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.x3.label(class_='control-label')}}
          <div>
            {{form_add_method.x3(class_='form-control', value=last_bezier_method.x3)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.y3.label(class_='control-label')}}
          <div>
            {{form_add_method.y3(class_='form-control', value=last_bezier_method.y3)}}
          </div>
        </div>
        <div class="col-md-3">
          {{form_add_method.shift_angle.label(class_='control-label')}}
          <div>
            {{form_add_method.shift_angle(class_='form-control', value=last_bezier_method.shift_angle)}}
          </div>
        </div>

        {%- elif method.method_type == "Duration" -%}

        <div class="col-sm-12">
          <input type="radio" name="method_select" value="setpoint" checked="checked"> {{_('Define the setpoint over a period of time, based on specific durations of time.')}}
          <br>{{_('Duration here is defined as the amount of time after the previous duration. If this is the first duration added, this will be the beginning of the method. If this is not the first duration added, it will execute after the last duration already in the method.')}}
        </div>

        {%- endif -%}

      </div>

        {%- if method.method_type in ['Date', 'Duration', 'Daily'] -%}

      <div class="row">
        <div class="col-sm-6 col-md-4">
          {{form_add_method.setpoint_start.label(class_='control-label')}}
          <div>
            {{form_add_method.setpoint_start(class_='form-control', value=last_setpoint)}}
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          {{form_add_method.setpoint_end.label(class_='control-label')}}
          <div>
            {{form_add_method.setpoint_end(class_='form-control')}}
          </div>
        </div>
      </div>

      <div class="row" style="padding-bottom: 1em; padding-top: 1em">
        <div class="col-sm-12">
          <label style="padding-top: 1em"></label>
          <div>
            OR
          </div>
        </div>
      </div>

      <div class="row">

          {%- if method.method_type == "Date" -%}

        <div class="col-md-12">
          <input type="radio" name="method_select" value="relay"> {{_('Relay')}}
          <br>{{_('Activate or deactivate a relay within this method at a specific time/date.')}}
        </div>

        <div class="col-sm-6 col-md-4">
          {{form_add_method.relay_time.label(class_='control-label')}}
          <div>
            {{form_add_method.relay_time(class_='form-control')}}
          </div>
        </div>

          {%- elif method.method_type == 'Daily' -%}

        <div class="col-md-12">
          <input type="radio" name="method_select" value="relay"> {{_('Relay')}}
          <br>{{_('Activate or deactivate a relay at a specific time of day. Hour and minute (HH:MM) here is defined as the time of day. For example, 3:05 PM would be "15:05".')}}
        </div>
        <div class="col-sm-6 col-md-2">
          {{form_add_method.relay_daily_time.label(class_='control-label')}}
          <div>
            {{form_add_method.relay_daily_time(class_='form-control')}}
          </div>
        </div>

          {%- elif method.method_type == "Duration" -%}

        <div class="col-md-12">
          <input type="radio" name="method_select" value="relay"> {{_('Relay')}}
          <br>{{_('Activate or deactivate a relay within this method at a specific duration. Duration here is defined as the amount of time since the beginning of the method. For example, 60 seconds would execute the relay modulation 60 seconds after the start of the method.')}}
        </div>

          {%- endif -%}

        <div class="col-sm-6 col-md-4">
          {{form_add_method.relay_id.label(class_='control-label')}}
          <div>
            <select class="form-control form-tooltip form-dropdown" data-placement="bottom" id="relay_id" name="relay_id" title="{{_('Modulate the selected relay')}}.">
              <option value=""></option>
              {% for rel in relay -%}
                <option value="{{rel.id}}">{{rel.id}} ({{rel.name}})</option>
              {% endfor -%}
            </select>
          </div>
        </div>
        <div class="col-sm-3 col-md-2">
          {{form_add_method.relay_state.label(class_='control-label')}}
          <div>
            {{form_add_method.relay_state(class_='form-control')}}
          </div>
        </div>
        <div class="col-sm-3 col-md-2">
          {{form_add_method.relay_duration.label(class_='control-label')}}
          <div>
            {{form_add_method.relay_duration(class_='form-control')}}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class='control-label'></label>
          <div>
            {{form_add_method.save(class_='form-control btn btn-default')}}
          </div>
        </div>
      </div>

        {%- elif method.method_type in ['DailySine', 'DailyBezier'] -%}

      <div class="row">
        <div class="col-md-3">
          <label class='control-label'></label>
          <div>
            {{form_add_method.save(class_='form-control btn btn-default', value=_('Save'))}}
          </div>
        </div>
      </div>

        {%- endif -%}

      </form>

    {%- if method_setpoint or
           method.method_type in ["DailySine", "DailyBezier"] -%}

      <div class="row">
        <div class="col-sm-12" id="container" style="padding-top: 1.5em; height: 300px; width: 100%;"></div>
      </div>

    {%- endif -%}

    {%- if method_setpoint -%}

      <div class="row" style="margin: 1em 0 0 0; padding: 1em; border: 2px solid #ddd; border-radius: 5px;">
        <div class="col-xs-12" style="padding-bottom: 1em">
          <h3>Setpoint Tracking</h3>
        </div>

      {%- for each_method in method_data
            if each_method.method_id == method.id and
               not each_method.relay_id -%}

        <div class="row">
          <form method="post" action="/method-build/{{method.id}}">
          <input type="hidden" name="form-name" value="modMethod">
          {{form_mod_method.csrf_token}}
          {{form_mod_method.method_id(class_='form-control', value=method.id)}}
          {{form_mod_method.method_data_id(class_='form-control', value=each_method.id)}}
          <input class="form-control" id="method_select" name="method_select" type="hidden" value="setpoint">

            {% if method.method_type == "Date" -%}

          <div class="col-sm-4 col-md-2">
            {{form_mod_method.time_start.label(class_='control-label')}}
            <div>
              {{form_mod_method.time_start(class_='form-control', value=each_method.time_start)}}
            </div>
          </div>
          <div class="col-sm-4 col-md-2">
            {{form_mod_method.time_end.label(class_='control-label')}}
            <div>
              {{form_mod_method.time_end(class_='form-control', value=each_method.time_end)}}
            </div>
          </div>

          {% elif method.method_type == "Daily" -%}

          <div class="col-sm-3 col-md-2">
            {{form_mod_method.daily_time_start.label(class_='control-label')}}
            <div>
              {{form_mod_method.daily_time_start(class_='form-control', value=each_method.time_start)}}
            </div>
          </div>
          <div class="col-sm-3 col-md-2">
            {{form_mod_method.daily_time_end.label(class_='control-label')}}
            <div>
              {{form_mod_method.daily_time_end(class_='form-control', value=each_method.time_end)}}
            </div>
          </div>

          {% elif method.method_type == "Duration" -%}

          <div class="col-sm-4 col-md-2">
            {{form_mod_method.duration.label(class_='control-label')}}
            <div>
              {{form_mod_method.duration(class_='form-control', value=each_method.duration_sec)}}
            </div>
          </div>

          {% endif -%}

          <div class="col-sm-3 col-md-2">
            {{form_mod_method.setpoint_start.label(class_='control-label')}}
            <div>
              {{form_mod_method.setpoint_start(class_='form-control', value=each_method.setpoint_start)}}
            </div>
          </div>
          <div class="col-sm-3 col-md-2">
            {{form_mod_method.setpoint_end.label(class_='control-label')}}
            <div>
              {{form_mod_method.setpoint_end(class_='form-control', value=each_method.setpoint_end)}}
            </div>
          </div>
          <div class="col-sm-3 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              {{form_mod_method.save(class_='form-control btn btn-default')}}
            </div>
          </div>
          <div class="col-sm-3 col-md-2">
            <label class='control-label' style="padding-top: 1em"></label>
            <div>
              {{form_mod_method.Delete(class_='form-control btn btn-default',**{'onclick':'return confirm("Are you sure you want to delete this method line?")'})}}
            </div>
          </div>
          </form>
        </div>

      {%- endfor -%}

      </div>
    {%- endif -%}

    {%- set method_relay = [] -%}
    {%- for each_method in method_data
          if each_method.method_id == method.id and
             each_method.relay_id -%}
      {%- do method_relay.append(1) -%}
    {%- endfor -%}

    {%- if method_relay -%}
    <div class="row" style="margin: 1em 0 0 0; padding: 1em; border: 2px solid #ddd; border-radius: 5px;">
      <div class="col-xs-12">
        <h3>{{_('Relay Modulation')}}</h3>
      </div>
      <div class="col-xs-12" style="padding-bottom: 1em">
        <span style="font-weight: bold; color: red">{{_('Note: This feature is currently not implemented. These relays will NOT be modulated if applied to a PID. This will be implemented soon.')}}</span>
      </div>
    {%- endif -%}

    {%- for each_method in method_data if each_method.method_id == method.id and each_method.relay_id -%}

      <div class="row">
        <form method="post" action="/method-build/{{method.id}}" style="padding: 0.7em 0">
        <input type="hidden" name="form-name" value="modMethod">
        {{form_mod_method.csrf_token}}
        {{form_mod_method.method_id(class_='form-control', value=method.id)}}
        {{form_mod_method.method_data_id(class_='form-control', value=each_method.id)}}
        <input class="form-control" id="method_select" name="method_select" type="hidden" value="relay">

      {% if method.method_type == "Date" -%}

        <div class="col-sm-3 col-md-2">
          {{form_mod_method.relay_time.label(class_='control-label')}}
          <div>
            {{form_mod_method.relay_time(class_='form-control', value=each_method.time_start)}}
          </div>
        </div>

      {% elif method.method_type == "Daily" -%}

        <div class="col-sm-3 col-md-2">
          {{form_mod_method.relay_daily_time.label(class_='control-label')}}
          <div>
            {{form_mod_method.relay_daily_time(class_='form-control', value=each_method.time_start)}}
          </div>
        </div>

      {% elif method.method_type == "Duration" -%}

        <div class="col-sm-3 col-md-2">
          {{form_mod_method.duration.label(class_='control-label')}}
          <div>
            {{form_mod_method.duration(class_='form-control', value=each_method.duration_sec)}}
          </div>
        </div>

      {% endif -%}

        <div class="col-sm-3 col-md-2">
          {{form_mod_method.relay_id.label(class_='control-label')}}
          <div>
            <select class="form-control form-tooltip form-dropdown" data-placement="bottom" id="relay_id" name="relay_id" title="{{_('Modulate the selected relay.')}}">
              <option value="">Disabled</option>
              {% for each_relay in relay -%}
                <option value="{{each_relay.id}}"{%- if each_relay.id == each_method.relay_id -%} selected{%- endif -%}>{{each_relay.id}} ({{each_relay.name}})</option>
              {% endfor -%}
            </select>
          </div>
        </div>
        <div class="col-sm-3 col-md-2">
          {{form_mod_method.relay_state.label(class_='control-label')}}
          <div>
            <select class="form-control form-tooltip form-dropdown" data-placement="bottom" id="relay_state" name="relay_state" title="{{_('Modulate the selected relay.')}}">
              <option value=""></option>
              <option value="On"{%- if each_method.relay_state == "On" -%} selected{%- endif -%}>{{_('Turn On')}}</option>
              <option value="Off"{%- if each_method.relay_state == "Off" -%} selected{%- endif -%}>{{_('Turn Off')}}</option>
            </select>
          </div>
        </div>
        <div class="col-sm-3 col-md-2">
          {{form_mod_method.relay_duration.label(class_='control-label')}}
          <div>
            {{form_mod_method.relay_duration(class_='form-control', value=each_method.relay_duration)}}
          </div>
        </div>
        <div class="col-sm-2 col-md-2">
          <label class='control-label' style="padding-top: 1em"></label>
          <div>
            {{form_mod_method.save(class_='form-control btn btn-default')}}
          </div>
        </div>
        <div class="col-sm-2  col-md-2">
          <label class='control-label' style="padding-top: 1em"></label>
          <div>
            {{form_mod_method.Delete(class_='form-control btn btn-default',**{'onclick':'return confirm("Are you sure you want to delete this method line?")'})}}
          </div>
        </div>
        </form>

      </div>

    {%- endfor -%}

  </div>

  <script>
  $(document).ready(function() {
    // Retrieve initial chart data set from the past (duration set by user)
    function getPastData(method_id) {
      var url = '/method-data/' + method_id;
      var units = '';
      {% if method.method_type == "Duration" %}
      units = 'seconds';
      {% endif %}
      $.getJSON(url,
        function(data, responseText, jqXHR) {
          if (jqXHR.status != 204) {
            chart.addSeries({
              name: 'Setpoint',
              data : data
            });
          }
        }
      );
    }

    var x = new Date();
    var currentTimeZoneOffsetInHours = x.getTimezoneOffset();

    Highcharts.setOptions({
      global: {
        useUTC: true
      },
      lang: {
        thousandsSep: ','
      }
    });

    chart = new Highcharts.Chart({
      chart : {
        renderTo: 'container',
        zoomType: 'x',
        resetZoomButton: {
          theme: {
            display: 'none'
          }
        },
        events: {
          load: function () {
            getPastData("{{method.id}}");
          }
        }
      },
      title: {
        text: null
      },
      tooltip: {
        {% if method.method_type == "Duration" -%}
          headerFormat: '<span style="font-size: 10px">{point.key} Seconds</span><br/>',
        {%- endif -%}
        {% if method.method_type == "Date" -%}
          xDateFormat: '%a, %b %e, %Y %H:%M:%S',
        {% elif method.method_type in ["Daily", "DailySine", "DailyBezier"] -%}
          xDateFormat: '%H:%M:%S',
        {%- endif -%}
        valueDecimals: 2
      },
      legend: {
        enabled: false
      },
      navigator: {
        enabled: false
      },
      rangeSelector: {
        enabled: false
      },
      scrollbar: {
        enabled: false
      },
      xAxis: {
        type: '{%- if method.method_type == "Duration" -%}linear{%- elif method.method_type in ["Date", "Daily", "DailySine", "DailyBezier"] -%}datetime{%- endif -%}',
        ordinal: false
      },
      yAxis: [
      {   
        title: {
          text: null,
        },
        labels: {
          format: '{value}',
        },
        opposite: false
      }],
      credits: {
        enabled: false
      }
    });

  });
  </script>

{% endblock %}