From 38872a52ce65f2cee2f5d3b9eca26a6142e370fe Mon Sep 17 00:00:00 2001
From: Martin Donnelly <martind2000@gmail.com>
Date: Thu, 4 Aug 2016 16:45:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=80=9D2016-08-04=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SODashServer/SODashServer/app/js/mdot.js  | 72 +++++++++++++++++--
 .../SODashServer/SODashServer/app/test.html   |  6 +-
 2 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/smartoffice/SODashServer/SODashServer/app/js/mdot.js b/smartoffice/SODashServer/SODashServer/app/js/mdot.js
index fa138ee..90685ae 100644
--- a/smartoffice/SODashServer/SODashServer/app/js/mdot.js
+++ b/smartoffice/SODashServer/SODashServer/app/js/mdot.js
@@ -38,7 +38,6 @@
 
       var tempCollection = new Backbone.Collection();
 
-      //_.invoke(DeviceCollection.toArray(), 'destroy');
       _.invoke(DeviceCollection.toArray(), 'destroy');
 
 
@@ -87,7 +86,6 @@
     }
   });
 
-
   var mDotCollection = Backbone.Collection.extend({
     model: EventsModel,
     url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/',
@@ -222,6 +220,7 @@
       this.$line = $(this.el).find('#line');
       this.$maxY = $(this.el).find('#maxY');
       this.$datapoints = $(this.el).find('#datapoints');
+      this.$baseline = $(this.el).find('#baseline');
 
       return this;
     },
@@ -242,6 +241,7 @@
           let data = [];
           let circle, title;
           let getMode = this.modes[this.mode];
+      var occupied;
 
           _(this.collection.models).each(function(i) {
                 // Console.log(i);
@@ -259,25 +259,34 @@
           }
 
           this.$datapoints.empty();
+          this.$baseline.empty();
 
           scale = 124 / ceilingLimit;
           // Var xstep = (280 - 46) / 100;
           xstep = 2.34;
           startX = 46 + (100 - points.length) * xstep;
           calcArray = [];
+
           for (var x = 0;x < points.length;x++) {
             calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (136 - ((points[x]) * scale)).toFixed(2));
 
             circle  = document.createElementNS(this.xmlns,'circle');
             title = document.createElementNS(this.xmlns,'title');
 
+            if (parseInt(this.mode) === 5) {
+              occupied = (points[x] > 920) ? 'purple' : 'red';
+            } else if (parseInt(this.mode) === 3) {
+              occupied = (points[x] > 579) ? 'purple' : 'red';
+            }
+            else {
+              occupied = 'red';
+            }
 
-            circle.setAttributeNS(null,'fill','red');
+            circle.setAttributeNS(null,'fill',occupied);
             circle.setAttributeNS(null,'cx',(startX + (x * xstep)).toFixed(2).toString());
             circle.setAttributeNS(null,'cy',(136 - ((points[x]) * scale)).toFixed(2).toString());
             circle.setAttributeNS(null,'r','2');
             circle.setAttributeNS(null,'stroke-width','1');
-            circle.setAttributeNS(null,'title','Bob');
 
             title.textContent = data[x];
 
@@ -286,6 +295,61 @@
             this.$datapoints[0].appendChild(circle);
           }
 
+          console.log('This.mode = ', this.mode);
+          if (parseInt(this.mode) === 3 || parseInt(this.mode) === 5) {
+            var avgLine = (parseInt(this.mode) === 3) ? 526 : 852;
+
+            var bline  = document.createElementNS(this.xmlns,'line');
+            bline.setAttributeNS(null,'x1',46);
+            bline.setAttributeNS(null,'y1',(136 - (avgLine * scale)).toFixed(2).toString());
+            bline.setAttributeNS(null,'x2',280);
+            bline.setAttributeNS(null,'y2',(136 - (avgLine * scale)).toFixed(2).toString());
+
+            bline.setAttributeNS(null,'stroke','#00ff00');
+            bline.setAttributeNS(null,'stroke-width','1');
+
+            this.$baseline[0].appendChild(bline);
+
+
+
+            bline  = document.createElementNS(this.xmlns,'line');
+                        bline.setAttributeNS(null,'x1',46);
+                        bline.setAttributeNS(null,'y1',(136 - (4884 * scale)).toFixed(2).toString());
+                        bline.setAttributeNS(null,'x2',280);
+                        bline.setAttributeNS(null,'y2',(136 - (4884 * scale)).toFixed(2).toString());
+
+                        bline.setAttributeNS(null,'stroke','#00ff55');
+                        bline.setAttributeNS(null,'stroke-width','1');
+            this.$baseline[0].appendChild(bline);
+          }
+
+      if (parseInt(this.mode) === 3)
+      {
+        var bline  = document.createElementNS(this.xmlns,'line');
+        bline.setAttributeNS(null,'x1',46);
+        bline.setAttributeNS(null,'y1',(136 - (632 * scale)).toFixed(2).toString());
+        bline.setAttributeNS(null,'x2',280);
+        bline.setAttributeNS(null,'y2',(136 - (632 * scale)).toFixed(2).toString());
+
+        bline.setAttributeNS(null,'stroke','yellow');
+        bline.setAttributeNS(null,'stroke-width','1');
+
+        this.$baseline[0].appendChild(bline);
+
+        var bline  = document.createElementNS(this.xmlns,'line');
+        bline.setAttributeNS(null,'x1',46);
+        bline.setAttributeNS(null,'y1',(136 - (1045 * scale)).toFixed(2).toString());
+        bline.setAttributeNS(null,'x2',280);
+        bline.setAttributeNS(null,'y2',(136 - (1045 * scale)).toFixed(2).toString());
+
+        bline.setAttributeNS(null,'stroke','red');
+        bline.setAttributeNS(null,'stroke-width','1');
+
+        this.$baseline[0].appendChild(bline);
+
+      }
+
+
           this.$line[0].setAttribute('points',calcArray.join(' '));
 
           this.$maxY[0].textContent = ceilingLimit;
diff --git a/smartoffice/SODashServer/SODashServer/app/test.html b/smartoffice/SODashServer/SODashServer/app/test.html
index 4af9835..133559f 100644
--- a/smartoffice/SODashServer/SODashServer/app/test.html
+++ b/smartoffice/SODashServer/SODashServer/app/test.html
@@ -149,7 +149,11 @@ Co2
               <polyline id="line" fill="none" stroke="#2196F3"
                         text-anchor="end" stroke-width="1"
                         points=""></polyline>
-          <g id="datapoints"></g>
+                <g id="datapoints"></g>
+          <g id="baseline">
+
+          </g>
+
             </svg>
       </div>
   </div>