Use bootstrap-icons; refactor some JS

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 API_CONFIG from "./config.js";
-import BIM from './bim.js';
 
-document.addEventListener('DOMContentLoaded', () => {
+window.API_CONFIG = API_CONFIG;
-    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! 🎉');

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();

assets/controllers/hello_controller.js

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

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);
+    }
+}

assets/main.js

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

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 {

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"
 }

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',
+   ],
 ];

templates/home/index.html.twig

@@ -7,8 +7,8 @@
 {% include 'partials/navbar.html.twig' %}
 
 <div class="columns">
-	<div class="column is-full">
+	<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard:prevent">
-		<div id="scene"></div>
+		<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>

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>

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,34 +16,34 @@
         <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>

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">
+                        <span class="icon is-large is-size-4">
-                            <i class="fa fa-user-circle fa-2x"></i>
+                            <i class="bi bi-person-circle"></i>
                         </span>
                     </div>
                     <div class="media-content">