From 8945fcb73b13ffd6db54b6a48ea928bf03ebf499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Tue, 1 Apr 2025 14:53:02 +0200
Subject: [PATCH] Use bootstrap-icons; refactor some JS
---
assets/app.js | 17 ++--------
assets/controllers/form_controller.js | 3 +-
assets/controllers/hello_controller.js | 16 ----------
assets/controllers/scene_controller.js | 43 ++++++++++++++++++++++++++
assets/main.js | 26 ----------------
assets/styles/app.css | 2 +-
composer.lock | 4 +--
importmap.php | 4 +++
templates/home/index.html.twig | 8 ++---
templates/partials/navbar.html.twig | 4 +--
templates/partials/user.html.twig | 16 +++++-----
templates/user/index.html.twig | 4 +--
12 files changed, 69 insertions(+), 78 deletions(-)
delete mode 100644 assets/controllers/hello_controller.js
create mode 100644 assets/controllers/scene_controller.js
delete mode 100644 assets/main.js
diff --git a/assets/app.js b/assets/app.js
index a19e3b5..f614f3a 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -6,19 +6,6 @@ import './bootstrap.js';
* which should already be in your base.html.twig.
*/
import './styles/app.css';
-import UI from './ui.js';
-import BIM from './bim.js';
+import API_CONFIG from "./config.js";
-document.addEventListener('DOMContentLoaded', () => {
- const container = document.querySelector('#scene');
- UI.setScene(container);
- const model = UI.ifcLoader(container);
- container.ondblclick = () => BIM.activateClipper();
- container.onkeydown = event => {
- if (event.code === 'Delete' || event.code === 'Backspace') {
- BIM.deleteClipper();
- }
- }
-});
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+window.API_CONFIG = API_CONFIG;
\ No newline at end of file
diff --git a/assets/controllers/form_controller.js b/assets/controllers/form_controller.js
index 2fbc133..8ce5344 100644
--- a/assets/controllers/form_controller.js
+++ b/assets/controllers/form_controller.js
@@ -1,5 +1,4 @@
import { Controller } from "@hotwired/stimulus"
-import API_CONFIG from "../config.js";
/**
* @todo Handle errors
@@ -12,7 +11,7 @@ export default class extends Controller {
'buildingForm'
];
- API_BASE = API_CONFIG.dev;
+ API_BASE = window.API_CONFIG.dev;
async submit(event) {
event.preventDefault();
diff --git a/assets/controllers/hello_controller.js b/assets/controllers/hello_controller.js
deleted file mode 100644
index e847027..0000000
--- a/assets/controllers/hello_controller.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
- connect() {
- this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
- }
-}
diff --git a/assets/controllers/scene_controller.js b/assets/controllers/scene_controller.js
new file mode 100644
index 0000000..9ab2b7d
--- /dev/null
+++ b/assets/controllers/scene_controller.js
@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+import UI from '../ui.js';
+import BIM from '../bim.js';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+ static targets = ['scene'];
+
+ connect() {
+ }
+
+ /**
+ *
+ * @param {Element} container
+ */
+ sceneTargetConnected(container) {
+ UI.setScene(container);
+ const model = UI.ifcLoader(container);
+ container.ondblclick = () => BIM.activateClipper();
+ container.onkeydown = event => {
+ console.log(event);
+ if (event.code === 'Delete' || event.code === 'Backspace') {
+ BIM.deleteClipper();
+ }
+ }
+ }
+
+ /**
+ *
+ * @param {Event} event
+ */
+ keyboard(event) {
+ console.log(event);
+ }
+}
\ No newline at end of file
diff --git a/assets/main.js b/assets/main.js
deleted file mode 100644
index 42f4c86..0000000
--- a/assets/main.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-import UI from './ui.js';
-import BIM from './bim.js';
-import { Application } from '@hotwired/stimulus';
-import FormController from './controllers/form_controller.js';
-
-document.addEventListener('DOMContentLoaded', () => {
- // Register Stimulus controllers
- initStimulus();
-
- const container = document.querySelector('#scene');
- UI.setScene(container);
- const model = UI.ifcLoader(container);
- container.ondblclick = () => BIM.activateClipper();
- container.onkeydown = event => {
- if (event.code === 'Delete' || event.code === 'Backspace') {
- BIM.deleteClipper();
- }
- }
-});
-
-function initStimulus() {
- window.Stimulus = Application.start();
- Stimulus.register('form', FormController);
-}
\ No newline at end of file
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 65dad17..aca426e 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,4 +1,4 @@
-@import url('../vendor/fontawesome-free/css/all.min.css');
+@import url('../vendor/bootstrap-icons/font/bootstrap-icons.min.css');
@import url('../vendor/bulma/css/bulma.min.css');
#scene {
diff --git a/composer.lock b/composer.lock
index 635e652..de73800 100644
--- a/composer.lock
+++ b/composer.lock
@@ -9886,7 +9886,7 @@
],
"aliases": [],
"minimum-stability": "stable",
- "stability-flags": [],
+ "stability-flags": {},
"prefer-stable": true,
"prefer-lowest": false,
"platform": {
@@ -9894,6 +9894,6 @@
"ext-ctype": "*",
"ext-iconv": "*"
},
- "platform-dev": [],
+ "platform-dev": {},
"plugin-api-version": "2.6.0"
}
diff --git a/importmap.php b/importmap.php
index d8a47bd..0964693 100644
--- a/importmap.php
+++ b/importmap.php
@@ -338,4 +338,8 @@ return [
'@thatopen/components-front' => [
'version' => '2.4.4',
],
+ 'bootstrap-icons/font/bootstrap-icons.min.css' => [
+ 'version' => '1.11.3',
+ 'type' => 'css',
+ ],
];
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
index 72ad11d..b529674 100644
--- a/templates/home/index.html.twig
+++ b/templates/home/index.html.twig
@@ -7,8 +7,8 @@
{% include 'partials/navbar.html.twig' %}
<div class="columns">
- <div class="column is-full">
- <div id="scene"></div>
+ <div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard:prevent">
+ <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">
<p class="menu-label is-size-6">Progetto</p>
@@ -21,7 +21,7 @@
accept=".ifc" />
<span class="file-cta">
<span class="file-icon">
- <i class="fas fa-upload"></i>
+ <i class="bi bi-upload"></i>
</span>
<span class="file-label">Apri file IFC...</span>
</span>
@@ -37,7 +37,7 @@
<button class="button is-primary">
Salva
<span class="icon ml-1">
- <i class="fa fa-save"></i>
+ <i class="bi bi-floppy"></i>
</span>
</button>
</div>
diff --git a/templates/partials/navbar.html.twig b/templates/partials/navbar.html.twig
index 68ff46d..7aca8aa 100644
--- a/templates/partials/navbar.html.twig
+++ b/templates/partials/navbar.html.twig
@@ -2,7 +2,7 @@
<div class="navbar-brand">
<a class="navbar-item" href="/">
<span class="icon mr-2">
- <i class="fas fa-home"></i>
+ <i class="bi bi-house-fill"></i>
</span>
WebArchi
</a>
@@ -15,4 +15,4 @@
</div>
</div>
{% endif %}
-</nav>
\ No newline at end of file
+</nav>
diff --git a/templates/partials/user.html.twig b/templates/partials/user.html.twig
index 237336d..42d5967 100644
--- a/templates/partials/user.html.twig
+++ b/templates/partials/user.html.twig
@@ -2,13 +2,13 @@
<div class="dropdown-trigger" data-action="click->dropdown#toggle">
<a class="button is-primary">
<span class="icon">
- <i class="fa fa-user-circle"></i>
+ <i class="bi bi-person-circle"></i>
</span>
<span class="pl-3">
{{ app.user.useridentifier }}
</span>
<span class="icon">
- <i class="fa fa-caret-down" data-dropdown-target="caret"></i>
+ <i class="bi bi-caret-down-fill" data-dropdown-target="caret"></i>
</span>
</a>
</div>
@@ -16,36 +16,36 @@
<div class="dropdown-content">
<a href="/user" class="dropdown-item">
<span class="icon is-small">
- <i class="fa fa-user"></i>
+ <i class="bi bi-person-fill"></i>
</span>
<span class="pl-2 is-size-6">Profilo</span>
</a>
<a href="/projects" class="dropdown-item">
<span class="icon is-small">
- <i class="fa fa-pen-nib"></i>
+ <i class="bi bi-vector-pen"></i>
</span>
<span class="pl-2 is-size-6">Progetti</span>
</a>
{% if is_granted('ROLE_ADMIN') %}
<a href="/admin" class="dropdown-item">
<span class="icon is-small">
- <i class="fa fa-cogs"></i>
+ <i class="bi bi-gear-fill"></i>
</span>
<span class="pl-2 is-size-6">Admin</span>
</a>
{% endif %}
<a href="https://git.electricmandarine.cloud/nicolo/ifc-web-app/issues" class="dropdown-item">
<span class="icon is-small">
- <i class="fa fa-bug"></i>
+ <i class="bi bi-bug-fill"></i>
</span>
<span class="pl-2 is-size-6">Segnala un bug</span>
</a>
<hr class="dropdown-divider" />
<a href="/logout" class="button is-link is-fullwidth">
<span class="icon is-small">
- <i class="fa fa-sign-out"></i>
+ <i class="bi bi-box-arrow-right"></i>
</span>
<span class="has-text-centered"> Logout</span>
</a>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/user/index.html.twig b/templates/user/index.html.twig
index e87d98e..e39a86c 100644
--- a/templates/user/index.html.twig
+++ b/templates/user/index.html.twig
@@ -11,8 +11,8 @@
<div class="card-content">
<div class="media">
<div class="media-left">
- <span class="icon is-large">
- <i class="fa fa-user-circle fa-2x"></i>
+ <span class="icon is-large is-size-4">
+ <i class="bi bi-person-circle"></i>
</span>
</div>
<div class="media-content">