feature: Tidy up error display, and refresh loop

webui/index.html

@@ -63,7 +63,10 @@
 				<a href = "https://docs.olivetin.app" target = "_new">Documentation</a> |
 				<a href = "https://github.com/OliveTin/OliveTin/issues/new/choose" target = "_new">Raise an issue on GitHub</a> |
 				<span>Version: <span id = "currentVersion">?</span></span> |
-				<span>Server connection: <span id = "serverConnection">?</span></span>
+				<span>Server connection:
+					<span id = "serverConnectionRest">REST</span>,
+					<span id = "serverConnectionWebSocket">WebSocket</span>
+				</span>
 			</p>
 			<p>
 				<a id = "available-version" href = "http://olivetin.app" target = "_blank" hidden>?</a>
@@ -175,18 +178,29 @@
 		  	to at least display a helpful error message if we can't use OliveTin.
 			*/
 			function showBigError (type, friendlyType, message) {
-			  for (const oldError of document.querySelectorAll('div.error').values()) {
+			  clearBigErrors(type)
-				window.old = oldError;
-				oldError.remove();
-			  }
 
 			  console.error('Error ' + type + ': ', message)
 
 			  const domErr = document.createElement('div')
 			  domErr.classList.add('error')
+			  domErr.classList.add(type)
 			  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/err-" + type + ".html' target = 'blank'/>" + type + " error in OliveTin Documentation</a></p>"
 
-			  document.getElementById('root-group').appendChild(domErr)
+			  document.body.prepend(domErr)
+			}
+
+			function clearBigErrors(additionalClass) {
+			  let selector = 'div.error'
+
+		      if (additionalClass != null) {
+				  selector += '.' + additionalClass
+			  }
+
+			  for (const oldError of document.querySelectorAll(selector).values()) {
+				window.old = oldError;
+				oldError.remove();
+			  }
 			}
 		</script>
 
@@ -195,6 +209,5 @@
 		</script>
 
 		<script type = "module" src = "main.js"></script>
-		<script type = "module" src = "js/websocket.js"></script>
 	</body>
 </html>

webui/js/ActionButton.js

@@ -105,7 +105,7 @@ class ActionButton extends window.HTMLElement {
     ).then((json) => {
       // The button used to wait for the action to finish, but now it is fire & forget
     }).catch(err => {
-      this.onActionError(err)
+      btnExecution.onActionError(err)
     })
   }
 

webui/js/marshaller.js

@@ -4,7 +4,7 @@ export function marshalActionButtonsJsonToHtml (json) {
   const currentIterationTimestamp = Date.now()
 
   for (const jsonButton of json.actions) {
-    let htmlButton = document.querySelector('#actionButton_' + jsonButton.id)
+    let htmlButton = document.querySelector('#execution-' + jsonButton.id)
 
     if (htmlButton == null) {
       htmlButton = document.createElement('action-button')

webui/main.js

@@ -24,27 +24,34 @@ function setupSections () {
 
 function refreshLoop () {
   if (window.websocketAvailable) {
-    document.querySelector('#serverConnection').classList.remove('error')
-    document.querySelector('#serverConnection').innerText = 'websocket'
-
     // Websocket updates are streamed live, not updated on a loop.
   } else if (window.restAvailable) {
     // Fallback to rest, but try to reconnect the websocket anyway.
 
     fetchGetDashboardComponents()
-    checkWebsocketConnection()
-
-    document.querySelector('#serverConnection').classList.remove('error')
-    document.querySelector('#serverConnection').innerText = 'rest'
-
     fetchGetLogs()
-  } else {
-    document.querySelector('#serverConnection').innerText = 'disconnected, trying to reconnect...'
-    document.querySelector('#serverConnection').classList.add('error')
 
+    checkWebsocketConnection()
+  } else {
     // Still try to fetch the dashboard, if successfull window.restAvailable = true
     fetchGetDashboardComponents()
   }
+
+  refreshServerConnectionLabel()
+}
+
+function refreshServerConnectionLabel () {
+  if (window.restAvailable) {
+    document.querySelector('#serverConnectionRest').classList.remove('error')
+  } else {
+    document.querySelector('#serverConnectionRest').classList.add('error')
+  }
+
+  if (window.websocketAvailable) {
+    document.querySelector('#serverConnectionWebSocket').classList.remove('error')
+  } else {
+    document.querySelector('#serverConnectionWebSocket').classList.add('error')
+  }
 }
 
 function fetchGetDashboardComponents () {
@@ -53,11 +60,17 @@ function fetchGetDashboardComponents () {
   }).then(res => {
     return res.json()
   }).then(res => {
+    if (!window.restAvailable) {
+      window.clearBigErrors('fetch-buttons')
+    }
+
     window.restAvailable = true
     marshalActionButtonsJsonToHtml(res)
-  }).catch(() => { // err is 1st arg
+
+    refreshServerConnectionLabel() // in-case it changed, update the label quicker
+  }).catch((err) => { // err is 1st arg
     window.restAvailable = false
-    //    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
+    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
   })
 }