Add Stimulus + basic form

.gitignore

@@ -1,3 +1,4 @@
 *.sql
 *.log
 vendor/
+config.js

controllers/form_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+import API_CONFIG from "../config.js";
+
+/**
+ * @todo Handle errors
+ */
+export default class extends Controller {
+    static targets = [
+        'building',
+        'showBuilding',
+        'buildingName',
+        'buildingForm'
+    ];
+
+    API_BASE = API_CONFIG.dev;
+
+    async submit(event) {
+        event.preventDefault();
+
+        if (event.currentTarget === this.buildingFormTarget) {
+            const options = this.prepare(
+                JSON.stringify({name: this.buildingTarget.value}),
+                'POST'
+            );
+
+            const res = await this.send(
+                `${this.API_BASE}/api/buildings`,
+                options
+            );
+
+            if (res.id) {
+                this.buildingTarget.setAttribute('data-id', res.id);
+                this.showBuildingTarget.classList.remove('is-hidden');
+                this.buildingNameTarget.textContent = res.name;
+            }
+        }
+    }
+
+    prepare(data, method) {
+        return {
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: data,
+            method,
+        }
+    }
+
+    /**
+     * @todo Return Exception on response error
+     * @param {string} endpoint 
+     * @param {object} options 
+     * @returns 
+     */
+    async send(endpoint, options) {
+        return await fetch(endpoint, options)
+            .then(res => res.json())
+            .catch(error => console.log(error));
+    }
+}

css/bim.css

@@ -3,12 +3,12 @@
 
 #scene {
     min-height: 93vh;
-    margin-left: 25vw;
+    margin-left: 20vw;
     overflow: hidden;
 }
 #ui {
     position: absolute;
     top: 3.5rem;
-    max-width: 25vw;
+    max-width: 20vw;
     z-index: 5;
 }

index.html

@@ -8,6 +8,7 @@
     <script type="importmap">
         {
           "imports": {
+            "@hotwired/stimulus": "./vendor/@hotwired/stimulus/dist/stimulus.js",
             "three": "./vendor/three/build/three.module.js",
             "@thatopen/fragments": "./vendor/@thatopen/fragments/dist/index.mjs",
             "web-ifc": "./vendor/web-ifc/web-ifc-api.js",
@@ -34,8 +35,10 @@
 	<div class="columns">
 		<div class="column is-full">
 			<div id="scene"></div>
-			<div id="ui" data-theme="light">
+			<div id="ui" data-theme="light" data-controller="form">
-				<div class="file ml-4 mt-4 is-link">
+				<aside class="menu ml-4 mt-3">
+					<p class="menu-label is-size-6">Progetto</p>
+					<div class="file mt-4 is-link">
 						<label class="file-label">
 							<input class="file-input"
 								type="file"
@@ -50,7 +53,32 @@
 							</span>
 						</label>
 					</div>
-				<aside class="menu ml-4">
+					<form class="form" data-form-target="buildingForm" data-action="submit->form#submit" method="post">
+						<div class="field has-addons">
+							<div class="control">
+								<input class="input" type="text"
+								placeholder="Nome edificio" data-id="" data-form-target="building">
+							</div>
+							<div class="control">
+								<button class="button is-primary">
+									Salva
+									<span class="icon ml-1">
+										<i class="fa fa-save"></i>
+									</span>
+								</button>
+							</div>
+						</div>
+					</form>
+					<div class="is-hidden" data-form-target="showBuilding">
+						<p class="mt-4 p-3 is-size-6 has-background-light">
+							<strong>Edificio:</strong>
+							<span data-form-target="buildingName"></span>
+						</p>
+					</div>
+					<ul class="menu-list ml-4">
+						<li>
+						</li>
+					</ul>
 					<p class="menu-label is-size-6">Proprietà IFC (selezione)</p>
 					<ul class="menu-list">
 						<li id="selected-prop"></li>

main.js

@@ -2,10 +2,20 @@
 
 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();
 });
+
+function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register('form', FormController);
+}

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
     "@thatopen/components": "^2.0.1",
     "@thatopen/components-front": "^2.0.2",
     "@thatopen/fragments": "^2.0.0",

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@lit-labs/ssr-dom-shim@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz#353ce4a76c83fadec272ea5674ede767650762fd"