{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% set included = True %}

{% block content %}

<div class="row">
  <div class="col-4">


    <article class="col">

      <h3>ICS panel</h3>

      <form class="form"  method="post">

        <fieldset id="motion_type">

          <div class="row mb-1">

            <div class="col-4">
            </div>

            <div class="col-auto">

              <div class="input-group input-group-sm">

                <div class="input-group-text">
                  <input class="form-check-input mt-1 mb-1" type="checkbox"
                         value="" id="selectall" name="selectall" autocomplete="off">
                </div>

                <button type="button" class="btn btn-outline-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="Select all" tabindex="-1">
                  ?
                </button>

              </div>
            </div>

            <!-- <div class="btn-group col  btn-group-sm" role="group"> -->

              <!-- <input type="radio" class="btn-check" name="motion" id="named" value="named" checked> -->
              <!-- <label class="btn btn-outline-primary" for="named">Named</label> -->

                <!-- <input type="radio" class="btn-check" name="motion" id="absolute" value="absolute" > -->
                <!-- <label class="btn btn-outline-primary" for="absolute">Absolute</label> -->

              <!--   <input type="radio" class="btn-check" name="motion" id="relative" value="relative"> -->
              <!--   <label class="btn btn-outline-primary" for="relative">Relative</label> -->

            <!-- </div> -->

            <!-- <div class="col-2"> -->

            <!-- </div> -->

          </div>
        </fieldset>

        <fieldset id="device_values">

          {% for device,params in devices.items() | sort %}

          <div class="row mb-1"
               data-shins-type="device"
               data-shins-name="{{device}}"
               data-shins-value="{{value}}">

            <div class="col-4">
              <label for="{{device}}" class="col-form-label">
                {{device}}
              </label>
            </div>

            <div class="col">

              <div class="input-group input-group-sm">

                <div class="input-group-text">
                  <input class="form-check-input mt-0" type="checkbox"
                         value="" id="{{device}}-chk" >
                </div>

                {% if params.options is string or not params.options %}

                <input type="text"
                       class="form-control"
                       id="{{device}}"
                       name="{{device}}"
                       placeholder="no named pos"
                       disabled >

                {% else %}

                <select id="{{device}}" name="{{device}}" class="form-control" disabled>
                  {% for o in params.options %}
                  <option value="{{o}}"
                          {% if o == params.status.named %} selected {% endif %}>
                    {{o}}
                  </option>
                  {% endfor %}
                </select>

                {% endif %}

                <button type="button" class="btn btn-outline-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="{{params['help']}}" tabindex="-1">
                  ?
                </button>
                
              </div>

            </div>
                
            <div class="col-2 mt-1">
              <var class="form-text" data-{{device}}-named="{{params.status.named}}">{{params.status.named}}</var>
            </div>
            
            <div class="col-2 mt-1">
              <span class="form-text">enc</span>:
              <var class="form-text" data-{{device}}-encoder="{{params.status.encoder}}">{{params.status.encoder}}</var>
            </div>

          </div>

          <script>
            $('#{{device}}-chk').on("click change", function () {
                var checked = this.checked;
                $('#{{device}}').prop('disabled', !checked);
            });
          </script>

          {% endfor %}
        </fieldset>

        <fieldset id="action">

          <input type="submit" id="move" value="Move" class="btn btn-primary">
          <input type="submit" id="home" value="Home" class="btn btn-outline-primary">
          <input type="submit" id="abort" value="Abort" class="btn btn-outline-danger">

        </fieldset>

      </form>

    </article>


    
  </div>
  <div class="col-8">


    <article class="col">

      <h3>Synoptic panel</h3>
      <div style="text-align:center">
        {% include "synoptic.svg" %}
      </div>

    </article>

    
  </div>
</div>

<script src="/static/popover.js"></script>

<script>

  /////////////////////////////
  /// STREAM
  /////////////////////////////

  var source = new EventSource('stream'); // in devices.py
  
  source.onmessage = function(e) {
      
      var data = JSON.parse(e.data)
      console.log(data)

      /////////////////////////////
      /// ICS PART
      /////////////////////////////

      $.each(data, function(key,status){

          /// In limit
          var in_limit = $('var[data-'+key+'-in_limit]')
          var named = $('var[data-'+key+'-named]')
          
          $.each(status, function(k,v){
              var elem = $('var[data-'+key+'-'+k+']');
              elem.text(v)
              
              if (status.is_moving) {
                  elem.addClass("text-warning")
                  named.text("moving...")
              } else {
                  elem.removeClass("text-warning")
              }                                
              elem.data(key+'-'+k, v)

              if (status.encoder == 0) {
                  elem.addClass("text-success")
              } else {
                  elem.removeClass("text-success")
              }
              
          });
          
          /// In limit
          if (status.in_limit) {
              in_limit.addClass("text-danger")
              named.addClass("text-danger")
              named.text("in limit!")                
          } else {
              in_limit.removeClass("text-danger")
              named.removeClass("text-danger")
          }

          /// Named position
          if (status.named == "not defined") {
              if (status.encoder == 0) {                      
                  named.addClass("text-success")
                  named.text("in home!")
              } else {
                  named.addClass("text-warning")
              }
          } else {
              named.removeClass("text-success")
              named.removeClass("text-warning")
          }
          
      });

      /////////////////////////////
      /// SYNOPTIC PART
      /////////////////////////////

      var green   = "#198754"
      var yellow  = "#ffc107"
      var red     = "#dc3545"
      var gray    = "#343a40"
      var success = green
      var warning = yellow
      var danger  = red
      var normal  = gray          
      
      // Motors and Lamps
      
      $.each(data, function(key,status){

          // Positions and named positions

          var elem_encoder = $('#value-'+key)
          if (status["encoder"]) {
              elem_encoder.text(status["encoder"])
          } else if (status["value"]) { // for dm, rtc, sasha
              elem_encoder.text(status["value"])
          }              

          var elem_named = $('#named-'+key)
          // elem_named.text(status["named"])

          if (status["in_limit"]) {
              elem_named.attr("fill", danger)
              elem_encoder.attr("fill", danger)
              elem_named.text("in limit!")
          } else {
              elem_named.attr("fill", normal)
          }
          
          if ((status["is_moving"]) | (status["named"] == "not defined")) {
              elem_named.attr("fill", warning)
              elem_encoder.attr("fill", warning)
              if (status["is_moving"])  {
                  elem_named.text("moving...")
              } else {
                  if (status["encoder"] == 0) {
                      elem_named.attr("fill", success)
                      elem_named.text("in home!")
                      elem_encoder.attr("fill", success)
                      elem_encoder.text(status["encoder"])
                  } else {
                      elem_named.text("not defined")
                  }
              }
          } else {
              elem_named.attr("fill", normal)
              elem_encoder.attr("fill", normal)
              elem_named.text(status["named"])
          }
          
          
          // Icons

          if (data.INBEAM_DEP.named == "OUT" ) {
              $("#in-INBEAM_DEP-0").attr("style", "display:inline")
              $("#in-INBEAM_DEP-1").attr("style", "display:none")
          } else if (data.INBEAM_DEP.named == "IN" ) {
              $("#in-INBEAM_DEP-0").attr("style", "display:none")
              $("#in-INBEAM_DEP-1").attr("style", "display:inline")
          } else {
              $("#in-INBEAM_DEP-0").attr("style", "display:none")
              $("#in-INBEAM_DEP-1").attr("style", "display:inline")
          }

          if (data.SHUTTER.named == "OUT" ) {
              $("#in-SHUTTER-0").attr("style", "display:inline")
              $("#in-SHUTTER-1").attr("style", "display:none")
          } else if (data.SHUTTER.named == "IN" ) {
              $("#in-SHUTTER-0").attr("style", "display:none")
              $("#in-SHUTTER-1").attr("style", "display:inline")
          } else {
              $("#in-SHUTTER-0").attr("style", "display:none")
              $("#in-SHUTTER-1").attr("style", "display:inline")
          }

          if (data.CAL_MIRROR_DEP.named == "OUT" ) {
              $("#CAL_MIRROR_DEP-0").attr("style", "display:inline")
              $("#CAL_MIRROR_DEP-1").attr("style", "display:none")
          } else if (data.CAL_MIRROR_DEP.named == "IN" ) {
              $("#CAL_MIRROR_DEP-0").attr("style", "display:none")
              $("#CAL_MIRROR_DEP-1").attr("style", "display:inline")
          } else {
              $("#CAL_MIRROR_DEP-0").attr("style", "display:none")
              $("#CAL_MIRROR_DEP-1").attr("style", "display:none")
          }

          if (data.CAL_FIBER_DEP.named == "NO_FIBERS" ) {
              $("#CAL_FIBER_DEP-0").attr("style", "display:inline")
              $("#CAL_FIBER_DEP-1").attr("style", "display:none")
              $("#CAL_FIBER_DEP-2").attr("style", "display:none")
          } else if (data.CAL_FIBER_DEP.named == "FOCUS_IN" ) {
              $("#CAL_FIBER_DEP-0").attr("style", "display:none")
              $("#CAL_FIBER_DEP-1").attr("style", "display:inline")
              $("#CAL_FIBER_DEP-2").attr("style", "display:none")
          } else if (data.CAL_FIBER_DEP.named == "DEFOCUS_IN" ) {
              $("#CAL_FIBER_DEP-0").attr("style", "display:none")
              $("#CAL_FIBER_DEP-1").attr("style", "display:none")
              $("#CAL_FIBER_DEP-2").attr("style", "display:inline")
          } else {
              $("#CAL_FIBER_DEP-0").attr("style", "display:none")
              $("#CAL_FIBER_DEP-1").attr("style", "display:none")
              $("#CAL_FIBER_DEP-2").attr("style", "display:none")
          }

          if (data.CAL_FILTER_DEP.named == "OUT" ) {
              $("#CAL_FILTER_DEP-0").attr("style", "display:inline")
              $("#CAL_FILTER_DEP-1").attr("style", "display:none")
          } else if (data.CAL_FILTER_DEP.named == "IN" ) {
              $("#CAL_FILTER_DEP-0").attr("style", "display:none")
              $("#CAL_FILTER_DEP-1").attr("style", "display:inline")
          } else {
              $("#CAL_FILTER_DEP-0").attr("style", "display:none")
              $("#CAL_FILTER_DEP-1").attr("style", "display:none")
          }

          if (data.CAL_FIBER_FOCUS_LAMP.named == "OFF" ) {
              $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:inline")
              $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:none")
          } else if (data.CAL_FIBER_FOCUS_LAMP.named == "ON" ) {
              $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:none")
              $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:inline")
          } else {
              $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:none")
              $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:none")
          }

          if (data.CAL_FIBER_DEFOCUS_LAMP.named == "OFF" ) {
              $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:inline")
              $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:none")
          } else if (data.CAL_FIBER_DEFOCUS_LAMP.named == "ON" ) {
              $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:none")
              $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:inline")
          } else {
              $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:none")
              $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:none")
          }

          if (data.CAL_FF_LAMP.named == "OFF" ) {
              $("#CAL_FF_LAMP-0").attr("style", "display:inline")
              $("#CAL_FF_LAMP-1").attr("style", "display:none")
          } else if (data.CAL_FF_LAMP.named == "ON" ) {
              $("#CAL_FF_LAMP-0").attr("style", "display:none")
              $("#CAL_FF_LAMP-1").attr("style", "display:inline")
          } else {
              $("#CAL_FF_LAMP-0").attr("style", "display:none")
              $("#CAL_FF_LAMP-1").attr("style", "display:none")
          }

          if (data.PUPIL_LENS_DEP.named == "OUT" ) {
              $("#PUPIL_LENS_DEP-0").attr("style", "display:inline")
              $("#PUPIL_LENS_DEP-1").attr("style", "display:none")
          } else if (data.PUPIL_LENS_DEP.named == "IN" ) {
              $("#PUPIL_LENS_DEP-0").attr("style", "display:none")
              $("#PUPIL_LENS_DEP-1").attr("style", "display:inline")
          } else {
              $("#PUPIL_LENS_DEP-0").attr("style", "display:none")
              $("#PUPIL_LENS_DEP-1").attr("style", "display:none")
          }

          // Light path

          var light_on = "stroke:#ff6600;fill:none;stroke-width:5;"
          var light_off = "stroke:#666666;fill:none;stroke-width:5;"
          
          if (data.INBEAM_DEP.named == "OUT" ) {
              $("#light-ext").attr("style", light_on)
              $("#light-in").attr("style", light_off)
              $("#light-SHUTTER").attr("style", light_off)
              $("#light-general").attr("style", light_off)                
              $("#light-bs").attr("style", light_off)
          } else {
              $("#light-ext").attr("style", light_off)
              $("#light-in").attr("style", light_on)

              if (data.SHUTTER.named == "OUT" ) {
                  $("#light-SHUTTER").attr("style", light_on)
                  
                  if (data.CAL_MIRROR_DEP.named == "OUT" ) {
                      $("#light-general").attr("style", light_on)
                      $("#light-bs").attr("style", light_on)
                  } else {
                      $("#light-general").attr("style", light_off)
                      $("#light-bs").attr("style", light_off)
                  }
                  
              } else if (data.SHUTTER.named == "IN" ) {
                  $("#light-SHUTTER").attr("style", light_off)
                  $("#light-general").attr("style", light_off)
                  $("#light-bs").attr("style", light_off)
              }
          }
          
          if (data.CAL_FF_LAMP.named == "ON" ) {
              $("#light-CAL_FF_LAMP").attr("style", light_on)
              if (data.CAL_MIRROR_DEP.named == "IN" ) {
                  $("#light-general").attr("style", light_on)                    
                  $("#light-bs").attr("style", light_on)
              } else {
                  $("#light-general").attr("style", light_off)                    
                  $("#light-bs").attr("style", light_off)
              }
          } else {
              $("#light-CAL_FF_LAMP").attr("style", light_off)
          }
          
          if (data.CAL_FIBER_FOCUS_LAMP.named == "ON" ) {
              $("#light-CAL_FIBER_FOCUS_LAMP").attr("style", light_on)
              if (data.CAL_FIBER_DEP.named == "FOCUS_IN" ) {
                  $("#light-general").attr("style", light_on)                    
                  $("#light-bs").attr("style", light_on)
              } else {
                  $("#light-general").attr("style", light_off)                    
                  $("#light-bs").attr("style", light_off)
              }
          } else {
              $("#light-CAL_FIBER_FOCUS_LAMP").attr("style", light_off)
          }
          
          if (data.CAL_FIBER_DEFOCUS_LAMP.named == "ON" ) {
              $("#light-CAL_FIBER_DEFOCUS_LAMP").attr("style", light_on)
              if (data.CAL_FIBER_DEP.named == "DEFOCUS_IN" ) {
                  $("#light-general").attr("style", light_on)                    
                  $("#light-bs").attr("style", light_on)
              } else {
                  $("#light-general").attr("style", light_off)                    
                  $("#light-bs").attr("style", light_off)
              }
          } else {
              $("#light-CAL_FIBER_DEFOCUS_LAMP").attr("style", light_off)
          }
          
      });
      
  }

  /////////////////////////////
  /// REST
  /////////////////////////////

  $("#selectall").click(function(){
      var checked = this.checked
      $('input:checkbox').not(this).prop('checked', checked);
      $('input:text, select').prop('disabled', !checked);

  });

  $("form").submit(function(e){
      e.preventDefault();
      console.log("click")

      var motion = "named" // $('[name="motion"]:checked').val()
      var action = $(this).find("input[type=submit]:focus" ).attr("id");
      var data = {};

      $.each($("#device_values").serializeArray(), function() {
	  data[this.name] = this.value;
      });

      if (action == "move") {
          $(this).crud("PUT", "/api/devices", {"motion": motion, "data": data})
      } else if (action == "home") {
          $(this).crud("POST", "/api/devices", {"motion": motion, "data": data})
      } else {
          $(this).crud("DELETE", "/api/devices", {"motion": motion, "data": data})
      }

  })
  
</script>





{% endblock content %}