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

{% block title %}
Webcam
{% endblock title %}

{% endif %}


{% block head %}
{% endblock head %}

{% set included = True %}

{% block content %}

<div id="webcam" class="form mt-2 row">
  
  <div class="col">
    
    <figure class="card">
      <img id="webcam-snapshot" class="card-img-top"
           data-status="webcam-snapshot"
           src="" alt="webcam stream">
      <figcaption class="card-body">
        <h5 class="card-title">Dome Webcam</h5>
        
        <fieldset class="row">

          <div class="col-md col-1 input-group">
            <button class="col btn btn-outline-primary"
                    data-control="dome-light">
              Light
            </button>
            <span class="col-6 input-group-text">
              <var class="w-100 badge border text-bg-success"
                   data-status="dome-light"></var>
            </span>
          </div>
          
          <div class="col-md col-1 input-group">
            <button class="col btn btn-outline-primary"
                    data-control="telescope-lamp">
              Lamp
            </button>
            <span class="col-6 input-group-text">
              <var class="w-100 badge border text-bg-success"
                   data-status="telescope-lamp"></var>
            </span>
          </div>          
          
          <div class="col-auto">
            <div id="webcam-preset">
              <button data-altaz="[15,180]" type="button" class="btn btn-primary">
                Reset
              </button>
              <button data-altaz="[55,170]" type="button" class="btn btn-primary">
                Look top
              </button>
            </div>
          </div>
          
        </fieldset>        
        
        <aside class="row mt-2">

          <label for="webcam-position" class="col-2 col-form-label">Move</label>

          <div class="input-group col">

            <input id="webcam-position" class="form-control" type="number" value="20">
            <span class="input-group-text">
              °
            </span>

            <button type="button" data-sign="+1" data-mode="0" class="btn btn-secondary col-2">
              ↑
            </button>
            <button type="button" data-sign="-1" data-mode="0" class="btn btn-secondary col-2">
              ↓
            </button>
            <button type="button" data-sign="-1" data-mode="1" class="btn btn-secondary col-2">
              ←
            </button>
            <button type="button" data-sign="+1" data-mode="1" class="btn btn-secondary col-2">
              →
            </button>

          </div>
        </aside>

      </figcaption>
    </figure>

  </div>

</div>

<script>

  /// Webcam

  $("#webcam aside button").on("click", function(){

      var delta = $("#webcam-position").val()
      var sign =  $(this).data("sign")
      var alt_or_az = $(this).data("mode")
      $(this).crud("GET", "/api/webcam/position").then(function(e){
          var data = e.response
          data[alt_or_az] += sign*delta
          $(this).crud("PUT", "/api/webcam/position", data)
      })
  })

  $("#webcam-preset button").on("click", function(){
      var data =  $(this).data("altaz")
      console.log(data)
      $(this).crud("PUT", "/api/webcam/position", data)
  })

</script>

{% endblock content %}


{% block footer %}
{% endblock footer %}

