Rebase to main

This commit is contained in:
jamesread 2021-07-16 14:28:26 +01:00
parent ef5e71fa94
commit ef6f772532
6 changed files with 104 additions and 6 deletions

View File

@ -28,6 +28,17 @@ message StartActionResponse {
int32 exitCode = 4;
}
message GetLogsRequest{};
message LogEntry {
string datetime = 1;
string content = 2;
}
message GetLogsResponse {
repeated LogEntry logs = 1;
}
service OliveTinApi {
rpc GetButtons(GetButtonsRequest) returns (GetButtonsResponse) {
option (google.api.http) = {
@ -41,4 +52,10 @@ service OliveTinApi {
};
}
rpc GetLogs(GetLogsRequst) returns (GetLogsResponse) {
option (google.api.http) = {
get: "/api/GetLogs"
}
}
}

View File

@ -12,9 +12,26 @@
<body>
<main title = "main content">
<fieldset id = "rootGroup">
<legend>OliveTin Actions</legend>
<fieldset id = "switcher">
<button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button>
</fieldset>
<section id = "contentLogs" title = "Logs" hidden>
<table>
<tr>
<td>12 seconds ago</td> <td>blat blat <button>Logs</button></td>
</tr>
<tr>
<td>4 seconds ago</td> <td>blat blat foo foo <button>Logs</button></td>
</tr>
</table>
</section>
<section id = "contentActions" title = "Actions" hidden >
<fieldset id = "rootGroup">
</fieldset>
</section>
</main>
<footer title = "footer">
<p><img title = "application icon" src = "OliveTinLogo.png" height = "1em" class = "logo" /> OliveTin</p>

View File

@ -56,6 +56,10 @@ class ActionButton extends window.HTMLButtonElement {
this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
this.updateHtml()
this.classList.add(cssClass)
setTimeout(() => {
this.classList.remove(cssClass)
}, 1000);
}
onActionError (err) {
@ -64,6 +68,10 @@ class ActionButton extends window.HTMLButtonElement {
this.isWaiting = false
this.updateHtml()
this.classList.add('actionFailed')
setTimeout(() => {
this.classList.remove('actionFailed')
}, 1000);
}
constructTemplate () {

View File

@ -20,7 +20,7 @@ export function marshalActionButtonsJsonToHtml (json) {
htmlButton.updateIterationTimestamp = currentIterationTimestamp;
}
for (const existingButton of document.querySelectorAll('button')) {
for (const existingButton of document.querySelector('#contentActions').querySelectorAll('button')) {
if (existingButton.updateIterationTimestamp != currentIterationTimestamp) {
existingButton.remove();
}

View File

@ -14,8 +14,26 @@ function showBigError (type, friendlyType, message) {
document.getElementById('rootGroup').appendChild(domErr)
}
function showSection (name) {
for (let otherName of ["Actions", "Logs"]) {
document.getElementById('show' + otherName).classList.remove('activeSection');
document.getElementById('content' + otherName).hidden = true;
}
document.getElementById('show' + name).classList.add('activeSection')
document.getElementById('content' + name).hidden = false;
}
function setupSections() {
document.getElementById('showActions').onclick = () => { showSection('Actions') };
document.getElementById('showLogs').onclick = () => { showSection('Logs') }
showSection('Actions');
}
function fetchGetButtons() {
window.fetch(window.restBaseUrl + 'GetButtons', {
window.fetch(window.restBaseUrl + 'GetButtons', {
cors: 'cors'
// No fetch options
}).then(res => {
@ -40,6 +58,8 @@ function processWebuiSettingsJson (settings) {
}
}
setupSections();
window.fetch('webUiSettings.json').then(res => {
return res.json()
}).then(res => {
@ -51,3 +71,4 @@ window.fetch('webUiSettings.json').then(res => {
}).catch(err => {
showBigError('fetch-webui-settings', 'getting webui settings', err)
})

View File

@ -7,16 +7,47 @@ body {
margin: 0;
}
fieldset {
fieldset {
padding: 0;
}
fieldset#rootGroup {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: auto auto auto auto;
padding: 1em;
grid-gap: 1em;
text-align: center;
border: 0;
}
fieldset#switcher {
border: 0;
text-align: right;
margin-bottom: 1em;
}
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;
}
td {
border: 1px solid #efefef;
}
button.activeSection {
font-weight: bold;
}
legend {
padding-top: 1em;
}
@ -154,3 +185,7 @@ img.logo {
background-color: black;
}
}
main {
padding: 1em;
}