feature: OliveTin now relies on websocket, and will show a big error if it isn't available (#323)

* feature: OliveTin now relies on websocket, and will show a big error if it isnt available

* feature: OliveTin now relies on websocket, and will show a big error if it isnt available

webui.dev/js/marshaller.js

@@ -528,3 +528,19 @@ window.addEventListener('popstate', (e) => {
     changeDirectory(e.state.dir)
   }
 })
+
+export 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')
+    document.querySelector('#serverConnectionWebSocket').innerText = 'WebSocket'
+  } else {
+    document.querySelector('#serverConnectionWebSocket').classList.add('error')
+    document.querySelector('#serverConnectionWebSocket').innerText = 'WebSocket Error'
+  }
+}

webui.dev/js/websocket.js

@@ -1,3 +1,7 @@
+import {
+  refreshServerConnectionLabel
+} from './marshaller.js'
+
 window.ws = null
 
 export function checkWebsocketConnection () {
@@ -34,6 +38,8 @@ function websocketOnOpen (evt) {
 
   window.ws.send('monitor')
 
+  refreshServerConnectionLabel()
+
   window.refreshLoop()
 }
 
@@ -58,9 +64,15 @@ function websocketOnMessage (msg) {
 function websocketOnError (err) {
   window.websocketAvailable = false
   window.refreshLoop()
-  console.error(err)
+  console.log(err)
+
+  window.showBigError('ws-connect-error', 'connecting to the websocket', 'Please see your browser console for debugging information.', true)
+
+  refreshServerConnectionLabel()
 }
 
 function websocketOnClose () {
   window.websocketAvailable = false
+
+  refreshServerConnectionLabel()
 }

webui.dev/main.js

@@ -4,7 +4,8 @@ import {
   initMarshaller,
   setupSectionNavigation,
   marshalDashboardComponentsJsonToHtml,
-  marshalLogsJsonToHtml
+  marshalLogsJsonToHtml,
+  refreshServerConnectionLabel
 } from './js/marshaller.js'
 import { checkWebsocketConnection } from './js/websocket.js'
 
@@ -52,20 +53,6 @@ function refreshLoop () {
   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 () {
   window.fetch(window.restBaseUrl + 'GetDashboardComponents', {
     cors: 'cors'