#17 Fixing UI after change to Autonomous Custom Elements

2025-12-13 09:35:37 +00:00 · 2021-11-15 21:56:39 +00:00
parent fd04922e59
commit 1b94e29721
5 changed files with 49 additions and 64 deletions
--- 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>
--- 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')
--- 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()
    }
  }
 }
--- 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
--- 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;
 }