nicolo/webarchi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move UI to Stimulus + progress bar

Browse Source
This commit is contained in:
Nicolò P 2025-04-07 15:11:25 +02:00
parent 474cb65272
commit 4ac8293d96
4 changed files with 74 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/bim.js
View File

@ -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>
`;
}

18
assets/controllers/modal_controller.js Normal file
View File

@ -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');
}
}

47
assets/controllers/scene_controller.js
View File

@ -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');
}
}

16
templates/home/index.html.twig
View File

@ -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 %}