Adding datapoints to triggers
This commit is contained in:
Magnus Åhall
parent
b0a0f9290e
commit
c746343dc0
15 changed files with 269 additions and 90 deletions
|
|
@ -37,7 +37,7 @@ h2 {
|
|||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
color: #fabd2f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -70,7 +70,7 @@ button {
|
|||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid #535353;
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ h2 {
|
|||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
color: #fabd2f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -70,7 +70,7 @@ button {
|
|||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid #535353;
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
|
|
@ -137,12 +137,17 @@ button:focus {
|
|||
#areas .area .section {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
#areas .area .section > .name {
|
||||
#areas .area .section .create {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#areas .area .section .create .new {
|
||||
font-weight: 500;
|
||||
}
|
||||
#areas .area .section .triggers a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
#areas .area .section > .name {
|
||||
font-weight: 500;
|
||||
}
|
||||
#areas .area .section .triggers .trigger {
|
||||
display: grid;
|
||||
|
|
@ -155,5 +160,11 @@ button:focus {
|
|||
height: 16px;
|
||||
}
|
||||
#areas .area .section .triggers .trigger .label {
|
||||
color: #3f9da1;
|
||||
color: inherit;
|
||||
}
|
||||
dialog {
|
||||
background: #202020;
|
||||
border: 1px solid #606060;
|
||||
color: #d5c4a1;
|
||||
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ h2 {
|
|||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
color: #fabd2f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -70,7 +70,7 @@ button {
|
|||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid #535353;
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ h2 {
|
|||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
color: #fabd2f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -70,7 +70,7 @@ button {
|
|||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid #535353;
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,35 @@
|
|||
export class UI {
|
||||
constructor() {
|
||||
constructor() {//{{{
|
||||
document.getElementById('button-run').
|
||||
addEventListener('click', evt=>evt.preventDefault())
|
||||
addEventListener('click', evt => evt.preventDefault())
|
||||
|
||||
document.addEventListener('keydown', evt=>this.keyHandler(evt))
|
||||
}
|
||||
setTrigger(t) {
|
||||
document.addEventListener('keydown', evt => this.keyHandler(evt))
|
||||
|
||||
document.querySelector('input[name="name"]').focus()
|
||||
|
||||
this.datapoints = []
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
document.querySelectorAll('.datapoints .datapoint').forEach(el => el.remove());
|
||||
|
||||
const datapoints = document.querySelector('.datapoints')
|
||||
|
||||
let html = Object.keys(this.trigger.datapoints).sort().map(dpName => {
|
||||
const dp = this.trigger.datapoints[dpName]
|
||||
return `
|
||||
<div class="datapoint name"><b>${dp.Name}</b></div>
|
||||
<div class="datapoint value">${dp.LastDatapointValue.TemplateValue}</div>
|
||||
`
|
||||
}).join('')
|
||||
datapoints.innerHTML += html
|
||||
}//}}}
|
||||
setTrigger(t) {//{{{
|
||||
this.trigger = t
|
||||
}
|
||||
run() {
|
||||
}//}}}
|
||||
run() {//{{{
|
||||
this.trigger.run()
|
||||
}
|
||||
keyHandler(evt) {
|
||||
}//}}}
|
||||
keyHandler(evt) {//{{{
|
||||
if (!(evt.altKey && evt.shiftKey))
|
||||
return
|
||||
|
||||
|
|
@ -21,21 +39,75 @@ export class UI {
|
|||
switch (evt.key) {
|
||||
case 'T':
|
||||
this.run()
|
||||
break
|
||||
break
|
||||
|
||||
case 'S':
|
||||
document.getElementById('form-trigger').submit()
|
||||
break
|
||||
this.update()
|
||||
break
|
||||
}
|
||||
}
|
||||
}//}}}
|
||||
addDatapoint() {//{{{
|
||||
const dlg = document.getElementById('dlg-datapoints')
|
||||
const datalist = document.getElementById('list-datapoints')
|
||||
dlg.showModal()
|
||||
|
||||
fetch('/datapoints?format=json')
|
||||
.then(data => data.json())
|
||||
.then(json => {
|
||||
this.datapoints = json
|
||||
|
||||
let html = ''
|
||||
this.datapoints.forEach(dp => {
|
||||
html += `<option value="${dp.Name}">`
|
||||
})
|
||||
datalist.innerHTML = html
|
||||
})
|
||||
.catch(err => alert(err))
|
||||
}//}}}
|
||||
chooseDatapoint() {//{{{
|
||||
const dlg = document.getElementById('dlg-datapoints')
|
||||
const datapoint = document.getElementById('datapoint').value
|
||||
const dp = this.datapoints.find(dp => dp.Name == datapoint)
|
||||
|
||||
if (dp === undefined) {
|
||||
alert('Invalid datapoint')
|
||||
return
|
||||
}
|
||||
|
||||
this.trigger.addDatapoint(dp)
|
||||
dlg.close()
|
||||
this.render()
|
||||
}//}}}
|
||||
update() {//{{{
|
||||
const form = document.getElementById('form-trigger')
|
||||
var formData = new FormData(form)
|
||||
Object.keys(this.trigger.datapoints).forEach(name => formData.append("datapoints[]", name))
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(resp => {
|
||||
if (resp.redirected) {
|
||||
location.href = resp.url
|
||||
return
|
||||
}
|
||||
return resp.json()
|
||||
})
|
||||
.then(json => {
|
||||
if (json)
|
||||
alert(json.Error)
|
||||
})
|
||||
.catch(err => alert(err))
|
||||
}//}}}
|
||||
}
|
||||
|
||||
export class Trigger {
|
||||
constructor(id, name) {
|
||||
constructor(id, name, datapoints) {//{{{
|
||||
this.id = id
|
||||
this.name = name
|
||||
}
|
||||
run() {
|
||||
this.datapoints = datapoints
|
||||
}//}}}
|
||||
run() {//{{{
|
||||
const result = document.getElementById('run-result')
|
||||
const classes = result.classList
|
||||
const expr = document.getElementById('expr').value
|
||||
|
|
@ -59,5 +131,8 @@ export class Trigger {
|
|||
result.innerText = json.Output
|
||||
})
|
||||
.catch(err => alert(err))
|
||||
}
|
||||
}//}}}
|
||||
addDatapoint(dp) {//{{{
|
||||
this.datapoints[dp.Name] = dp
|
||||
}//}}}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,17 +71,22 @@
|
|||
.section {
|
||||
margin: 8px 16px;
|
||||
|
||||
.create {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
.new {
|
||||
font-weight: @bold;
|
||||
}
|
||||
}
|
||||
|
||||
&>.name {
|
||||
font-weight: 500;
|
||||
font-weight: @bold;
|
||||
}
|
||||
|
||||
.triggers {
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
|
|
@ -94,10 +99,17 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
color: @color4;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
background: @bg2;
|
||||
border: 1px solid lighten(@bg2, 25%);
|
||||
color: @text1;
|
||||
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ h2 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: @color4;
|
||||
color: @color2;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -96,7 +96,7 @@ button {
|
|||
background: @bg2;
|
||||
color: @text1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid lighten(@bg2, 10%);
|
||||
border: 1px solid lighten(@bg2, 20%);
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
@import "theme.less";
|
||||
|
||||
#dlg-datapoints {
|
||||
}
|
||||
|
||||
.widgets {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue