[#22] Stacks all pivotal tracker tiles (#23)

flash/static/scripts/utils.js

@@ -57,8 +57,44 @@ var updateServices = function() {
   });
 };
 
+/**
+* This can be wrapped up in a jquery plugin.
+* The current visual feedback is not great and will be improved.
+*/
+var bundleService = function (serviceSelector, interval) {
+  console.log('bundle ', serviceSelector)
+  var active = 0;
+  var stacked = []
+  var wrapper = bundle(serviceSelector);
+
+  function bundle(selector) {
+    var tiles = $(selector).remove();
+    var wrapper = $('<div class="tiles-stack"></div>')
+
+    tiles.each(function (index, obj) {
+      stacked[index] = $(obj);
+      wrapper.append(stacked[index]);
+    });
+    $('.dashboard').append(wrapper);
+
+    return wrapper;
+  }
+
+  function updateStacked() {
+    var currentActive = active++ % stacked.length;
+    wrapper.children().hide();
+
+    stacked[currentActive]
+      .show()
+      .effect('shake', {distance: 10, times: 1});
+  }
+
+  updateStacked();
+  setInterval(updateStacked, interval)
+}
+
 $(document).ready(function () {
+  bundleService('.tracker-tile', 10000);
   updateServices();
   setInterval(updateServices, 60000);
 });
-

flash/templates/base.html

@@ -5,6 +5,7 @@
   <title>Flask + Dashboard = Flash</title>
   <script
       src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
   <script src="{{ url_for('services.static', filename='scripts/services.js') }}"></script>
   <script src="{{ url_for('static', filename='scripts/utils.js') }}"></script>
   <script>