From 1b94e29721e1cf4cfa3d8880f7a2e9a8dbe577cc Mon Sep 17 00:00:00 2001
From: jamesread <contact@jwread.com>
Date: Mon, 15 Nov 2021 21:56:39 +0000
Subject: [PATCH] #17 Fixing UI after change to Autonomous Custom Elements

---
 webui/index.html         |  6 ++--
 webui/js/ActionButton.js | 29 +++++++------------
 webui/js/marshaller.js   |  4 +--
 webui/main.js            | 12 ++++----
 webui/style.css          | 62 ++++++++++++++++++----------------------
 5 files changed, 49 insertions(+), 64 deletions(-)
diff --git a/webui/index.html b/webui/index.html
index 46eaf54..d43d3b9 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -12,7 +12,7 @@
 
 	<body>
 		<main title = "main content">
-			<fieldset id = "switcher">
+			<fieldset id = "sectionSwitcher">
 				<button id = "showActions">Actions</button>
 				<button id = "showLogs">Logs</button>
 			</fieldset>
@@ -51,7 +51,7 @@
 		</footer>
 
 		<template id = "tplArgumentForm">
-			<form>
+			<form class = "actionArguments">
 				<div class = "wrapper">
 					<div>
 						<span class = "icon" role = "icon"></span>
@@ -70,7 +70,7 @@
 
 		<template id = "tplActionButton">
 			<button>
-				<span role = "img" title = "button icon" class = "icon">&#x1f4a9;</span>
+				<span role = "icon" title = "button icon" class = "icon">&#x1f4a9;</span>
 				<p role = "title" class = "title">Untitled Button</p>
 			</button>
 		</template>
diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js
index 4b40fb5..f07da45 100644
--- a/webui/js/ActionButton.js
+++ b/webui/js/ActionButton.js
@@ -7,21 +7,19 @@ class ActionButton extends window.HTMLElement {
 
     this.constructDomFromTemplate()
 
-    // DOM Attributes
-    this.btn.title = json.title
-    this.btn.onclick = () => { this.startAction() }
-    
     // Class attributes
-    this.actionCallUrl = window.restBaseUrl + 'StartAction?actionName=' + json.title
     this.temporaryStatusMessage = null
     this.isWaiting = false
     this.actionCallUrl = window.restBaseUrl + 'StartAction'
 
     this.updateFromJson(json)
 
-    this.onclick = () => {
+    // DOM Attributes
+    this.btn.title = json.title
+    this.btn.onclick = () => {
+      console.log(json.arguments)
       if (json.arguments.length > 0) {
-        const frm = document.createElement('form', { is: 'argument-form' })
+        const frm = document.createElement('argument-form')
         frm.setup(json, (args) => {
           this.startAction(args)
         })
@@ -32,15 +30,9 @@ class ActionButton extends window.HTMLElement {
       }
     }
 
-    this.constructTemplate()
-
-    this.updateHtml()
-=======
-
     this.updateFromJson(json)
 
     this.updateDom()
->>>>>>> 40cfb1f (progress so far)
 
     this.setAttribute('id', 'actionButton_' + json.id)
   }
@@ -70,7 +62,7 @@ class ActionButton extends window.HTMLElement {
     }
 
     const startActionArgs = {
-      actionName: this.title,
+      actionName: this.btn.title,
       arguments: actionArgs
     }
 
@@ -105,17 +97,18 @@ class ActionButton extends window.HTMLElement {
   }
 
   onActionResult (cssClass, temporaryStatusMessage) {
+    this.btn.disabled = false
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
     this.updateDom()
     this.btn.classList.add(cssClass)
 
     setTimeout(() => {
       this.btn.classList.remove(cssClass)
-    }, 1000);
+    }, 1000)
   }
 
   onActionError (err) {
-    console.log('callback error', err)
+    console.error('callback error', err)
     this.btn.disabled = false
     this.isWaiting = false
     this.updateDom()
@@ -123,7 +116,7 @@ class ActionButton extends window.HTMLElement {
 
     setTimeout(() => {
       this.btn.classList.remove('actionFailed')
-    }, 1000);
+    }, 1000)
   }
 
   constructDomFromTemplate () {
@@ -143,8 +136,6 @@ class ActionButton extends window.HTMLElement {
   }
 
   updateDom () {
-    console.log(this.querySelector("button"))
-
     if (this.temporaryStatusMessage != null) {
       this.domTitle.innerText = this.temporaryStatusMessage
       this.domTitle.classList.add('temporaryStatusMessage')
diff --git a/webui/js/marshaller.js b/webui/js/marshaller.js
index 1cd502d..b2a9d82 100644
--- a/webui/js/marshaller.js
+++ b/webui/js/marshaller.js
@@ -21,8 +21,8 @@ export function marshalActionButtonsJsonToHtml (json) {
 
   // Remove existing, but stale buttons (that were not updated in this round)
   for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) {
-    if (existingButton.updateIterationTimestamp != currentIterationTimestamp) {
-      existingButton.remove();
+    if (existingButton.updateIterationTimestamp !== currentIterationTimestamp) {
+      existingButton.remove()
     }
   }
 }
diff --git a/webui/main.js b/webui/main.js
index f3dd02d..a28ef52 100644
--- a/webui/main.js
+++ b/webui/main.js
@@ -27,7 +27,7 @@ function fetchGetDashboardComponents () {
   }).then(res => {
     marshalActionButtonsJsonToHtml(res)
   }).catch(err => {
-    showBigError('fetch-buttons', 'getting buttons', err, 'blat')
+    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
   })
 }
 
@@ -39,7 +39,7 @@ function fetchGetLogs () {
   }).then(res => {
     marshalLogsJsonToHtml(res)
   }).catch(err => {
-    showBigError('fetch-buttons', 'getting buttons', err, 'blat')
+    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
   })
 }
 
@@ -62,10 +62,10 @@ function processWebuiSettingsJson (settings) {
     document.querySelector('#availableVersion').hidden = false
   }
 
-  document.querySelector('#switcher').hidden = settings.HideNavigation
+  document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation
 }
 
-function main() {
+function main () {
   setupSections()
 
   window.fetch('webUiSettings.json').then(res => {
@@ -78,8 +78,8 @@ function main() {
 
     window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
   }).catch(err => {
-    showBigError('fetch-webui-settings', 'getting webui settings', err)
+    window.showBigError('fetch-webui-settings', 'getting webui settings', err)
   })
 }
 
-main(); // call self
+main() // call self
diff --git a/webui/style.css b/webui/style.css
index 367428e..7549c0d 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -20,33 +20,6 @@ fieldset#rootGroup {
   border: 0;
 }
 
-fieldset#switcher {
-	border: 0; 
-	text-align: right;
-	margin-bottom: 1em;
-}
-
-fieldset#switcher button {
-	padding: 1em;
-	color: black;
-	display: table-cell;
-	text-align: center;
-	border: 1px solid #999;
-	background-color: white;
-	box-shadow: 0 0 6px 0 #aaa;
-	user-select: none;
-	background-color: white;
-	cursor: pointer;
-}
-
-fieldset#switcher button:first-child{
-	border-radius: 1em 0em 0em 1em;
-}
-
-fieldset#switcher button:last-child{
-	border-radius: 0 1em 1em 0;
-}
-
 table {
   background-color: white;
   border-collapse: collapse;
@@ -69,10 +42,6 @@ tr:hover td {
   background-color: beige;
 }
 
-button.activeSection {
-  font-weight: bold;
-}
-
 legend {
   padding-top: 1em;
 }
@@ -117,6 +86,8 @@ div.entity h2 {
   grid-column: 1 / span all;
 }
 
+/* Buttons */
+
 button,
 input[type="submit"] {
   padding: 1em;
@@ -146,20 +117,43 @@ input[type="submit"]:disabled {
   cursor: not-allowed;
 }
 
-fieldset#switcher {
+fieldset#sectionSwitcher {
   border: 0;
   text-align: right;
   margin-bottom: 1em;
 }
 
-fieldset#switcher button:first-child {
+fieldset#sectionSwitcher button {
+  padding: 1em;
+  color: black;
+  display: table-cell;
+  text-align: center;
+  border: 1px solid #999;
+  background-color: white;
+  box-shadow: 0 0 6px 0 #aaa;
+  user-select: none;
+  cursor: pointer;
+}
+
+fieldset#rootGroup action-button button {
+  width: 100%;
+  height: 100%;
+}
+
+fieldset#sectionSwitcher button:first-child {
   border-radius: 1em 0 0 1em;
 }
 
-fieldset#switcher button:last-child {
+fieldset#sectionSwitcher button:last-child {
   border-radius: 0 1em 1em 0;
 }
 
+button.activeSection {
+  font-weight: bold;
+}
+
+/* Button animations */
+
 .actionFailed {
   animation: kfActionFailed 1s;
 }
