Show opening/closing animation for three minutes, fixes #10

elements/currentstate.js

@@ -9,6 +9,8 @@ class CurrentState extends Component {
     unknownword: props.string,
     status: props.boolean,
     statusknown: props.boolean,
+    recent: props.boolean,
+    showrecent: props.number,
     interval: props.number,
   };
 
@@ -33,17 +35,25 @@ class CurrentState extends Component {
   }
 
   fetchData() {
-    const url = `http://openmct.cbrp3.c-base.org/telemetry/latest/${this.timeseries}`;
+    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;
+        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;
+        }
       });
   }
 
@@ -53,9 +63,34 @@ class CurrentState extends Component {
       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 }) {
+    console.log(this.showrecent, this.recent);
     const el = document.createElement('div');
     el.style.width = '100%';
     el.style.height = '100%';
@@ -73,11 +108,17 @@ class CurrentState extends Component {
       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;