Move UI to Stimulus + progress bar

assets/bim.js

@@ -152,8 +152,8 @@ BIM.setupHighligther = async function (model) {
             li.innerHTML = `
                 <ul>
                     <li><strong>Name</strong>: ${testProp['Name'].value}</span>
-                    <li><strong>Type</strong>: ${testProp['ObjectType']?.value}</span>
-                    <li><strong>Tag</strong>: ${testProp['Tag'].value}</li>
+                    <li><strong>Type</strong>: ${testProp['ObjectType']?.value ?? 'N/A'}</span>
+                    <li><strong>Tag</strong>: ${testProp['Tag']?.value ?? 'N/A'}</li>
                 </ul>
             `;
         }

assets/controllers/modal_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ModalController extends Controller {
+    static targets = ['close', 'modal'];
+
+    current(id) {
+        return this.modalTargets.find(m => m.getAttribute('data-id') === id);
+    }
+
+    open() {
+        console.log('Modal: I am triggered...');
+        this.modalTarget.classList.add('is-active');
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+}

assets/controllers/scene_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import UI from '../ui.js';
+//import UI from '../ui.js';
 import BIM from '../bim.js';
 
 /*
@@ -11,19 +11,18 @@ import BIM from '../bim.js';
  *
  * Delete this file or adapt it for your use!
  */
-export default class extends Controller {
-    static targets = ['scene'];
+export default class SceneController extends Controller {
+    static targets = ['scene', 'load', 'building', 'modal'];
 
     connect() {
     }
 
     /**
-     * 
      * @param {Element} container 
      */
     sceneTargetConnected(container) {
-        UI.setScene(container);
-        const model = UI.ifcLoader(container);
+        this.setScene(container);
+        //this.model = this.loadIfc();
         container.ondblclick = () => BIM.activateClipper();
         container.onkeydown = event => {
             console.log(event);
@@ -32,7 +31,31 @@ export default class extends Controller {
             }
         }
     }
+    /**
+     * @param {Element} container 
+     */
+    setScene(container) {
+        BIM.createScene(container);
+    }
 
+    /**
+     * @param {Element} container 
+     * @param {String} btnId 
+     */
+    async loadIfc(event) {
+        this.openModal();
+        const nameInput = this.buildingTarget;
+        let model = null;
+        const files = event.target.files;
+        model = await BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()), files[0].name);
+        // Set a raycaster to select objects
+        BIM.setupHighligther(model);
+        localStorage.setItem('loaded-ifc', files[0].name);
+        nameInput.value = files[0].name.replace('.ifc', '');
+        this.closeModal();
+
+        return model;
+    }
     /**
      * 
      * @param {Event} event 
@@ -40,4 +63,16 @@ export default class extends Controller {
     keyboard(event) {
         console.log(event);
     }
+    /**
+     * @todo Should be handled by ModalController...
+     */
+    openModal() {
+        this.modalTarget.classList.add('is-active');
+    }
+    /**
+     * @todo Should be handled by ModalController...
+     */
+    closeModal() {
+        this.modalTarget.classList.remove('is-active');
+    }
 }

templates/home/index.html.twig

@@ -7,7 +7,7 @@
 {% include 'partials/navbar.html.twig' %}
 
 <div class="columns">
-	<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard">
+	<div class="column is-full" data-controller="scene modal" data-action="keydown->scene#keyboard">
 		<div id="scene" data-scene-target="scene"></div>
 		<div id="ui" data-theme="light" data-controller="form">
 			<aside class="menu ml-4 mt-3" data-controller="clipper">
@@ -17,7 +17,8 @@
 						<input class="file-input"
 							type="file"
 							name="load-ifc"
-							id="load-ifc"
+							data-scene-target="load"
+							data-action="change->scene#loadIfc"
 							accept=".ifc" />
 						<span class="file-cta">
 						<span class="file-icon">
@@ -32,7 +33,7 @@
 					<div class="field has-addons">
 						<div class="control">
 							<input class="input" type="text"
-							placeholder="Nome edificio" data-id="" data-form-target="building">
+							placeholder="Nome edificio" data-id="" data-form-target="building" data-scene-target="building">
 						</div>
 						<div class="control">
 							<button class="button is-primary">
@@ -92,6 +93,15 @@
 				</ul>
 			</aside>
 		</div>
+		<!-- Modale per mostrare barra caricamento IFC -->
+		<div class="modal" data-modal-target="modal" data-scene-target="modal" data-action="loadingIfc@window->modal#open">
+			<div class="modal-background"></div>
+			<div class="modal-content has-background-transparent">
+				<p class="has-text-centered p-5 has-text-white is-size-3">Caricamento...</p>
+				<progress class="progress is-primary" min="10" max="100">1%</progress>
+			</div>
+			<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
+		</div>
 	</div>
 </div>
 {% endblock %}