Added sensible error messages for no module support, or javascript disabled.

webui/index.html

@@ -34,7 +34,12 @@
 				<fieldset id = "rootGroup">
 				</fieldset>
 			</section>
+
+			<noscript>
+				<div class = "error">Sorry, JavaScript is required to use OliveTin.</div>
+			</noscript>
 		</main>
+
 		<footer title = "footer">
 			<p><img title = "application icon" src = "OliveTinLogo.png" height = "1em" class = "logo" /> OliveTin</p>
 			<p>	
@@ -92,6 +97,28 @@
 			</tr>
 		</template>
 
+		<script type = "text/javascript">
+			/** 
+			This is the bootstrap code, which relies on very simple, old javascript
+		  	to at least display a helpful error message if we can't use OliveTin.
+			*/
+			function showBigError (type, friendlyType, message) {
+			  clearInterval(window.buttonInterval)
+
+			  console.error('Error ' + type + ': ', message)
+
+			  const domErr = document.createElement('div')
+			  domErr.classList.add('error')
+			  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>"
+
+			  document.getElementById('rootGroup').appendChild(domErr)
+			}
+		</script>
+
+		<script type = "text/javascript" nomodule>
+			showBigError("js-modules-not-supported", "Sorry, your browser does not support JavaScript modules.", null)
+		</script>
+
 		<script type = "module" src = "main.js"></script>
 	</body>
 </html>

webui/main.js

@@ -2,18 +2,6 @@
 
 import { marshalActionButtonsJsonToHtml, marshalLogsJsonToHtml } from './js/marshaller.js'
 
-function showBigError (type, friendlyType, message) {
-  clearInterval(window.buttonInterval)
-
-  console.error('Error ' + type + ': ', message)
-
-  const domErr = document.createElement('div')
-  domErr.classList.add('error')
-  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>"
-
-  document.getElementById('rootGroup').appendChild(domErr)
-}
-
 function showSection (name) {
   for (const otherName of ['Actions', 'Logs']) {
     document.getElementById('show' + otherName).classList.remove('activeSection')
@@ -77,17 +65,21 @@ function processWebuiSettingsJson (settings) {
   document.querySelector('#switcher').hidden = settings.HideNavigation
 }
 
-setupSections()
+function main() {
+  setupSections()
 
-window.fetch('webUiSettings.json').then(res => {
-  return res.json()
-}).then(res => {
-  processWebuiSettingsJson(res)
+  window.fetch('webUiSettings.json').then(res => {
+    return res.json()
+  }).then(res => {
+    processWebuiSettingsJson(res)
 
-  fetchGetDashboardComponents()
-  fetchGetLogs()
+    fetchGetDashboardComponents()
+    fetchGetLogs()
 
-  window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
-}).catch(err => {
-  showBigError('fetch-webui-settings', 'getting webui settings', err)
-})
+    window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
+  }).catch(err => {
+    showBigError('fetch-webui-settings', 'getting webui settings', err)
+  })
+}
+
+main(); // call self