{% extends 'index.html' %}

{% block head %}
<script src="https://d3js.org/d3.v7.min.js"></script>
{% endblock head %}


{% block content %}


<div class="row">
  <!-- <h3>Init</h3> -->


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

    <h5 class="mt-2">Control cut/paste</h5>

    <fieldset class="row mt-2">
      <label class="col-md-2 col col-form-label">
        Back
      </label>

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

    </fieldset>

  </div>

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

    <p><code>data-status</code> Receive the result of the event stream;
    <p><code>data-parameter</code> Mark that it contains a parameter for an action. For example, in input fields, the value of the parameter is the argument of the <code>value</code> attribute.
    <p><code>data-control</code> Trigger an action, normally clicking on buttons.
    <p><code>data-value</code> For all tags that do not have a <code>value</code> attribute.
    <p><strong>Note:</strong> Checkboxes are both buttons and input fields, whose value is the <code>checked</code> property.

  </div>


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


          <fieldset>

        <div class="row mt-2">

          <figure id="chart">
            focus test
          </figure>
          <div class="btn-group col" role="group">
            <button id="show-output" class="btn btn-primary" type="button"
                    >Update</button>
          </div>


      <button id="show-bson" class="btn btn-primary" data-filename="/static/temp.fits">bson test</button>



      <script>

        $("#show-bson").click(function(){
            
            console.log("click");

            $(this).crud("GET", "/api/display/test2",null, false).then(function(e){

                // Parse and display the MessagePack data
                const unpackedData = msgpack.decode(e);
                
                console.log("--------------");                
                console.log(e);
                console.log("--------------");                
                var binaryData = atob(e);
                console.log(binaryData);
                console.log("--------------");                
                var jsonData = JSON.parse(binaryData);
                console.log(jsonData);
                console.log("--------------");
            })

        })

      </script>

      <script>



      $("#show-fits").click(function(){

          console.log("click");
          JS9.Load($(this).data('filename'), params )
          // $.get('fits', function(d){
          //      JS9.Load(d)
          //      //     var blob = new Blob([d], { type: 'image/fits' });
          //      //     JS9.Load(blob)
          //  })
      })















// Initial data
let data = [[1, 2, 3], [11, 22, 33]];

// Set up the initial chart
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const xScale = d3.scaleLinear().range([0, width]);
const yScale = d3.scaleLinear().range([height, 0]);

const line = d3.line()
  .x((d, i) => xScale(data[0][i]))
  .y(d => yScale(d));

const area = d3.area()
  .x((d, i) => xScale(data[0][i]))
  .y0(height)
  .y1(d => yScale(d));

// Set up initial axes
const xAxis = svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + height + ")");

const yAxis = svg.append("g")
  .attr("class", "y-axis");

// Function to update the chart with new data
function updateChart() {
  // Update scales with new data
  xScale.domain(d3.extent(data[0]));
  yScale.domain(d3.extent(data[1]));

  // Update the area below the line
  svg.selectAll(".area").remove(); // Remove existing area
  svg.append("path")
    .datum(data[1])
    .attr("class", "area")
    .attr("d", area)
    .attr("fill", "rgba(70, 130, 180, 0.3)");

  // Update the line path
  svg.selectAll(".line").remove(); // Remove existing line
  svg.append("path")
    .datum(data[1])
    .attr("class", "line")
    .attr("d", line)
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

  // Update the x-axis
  xAxis.call(d3.axisBottom(xScale));

  // Update the y-axis
  yAxis.call(d3.axisLeft(yScale));
}


$("#show-output").on("click", function(){
    $(this).crud("GET", "/api/sequencer/run").then(function(e){
        data[0] = e.response.output[0];
        data[1] = e.response.output[1];
        console.log(data)
        updateChart()
    })
})
          </script>

        </div>

      </fieldset>



  </div>




<script>

</script>


<script>
</script>


{% endblock content %}

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