webui provides better diagnostics, logo was too thin

webui/OliveTinLogo.svg

@@ -13,7 +13,10 @@
    version="1.1"
    id="svg8"
    inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="OliveTinLogo.svg">
+   sodipodi:docname="OliveTinLogo.svg"
+   inkscape:export-filename="/home/xconspirisist/sandbox/OliveTin/webui/OliveTinLogo.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
   <defs
      id="defs2" />
   <sodipodi:namedview
@@ -31,9 +34,9 @@
      inkscape:document-rotation="0"
      showgrid="false"
      inkscape:pagecheckerboard="true"
-     inkscape:window-width="1920"
+     inkscape:window-width="1600"
-     inkscape:window-height="1080"
+     inkscape:window-height="1200"
-     inkscape:window-x="1600"
+     inkscape:window-x="3520"
      inkscape:window-y="1080"
      inkscape:window-maximized="1" />
   <metadata
@@ -44,7 +47,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>

webui/index.html

@@ -19,8 +19,8 @@
 		</footer>
 
 		<template id = "tplActionButton">
-			<p class = "title">Untitled Button</p>
 			<p><span class = "icon">&#x1f4a9;</span></p>
+			<p role = "title" class = "title">Untitled Button</p>
 		</template>
 
 		<script type = "module" src = "main.js"></script>

webui/js/ActionButton.js

@@ -3,6 +3,7 @@ class ActionButton extends window.HTMLButtonElement {
     this.title = json.title
     this.states = []
     this.stateLabels = []
+    this.temporaryStatusMessage = null
     this.currentState = 0
     this.isWaiting = false
     this.actionCallUrl = window.restBaseUrl + 'StartAction?actionName=' + this.title
@@ -25,26 +26,22 @@ class ActionButton extends window.HTMLButtonElement {
     this.updateHtml()
     this.classList = [] // Removes old animation classes
 
-    window.fetch(this.actionCallUrl).then(res => {
+    window.fetch(this.actionCallUrl).then(res => res.json()
-      if (!res.ok) {
+    ).then((json) => {
-        return res.json()
-      }
-    }).then(json => {
       if (json.timedOut) {
-        this.onActionResult('actionTimedOut')
+        this.onActionResult('actionTimeout', "Timed out")
       } else if (json.exitCode != 0) {
-        this.onActionResult('actionNonZeroExit')
+        this.onActionResult('actionNonZeroExit', "Exit code " + json.exitCode)
       } else {
-        this.onActionResult('actionSuccess')
+        this.onActionResult('actionSuccess', "Success!")
       }
     }).catch(err => {
       this.onActionError(err)
     })
   }
 
-  onActionResult (cssClass) {
+  onActionResult (cssClass, temporaryStatusMessage) {
-    this.disabled = false
+    this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
-    this.isWaiting = false
     this.updateHtml()
     this.classList.add(cssClass)
   }
@@ -73,7 +70,18 @@ class ActionButton extends window.HTMLButtonElement {
   }
 
   updateHtml () {
-    if (this.isWaiting) {
+    if (this.temporaryStatusMessage != null) {
+      this.domTitle.innerText = this.temporaryStatusMessage
+      this.domTitle.classList.add('temporaryStatusMessage')
+      this.isWaiting = false
+      this.disabled = false
+
+      setTimeout(() => { 
+        this.temporaryStatusMessage = null
+        this.domTitle.classList.remove('temporaryStatusMessage')
+        this.updateHtml() 
+      }, 2000)
+    } else if (this.isWaiting) {
       this.domTitle.innerText = 'Waiting...'
     } else {
       this.domTitle.innerText = this.title

webui/style.css

@@ -1,5 +1,5 @@
 body {
-	background-color: #efefef;
+	background-color: #dee3e7;
 	color: black;
 	text-align: center;
 	font-family: sans-serif;
@@ -21,8 +21,12 @@ body {
 	padding: 1em;
 }
 
+.title.temporaryStatusMessage {
+	color: gray;
+}
+
 div.entity {
-	background-color: #222;
+	background-color: white;
 	box-shadow: 0 0 10px 0 #444;
 	display: grid;
 	grid-column: auto / span 2;
@@ -41,15 +45,11 @@ button {
 	display: table-cell;
 	text-align: center;
 	border: 1px solid #999;
-	background-color: #dee3e7;
+	background-color: white;
 	box-shadow: 0 0 6px 0 #aaa;
 	user-select: none;
 }
 
-button.good {
-	background-color: limegreen;
-}
-
 button:hover {
 	box-shadow: 0 0 10px 0 #666;
 	cursor: pointer;
@@ -57,7 +57,7 @@ button:hover {
 
 button:disabled {
 	color: gray;
-	background-color: black;
+	background-color: #333;
 	cursor: not-allowed;
 }
 
@@ -81,7 +81,7 @@ span.icon {
 
 @keyframes kfActionSuccess {
 	0% { background-color: black; }
-	20% { background-color: green; }
+	20% { background-color: limegreen; }
 	0% { background-color: inherit; }
 }
 
@@ -91,7 +91,7 @@ span.icon {
 
 @keyframes kfActionNonZeroExit {
 	0% { background-color: black; }
-	20% { background-color: blue; }
+	20% { background-color: orange; }
 	0% { background-color: inherit; }
 }
 
@@ -119,7 +119,6 @@ img.logo {
 @media (max-width: 320px) {
 	.group {
 		grid-template-columns: auto;
-		background-color: red;
 		grid-gap: 0;
 		padding: 0;
 	}
@@ -137,4 +136,8 @@ img.logo {
 		box-shadow: 0 0 6px 0 #444;
 		color: white;
 	}
+
+	button:disabled {
+		background-color: black;
+	}
 }