htd-lync/reference/dev/lyncapp/assets/www/js/presetSettings.js

This library is meant to be used to interact with an HTD Lync 12

function createPresetSettingsList() {
  //if (!presets) {
  var html = '<ul><li>';
  html += '  <div class="list-box">';
  html += '    <div class="list-grid list-grid-left">';
  html += '      <div class="list-title">';
  html += '        <span><a href="#" onclick="createNewPreset()">Create New Preset</a></span>';
  html += '      </div>';
  html += '    </div>';
  html += '    <div class="list-grid list-grid-right">';
  html += '      <div class="list-cat">';
  html += '      </div>';
  html += '    </div>';
  html += '  </div>';
  html += '</li>';
  $("#presetSettingsList").html(html);


  if (!systems[systemIdx].presets) {
    return;
  }
  for (i = 0; i < systems[systemIdx].presets.length; i++) {
    console.log(systems[systemIdx].presets[i])
    //  if (zones[i].name !== "None" && zones[i].name !== "" && zones[i].name !== "none") {
    //console.log(zones[i])
    var enabled = "checked";

    html += '<li>';
    html += '  <div class="list-box">';
    html += '    <div class="list-grid list-grid-left-wide">';

    html += '      <div class="list-title">';
    html += '        <span><a href="#" zoneNumber="' + i + '">' + systems[systemIdx].presets[i].name + '</a></span>';
    html += '      </div>';
    html += '    </div>';
    html += '    <div class="list-grid list-grid-right">';

    html += '<div class="both-btn">';
    html += '  <img class="edit-box removePreset" src="images/round-delete-button.png" zone="' + i + '" >';
    html += '  <img class="edit-box editPreset" src="images/settings.png" zone="' + i + '" >';
    html += '</div>';
    //  html += '      <div class="list-volume">';
    //html += makeVolumeDropDown(i);


    html += '      <div class="list-cat">';
    //html += makeSourceDropDownSystemStatus(i);

    html += '      </div>';
    html += '    </div>';
    html += '  </div>';
    html += '</li>';

  }


  //}
  html += "</ul>";
  $("#presetSettingsList").html(html);

  $('#addGroup').click(function() {
    createNewPreset();
  });

  $(".zoneEnabled:input[type=checkbox]").on('change', function() {
    var self = $(this);
    var zone = self.attr("zone") * 1;
    if (self.is(":checked")) {
      //console.log("checkbox  id =" + self.attr("zone") + "is checked ");
      systems[systemIdx].zones[zone].enabled = true;
    } else {
      //console.log("Id = " + self.attr("zone") + "is Unchecked ");
      systems[systemIdx].zones[zone].enabled = false;
    }
    updateData();
  });

  $(".edit-box.goToZoneSettings").on('click', function() {
    var self = $(this);
    var zone = self.attr("zone") * 1;
    goToZoneSettingsPage(zone);
  });

  $(".removePreset").on('click', function() {
    var self = $(this);
    var zone = self.attr("zone") * 1;

    var r = confirm("Are you sure you want to remove this preset?");
    if (r == true) {

    } else {
      return;
    }

    systems[systemIdx].presets.splice(zone, 1);
    updateData();
    createPresetSettingsList();
  });

  $(".editPreset").on('click', function() {
    var self = $(this);
    var preset = self.attr("zone") * 1;
    goToEditPreset(preset);
  });

}


function createNewPreset() {

  var name = prompt("Enter Preset Name", "");

  if (name != null && name != "") {
    goToPresetCreatePage(name);
    newPresetName = name;
  }

}
var newPresetName;

function goToPresetCreatePage(name) {
  console.log("goToPresetCreatePage")
  var html = "<ul id='presetList'>";
  html += '      <li><div class="list-title">';
  html += '        <h2 id="presetName">' + name + '</h2><a href="#" onclick="savePreset()">Save</a>';
  html += '      </div></li>';

  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    if (systems[systemIdx].zones[i].name !== "None" && systems[systemIdx].zones[i].name !== "" && systems[systemIdx].zones[i].name !== "none") {
      //console.log(zones[i])
      var enabled = "";


      var powerState = "active";
      if (systems[systemIdx].zones[i].powerOn == false) {
        powerState = "";
      }

      html += '<li>';

      html += '  <div class="list-box">';
      html += '    <div class="list-grid list-grid-left custom-left-grid">';
      html += '  <label class="switch">';
      html += '    <input type="checkbox" ' + enabled + ' class="zoneEnabled" id="enableZone-' + i + '" zone="' + i + '">';
      html += '    <span class="slider round"></span>';
      html += '  </label>';

      html += '      <div class="list-title">';
      html += '        <span><a href="#" zoneNumber="' + i + '">' + systems[systemIdx].zones[i].appName + '</a></span>';
      html += '      </div>';
      html += '    </div>';
      html += '    </div>';

      html += '  <div class="list-box" id="presetBottom-' + i + '">';
      html += '    <div id="zonePower-' + i + '" class="list-grid list-grid-left zonePower ' + powerState + '" zone="' + i + '">';
      html += '      <div class="list-icon">';
      html += '      </div>';
      html += '      <div class="list-title">';
      //html += '        <span><a href="#" zoneNumber="' + i + '">' + zones[i].appName + '</a></span>';
      html += '      </div>';
      html += '    </div>';

      html += '    <div class="list-grid list-grid-right presetList">';

      html += '      <div class="list-volume">';
      html += makeVolumeDropDownPreset(i);
      html += '      </div>';
      html += makeDNDDropDownPreset(i);
      html += '      <div class="list-cat">';
      html += makeSourceDropDownPreset(i);

      html += '      </div>';
      html += '    </div>';
      html += '  </div>';
      html += '</li>';
      //html += '</li>';

    }
  }
  html += "</ul>";
  $("#presetSettingsList").html(html);

  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    $('#presetBottom-' + i).hide();
  }

  $(".zoneEnabled").on('click', function() {
    var zone = ($(this).attr("zone"));
    var enabled = $('#enableZone-' + zone).is(":checked");
    if (enabled) {
      $('#presetBottom-' + zone).show();
    } else {
      $('#presetBottom-' + zone).hide();
    }
  });

  $(".zonePower").on('click', function() {
    var zone = ($(this).attr("zone"));
    var enabled = $(this).attr("class");
    if (enabled == "list-grid list-grid-left zonePower") {
      $(this).addClass("active");
      $('#DNDDropDownPreset-' + zone).prop('disabled', false);
    } else {
      $(this).removeClass("active");
      $('#DNDDropDownPreset-' + zone).val(0);
      $('#DNDDropDownPreset-' + zone).prop('disabled', "disabled");
    }
  });
}




function goToEditPreset(preset) {
  console.log("goToEditPreset: " + preset)
  var html = "<ul id='presetList'>";
  html += '      <li><div class="list-title">';
  html += '        <h2 id="presetName">' + systems[systemIdx].presets[preset].name + '</h2><a href="#" onclick="saveEditedPreset(' + preset + ')">Save Changes</a>';
  html += '      </div></li>';

  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    if (systems[systemIdx].zones[i].name !== "None" && systems[systemIdx].zones[i].name !== "" && systems[systemIdx].zones[i].name !== "none") {
      //console.log(zones[i])
      var enabled = "";


      var powerState = "active";
      if (systems[systemIdx].zones[i].powerOn == false) {
        powerState = "";
      }

      html += '<li>';

      html += '  <div class="list-box">';
      html += '    <div class="list-grid list-grid-left custom-left-grid">';
      html += '  <label class="switch">';
      html += '    <input type="checkbox" ' + enabled + ' class="zoneEnabled" id="enableZone-' + i + '" zone="' + i + '">';
      html += '    <span class="slider round"></span>';
      html += '  </label>';

      html += '      <div class="list-title">';
      html += '        <span><a href="#" zoneNumber="' + i + '">' + systems[systemIdx].zones[i].appName + '</a></span>';
      html += '      </div>';
      html += '    </div>';
      html += '    </div>';

      html += '  <div class="list-box" id="presetBottom-' + i + '">';
      html += '    <div id="editPresetPowerButton-' + i + '" class="list-grid list-grid-left powerButtonEdit ' + powerState + '" zone="' + i + '">';
      html += '      <div class="list-icon">';
      html += '      </div>';
      html += '      <div class="list-title">';
      //html += '        <span><a href="#" zoneNumber="' + i + '">' + zones[i].appName + '</a></span>';
      html += '      </div>';
      html += '    </div>';
      html += '    <div class="list-grid list-grid-right presetList">';
      html += '      <div class="list-volume">';
      html += makeVolumeDropDownPreset(i);
      html += '      </div>';
      html += makeDNDDropDownPreset(i);
      html += '      <div class="list-cat">';
      html += makeSourceDropDownPreset(i);

      html += '      </div>';
      html += '    </div>';
      html += '  </div>';
      html += '</li>';


      html += '</li>';

    }
  }
  html += "</ul>";
  $("#presetSettingsList").html(html);

  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    $('#presetBottom-' + i).hide();
  }

  for (var i = 0; i < systems[systemIdx].presets[preset].zones.length; i++) {

    var zone = systems[systemIdx].presets[preset].zones[i];
    $('#presetBottom-' + zone.zone).show();
    $('#enableZone-' + zone.zone).attr("checked", true);
    if (zone.powerOn == true) {
      $('#editPresetPowerButton-' + zone.zone).addClass("active");
    } else if (zone.powerOn == false) {
      $('#editPresetPowerButton-' + zone.zone).removeClass("active");

    }

    $('#sourceDropDownPreset-' + zone.zone).val(zone.source);
    $('#volumeDropDownPreset-' + zone.zone).val(zone.vol);
    $('#DNDDropDownPreset-' + zone.zone).val(zone.dnd);
  }

  $(".zoneEnabled").on('click', function() {
    var zone = ($(this).attr("zone"));
    var enabled = $('#enableZone-' + zone).is(":checked");
    if (enabled) {
      $('#presetBottom-' + zone).show();
    } else {
      $('#presetBottom-' + zone).hide();
    }
  });

  $(".powerButtonEdit").on('click', function() {
    var zone = ($(this).attr("zone"));
    var enabled = $(this).attr("class");
    if (enabled == "list-grid list-grid-left powerButtonEdit") {
      $(this).addClass("active");
      $('#DNDDropDownPreset-' + zone).prop('disabled', false);
    } else {
      $(this).removeClass("active");
      $('#DNDDropDownPreset-' + zone).val(0);
      $('#DNDDropDownPreset-' + zone).prop('disabled', "disabled");
    }
  });

  $("#presetName").on('click', function() {
    var newName = prompt("Change Preset Name", systems[systemIdx].presets[preset].name);
    systems[systemIdx].presets[preset].name = newName;
    $('#presetName').text(newName);
    updateData();
  });

}


function makeSourceDropDownPreset(zone) {
  var html = '<select class="dropBtnSourceForPreset" id="sourceDropDownPreset-' + zone + '"  zone="' + zone + '">'

  for (var i = 0; i <= systems[systemIdx].sources.length; i++) {
    if (systems[systemIdx].sources[i] && systems[systemIdx].sources[i].name && systems[systemIdx].sources[i].enabled) {
      if (systems[systemIdx].zones[zone].source == i) {
        html += '<option value="' + i + '" selected>' + systems[systemIdx].sources[i].appName + '</option>';
      } else {
        html += '<option value="' + i + '">' + systems[systemIdx].sources[i].appName + '</option>';
      }
    }
  }
  html += "</select>";
  return html;
}

function makeDNDDropDownPreset(zone) {
  var html = '<select class="dropBtnDNDForPreset" id="DNDDropDownPreset-' + zone + '"  zone="' + zone + '">'

  html += '<option value="' + 0 + '" selected>DND Off</option>';
  html += '<option value="' + 1 + '" >DND On</option>';
  html += "</select>";
  return html;
}


function makeVolumeDropDownPreset(zone) {
  var html = '<select class="dropBtnPreset" id="volumeDropDownPreset-' + zone + '" zone="' + zone + '">'
  html += '<option value="0">Mute</option>'
  for (var i = 1; i <= 60; i++) {
    if (systems[systemIdx].zones[zone].vol == i) {
      html += '<option value="' + i + '" selected >' + i + '</option>';
    } else {
      html += '<option value="' + i + '">' + i + '</option>';
    }
  }
  html += "</select>";
  return html;

}

function savePreset() {
  var presetZones = [];
  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    var enabled = $('#enableZone-' + i).is(":checked");
    if (enabled == true) {
      //get the values
      var power = $('#zonePower-' + i).attr('class');
      var powerOn;
      if (power == "list-grid list-grid-left zonePower active") {
        powerOn = true;
      } else {
        powerOn = false;
      }

      var source = $('#sourceDropDownPreset-' + i).val();
      var volume = $('#volumeDropDownPreset-' + i).val();
      var dnd = $('#DNDDropDownPreset-' + i).val();
      if (powerOn == false) {
        dnd = 0;
      }
      var zone = {
        zone: i,
        powerOn: powerOn,
        source: source,
        vol: volume,
        dnd: dnd
      }
      presetZones.push(zone);
    }
  }

  var preset = {
    name: newPresetName,
    zones: presetZones
  }
  console.log(preset);
  if (!systems[systemIdx].presets) {
    systems[systemIdx].presets = [];
  }
  systems[systemIdx].presets.push(preset);
  updateData();
  goToPresetSettingsPage();
}

function saveEditedPreset(oldPreset) {
  //console.log(JSON.stringify(presets))
  systems[systemIdx].presets.splice(oldPreset, 1);
  console.log("save edited preset: " + oldPreset)
  var presetZones = [];
  for (i = 1; i < systems[systemIdx].zones.length; i++) {
    var enabled = $('#enableZone-' + i).is(":checked");
    //console.log(i, enabled);
    if (enabled == true) {
      //get the values
      var power = $('#editPresetPowerButton-' + i).attr('class');
      var powerOn;
      //console.log(power);
      if (power == "list-grid list-grid-left powerButtonEdit active") {
        powerOn = true;
      } else {
        powerOn = false;
      }

      var source = $('#sourceDropDownPreset-' + i).val();
      var volume = $('#volumeDropDownPreset-' + i).val();
      var dnd = $('#DNDDropDownPreset-' + i).val();
      if (powerOn == false) {
        dnd = 0;
      }
      var zone = {
        zone: i,
        powerOn: powerOn,
        source: source,
        vol: volume,
        dnd: dnd
      }
      presetZones.push(zone);
    }
  }

  var preset = {
    name: $('#presetName').text(),
    zones: presetZones
  }
  console.log("new preset:")
  if (!systems[systemIdx].presets) {
    systems[systemIdx].presets = [];
  }
  systems[systemIdx].presets.push(preset);
  updateData();
  goToPresetSettingsPage();
}

function editPreset(preset) {
  goToPresetCreatePage();
  console.log(systems[systemIdx].presets[preset])
  $('#presetName').text(systems[systemIdx].presets[preset].name);
  for (i = 0; i < systems[systemIdx].presets[preset].zones.length; i++) {
    var zone = (systems[systemIdx].presets[preset].zones[i]);
    console.log(zone);

    $('#enableZone-' + zone.zone).attr("checked", true)
    if (zone.powerOn == true) {
      $('#zonePower-' + zone.zone).addClass("active");
    }
    $('#sourceDropDownPreset-' + zone.zone).val(zone.source);
    $('#volumeDropDownPreset-' + zone.zone).val(zone.vol);
  }
}

function saveChangesPreset() {

}