Add ability to render a reference table

diff --git a/src/graphing/ref-table.js b/src/graphing/ref-table.js
new file mode 100644 (file)
index 0000000..f21e50c
--- /dev/null
+++ b/src/graphing/ref-table.js
@@ -0,0 +1,70 @@
+tr.graphing.RefTable = function (radar) {
+  var self = {};
+  var injectionElement;
+
+  function blipsByCycle () {
+    // set up empty blip arrays for each cycle
+    var cycles = {};
+    radar.cycles()
+      .map(function (cycle) {
+        return {
+          order: cycle.order(),
+          name: cycle.name()
+        };
+      })
+      .sort(function (a, b) {
+        if (a.order === b.order) {
+          return 0;
+        } else if (a.order < b.order) {
+          return -1;
+        } else {
+          return 1;
+        }
+      })
+      .forEach(function (cycle) {
+        cycles[cycle.name] = [];
+      });
+
+    // group blips by cycle
+    var blips = [];
+    var quadrants = radar.quadrants();
+    Object.keys(quadrants).forEach(function (quadrant) {
+        blips = blips.concat(quadrants[quadrant].blips());
+    });
+
+    blips.forEach(function (blip) {
+      cycles[blip.cycle().name()].push(blip);
+    });
+
+    return cycles;
+  }
+
+  self.init = function (selector) {
+    injectionElement = document.querySelector(selector || 'body');
+    return self;
+  };
+
+  self.render = function () {
+    var blips = blipsByCycle();
+
+    var html = '<table class="radar-ref-table">';
+
+    Object.keys(blips).forEach(function (cycle) {
+        html += '<tr class="radar-ref-status-group"><td colspan="3">' + cycle + '</td></tr>';
+
+        blips[cycle].forEach(function (blip) {
+          html += '<tr id="blip-ref-' + blip.number() + '">' +
+                    '<td>' + blip.number() + '</td>' +
+                    '<td>' + blip.name() + '</td>' +
+                    '<td>' + blip.description() + '</td>' +
+                  '</tr>';
+        });
+    });
+
+    html += '</table>';
+
+    injectionElement.innerHTML = html;
+  };
+
+  return self;
+};

diff --git a/src/models/blip.js b/src/models/blip.js
index 42257c5..1203caf 100644 (file)
--- a/src/models/blip.js
+++ b/src/models/blip.js
@@ -1,4 +1,4 @@
-tr.models.Blip = function (name, cycle, isNew) {
+tr.models.Blip = function (name, cycle, isNew, description) {
   var self, number;
 
   self = {};
@@ -8,6 +8,10 @@ tr.models.Blip = function (name, cycle, isNew) {
     return name;
   };
 
+  self.description = function () {
+    return description || '';
+  };
+
   self.isNew = function () {
     return isNew;
   };

diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss
index b68ca02..a6fbd7d 100644 (file)
--- a/src/stylesheets/base.scss
+++ b/src/stylesheets/base.scss
@@ -46,3 +46,28 @@ svg {
     }
   }
 }
+
+.radar-ref-table {
+  width: 1080px;
+  font-size: 16px;
+  line-height: 26px;
+  padding: 20px;
+
+  tr:nth-child(odd) {
+    background: $grey-darkest;
+  }
+
+  tr:nth-child(even) {
+    background: $grey;
+  }
+
+  td {
+    padding: 10px 15px;
+  }
+
+  tr.radar-ref-status-group {
+    font-size: 20px;
+    font-weight: bold;
+    background: $grey-lightest;
+  }
+}