From 4ee2f29dc7d93794da5be74d24d5a49d9545ce87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Bidoul?= Date: Sat, 20 Nov 2021 19:39:07 +0100 Subject: [PATCH] Some UI style --- src/runboat/webui/build.html | 5 +++ src/runboat/webui/builds.html | 8 ++-- src/runboat/webui/runboat-build-element.js | 45 +++++++++++++++++----- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/src/runboat/webui/build.html b/src/runboat/webui/build.html index 034449b..a176aa6 100644 --- a/src/runboat/webui/build.html +++ b/src/runboat/webui/build.html @@ -1,6 +1,11 @@ Runboat build + diff --git a/src/runboat/webui/builds.html b/src/runboat/webui/builds.html index b94cf8f..3ddf23a 100644 --- a/src/runboat/webui/builds.html +++ b/src/runboat/webui/builds.html @@ -2,12 +2,15 @@ Runboat builds @@ -27,8 +30,8 @@ const evtSource = new EventSource(url); evtSource.onmessage = function(event) { var oEvent = JSON.parse(event.data); + var buildElement = document.getElementById(oEvent.build.name); if (oEvent.event == "upd") { - var buildElement = document.getElementById(oEvent.build.name); if (buildElement) { // update event element buildElement.build = oEvent.build; @@ -53,7 +56,6 @@ rowElement.insertBefore(buildElement, rowElement.firstChild); } } else if (oEvent.event == "del") { - const buildElement = document.getElementById(oEvent.build.name); if (buildElement) { buildElement.remove(); } diff --git a/src/runboat/webui/runboat-build-element.js b/src/runboat/webui/runboat-build-element.js index 320b5d5..6c1e77e 100644 --- a/src/runboat/webui/runboat-build-element.js +++ b/src/runboat/webui/runboat-build-element.js @@ -1,4 +1,4 @@ -import {LitElement, html} from 'https://unpkg.com/lit@2.0.2?module'; +import {LitElement, html, css} from 'https://unpkg.com/lit@2.0.2?module'; class RunboatBuildElement extends LitElement { static get properties() { @@ -12,35 +12,60 @@ class RunboatBuildElement extends LitElement { this.build = {}; } + static styles = css` + .build-card { + padding: 0.5em; + width: 15em; + background-color: lightgray; + } + .build-name { + font-size: x-small; + } + .build-status-stopped { + background-color: paleturquoise; + } + .build-status-started { + background-color: palegreen; + } + .build-status-failed { + background-color: palevioletred; + } + p { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + `; + render() { return html` -
-

${this.build.name}

+
+

${this.build.name}

${this.build.repo} ${this.build.pr? html`PR ${this.build.pr} to`:"" } ${this.build.target_branch} +
${this.build.git_commit? html`(${this.build.git_commit.substring(0, 8)})`:"" }

-

Status: ${this.build.status}

-

Logs: - init log +

+ ${this.build.status} + | init log ${this.build.status == "started"? html`| log`:"" } + ${this.build.status == "started"? + html`| 🚪 live`:"" + }

- ${this.build.status == "started"? - html`=> live`:"" - }

-
+
`; }