From 274d036f7473fcdfba6313133b49f8532e33d7fd Mon Sep 17 00:00:00 2001
From: James Read <contact@jread.com>
Date: Fri, 9 Aug 2024 20:04:57 +0100
Subject: [PATCH] fmt: Cleanup terminal code (#381)

* fmt: Clean up OutputTerminal code

* fmt: Clean up OutputTerminal code
---
 webui.dev/js/ExecutionDialog.js | 10 ++++++----
 webui.dev/js/OutputTerminal.js  | 30 ++++++++++++++++++++++++++++++
 webui.dev/js/marshaller.js      | 10 ----------
 webui.dev/main.js               |  1 +
 4 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 webui.dev/js/OutputTerminal.js

diff --git a/webui.dev/js/ExecutionDialog.js b/webui.dev/js/ExecutionDialog.js
index 340e8fc..21fe921 100644
--- a/webui.dev/js/ExecutionDialog.js
+++ b/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()
     })
   }
 
diff --git a/webui.dev/js/OutputTerminal.js b/webui.dev/js/OutputTerminal.js
new file mode 100644
index 0000000..6cbafc1
--- /dev/null
+++ b/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()
+  }
+}
diff --git a/webui.dev/js/marshaller.js b/webui.dev/js/marshaller.js
index 2d91a25..b17c7dc 100644
--- a/webui.dev/js/marshaller.js
+++ b/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 = {}
diff --git a/webui.dev/main.js b/webui.dev/main.js
index df3ad57..6b7471d 100644
--- a/webui.dev/main.js
+++ b/webui.dev/main.js
@@ -127,6 +127,7 @@ function processWebuiSettingsJson (settings) {
 
 function main () {
   initMarshaller()
+
   setupLogSearchBox()
 
   window.addEventListener('EventConfigChanged', fetchGetDashboardComponents)