WebSockets: better handle errors in web-based surfaces index

3 files changed, 42 insertions, 25 deletions

diff --git a/share/web_surfaces/css/main.css b/share/web_surfaces/css/main.css
index f4f1360f6e..3b330fa36f 100644
--- a/share/web_surfaces/css/main.css
+++ b/share/web_surfaces/css/main.css
@@ -35,6 +35,21 @@ a:focus, a:hover {
 	text-decoration: underline;
 }
 
+h1, h2 {
+	font-weight: normal;
+}
+
+h1 {
+	font-size: 1.8em;
+	margin: 0 0 2ex 0;
+	padding-bottom: .8ex;
+}
+
+h2 {
+	font-size: 1.3em;
+	margin: 2ex 0 1ex 0;
+}
+
 #top-bar {
 	background: #212a30;
 	padding: 4px;
@@ -49,20 +64,7 @@ a:focus, a:hover {
 	padding: 24px;
 }
 
-#content h1, #content h2 {
-	font-weight: normal;
-}
-
-#content h1 {
-	font-size: 1.8em;
-	margin: 0 0 2ex 0;
-	padding-bottom: .8ex;
-	/*border-bottom: 2px solid #ccc;*/
-}
-
-#content h2 {
-	font-size: 1.3em;
-	margin: 2ex 0 1ex 0;
+#index h2 {
 	border-bottom: 2px solid #ddd;
 }
 
diff --git a/share/web_surfaces/index.html b/share/web_surfaces/index.html
index e5bcfce013..df8726a109 100644
--- a/share/web_surfaces/index.html
+++ b/share/web_surfaces/index.html
@@ -10,14 +10,18 @@
             <img id="logo" src="img/logo.png">
         </div>
         <div id="content">
-            <h1>Available Web Surfaces</h1>
-            <div class="surface-list">
-                <h2>Built-In</h2>
-                <ul id="builtin"></ul>
-            </div>
-            <div class="surface-list">
-                <h2>User</h2>
-                <ul id="user"></ul>
+            <h2 id="loading">Loading...</h2>
+            <pre id="error" style="display:none"></pre>
+            <div id="index" style="display:none">
+                <h1>Available Web Surfaces</h1>
+                <div class="surface-list">
+                    <h2>Built-In</h2>
+                    <ul id="builtin"></ul>
+                </div>
+                <div class="surface-list">
+                    <h2>User</h2>
+                    <ul id="user"></ul>
+                </div>
             </div>
         </div>
         <script src="js/main.js"></script>
diff --git a/share/web_surfaces/js/main.js b/share/web_surfaces/js/main.js
index fad17e3671..9a8e9301a5 100644
--- a/share/web_surfaces/js/main.js
+++ b/share/web_surfaces/js/main.js
@@ -22,6 +22,7 @@
 
     async function fetchIndex (url) {
         const response = await fetch(url);
+        
         if (response.status == 200) {
             return await response.json();
         } else {
@@ -42,6 +43,7 @@
         ['builtin', 'user'].forEach((group) => {
             const ul = document.getElementById(group);
             let models = index[group];
+
             if (models.length > 0) {
                 models.sort((a, b) => a.name.localeCompare(b.name));
                 for (model of models) {
@@ -51,17 +53,26 @@
                 ul.parentNode.style.display = 'none';
             }
         });
+
+        document.getElementById('index').style.display = 'inline';
+    }
+
+    function printError (message) {
+        const error = document.getElementById('error');
+        error.innerHTML = message;
+        error.style.display = 'inline';
     }
 
     async function main () {
         try {
             const indexUrl = `${location.protocol}//${location.host}/${INDEX_RESOURCE}`;
             const index = await fetchIndex (indexUrl);
-            printIndex (index);
+            printIndex(index);
         } catch (err) {
-            const content = document.getElementById('content');
-            content.innerHTML = `<pre>${INDEX_RESOURCE}: ${err.message}</pre>`;
+            printError(`Error loading ${INDEX_RESOURCE}: ${err.message}`);
         }
+
+        document.getElementById('loading').style.display = 'none';
     }
 
     main();