Add Stimulus + basic form

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,23 +35,50 @@
 	<div class="columns">
 		<div class="column is-full">
 			<div id="scene"></div>
-			<div id="ui" data-theme="light">
-				<div class="file ml-4 mt-4 is-link">
-					<label class="file-label">
-						<input class="file-input"
-							type="file"
-							name="load-ifc"
-							id="load-ifc"
-							accept=".ifc" />
-						<span class="file-cta">
-						<span class="file-icon">
-							<i class="fas fa-upload"></i>
-						</span>
-						<span class="file-label">Apri file IFC...</span>
-						</span>
-					</label>
-				</div>
-				<aside class="menu ml-4">
+			<div id="ui" data-theme="light" data-controller="form">
+				<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"
+								name="load-ifc"
+								id="load-ifc"
+								accept=".ifc" />
+							<span class="file-cta">
+							<span class="file-icon">
+								<i class="fas fa-upload"></i>
+							</span>
+							<span class="file-label">Apri file IFC...</span>
+							</span>
+						</label>
+					</div>
+					<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>