127 lines
3.3 KiB
JavaScript
127 lines
3.3 KiB
JavaScript
import { withComponent, props } from 'skatejs';
|
|
|
|
const Component = withComponent();
|
|
class CurrentState extends Component {
|
|
static props = {
|
|
timeseries: props.string,
|
|
trueword: props.string,
|
|
falseword: props.string,
|
|
unknownword: props.string,
|
|
status: props.boolean,
|
|
statusknown: props.boolean,
|
|
recent: props.boolean,
|
|
showrecent: props.number,
|
|
interval: props.number,
|
|
};
|
|
|
|
connected() {
|
|
if (!this.timeseries) {
|
|
return;
|
|
}
|
|
this.fetchData();
|
|
if (!this.interval) {
|
|
return;
|
|
}
|
|
this.runInterval = window.setInterval(() => {
|
|
this.fetchData();
|
|
}, this.interval * 1000);
|
|
}
|
|
|
|
disconnecting() {
|
|
if (this.runInterval) {
|
|
window.clearInterval(this.runInterval);
|
|
delete this.runInterval;
|
|
}
|
|
}
|
|
|
|
fetchData() {
|
|
const url = `http://openmct.cbrp3.c-base.org/telemetry/latest/${this.timeseries}?timestamp=true`;
|
|
fetch(url)
|
|
.then(data => data.json())
|
|
.then((data) => {
|
|
if (data === null) {
|
|
this.statusknown = false;
|
|
this.status = false;
|
|
this.recent = false;
|
|
return;
|
|
}
|
|
this.status = data.value;
|
|
this.statusknown = true;
|
|
const now = new Date();
|
|
const changed = new Date(data.timestamp);
|
|
if (((now - changed) / 60000) < this.showrecent) {
|
|
this.recent = true;
|
|
} else {
|
|
this.recent = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
renderer(renderRoot, render) {
|
|
const root = renderRoot;
|
|
while (root.firstChild) {
|
|
root.removeChild(root.firstChild);
|
|
}
|
|
root.appendChild(render());
|
|
const styles = document.createElement('style');
|
|
styles.appendChild(document.createTextNode(`
|
|
@-webkit-keyframes animaterecenton {
|
|
from { background-color: #73d216; }
|
|
to { background-color: #3465a4; }
|
|
}
|
|
.animaterecenton {
|
|
-webkit-animation-name: animaterecenton;
|
|
-webkit-animation-duration: 0.5s;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-webkit-animation-direction: alternate;
|
|
}
|
|
@-webkit-keyframes animaterecentoff {
|
|
from { background-color: #cc0000; }
|
|
to { background-color: #edd400; }
|
|
}
|
|
.animaterecentoff {
|
|
-webkit-animation-name: animaterecentoff;
|
|
-webkit-animation-duration: 0.5s;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-webkit-animation-direction: alternate;
|
|
}
|
|
`));
|
|
root.appendChild(styles);
|
|
}
|
|
|
|
render({ status, statusknown, trueword, falseword, unknownword }) {
|
|
const el = document.createElement('div');
|
|
el.style.width = '100%';
|
|
el.style.height = '100%';
|
|
let content = '<slot></slot>';
|
|
if (!statusknown) {
|
|
el.style.backgroundColor = '#555753';
|
|
if (unknownword) {
|
|
content = `${content} ${unknownword}`;
|
|
}
|
|
el.innerHTML = content;
|
|
return el;
|
|
}
|
|
if (status) {
|
|
el.style.backgroundColor = '#73d216';
|
|
if (trueword) {
|
|
content = `${content} ${trueword}`;
|
|
}
|
|
if (this.recent) {
|
|
el.className = 'animaterecenton';
|
|
}
|
|
} else {
|
|
el.style.backgroundColor = '#cc0000';
|
|
if (falseword) {
|
|
content = `${content} ${falseword}`;
|
|
}
|
|
if (this.recent) {
|
|
el.className = 'animaterecentoff';
|
|
}
|
|
}
|
|
el.innerHTML = content;
|
|
return el;
|
|
}
|
|
}
|
|
|
|
customElements.define('cbase-currentstate', CurrentState);
|