diff --git a/Dockerfile b/Dockerfile index 8a05ab9..59f1c2e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,6 +4,8 @@ USER 1001 CMD mkdir -p /config /var/www/olivetin/ +CMD dnf install -y iputils && dnf clean all && rm -rf /var/cache/yum # install ping + EXPOSE 1337/tcp EXPOSE 1338/tcp EXPOSE 1339/tcp diff --git a/pkg/grpcApi/utils.go b/pkg/grpcApi/utils.go index 95138cd..46f6b89 100644 --- a/pkg/grpcApi/utils.go +++ b/pkg/grpcApi/utils.go @@ -3,6 +3,7 @@ package grpcApi var emojis = map[string]string { "poop": "💩", "smile": "😀", + "ping": "📡", } func lookupHtmlIcon(keyToLookup string) (string) { diff --git a/webui/OliveTinLogo.png b/webui/OliveTinLogo.png index 64efd1e..cfe1027 100644 Binary files a/webui/OliveTinLogo.png and b/webui/OliveTinLogo.png differ diff --git a/webui/OliveTinLogo.svg b/webui/OliveTinLogo.svg index 052bc52..2f604de 100644 --- a/webui/OliveTinLogo.svg +++ b/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"> image/svg+xml - + diff --git a/webui/index.html b/webui/index.html index eefa134..52cee7d 100644 --- a/webui/index.html +++ b/webui/index.html @@ -19,8 +19,8 @@ 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; + } }