Draft ontology menu

js/ui.js

@@ -1,6 +1,7 @@
 import AppState from "./state.js";
 import { changeLightDirection, toggleAmbientOcclusion } from "./utils/environment.js";
 import { resetClipping, addClippingPlane } from "./utils/clipping.js";
+import { traverseOntology } from "./ontology.js";
 
 /**
  * @module UI
@@ -17,7 +18,7 @@ const contentMenuTabs = `
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
+            <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
                 <i class="bi bi-diagram-3 me-1"></i> Contenuti
             </button>
         </li>
@@ -26,7 +27,7 @@ const contentMenuTabs = `
     <!-- Tab panes -->
     <div class="tab-content ps-4 ms-3 overflow-y-auto">
         <div class="tab-pane active p-3 ms-2" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
-        <div class="tab-pane p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+        <div class="tab-pane pt-3" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
     </div>
 `;
 
@@ -219,11 +220,12 @@ function createLightSlider(direction, label, range, step) {
 /**
  * Right-side main menu panel
  * @param {String} triggerId - The menu button id
+ * @param {String} ontologyJsonPath
  */
-function toggleContentMenu(triggerId) {
+function toggleContentMenu(triggerId, ontologyJsonPath) {
     const btn = document.querySelector(`#${triggerId}`);
 
-    btn.addEventListener('click', () => {
+    btn.addEventListener('click', async () => {
         ATON.UI.setSidePanelRight();
         ATON.UI.showSidePanel({header: 'Menu'});
         // Append tabs, then tab panes
@@ -231,11 +233,12 @@ function toggleContentMenu(triggerId) {
         ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
         ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
         buildLayersMenu(AppState.normalizedNodes, ATON.UI.elSidePanel.querySelector('#layer'));
+        buildOntologyMenu(await traverseOntology(ontologyJsonPath), ATON.UI.elSidePanel.querySelector('#content'));
     });
 }
 /**
  * @todo Don't rebuild it every time the side panel is shown...
- * @param {Array} nodes The scenes nodes (IDs and status)
+ * @param {Array} nodes The normalized scene nodes (IDs and status)
  * @param {HTMLElement} sidePanel ATON's side panel element
  */
 function buildLayersMenu(nodes, sidePanel) {
@@ -253,13 +256,13 @@ function buildLayersMenu(nodes, sidePanel) {
 
         const label = document.createElement('label');
         label.className = "form-check-label";
-        label.textContent = node.label;
+        label.textContent = node.id;
         
         menuItem.appendChild(label);
 
         sidePanel.appendChild(menuItem);
         // Will this ever work??
-        menuItem.addEventListener('change', event => toggleNode(node.label, event.target.checked));
+        menuItem.addEventListener('change', event => toggleNode(node.id, event.target.checked));
     }
 
     /**
@@ -269,15 +272,42 @@ function buildLayersMenu(nodes, sidePanel) {
      */
     const toggleNode = (id, status) => {
         ATON.getSceneNode(id).toggle(status);
-        AppState.normalizedNodes.find(n => n.label === id).active = status;
+        AppState.normalizedNodes.find(n => n.id === id).active = status;
     }
 }
 
 /**
- * Initialize required components for scene UI
+ * @see traverseOntology
+ * @param {Object} ontology The traversed ontology object (temp)
+ * @param {HTMLElement} sidePanel ATON's side panel element
  */
-export function initUI() {
+function buildOntologyMenu(ontology, sidePanel) {
+    const list = document.createElement('ul');
+    list.className = 'list-group';
+    const mainNode = document.createElement('li');
+    mainNode.className = 'list-group-item';
+    mainNode.textContent = ontology.ontology;
+    
+    const domainList = document.createElement('ul');
+    domainList.className = 'list-group';
+
+    for(let domain of ontology.domains) {
+        const domainItem = document.createElement('li');
+        domainItem.textContent = domain.label;
+        domainItem.className = 'list-group-item';
+        domainList.appendChild(domainItem);
+    }
+
+    mainNode.appendChild(domainList);
+    list.appendChild(mainNode);
+    sidePanel.appendChild(list);
+}
+/**
+ * Initialize required components for scene UI
+ * @param {String} ontologyJsonPath
+ */
+export async function initUI(ontologyJsonPath) {
     toggleSettingsPanel('settings');
-    toggleContentMenu('menu');
+    toggleContentMenu('menu', ontologyJsonPath);
     toggleClipperBar('#clipper', '#clipper-bar');
 }