Added confirmation modal

index.html

@@ -42,7 +42,7 @@
           </div>
           <div class="col">
             <div class="d-grid">
-              <button id="exportBtn" class="btn btn-danger border-0" type="button" disabled>
+              <button id="exportBtnDisclaimer" class="btn btn-danger border-0" type="button" disabled>
                 <img src="./resources/svg/save.svg" alt="">
                 Export schematic
               </button>
@@ -60,6 +60,29 @@
       </div>
     </div>
 
+    <div id="modal" class="modal custom-modal-background fade" tabindex="-1">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <!--
+          <div class="modal-header custom-modal">
+            <h5 id="modalTitle" class="modal-title">modalTitle</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          -->
+          <div id="modalText" class="modal-body">
+            <p>modalText</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            <button id="exportBtn" type="button" class="btn btn-danger">
+            <img src="./resources/svg/save.svg" alt="">
+              Export
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </body>
 
   <script src="./src/vendor/jquery-3.6.0.min.js"></script>

package.json

@@ -22,8 +22,10 @@
   },
   "homepage": "https://github.com/LucasDower/ObjToSchematic#readme",
   "devDependencies": {
+    "@types/bootstrap": "^5.1.1",
     "@types/jquery": "^3.5.6",
     "@types/pngjs": "^6.0.1",
+    "bootstrap": "^5.1.0",
     "electron": "^13.1.4",
     "electron-packager": "^15.2.0",
     "ts-node": "^10.1.0",

src/app_context.ts

@@ -5,6 +5,7 @@ import { Vector3 } from "./vector.js";
 import { Schematic } from "./schematic";
 //const dialog = from 'electron').remote.dialog;
 import remote from "electron";
+import * as bootstrap from "bootstrap";
 
 enum ToastColour {
     RED = "bg-danger",
@@ -21,6 +22,9 @@ export class AppContext {
     private _voxelManager: VoxelManager;
     private _loadedMesh?: Mesh;
 
+    private _toast: bootstrap.Toast;
+    private _modal: bootstrap.Modal;
+
 
     constructor() {     
         this._voxelSize = $("#voxelInput").prop("value");
@@ -33,6 +37,9 @@ export class AppContext {
 
         this._renderer = new Renderer(this._gl);
         this._voxelManager = new VoxelManager(this._voxelSize);
+
+        this._toast = new bootstrap.Toast(<HTMLElement>document.getElementById('toast'), {delay: 3000});
+        this._modal = new bootstrap.Modal(<HTMLElement>document.getElementById('modal'), {});
     }
 
     public load() {
@@ -63,7 +70,7 @@ export class AppContext {
         $('#voxelInput').prop('disabled', false);
         $('#voxelBtn').prop('disabled', false);
         $('#splitBtn').prop('disabled', true);
-        $('#exportBtn').prop('disabled', true);
+        $('#exportBtnDisclaimer').prop('disabled', true);
     
         this._showToast(`Successfully loaded ${file.name}`, ToastColour.GREEN);
     }
@@ -100,12 +107,16 @@ export class AppContext {
         this._renderer.clear();
         this._renderer.registerVoxelMesh(this._voxelManager);
         this._renderer.compile();
-        $('#exportBtn').prop('disabled', false);
+
+        $('#exportBtnDisclaimer').prop('disabled', false);
         $('#splitBtn').prop('disabled', false);
     
-        this._showToast("Note, currently, all blocks are exported as Stone", ToastColour.ORANGE);
+        this._showToast("Voxelised successfully", ToastColour.GREEN);
     }
 
+    public exportDisclaimer() {
+        this._showModal("Warning", "Currently, add blocks in the schematic are exported as Stone blocks.");
+    }
 
     public async export() {
         const {filePath} = await remote.dialog.showSaveDialog({
@@ -145,8 +156,17 @@ export class AppContext {
         $("#toast").addClass(colour);
     
         $("#toastText").html(text);
-        (<any>$("#toast")).toast({ delay: 3000 });
-        (<any>$("#toast")).toast('show');
+        //$("#toast").toast({ delay: 3000 });
+        //$("#toast").toast('show');
+        this._toast.show();
+    }
+
+    private _showModal(title: string, text: string) {
+        $("#modalTitle").html(title);
+        $("#modalText").html(text);
+
+        //$("#modal").modal("show");
+        this._modal.show();
     }
 
 }

src/client.ts

@@ -20,6 +20,10 @@ $("#splitBtn").on("click", () => {
 */
 
 
+$("#exportBtnDisclaimer").on("click", async () => {
+    context.exportDisclaimer();
+});
+
 $("#exportBtn").on("click", async () => {
     context.export();
 });

styles.css

@@ -22,4 +22,14 @@ canvas {
   position:absolute;
   left:10px;
   top:68px;
+}
+
+.custom-modal-background {
+  background-color: rgba(0, 0, 0, .25);
+  backdrop-filter: blur(5px);
+}
+
+.debug {
+  border: 1px;
+  border-color: red;
 }