Added link to datapoint values from trigger

This commit is contained in:
Magnus Åhall 2024-07-07 15:51:51 +02:00
parent 17e555e7fc
commit 85a6da0b0a
4 changed files with 29 additions and 5 deletions

View File

@ -13,17 +13,24 @@
.widgets .datapoints { .widgets .datapoints {
font: "Roboto Mono", monospace; font: "Roboto Mono", monospace;
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: repeat(4, min-content);
gap: 6px 8px; gap: 6px 8px;
margin-bottom: 8px; margin-bottom: 8px;
white-space: nowrap; white-space: nowrap;
} }
.widgets .datapoints div {
white-space: nowrap;
}
.widgets .datapoints .invalid { .widgets .datapoints .invalid {
color: #c83737; color: #c83737;
} }
.widgets .datapoints .delete img { .widgets .datapoints .delete img {
height: 16px; height: 16px;
} }
.widgets .datapoints .values img {
height: 16px;
width: 16px;
}
.widgets .action { .widgets .action {
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: min-content min-content 1fr;

View File

@ -13,17 +13,24 @@
.widgets .datapoints { .widgets .datapoints {
font: "Roboto Mono", monospace; font: "Roboto Mono", monospace;
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: repeat(4, min-content);
gap: 6px 8px; gap: 6px 8px;
margin-bottom: 8px; margin-bottom: 8px;
white-space: nowrap; white-space: nowrap;
} }
.widgets .datapoints div {
white-space: nowrap;
}
.widgets .datapoints .invalid { .widgets .datapoints .invalid {
color: #c83737; color: #c83737;
} }
.widgets .datapoints .delete img { .widgets .datapoints .delete img {
height: 16px; height: 16px;
} }
.widgets .datapoints .values img {
height: 16px;
width: 16px;
}
.widgets .action { .widgets .action {
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: min-content min-content 1fr;

View File

@ -19,9 +19,10 @@ export class UI {
let html = Object.keys(this.trigger.datapoints).sort().map(dpName => { let html = Object.keys(this.trigger.datapoints).sort().map(dpName => {
const dp = this.trigger.datapoints[dpName] const dp = this.trigger.datapoints[dpName]
return ` return `
<div class="datapoint delete"><a href="#" onclick="_ui.deleteDatapoint('${dp.Name}')"><img src="/images/${this.version}/${this.theme}/delete.svg"></a></div>
<div class="datapoint name ${dp.Found ? 'valid' : 'invalid'}"><b>${dp.Name}</b></div> <div class="datapoint name ${dp.Found ? 'valid' : 'invalid'}"><b>${dp.Name}</b></div>
<div class="datapoint value">${dp.Found ? dp.LastDatapointValue.TemplateValue : ''}</div> <div class="datapoint value">${dp.Found ? dp.LastDatapointValue.TemplateValue : ''}</div>
<div class="daatpoint values"><a href="/datapoint/values/${dp.ID}"><img src="/images/${this.version}/${this.theme}/values.svg"></a></div>
<div class="datapoint delete"><a href="#" onclick="_ui.deleteDatapoint('${dp.Name}')"><img src="/images/${this.version}/${this.theme}/delete.svg"></a></div>
` `
}).join('') }).join('')
datapoints.innerHTML += html datapoints.innerHTML += html
@ -84,7 +85,7 @@ export class UI {
}) })
}//}}} }//}}}
deleteDatapoint(name) {//{{{ deleteDatapoint(name) {//{{{
if (!confirm(`Delete ${name}?`)) { if (!confirm(`Remove datapoint ${name} from this trigger?`)) {
return return
} }

View File

@ -19,11 +19,15 @@
.datapoints { .datapoints {
font: "Roboto Mono", monospace; font: "Roboto Mono", monospace;
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: repeat(4, min-content);
gap: 6px 8px; gap: 6px 8px;
margin-bottom: 8px; margin-bottom: 8px;
white-space: nowrap; white-space: nowrap;
div {
white-space: nowrap;
}
.invalid { .invalid {
color: #c83737; color: #c83737;
} }
@ -31,6 +35,11 @@
.delete img { .delete img {
height: 16px; height: 16px;
} }
.values img {
height: 16px;
width: 16px;
}
} }
.action { .action {