Adds quick links to fetch data of weeks and months. Makes the UI more…

… intutive
ajitsing · Jan 23, 2018 · 04931b0 · 04931b0
1 parent 03bc17e
commit 04931b0
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 14 deletions.
diff --git a/lib/pairing_matrix/server/public/index.html b/lib/pairing_matrix/server/public/index.html
@@ -18,14 +18,33 @@
 
 <body>
 <div class="visualize_matrix_container form-group form-inline">
-    <input type="number" class="form-control" id="days" value="10"/>
-    <button id="visualize" class="btn btn-primary form-control">Visualize</button>
-    <input class="cache-toggle" type="checkbox" data-toggle="toggle" data-on="Cache Enabled" data-off="Cache Disabled"/>
-</div>
-<div class="info">
-    <span>Displaying data of last</span>
-    <span id="no_of_days"></span>
-    <span>days</span>
+    <div class="row">
+        <div class="col-lg-offset-3 col-lg-6">
+            <div class="input-group">
+                <div class="input-group">
+                    <span class="input-group-addon" id="basic-addon2">Days</span>
+                    <input type="text" id="days" value="30" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+                </div>
+              <span class="input-group-btn">
+                <div class="btn-group">
+                    <button id="visualize" type="button" class="btn btn-primary">Visualize</button>
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="caret"></span>
+                        <span class="sr-only">Toggle Dropdown</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a id="a_week" href="#">A Week</a></li>
+                        <li><a id="two_weeks" href="#">Two Weeks</a></li>
+                        <li><a id="a_month" href="#">A Month</a></li>
+                        <li><a id="two_months" href="#">Two Months</a></li>
+                    </ul>
+                </div>
+              </span>
+            </div>
+        </div>
+        <input class="cache-toggle" type="checkbox" data-toggle="toggle"
+               data-on="Cache Enabled" data-off="Cache Disabled"/>
+    </div>
 </div>
 
 <div class="loaderContainer">

diff --git a/lib/pairing_matrix/server/public/index.js b/lib/pairing_matrix/server/public/index.js
@@ -1,8 +1,8 @@
 $(document).ready(function () {
     var playground = new PlayGround(".area");
     var pairingData = [];
-    var renderMatrix = function (days) {
-        $('#no_of_days').text(days);
+    var renderMatrix = function () {
+        var days = $('#days').val();
         hideMatrix();
         showLoader();
         $.get('/data/' + days + "?cache_enabled=" + isCachingEnabled()).done(function (data) {
@@ -11,13 +11,14 @@ $(document).ready(function () {
             hideLoader();
             showMatrix();
         }).fail(function () {
-            alert('error occurred!');
+            alert('Error fetching data from server!');
             hideLoader();
             showMatrix();
         });
     };
 
     var hideMatrix = function () {
+        $(".authors_container").hide();
         $('.viz_container').hide();
     };
 
@@ -57,9 +58,33 @@ $(document).ready(function () {
         return $('.cache-toggle').prop('checked');
     };
 
+    var updateDays = function(days) {
+      var $days = $('#days');
+      $days.val(days);
+    };
+
     $('#visualize').on('click', function () {
-        $(".authors_container").hide();
-        renderMatrix($('#days').val())
+        renderMatrix()
+    });
+
+    $('#a_week').on('click', function () {
+        updateDays('7');
+        renderMatrix()
+    });
+
+    $('#two_weeks').on('click', function () {
+        updateDays('14');
+        renderMatrix()
+    });
+
+    $('#a_month').on('click', function () {
+        updateDays('30');
+        renderMatrix()
+    });
+
+    $('#two_months').on('click', function () {
+        updateDays('60');
+        renderMatrix()
     });
 
     $('#reset').click(function () {
@@ -84,5 +109,5 @@ $(document).ready(function () {
     });
 
     enableCaching();
-    renderMatrix($('#days').val());
+    renderMatrix();
 });