Untitled Button
💩
+Untitled Button
diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js index 5211b74..1995148 100644 --- a/webui/js/ActionButton.js +++ b/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 => { - if (!res.ok) { - return res.json() - } - }).then(json => { + window.fetch(this.actionCallUrl).then(res => 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) { - this.disabled = false - this.isWaiting = false + onActionResult (cssClass, temporaryStatusMessage) { + this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]' 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 diff --git a/webui/style.css b/webui/style.css index 118ab7a..b67e631 100644 --- a/webui/style.css +++ b/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; + } }