$(document).ready(function() {
   $('#tabs').tabs({
      
   });
   $('#colorwheel').wheelColorPicker();
   $("#btn-refresh-devices").on("click", getDevices);
   getActive();
   getDevices();
});

function setColor() {
   var color = $('#colorwheel').val();
   console.log(color);
   $.ajax({
      url: 'ajax/ajax_setcolor.php',
      data: {color: color}
   });
}

function setPattern(pattern) {
   $.ajax({
      url: 'ajax/ajax_setpattern.php',
      data: {pattern: pattern}
   });
}

function disableAuto() {
   $.ajax({
      url: 'ajax/ajax_disableauto.php'
   });
}

function lightsOff() {
   $.ajax({
      url: 'ajax/ajax_lightsoff.php'
   });
}

function getActive() {
   $.ajax({
      url: 'ajax/ajax_getactive.php',
      dataType: 'text',
      success: function(data, stat, jqo) {
         $("#active-all").removeClass('active');
         $("#active-up").removeClass('active');
         $("#active-down").removeClass('active');
         $("#active-wall").removeClass('active');
         $("#active-cldn").removeClass('active');
         $("#active-post").removeClass('active');
         $("#" + data).addClass('active');
      }
   });
}

function escapeHTML(str) {
   return str.replace(/[<>]/g, function(match) {
      switch (match) {
         case '&': return '&amp;';
         case '<': return '&lt;';
         case '>': return '&gt;';
         default: return match;
      }
   });
}

function getDevices() {
   $.ajax({
      url: 'ajax/getdevices.php',
      dataType: 'json',
      success: function(data, stat, jqo) {
         var div = $("#devices");
         div.html("");
         var html = "";
         data.forEach((device) => {
            html += "<div class='device-container'>";
            html += "<div class='device-property'><span class='device-property-label'>Service:</span>" + escapeHTML(device.service) + "</div>";
            html += "<div class='device-property'><span class='device-property-label'>Label:</span>" + escapeHTML(device.label) + "</div>";
            html += "<div class='device-property'><span class='device-property-label'>Board:</span>" + escapeHTML(device.board) + "</div>";
            html += "<div class='device-property'><span class='device-property-label'>IP Address:</span>" + escapeHTML(device.ipaddress) + "</div>";
            html += "<div class='device-property'><span class='device-property-label'>Last Update:</span>" + escapeHTML(device.lastupdate) + "</div>";
            html += "</div>";
         });
         div.html(html);
      }
   });
}

function setTarget(id) {
   $.ajax({
      url: 'ajax/ajax_settarget.php',
      data: {target: id},
      dataType: 'text',
      success: function(data, stat, jqo) {
         getActive();
      }
   });
}

// vim: ts=3 sw=3 ai: