fmt: Cleanup terminal code (#381)

* fmt: Clean up OutputTerminal code

* fmt: Clean up OutputTerminal code

webui.dev/js/ExecutionDialog.js

@@ -1,4 +1,5 @@
 import { ActionStatusDisplay } from './ActionStatusDisplay.js'
+import { OutputTerminal } from './OutputTerminal.js'
 
 // This ExecutionDialog is NOT a custom HTML element, but rather just picks up
 // the <dialog /> element out of index.html and just re-uses that - as only
@@ -23,6 +24,7 @@ export class ExecutionDialog {
     this.domExecutionBasics = document.getElementById('execution-dialog-basics')
     this.domExecutionDetails = document.getElementById('execution-dialog-details')
 
+    window.terminal = new OutputTerminal()
     window.terminal.open(this.domOutput)
   }
 
@@ -38,7 +40,7 @@ export class ExecutionDialog {
       this.dlg.classList.add('big')
     }
 
-    window.terminal.fit.fit()
+    window.terminal.fit()
   }
 
   reset () {
@@ -64,7 +66,7 @@ export class ExecutionDialog {
     this.domExecutionDetails.hidden = true
 
     window.terminal.reset()
-    window.terminal.fit.fit()
+    window.terminal.fit()
   }
 
   show (actionButton) {
@@ -113,7 +115,7 @@ export class ExecutionDialog {
   executionTick () {
     this.executionSeconds++
 
-    this.updateDuration(this.executionSeconds + ' seconds ago', '')
+    this.updateDuration(this.executionSeconds + ' seconds', '')
   }
 
   hideEverythingApartFromOutput () {
@@ -198,7 +200,7 @@ export class ExecutionDialog {
 
     window.terminal.reset()
     window.terminal.write(res.logEntry.output, () => {
-      window.terminal.fit.fit()
+      window.terminal.fit()
     })
   }
 

webui.dev/js/OutputTerminal.js

@@ -0,0 +1,30 @@
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+
+export class OutputTerminal {
+  constructor () {
+    this.terminal = new Terminal({
+      convertEol: true
+    })
+
+    const fitAddon = new FitAddon()
+    this.terminal.loadAddon(fitAddon)
+    this.terminal.fit = fitAddon
+  }
+
+  write (out, then) {
+    this.terminal.write(out, then)
+  }
+
+  fit () {
+    this.terminal.fit.fit()
+  }
+
+  open (el) {
+    this.terminal.open(el)
+  }
+
+  reset () {
+    this.terminal.reset()
+  }
+}

webui.dev/js/marshaller.js

@@ -1,7 +1,5 @@
 import './ActionButton.js' // To define action-button
 import { ExecutionDialog } from './ExecutionDialog.js'
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
 import { ActionStatusDisplay } from './ActionStatusDisplay.js'
 
 /**
@@ -11,14 +9,6 @@ export function initMarshaller () {
   window.changeDirectory = changeDirectory
   window.showSection = showSection
 
-  window.terminal = new Terminal({
-    convertEol: true
-  })
-
-  const fitAddon = new FitAddon()
-  window.terminal.loadAddon(fitAddon)
-  window.terminal.fit = fitAddon
-
   window.executionDialog = new ExecutionDialog()
 
   window.logEntries = {}

webui.dev/main.js

@@ -127,6 +127,7 @@ function processWebuiSettingsJson (settings) {
 
 function main () {
   initMarshaller()
+
   setupLogSearchBox()
 
   window.addEventListener('EventConfigChanged', fetchGetDashboardComponents)