Bringing up to date with head

webui/index.html

@@ -51,24 +51,28 @@
 		</footer>
 
 		<template id = "tplArgumentForm">
-			<div class = "wrapper">
+			<form>
-				<div>
+				<div class = "wrapper">
-					<span class = "icon" role = "icon"></span>
+					<div>
-					<h2>Argument form</h2>
+						<span class = "icon" role = "icon"></span>
-				</div>
+						<h2>Argument form</h2>
+					</div>
 
-				<div class = "arguments"></div>
+					<div class = "arguments"></div>
 
-				<div class = "buttons">
+					<div class = "buttons">
-					<input name = "start" type = "submit" value = "Start">
+						<input name = "start" type = "submit" value = "Start">
-					<button name = "cancel">Cancel</button>
+						<button name = "cancel">Cancel</button>
+					</div>
 				</div>
-			</div>
+			<form>
 		</template>
 
 		<template id = "tplActionButton">
-			<span role = "icon" title = "button icon" class = "icon">&#x1f4a9;</span>
+			<button>
-			<p role = "title" class = "title">Untitled Button</p>
+				<span role = "img" title = "button icon" class = "icon">&#x1f4a9;</span>
+				<p role = "title" class = "title">Untitled Button</p>
+			</button>
 		</template>
 
 		<template id = "tplLogRow">

webui/js/ActionButton.js

@@ -1,11 +1,18 @@
 import { marshalLogsJsonToHtml } from './marshaller.js'
 import './ArgumentForm.js'
 
-class ActionButton extends window.HTMLButtonElement {
+class ActionButton extends window.HTMLElement {
   constructFromJson (json) {
     this.updateIterationTimestamp = 0
 
-    this.title = json.title
+    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'
@@ -28,6 +35,12 @@ class ActionButton extends window.HTMLButtonElement {
     this.constructTemplate()
 
     this.updateHtml()
+=======
+
+    this.updateFromJson(json)
+
+    this.updateDom()
+>>>>>>> 40cfb1f (progress so far)
 
     this.setAttribute('id', 'actionButton_' + json.id)
   }
@@ -47,10 +60,10 @@ class ActionButton extends window.HTMLButtonElement {
   }
 
   startAction (actionArgs) {
-    this.disabled = true
+    this.btn.disabled = true
     this.isWaiting = true
-    this.updateHtml()
+    this.updateDom()
-    this.classList = [] // Removes old animation classes
+    this.btn.classList = [] // Removes old animation classes
 
     if (actionArgs === undefined) {
       actionArgs = []
@@ -93,27 +106,27 @@ class ActionButton extends window.HTMLButtonElement {
 
   onActionResult (cssClass, temporaryStatusMessage) {
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
-    this.updateHtml()
+    this.updateDom()
-    this.classList.add(cssClass)
+    this.btn.classList.add(cssClass)
 
     setTimeout(() => {
-      this.classList.remove(cssClass)
+      this.btn.classList.remove(cssClass)
-    }, 1000)
+    }, 1000);
   }
 
   onActionError (err) {
     console.log('callback error', err)
-    this.disabled = false
+    this.btn.disabled = false
     this.isWaiting = false
-    this.updateHtml()
+    this.updateDom()
-    this.classList.add('actionFailed')
+    this.btn.classList.add('actionFailed')
 
     setTimeout(() => {
-      this.classList.remove('actionFailed')
+      this.btn.classList.remove('actionFailed')
-    }, 1000)
+    }, 1000);
   }
 
-  constructTemplate () {
+  constructDomFromTemplate () {
     const tpl = document.getElementById('tplActionButton')
     const content = tpl.content.cloneNode(true)
 
@@ -124,11 +137,14 @@ class ActionButton extends window.HTMLButtonElement {
 
     this.appendChild(content)
 
-    this.domTitle = this.querySelector('.title')
+    this.btn = this.querySelector('button')
-    this.domIcon = this.querySelector('.icon')
+    this.domTitle = this.btn.querySelector('.title')
+    this.domIcon = this.btn.querySelector('.icon')
   }
 
-  updateHtml () {
+  updateDom () {
+    console.log(this.querySelector("button"))
+
     if (this.temporaryStatusMessage != null) {
       this.domTitle.innerText = this.temporaryStatusMessage
       this.domTitle.classList.add('temporaryStatusMessage')
@@ -138,16 +154,16 @@ class ActionButton extends window.HTMLButtonElement {
       setTimeout(() => {
         this.temporaryStatusMessage = null
         this.domTitle.classList.remove('temporaryStatusMessage')
-        this.updateHtml()
+        this.updateDom()
       }, 2000)
     } else if (this.isWaiting) {
       this.domTitle.innerText = 'Waiting...'
     } else {
-      this.domTitle.innerText = this.title
+      this.domTitle.innerText = this.btn.title
     }
 
     this.domIcon.innerHTML = this.unicodeIcon
   }
 }
 
-window.customElements.define('action-button', ActionButton, { extends: 'button' })
+window.customElements.define('action-button', ActionButton)

webui/js/ArgumentForm.js

@@ -1,5 +1,5 @@
 
-class ArgumentForm extends window.HTMLFormElement {
+class ArgumentForm extends window.HTMLElement {
   setup (json, callback) {
     this.setAttribute('class', 'actionArguments')
 
@@ -140,4 +140,4 @@ class ArgumentForm extends window.HTMLFormElement {
   }
 }
 
-window.customElements.define('argument-form', ArgumentForm, { extends: 'form' })
+window.customElements.define('argument-form', ArgumentForm)

webui/js/marshaller.js

@@ -7,21 +7,22 @@ export function marshalActionButtonsJsonToHtml (json) {
     let htmlButton = document.querySelector('#actionButton_' + jsonButton.id)
 
     if (htmlButton == null) {
-      htmlButton = document.createElement('button', { is: 'action-button' })
+      htmlButton = document.createElement('action-button')
       htmlButton.constructFromJson(jsonButton)
 
       document.getElementById('rootGroup').appendChild(htmlButton)
     } else {
       htmlButton.updateFromJson(jsonButton)
-      htmlButton.updateHtml()
+      htmlButton.updateDom()
     }
 
     htmlButton.updateIterationTimestamp = currentIterationTimestamp
   }
 
-  for (const existingButton of document.querySelector('#contentActions').querySelectorAll('button')) {
+  // Remove existing, but stale buttons (that were not updated in this round)
-    if (existingButton.updateIterationTimestamp !== currentIterationTimestamp) {
+  for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) {
-      existingButton.remove()
+    if (existingButton.updateIterationTimestamp != currentIterationTimestamp) {
+      existingButton.remove();
     }
   }
 }

webui/style.css

@@ -20,6 +20,33 @@ 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;
@@ -94,7 +121,6 @@ button,
 input[type="submit"] {
   padding: 1em;
   color: black;
-  display: table-cell;
   text-align: center;
   border: 1px solid #999;
   background-color: white;