lee/OliveTin
1
0
Fork 0
mirror of https://github.com/OliveTin/OliveTin synced 2025-12-16 11:05:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

#17 Fixing UI after change to Autonomous Custom Elements

Browse Source
This commit is contained in:
jamesread
2021-11-15 21:56:39 +00:00
parent fd04922e59
commit 1b94e29721
5 changed files with 49 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webui/index.html
View File

@@ -12,7 +12,7 @@
<body> <body>
<main title = "main content"> <main title = "main content">
<fieldset id = "switcher"> <fieldset id = "sectionSwitcher">
<button id = "showActions">Actions</button> <button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button> <button id = "showLogs">Logs</button>
</fieldset> </fieldset>
@@ -51,7 +51,7 @@
</footer> </footer>
<template id = "tplArgumentForm"> <template id = "tplArgumentForm">
<form> <form class = "actionArguments">
<div class = "wrapper"> <div class = "wrapper">
<div> <div>
<span class = "icon" role = "icon"></span> <span class = "icon" role = "icon"></span>
@@ -70,7 +70,7 @@
<template id = "tplActionButton"> <template id = "tplActionButton">
<button> <button>
<span role = "img" title = "button icon" class = "icon">&#x1f4a9;</span> <span role = "icon" title = "button icon" class = "icon">&#x1f4a9;</span>
<p role = "title" class = "title">Untitled Button</p> <p role = "title" class = "title">Untitled Button</p>
</button> </button>
</template> </template>

29
webui/js/ActionButton.js
View File

@@ -7,21 +7,19 @@ class ActionButton extends window.HTMLElement {
this.constructDomFromTemplate() this.constructDomFromTemplate()
// DOM Attributes
this.btn.title = json.title
this.btn.onclick = () => { this.startAction() }
// Class attributes // Class attributes
this.actionCallUrl = window.restBaseUrl + 'StartAction?actionName=' + json.title
this.temporaryStatusMessage = null this.temporaryStatusMessage = null
this.isWaiting = false this.isWaiting = false
this.actionCallUrl = window.restBaseUrl + 'StartAction' this.actionCallUrl = window.restBaseUrl + 'StartAction'
this.updateFromJson(json) this.updateFromJson(json)
this.onclick = () => { // DOM Attributes
this.btn.title = json.title
this.btn.onclick = () => {
console.log(json.arguments)
if (json.arguments.length > 0) { if (json.arguments.length > 0) {
const frm = document.createElement('form', { is: 'argument-form' }) const frm = document.createElement('argument-form')
frm.setup(json, (args) => { frm.setup(json, (args) => {
this.startAction(args) this.startAction(args)
}) })
@@ -32,15 +30,9 @@ class ActionButton extends window.HTMLElement {
} }
} }
this.constructTemplate()
this.updateHtml()
=======
this.updateFromJson(json) this.updateFromJson(json)
this.updateDom() this.updateDom()
>>>>>>> 40cfb1f (progress so far)
this.setAttribute('id', 'actionButton_' + json.id) this.setAttribute('id', 'actionButton_' + json.id)
} }
@@ -70,7 +62,7 @@ class ActionButton extends window.HTMLElement {
} }
const startActionArgs = { const startActionArgs = {
actionName: this.title, actionName: this.btn.title,
arguments: actionArgs arguments: actionArgs
} }
@@ -105,17 +97,18 @@ class ActionButton extends window.HTMLElement {
} }
onActionResult (cssClass, temporaryStatusMessage) { onActionResult (cssClass, temporaryStatusMessage) {
this.btn.disabled = false
this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]' this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
this.updateDom() this.updateDom()
this.btn.classList.add(cssClass) this.btn.classList.add(cssClass)
setTimeout(() => { setTimeout(() => {
this.btn.classList.remove(cssClass) this.btn.classList.remove(cssClass)
}, 1000); }, 1000)
} }
onActionError (err) { onActionError (err) {
console.log('callback error', err) console.error('callback error', err)
this.btn.disabled = false this.btn.disabled = false
this.isWaiting = false this.isWaiting = false
this.updateDom() this.updateDom()
@@ -123,7 +116,7 @@ class ActionButton extends window.HTMLElement {
setTimeout(() => { setTimeout(() => {
this.btn.classList.remove('actionFailed') this.btn.classList.remove('actionFailed')
}, 1000); }, 1000)
} }
constructDomFromTemplate () { constructDomFromTemplate () {
@@ -143,8 +136,6 @@ class ActionButton extends window.HTMLElement {
} }
updateDom () { updateDom () {
console.log(this.querySelector("button"))
if (this.temporaryStatusMessage != null) { if (this.temporaryStatusMessage != null) {
this.domTitle.innerText = this.temporaryStatusMessage this.domTitle.innerText = this.temporaryStatusMessage
this.domTitle.classList.add('temporaryStatusMessage') this.domTitle.classList.add('temporaryStatusMessage')

4
webui/js/marshaller.js
View File

@@ -21,8 +21,8 @@ export function marshalActionButtonsJsonToHtml (json) {
// Remove existing, but stale buttons (that were not updated in this round) // Remove existing, but stale buttons (that were not updated in this round)
for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) { for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) {
if (existingButton.updateIterationTimestamp != currentIterationTimestamp) { if (existingButton.updateIterationTimestamp !== currentIterationTimestamp) {
existingButton.remove(); existingButton.remove()
} }
} }
} }

12
webui/main.js
View File

@@ -27,7 +27,7 @@ function fetchGetDashboardComponents () {
}).then(res => { }).then(res => {
marshalActionButtonsJsonToHtml(res) marshalActionButtonsJsonToHtml(res)
}).catch(err => { }).catch(err => {
showBigError('fetch-buttons', 'getting buttons', err, 'blat') window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
}) })
} }
@@ -39,7 +39,7 @@ function fetchGetLogs () {
}).then(res => { }).then(res => {
marshalLogsJsonToHtml(res) marshalLogsJsonToHtml(res)
}).catch(err => { }).catch(err => {
showBigError('fetch-buttons', 'getting buttons', err, 'blat') window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
}) })
} }
@@ -62,10 +62,10 @@ function processWebuiSettingsJson (settings) {
document.querySelector('#availableVersion').hidden = false document.querySelector('#availableVersion').hidden = false
} }
document.querySelector('#switcher').hidden = settings.HideNavigation document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation
} }
function main() { function main () {
setupSections() setupSections()
window.fetch('webUiSettings.json').then(res => { window.fetch('webUiSettings.json').then(res => {
@@ -78,8 +78,8 @@ function main() {
window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000) window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
}).catch(err => { }).catch(err => {
showBigError('fetch-webui-settings', 'getting webui settings', err) window.showBigError('fetch-webui-settings', 'getting webui settings', err)
}) })
} }
main(); // call self main() // call self

62
webui/style.css
View File

@@ -20,33 +20,6 @@ fieldset#rootGroup {
border: 0; border: 0;
} }
fieldset#switcher {
border: 0;
text-align: right;
margin-bottom: 1em;
}
fieldset#switcher button {
padding: 1em;
color: black;
display: table-cell;
text-align: center;
border: 1px solid #999;
background-color: white;
box-shadow: 0 0 6px 0 #aaa;
user-select: none;
background-color: white;
cursor: pointer;
}
fieldset#switcher button:first-child{
border-radius: 1em 0em 0em 1em;
}
fieldset#switcher button:last-child{
border-radius: 0 1em 1em 0;
}
table { table {
background-color: white; background-color: white;
border-collapse: collapse; border-collapse: collapse;
@@ -69,10 +42,6 @@ tr:hover td {
background-color: beige; background-color: beige;
} }
button.activeSection {
font-weight: bold;
}
legend { legend {
padding-top: 1em; padding-top: 1em;
} }
@@ -117,6 +86,8 @@ div.entity h2 {
grid-column: 1 / span all; grid-column: 1 / span all;
} }
/* Buttons */
button, button,
input[type="submit"] { input[type="submit"] {
padding: 1em; padding: 1em;
@@ -146,20 +117,43 @@ input[type="submit"]:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
fieldset#switcher { fieldset#sectionSwitcher {
border: 0; border: 0;
text-align: right; text-align: right;
margin-bottom: 1em; margin-bottom: 1em;
} }
fieldset#switcher button:first-child { fieldset#sectionSwitcher button {
padding: 1em;
color: black;
display: table-cell;
text-align: center;
border: 1px solid #999;
background-color: white;
box-shadow: 0 0 6px 0 #aaa;
user-select: none;
cursor: pointer;
}
fieldset#rootGroup action-button button {
width: 100%;
height: 100%;
}
fieldset#sectionSwitcher button:first-child {
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
} }
fieldset#switcher button:last-child { fieldset#sectionSwitcher button:last-child {
border-radius: 0 1em 1em 0; border-radius: 0 1em 1em 0;
} }
button.activeSection {
font-weight: bold;
}
/* Button animations */
.actionFailed { .actionFailed {
animation: kfActionFailed 1s; animation: kfActionFailed 1s;
} }