From 2e014f443c25f7112fea53d0eac48215c50255e5 Mon Sep 17 00:00:00 2001
From: Thomas Krijnen <t.krijnen@gmail.com>
Date: Tue, 7 Jan 2025 10:13:49 +0100
Subject: [PATCH] Add JSON syntax error modal

---
 docs/viewer/index.html | 50 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/docs/viewer/index.html b/docs/viewer/index.html
index 901c844..f5f4e95 100644
--- a/docs/viewer/index.html
+++ b/docs/viewer/index.html
@@ -176,6 +176,28 @@
         input[type=text] {
             padding: 9px 0.5em !important;
         }
+
+        .error-modal {
+            display: none;
+            position: absolute;
+            left: 15vw;
+            right: 15vw;
+            top: 15vw;
+            bottom: 15vw;
+            border: solid 2px red;
+            background-color: #fee;
+            cursor: pointer;
+            font-size: 150%;
+        }
+
+        .error-modal .message {
+            padding: 5vw;
+            display: inline-block;
+        }
+
+        .error-modal .message::before {
+            content: '\26A0 \A0 \A0';
+        }
     </style>
 </head>
 
@@ -207,6 +229,9 @@ <h2>Selection attributes</h2>
             This software is freely available for use, modification, and distribution under the MIT License, provided the original copyright notice and license terms are included.
             <a href="https://github.com/buildingSMART/IFC5-development/">https://github.com/buildingSMART/IFC5-development/</a>
         </div>
+        <div class="error-modal" onclick="document.querySelector('.error-modal').style.display = 'none';">
+            <span class="message"></span>
+        </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
@@ -221,7 +246,16 @@ <h2>Selection attributes</h2>
             if (file) {
                 const reader = new FileReader();
                 reader.onload = function(e) {
-                    addModel(file.name, JSON.parse(e.target.result));
+                    let json = null;
+                    try {
+                        json = JSON.parse(e.target.result);
+                    } catch(e) {
+                        document.querySelector('.error-modal .message').innerHTML = e.message;
+                        document.querySelector('.error-modal').style.display = 'block';
+                    }
+                    if (json) {
+                        addModel(file.name, json);
+                    }
                 };
                 reader.readAsText(file);
             }
@@ -229,10 +263,16 @@ <h2>Selection attributes</h2>
 
         document.querySelector('#urlForm').addEventListener('submit', function(event) {
             event.preventDefault();
-            fetch(event.target.urlInput.value).then(r => r.json()).then((j) => {
-                const name = event.target.urlInput.value.split('/').reverse()[0];
-                addModel(name, j);
-            });
+            fetch(event.target.urlInput.value)
+                .then(r => r.json())
+                .then((j) => {
+                    const name = event.target.urlInput.value.split('/').reverse()[0];
+                    addModel(name, j);
+                })
+                .catch(e => {
+                    document.querySelector('.error-modal .message').innerHTML = e.message;
+                    document.querySelector('.error-modal').style.display = 'block';
+                });
         });
     </script>
 </body>