From 72e101865e57572100fe3407d4e5710b4b4255ee Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Thu, 30 Nov 2017 17:35:51 +0100
Subject: [PATCH] Component for showing current boolean state

---
 elements/currentstate.js | 72 ++++++++++++++++++++++++++++++++++++++++
 index.js                 |  2 ++
 2 files changed, 74 insertions(+)
 create mode 100644 elements/currentstate.js

diff --git a/elements/currentstate.js b/elements/currentstate.js
new file mode 100644
index 0000000..b5ccbf7
--- /dev/null
+++ b/elements/currentstate.js
@@ -0,0 +1,72 @@
+import { withComponent, props } from 'skatejs';
+
+const Component = withComponent();
+class CurrentState extends Component {
+  static props = {
+    timeseries: props.string,
+    status: props.boolean,
+    statusknown: props.boolean,
+    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}`;
+    fetch(url)
+      .then(data => data.json())
+      .then((data) => {
+        if (data === null) {
+          this.statusknown = false;
+          this.status = false;
+          return;
+        }
+        this.status = data;
+        this.statusknown = true;
+      });
+  }
+
+  renderer(renderRoot, render) {
+    const root = renderRoot;
+    while (root.firstChild) {
+      root.removeChild(root.firstChild);
+    }
+    root.appendChild(render());
+  }
+
+  render({ status, statusknown }) {
+    const el = document.createElement('div');
+    el.style.width = '100%';
+    el.style.height = '100%';
+    if (!statusknown) {
+      el.style.backgroundColor = '#555753';
+      return el;
+    }
+    if (status) {
+      el.style.backgroundColor = '#73d216';
+    } else {
+      el.style.backgroundColor = '#cc0000';
+    }
+    return el;
+  }
+}
+
+customElements.define('cbase-currentstate', CurrentState);
diff --git a/index.js b/index.js
index ffb3485..30aff7d 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,9 @@
 import heatmap from './elements/heatmap';
 import polar from './elements/polar';
+import currentstate from './elements/currentstate';
 
 export default {
   heatmap,
   polar,
+  currentstate,
 };