137 lines
2.5 KiB
JavaScript
137 lines
2.5 KiB
JavaScript
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
|
|
|
|
export class SmonDashboard extends CustomHTMLElement {
|
|
static {
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: grid;
|
|
}
|
|
|
|
.el-grid {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: min-content;
|
|
grid-gap: 8px 16px;
|
|
|
|
}
|
|
</style>
|
|
|
|
<div data-el="grid">
|
|
</div>
|
|
`
|
|
}
|
|
constructor() {
|
|
super(true)
|
|
const script = this.querySelector('script')
|
|
this.data = JSON.parse(script.textContent)
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
const widgets = []
|
|
for (const wd of this.data.Widgets) {
|
|
const widget = SmonWidget.create(wd.Type, wd)
|
|
widgets.push(widget)
|
|
}
|
|
this.elGrid.replaceChildren(...widgets)
|
|
}
|
|
}
|
|
|
|
class SmonWidget extends CustomHTMLElement {
|
|
static create(t, data) {
|
|
switch (t) {
|
|
case 0: return new SmonWidgetLabel(data)
|
|
case 1: return new SmonWidgetOnOff(data)
|
|
}
|
|
}
|
|
|
|
constructor(data) {
|
|
super(true)
|
|
this.data = data
|
|
}
|
|
|
|
render() {
|
|
this.style.gridColumn = this.data.X
|
|
this.style.gridRow = this.data.Y
|
|
}
|
|
}
|
|
|
|
class SmonWidgetLabel extends SmonWidget {
|
|
static {
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<style>
|
|
.el-label {
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|
|
<div data-el="label"></div>
|
|
`
|
|
}
|
|
|
|
constructor(data) {
|
|
super(data)
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
super.render()
|
|
this.elLabel.innerText = this.data.Attributes?.Label || '[set Label]'
|
|
}
|
|
}
|
|
|
|
class SmonWidgetOnOff extends SmonWidget {
|
|
static {
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: grid;
|
|
grid-template-columns: min-content 1fr;
|
|
align-items: center;
|
|
grid-gap: 8px;
|
|
|
|
font-size: 1.25em;
|
|
}
|
|
</style>
|
|
<img data-el="status">
|
|
<div data-el="label"></div>
|
|
`
|
|
}
|
|
|
|
constructor(data) {
|
|
super(data)
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
super.render()
|
|
|
|
let img
|
|
switch (this.data.Attributes.Status) {
|
|
case 'ON':
|
|
img = 'widget_light_green.svg'
|
|
break
|
|
|
|
case 'OFF':
|
|
img = 'widget_light_red.svg'
|
|
break
|
|
|
|
default:
|
|
img = 'widget_light_off.svg'
|
|
}
|
|
|
|
this.elStatus.setAttribute('src', `/images/${_VERSION}/${img}`)
|
|
this.elLabel.innerText = this.data.Attributes.Label
|
|
}
|
|
}
|
|
|
|
|
|
customElements.define("smon-widget", SmonWidget)
|
|
customElements.define("smon-widget-label", SmonWidgetLabel)
|
|
customElements.define("smon-widget-onoff", SmonWidgetOnOff)
|
|
customElements.define("smon-dashboard", SmonDashboard)
|