Add a new Zone Selector HDM compliant

Add a new Zone Selector HDM compliant for renderWithZones.
The previous selector wasn't usable in HMD and it was pratically the last component 
that forced us to remove our headset to complete the task.
This commit is contained in:
Alezia Kurdis 2021-06-21 00:50:40 -04:00 committed by GitHub
parent 1c2ea1571c
commit 77d9160077
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -3695,20 +3695,20 @@ function requestZoneList() {
}));
}
function addZoneToZonesSelection(propertyId) {
function addZoneToZonesSelection(propertyId, id) {
let hiddenField = document.getElementById(propertyId);
if (JSON.stringify(hiddenField.value) === '"undefined"') {
hiddenField.value = "[]";
}
let selectedZones = JSON.parse(hiddenField.value);
let zoneToAdd = document.getElementById("zones-select-" + propertyId).value;
if (!selectedZones.includes(zoneToAdd)) {
selectedZones.push(zoneToAdd);
if (!selectedZones.includes(id)) {
selectedZones.push(id);
}
hiddenField.value = JSON.stringify(selectedZones);
displaySelectedZones(propertyId, true);
let propertyName = propertyId.replace("property-", "");
updateProperty(propertyName, selectedZones, false);
document.getElementById("zones-select-selector-list-panel-" + propertyId).style.display = "none";
}
function removeZoneFromZonesSelection(propertyId, zoneId) {
@ -3798,7 +3798,12 @@ function createZonesSelection(property, elProperty) {
function setZonesSelectionData(element, isEditable) {
let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'><select class = 'zoneSelect' id='zones-select-" + element.id + "' >";
let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'>";
zoneSelector += "<input type='button' value = 'Add a zone' class='secondary' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "block" + '"' + ";'>";
zoneSelector += "<div class = 'zoneSelectorListPanel' id='zones-select-selector-list-panel-" + element.id + "'>";
zoneSelector += "<div class='zoneSelectListHeader'>Select the Zone to add: </div>";
zoneSelector += "<div class='zoneSelectList' id = 'zones-select-selector-list-" + element.id + "'>";
let i, name;
for (i = 0; i < zonesList.length; i++) {
if (zonesList[i].name === "") {
@ -3806,28 +3811,34 @@ function setZonesSelectionData(element, isEditable) {
} else {
name = zonesList[i].name;
}
zoneSelector += "<option value='" + zonesList[i].id + "'>" + name + "</option>";
zoneSelector += "<button class='menu-button' onClick='addZoneToZonesSelection(";
zoneSelector += '"' + element.id + '"' + ", " + '"' + zonesList[i].id + '"' + ");'>" + name + "</button><br>";
}
zoneSelector += "</select>&nbsp;<a href='#' id='zones-select-add-" + element.id + "' onClick='addZoneToZonesSelection(" + '"' + element.id + '"' + ");' >";
zoneSelector += "<img style='vertical-align:top' src='../../../html/css/img/add_icon.png'></a></div>";
zoneSelector += "</div>";
zoneSelector += "<div class='zoneSelectListFooter'>";
zoneSelector += "<input type='button' value = 'Cancel' class='normal' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "none" + '"' + ";'>";
zoneSelector += "</div></div></div>";
zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";
zoneSelectorContainer.innerHTML = zoneSelector;
displaySelectedZones(element.id, isEditable);
}
function updateAllZoneSelect() {
let allZoneSelects = document.querySelectorAll(".zoneSelect");
let i, j, name, propId;
let allZoneSelects = document.querySelectorAll(".zoneSelectList");
let i, j, name, propId, btnList;
for (i = 0; i < allZoneSelects.length; i++) {
allZoneSelects[i].options.length = 0;
btnList = "";
for (j = 0; j < zonesList.length; j++) {
if (zonesList[j].name === "") {
name = zonesList[j].id;
} else {
name = zonesList[j].name;
}
allZoneSelects[i].options[j] = new Option(name, zonesList[j].id, false , false);
btnList += "<button class='menu-button' onClick='addZoneToZonesSelection(";
btnList += '"' + element.id + '"' + ", " + '"' + zonesList[j].id + '"' + ");'>" + name + "</button><br>";
}
allZoneSelects[i].innerHTML = btnList;
propId = allZoneSelects[i].id.replace("zones-select-", "");
if (document.getElementById("multiZoneSelTools-" + propId).style.display === "block") {
displaySelectedZones(propId, true);