<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <var id="timestamps"></var>
    <var id="json_diff"  style="border:1px solid red"></var>
    <var id="binary_diff" style="border:1px solid green"></var>
    <canvas id="matrixCanvas" width="500" height="400" style="border:1px solid red"></canvas>
    <canvas id="matrixBinary" width="500" height="400" style="border:1px solid green"></canvas>
    <figure id="d3figure" style="border:1px solid blue"></figure>


    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>

    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"></script>
    
    <button id="get">get</button>
    <button id="put">put</button>
    <var></var>
    
    <script>
      
      if (api_base_url === undefined){     
          var api_base_url = "http://fork.orsa.unige.net:5533"            
      }                                    
                                     
      $.fn.crud = function(type, url, data, log=true) {

          var self = $(this)

          var doing = type+" "+url

          return $.ajax({
              url: api_base_url+url,
              type: type,
              // crossDomain: true,
              //dataType: 'json',
              data: JSON.stringify(data),
              contentType: "application/json",
          })
              .done(function(e){
                  console.log("OK "+doing)

              })

      } // crud

      $('#get').click(function(){

          $(this).crud("GET", "/api/dome/light").then(function(e){
              console.log(e)
          })
      })

      $('#put').click(function(){
          $(this).crud("GET", "/api/dome/light").then(function(e){
              $(this).crud("PUT", "/api/dome/light", !e.response)
              $("var").text(e)
          })
      })





    </script>

</body>
</html>
