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

{% block title %}
Control
{% endblock title %}

{% endif %}

{% set included = True %}

{% block content %}

  <section class="row">

    <form class="form mt-2 col-4">

      <h4>Control panel</h4>

      <fieldset>
        <h5>Telescope</h5>

        <nav>
          <ul class="nav nav-tabs" role="tablist">
            <!-- <li class="nav-item" role="presentation"> -->
            <!--   <button class="nav-link active" data-bs-toggle="tab" -->
            <!--           data-bs-target="#radec_tab" type="button" role="tab">Ra Dec</button> -->
            <!-- </li> -->
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#altaz_tab" type="button"
                      role="tab">Alt Az</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link active" data-bs-toggle="tab"
                      data-bs-target="#byname_tab" type="button"
                      role="tab">Radec / ID</button>
            </li>
            <!-- <li class="nav-item" role="presentation"> -->
            <!--   <button class="nav-link" data-bs-toggle="tab" -->
            <!--           data-bs-target="#offset_tab" type="button" -->
            <!--           role="tab">Offset</button> -->
            <!-- </li> -->
          </ul>
        </nav>

        <div class="tab-content">

          <!-- <div class="tab-pane show active" id="radec_tab" role="tabpanel"> -->

          <!--   <div class="row mt-2"> -->
          <!--     <label for="alpha" class="col-1 col-form-label">&alpha;</label> -->
          <!--     <label for="delta" class="col-1 col-form-label">&delta;</label> -->
          <!--     <div class="col input-group"> -->
          <!--       <input class="form-control" name="alpha" -->
          <!--              id="alpha" placeholder="00 00 00.0" > -->
          <!--       <input class="form-control" name="delta" -->
          <!--              id="delta" placeholder="+00 00 00.0" > -->
          <!--       <span class="input-group-text"> -->
          <!--         hms -->
          <!--         dms -->
          <!--       </span> -->
          <!--     </div> -->
          <!--   </div> -->

          <!-- </div> -->

          <div class="tab-pane" id="altaz_tab" role="tabpanel">

            <div class="row mt-2">
              <label for="altitude" class="col-1 col-form-label">Alt</label>
              <label for="azimuth" class="col-1 col-form-label">Az</label>
              <div class="col input-group">
                <input class="form-control" name="altitude"
                       id="altitude" placeholder="45.00" min="10.00" max="85.00" type="number" >
                <input class="form-control" name="azimuth"
                       id="azimuth" placeholder="0.00" min="0.00" max="359.99" type="number" >
                <span class="input-group-text">
                  °
                </span>
              </div>
            </div>

          </div>

          <div class="tab-pane show active" id="byname_tab" role="tabpanel">

            <div class="row mt-2">
              <label for="identifier" class="col-2 col-form-label">&alpha;,&delta; / ID</label>
              <div class="col input-group">
                <input class="form-control" name="altitude"
                       id="identifier" placeholder="Polaris" type="text" >
                <span class="input-group-text">
                  hms ±dms / id
                </span>
              </div>
            </div>

          </div>

        </div>


        <div class="row mt-2">
          <small class="col-2 form-text text-secondary"></small>
          <div class="btn-group col" role="group">
            <!-- <input type="radio" class="btn-check" name="coordinates-radio" id="coordinates-check" > -->
            <!-- <label class="btn btn btn-primary" for="coordinates-check">Check</label> -->

            <input type="radio" class="btn-check" name="coordinates-radio" id="coordinates-slew" >
            <label class="btn btn btn-primary" for="coordinates-slew">Slew</label>

            <input type="radio" class="btn-check" name="coordinates-radio" id="coordinates-stop" >
            <label class="btn btn btn-secondary" for="coordinates-stop">Stop</label>
          </div>
        </div>


        <div class="row">
          <small class="col-2 form-text text-secondary"></small>
          <small class="col form-text text-success">&alpha;: <var id="telescope-coordinates-alpha-status"></var></small>
          <small class="col form-text text-success">&delta;: <var id="telescope-coordinates-delta-status"></var></small>
          <small class="col form-text text-success">ha: <var id="telescope-coordinates-ha-status"></var></small>
        </div>
        <div class="row">
          <small class="col-2 form-text text-secondary"></small>
          <small class="col form-text text-success">alt: <var id="telescope-coordinates-alt-status"></var>°</small>
          <small class="col form-text text-success">az: <var id="telescope-coordinates-az-status"></var>°</small>
          <small class="col form-text text-success">lst: <var id="telescope-coordinates-lst-status"></var></small>
        </div>


        
        <div class="mt-2 row">
          <label class="col-2 col-form-label">Dome</label>
          
          <div class="btn-group col-4">
            <button id="dome-park" type="button" class="btn btn-primary ">
              Park
            </button>
          </div>
          
          <div class="btn-group col" id="dome-shutter" >
            
            <div class="btn-group col-6" role="group">
              
              <button type="button" class="btn btn-primary dropdown-toggle"
                      data-bs-toggle="dropdown">
                Open
              </button>
              
              <ul class="dropdown-menu">
                <li>
                  <button data-send="true" class="dropdown-item text-danger">Really Open!</button>
                </li>
              </ul>
            </div>
            
            <button data-send="false" type="button" class="btn btn-secondary">
              Close
            </button>
          </div>
        </div>

        <div class="mt-2 row">
          <label for="dome-azimuth" class="col-2 col-form-label">Az</label>
          <div class="form-group col-4">
            <div class="input-group">
              <span class="input-group-text">
                <input id="dome-slaved" class="form-check-input mt-0" type="checkbox">
              </span>
              <input id="dome-azimuth" class="form-control"
                     placeholder="0.00" min="0.00" max="360.00" type="number" >
              <span class="input-group-text">
                °
              </span>
            </div>
          </div>
          <div class="btn-group col">
            <button id="dome-move" type="button" class="btn btn-primary">
              Move
            </button>
            <button id="dome-stop" type="button" class="btn btn-secondary">
              Stop
            </button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">slaved: <var id="dome-slaved-status"></var></small>
          <small class="col text-success">az: <var id="dome-azimuth-status"></var>°</small>
          <small class="col text-success">open: <var id="dome-shutter-status"></var></small>
        </div>


        <div class="row mt-2">
          <label for="telescope-focus" class="col-2 col-form-label">Focus</label>
          <div class="form-group col-4">
            <div class="input-group">
              <input id="telescope-focus" type="number" class="form-control"
                     placeholder="19500" min="15000" max="25000">
              <span class="input-group-text">
                µm
              </span>
            </div>
          </div>
          <div class="btn-group col">
            <button id="telescope-lamp" type="button" class="btn btn-primary col">Lamp</button>
            <button id="dome-light" type="button" class="btn btn-primary col">Light</button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">position: <var id="telescope-focuser-status"></var>µm</small>
          <small class="col text-success">lamp: <var id="telescope-lamp-status"></var></small>
          <small class="col text-success">light: <var id="dome-light-status"></var></small>
        </div>

      </fieldset>

    </form>

    <!-- ********************************************************************************** -->

    <form class="form mt-2 col-4">

      <fieldset>

        <h5>Camera</h5>

        <div class="row mt-2">
          <label for="binning" class="col-2 col-form-label">Binning</label>
          <div class="col">
            <select class="form-control" id="binning">
              <option value="1">1×1</option>
              <option value="2">2×2</option>
              <option value="3">3×3</option>
              <option value="4">4×4</option>
            </select>
          </div>
          <label class="col-form-label col-2">Frame</label>
          <div class="btn-group col-4" role="group" aria-label="First group">
            <button id="frame-full" type="button" class="btn btn-primary">Full</button>
            <button id="frame-half" type="button" class="btn btn-primary">Half</button>
            <button id="frame-small" type="button" class="btn btn-primary">2'</button>
          </div>
        </div>


        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">binning: <var id="camera-binning-status"></var></small>
        </div>


        
        <div class="row mt-2">
          <label for="x0" class="col-1 col-form-label">X<sub>0</sub></label>
          <label for="y0" class="col-1 col-form-label">Y<sub>0</sub></label>
          <div class="col input-group input-group">
            <input class="form-control" type="number"
                   id="x0" value="123" min="1">
            <input class="form-control" type="number"
                   id="y0" value="234" min="1">
            <span class="input-group-text">px</span>
          </div>
        </div>

        <div class="row mt-2">
          <label for="xf" class="col-1 col-form-label">Y<sub>f</sub></label>
          <label for="yf" class="col-1 col-form-label">Y<sub>f</sub></label>
          <div class="col input-group input-group">
            <input class="form-control" type="number"
                   id="xf" value="678" min="2">
            <input class="form-control" type="number"
                   id="yf" value="789" min="2">
            <span class="input-group-text">px</span>
          </div>
        </div>

        <!-- <div class="row"> -->
          <!--   <strong class="col-2">Info:</strong> -->
          <!--   <small class="text-muted">Max: <var>1024</var>×<var>1024</var> px</small> -->
          <!--   <small class="text-muted">Width: <var>800</var> px</small> -->
          <!--   <small class="text-muted">Height: <var>600</var> px</small> -->
          <!-- </div> -->

      </fieldset>

      <fieldset>

        <!-- <h4>Object</h4> -->

        <div class="row mt-2">
          <label for="frametyp" class="col-form-label col-2">Type</label>
          <div class="col input-group">
            <select id="frametyp" name="frametyp" class="form-control">
              <option value="Light">Light</option>
              <option value="Bias">Bias</option>
              <option value="Flat">Flat</option>
              <option value="Dark">Dark</option>
            </select>
          </div>
          <label for="filter" class="col-form-label col-2">Filter</label>
          <div class="col input-group">
            <select id="filter" name="filter" class="form-control">
              <option value="U">U</option>
              <option value="B">B</option>
              <option value="V">V</option>
              <option value="R">R</option>
              <option value="I">I</option>
              <option value="Halpha">H&alpha;</option>
              <option value="Free">Free</option>
            </select>
          </div>
        </div>

        <!-- <div class="row mt-2"> -->
        <!--   <label for="frametyp" class="col-form-label col-2">Type</label> -->
        <!--   <div class="col input-group"> -->
        <!--     <select id="frametyp" name="frametyp" class="form-control"> -->
        <!--       <option value="1">Science</option> -->
        <!--       <option value="2">Bias</option> -->
        <!--       <option value="3">Flat</option> -->
        <!--       <option value="0">Dark</option> -->
        <!--     </select> -->
        <!--   </div> -->
        <!--   <label for="filter" class="col-form-label col-2">Filter</label> -->
        <!--   <div class="col input-group"> -->
        <!--     <select id="filter" name="filter" class="form-control"> -->
        <!--       <option value="1">U</option> -->
        <!--       <option value="2">B</option> -->
        <!--       <option value="3">V</option> -->
        <!--       <option value="4">R</option> -->
        <!--       <option value="5">I</option> -->
        <!--       <option value="6">H&alpha;</option> -->
        <!--       <option value="7">Free</option> -->
        <!--     </select> -->
        <!--   </div> -->
        <!-- </div> -->

        <div class="row mt-2">
          <label class="col-2 col-form-label" for="exptime" >Exptime</label>
          <div class="input-group col">
            <input class="form-control" type="number" id="exptime" value="10.0">
            <span class="input-group-text">s</span>
          </div>
          <label for="repeat" class="col-2 col-form-label">Repeat</label>
          <div class="input-group col">
            <input class="form-control" type="number" id="repeat" value="1" min="1" max="300">
            <span class="input-group-text">#</span>
          </div>
        </div>

        <div class="row mt-2">
          <label for="object" class="col-form-label col-2">Object</label>
          <div class="col">
            <input type="text" placeholder="Test" id="object"
                   name="object" class="form-control" value="Test">
          </div>
        </div>


        <div class="row mt-2">
          <small class="col-2 text-secondary"></small>
          <div class="btn-group col" role="group">
            <!-- <input id="camera-continuous" type="radio" class="btn-check" name="btnradio" > -->
            <!-- <label class="btn btn btn-outline-primary" for="camera-continuous">Video</label> -->

            <input id="camera-start" type="radio" class="btn-check" name="btnradio">
            <label class="btn btn btn-outline-primary" for="camera-start">Expose</label>

            <input id="camera-stop" type="radio" class="btn-check" name="btnradio" >
            <label class="btn btn btn-secondary" for="camera-stop">Stop</label>
          </div>
        </div>


        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">cooler: <var id="camera-cooler-status"></var></small>
          <small class="col text-success">filt: <var id="camera-filter-status"></var></small>
          <small class="col text-success">moving: <var id="camera-movement-status"></var></small>
          <small class="col text-success">state: <var id="camera-state-status"></var></small>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <!-- <small class="col text-success">cool: <var>On</var></small> -->
          <small class="col text-success">fan: <var id="camera-fan-status"></var>%</small>
          <small class="col text-success">set: <var id="camera-setpoint-status"></var>°</small>
          <small class="col text-success">T: <var id="camera-temperature-status"></var>°</small>
          <small class="col text-success">amb: <var id="camera-ambient-status"></var>°</small>

        </div>
        
      </fieldset>

    </form>
    
    <!-- ************************************************************************ -->

    <article class="mt-2 col-4">
      {% include "webcam.html" %}
    </article>
       
    <!-- <form class="form mt-2 col"> -->

      <!-- <article class="col-3"> -->

      <!-- <h4>Display</h4> -->

      <!-- <figure class="card"> -->
      <!--   <img class="card-img-top" src="..."> -->
      <!--   <figcaption class="card-body"> -->
      <!--     <h5 class="card-title">title</h5>     -->

      <!--     <p class="card-text"> -->
            <!-- <span title="insmode"  class="badge bg-primary">fotometry</span> -->
      <!--       <span title="filter"   class="badge bg-info">Free</span> -->
      <!--       <span title="binning"  class="badge bg-info">2x2</span> -->
      <!--       <span title="frametyp" class="badge bg-dark">bias</span> -->
      <!--       <span title="seeing"   class="badge bg-warning">no seeing</span> -->
      <!--       <span title="resolved" class="badge bg-warning">no wcs</span> -->
      <!--     </p> -->

      <!--     <dl data-var="cardList" class="card-text"> -->
      <!--     </dl> -->

      <!--   </figcaption> -->
      <!--   <aside class="card-footer"> -->
      <!--     <a href="#" class="card-link">png</a> -->
      <!--     <a href="#" class="card-link">fits</a> -->
      <!--     <a href="#" class="card-link">header</a> -->
      <!--     <a href="#" class="card-link">extra</a> -->
      <!--   </aside> -->
      <!-- </figure> -->

      <!-- </article> -->


    <!-- </form> -->
    
    <script>

    var source = new EventSource('/web/home/stream'); // in templates.py

    /// Status Streams

    source.addEventListener("telescope",function(e) {
        var res = JSON.parse(e.data)
        //console.log(res)
        $("#telescope-coordinates-alpha-status").text(res.coordinates.response.radec[0])
        $("#telescope-coordinates-delta-status").text(res.coordinates.response.radec[1])
        $("#telescope-coordinates-alt-status").text(res.coordinates.response.altaz[0].toFixed(3))
        $("#telescope-coordinates-az-status").text(res.coordinates.response.altaz[1].toFixed(3))
        
        $("#telescope-coordinates-ha-status").text(res.coordinates.response.ha)
        $("#telescope-coordinates-lst-status").text(res.coordinates.response.lst)
        $("#telescope-focuser-status").text(res.focuser.response)
        $("#telescope-lamp-status").text(res.lamp.response)

    });


    source.addEventListener("dome",function(e) {
        var res = JSON.parse(e.data)
        console.log(res)

        $.each(res, function(k,v){
            var elem = $("#dome-"+k+"-status")
            if (elem) {
                elem.text(v.response)
            }
        })
        
        $("#dome-azimuth-status").text(res.position.response.azimuth)
        $("#dome-parked-status").text(res.position.response.parked)
        
    });

    source.addEventListener("camera",function(e) {
        var res = JSON.parse(e.data)
        console.log(res)

        $.each(res, function(k,v){
            var elem = $("#camera-"+k+"-status")
            if (elem) {
                elem.text(v.response)
            }
        })
    });

      /// Telescope

      $("#telescope-focus").on("keypress", function(e){
          if (e.keyCode == 13){
              var data = $(this).val()
              $(this).crud("PUT", "/api/telescope/focuser/movement", data)
          }
      })
      
      $("#telescope-lamp").on("click", function(){
          $(this).crud("GET", "/api/telescope/lamp").then(function(e){
              $(this).crud("PUT", "/api/telescope/lamp", !e.response)
          })
      })
      
      $("#coordinates-slew").on("click", function(){
          
          if ($("#radec_tab").hasClass("active")){
              var data = [$("#alpha").val(), $("#delta").val()]
              $(this).crud("POST", "/api/telescope/coordinates/movement/radec", data)              
          }
          
          if ($("#altaz_tab").hasClass("active")){
              var data = [$("#altitude").val(), $("#azimuth").val()]
              $(this).crud("POST", "/api/telescope/coordinates/movement/altaz", data)              
          }
          
          if ($("#byname_tab").hasClass("active")){
              var data = [$("#identifier").val()]
              $(this).crud("POST", "/api/telescope/coordinates/movement/radec", data)              
          }
      })
      
      $("#coordinates-stop").on("click", function(){
          $(this).crud("DELETE", "/api/telescope/coordinates/movement")
      })
      
      
      /// Dome
      
      $("#dome-move").on("click", function(){
          var data = $("#dome-azimuth").val()
          $(this).crud("POST", "/api/dome/position/movement/azimuth", data)
      })
      
      $("#dome-slaved").on("change", function(){
          var data = $(this).prop("checked")
          $(this).crud("PUT", "/api/dome/position/slaved", data)
      })
      
      $("#dome-stop").on("click", function(){
          $(this).crud("DELETE", "/api/dome/position/movement")
      })
    
      $("#dome-park").on("click", function(){
          $(this).crud("POST", "/api/dome/position/movement/park")
      })
    
      $("#dome-shutter button").on("click", function(){
          console.log("clic")
          var data = $(this).data("send")
          if (data!==undefined)
              $(this).crud("POST", "/api/dome/shutter/movement", data)
      })
      
      $("#dome-light").on("click", function(){
          $(this).crud("GET", "/api/dome/light").then(function(e){
              $(this).crud("PUT", "/api/dome/light", !e.response)
          })
      })

      /// Camera settings

      function update_subframe(xrange, yrange, binning) {
          if (binning)
              $("#binning").val(binning[0])
          
          $("#x0").val(xrange[0])
          $("#xf").val(xrange[1])
          $("#y0").val(yrange[0])
          $("#yf").val(yrange[1])
          
      }

      $("#binning").on("change", function(){
          var data = $(this).val()
          $(this).crud("PUT", "/api/camera/frame/binning", [data, data]).then(function(b){
              var binning = b.response
              $(this).crud("GET", "/api/camera/frame").then(function(e){
                  var frame = e.response
                  update_subframe(frame.xrange, frame.yrange, binning)
              })
          })
      })

      $("#frame-full").on("click", function(){
          $(this).crud("PUT", "/api/camera/frame/full").then(function(e){
              var frame = e.response
              update_subframe(frame.xrange, frame.yrange)
          })
      })

      $("#frame-half").on("click", function(){
          $(this).crud("PUT", "/api/camera/frame/half").then(function(e){
              var frame = e.response
              update_subframe(frame.xrange, frame.yrange)
          })
      })

      $("#frame-small").on("click", function(){
          $(this).crud("PUT", "/api/camera/frame/small").then(function(e){
              var frame = e.response
              update_subframe(frame.xrange, frame.yrange)
          })
      })

      var exp_value
      $("#frametyp").on("load, change", function(){
          var frametyp = $(this).val()
          if (frametyp=="Bias") {
              exp_value = $("#exptime").val()
              $("#exptime").val(0).prop("disabled", true)
          } else {
              $("#exptime").val(exp_value).prop("disabled", false)
          }
      })

      // $("#filter").on("change", function(){
      //     var data = $(this).val()
      //     $(this).crud("POST", "/api/camera/filter/movement", data)
      // })
      
      /// Camera controls

      $("#camera-start").on("click", function(){
          var data = {
              "frametype": $("#frametyp").val(),
              "filter": $("#filter").val(),
              "exptime": Number($("#exptime").val()),
              "repeat": Number($("#repeat").val()),
          }
          console.log(data)
          $(this).crud("POST", "/api/camera/snapshot/acquisition", data)
      })

      $("#camera-stop").on("click", function(){
           $(this).crud("DELETE", "/api/camera/snapshot/acquisition")
      })

      // $("#camera-stop").on("click", function(){
      //     $(this).crud("DELETE", "/api/camera/snapshot/acquisition")
      // })

    </script>




</section>

{% endblock content %}