{% if not included %}

{% extends 'index.html' %}
{% block title %}
Webcam
{% endblock title %}


{% block header %}
<h2>Webcam</h2>
Test without header
{% endblock header %}


{% endif %}

{% set included = True %}

{% block content %}

<form id="webcam" class="form mt-2 row">
  
  <div class="col">
    
    <figure class="card">
      <img id="webcam-snapshot" class="card-img-top"
           src="/web/webcam/stream" alt="webcam stream">
      <figcaption class="card-body">
        <h5 class="card-title">Dome Webcam</h5>
        
        <div class="row">
          <div class="col">
            <div class="input-group">
              <button id="webcam-dome-light" class="btn btn-outline-primary" type="button">
                Lamp
              </button>
              <span class="input-group-text">
                <span class="badge border text-muted">test</span>
              </span>
            </div>
          </div>
          <div class="col-auto">
            <div id="webcam-preset">
              <button data-altaz="[15,170]" type="button" class="btn btn-primary">
                Reset
              </button>
              <button data-altaz="[55,170]" type="button" class="btn btn-primary">
                Look top
              </button>
            </div>
          </div>
        </div>
        

        <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>

</form>

<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)
  })

  $("#webcam-dome-light").on("click", function(){
      $(this).crud("GET", "/api/dome/light").then(function(e){
          $(this).crud("PUT", "/api/dome/light", !e.response)
      })
  })

</script>

{% endblock content %}


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