From 77d91600773ee4e3b518b61eca8212022d762847 Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 21 Jun 2021 00:50:40 -0400
Subject: [PATCH] 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.
---
 .../html/js/entityProperties.js               | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 5c6806653d..0136d99cc4 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -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);