persisting polling interval setting with localStorage; added tick marks with numbers to HTML5 slider element

web/assets/javascripts/dashboard.js

@@ -18,7 +18,7 @@ this.seriesPathFactory()).attr("class","area"),this.stroke&&b.append("svg:path")
 var poller;
 
 var realtimeGraph = function(updatePath) {
-  var timeInterval = parseInt(sessionStorage.timeInterval || '2000');
+  var timeInterval = parseInt(localStorage.timeInterval || '2000');
 
   var graph = new Rickshaw.Graph( {
     element: document.getElementById("realtime"),
@@ -165,27 +165,31 @@ var renderGraphs = function() {
   historyGraph();
 };
 
-var setSliderLabel = function() {
-  var label = Math.round(parseFloat(sessionStorage.timeInterval) / 1000) + ' sec';
+var setSliderLabel = function(val) {
+  var label = Math.round(parseFloat(val) / 1000) + ' sec';
   $('span.current-interval').html(label);
 }
 
 $(function(){
   renderGraphs();
 
-  if (typeof sessionStorage.timeInterval !== 'undefined'){
-    $('span.interval-slider input').val(sessionStorage.timeInterval);
-    setSliderLabel();
+  if (typeof localStorage.timeInterval !== 'undefined'){
+    $('div.interval-slider input').val(localStorage.timeInterval);
+    setSliderLabel(localStorage.timeInterval);
   }
 
-  $(document).on('change', 'span.interval-slider input', function(){
+  $(document).on('change', 'div.interval-slider input', function(){
     clearInterval(poller);
-    sessionStorage.timeInterval = $(this).val();
-    setSliderLabel();
+    localStorage.timeInterval = $(this).val();
+    setSliderLabel($(this).val());
     resetGraphs();
     renderGraphs();
   });
 
+  $(document).on('mousemove', 'div.interval-slider input', function(){
+    setSliderLabel($(this).val());
+  });
+
 });
 
 // Reset graphs

web/assets/stylesheets/application.css

@@ -370,15 +370,17 @@ img.smallogo {
   }
 }
 
-span.interval-slider {
-  float: right;
-  line-height: 1.3;
-  font-size: 0.5em;
+/* Dashboard
+********************************** */
+div.dashboard h3 {
+  float: left;
 }
 
-span.interval-slider-label {
-  font-size: 12px;
-  margin-right: 5px;
+div.interval-slider {
+  float: right;
+  line-height: 1.3;
+  font-size: 0.95em;
+  padding: 15px 0 0;
 }
 
 span.current-interval {
@@ -388,10 +390,50 @@ span.current-interval {
   color: #B1003E;
 }
 
-span.interval-slider input {
+div.interval-slider input {
   width: 160px;
 }
 
+/* Polling Slider Ticks
+********************************** */
+ul.ticks {
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 160px;
+  position: relative;
+  top: -6px;
+}
+
+ul.ticks li {
+  font-size: 10px;
+  float: left;
+  width: 40px;
+  padding: 5px 0 0;
+  background: url(../images/tick-mark.png) no-repeat 0 0;
+}
+
+ul.ticks li.first {
+  background-position: 18% 0;
+  padding-left: 0.5em;
+}
+ul.ticks li.second {
+  background-position: 38% 0;
+  padding-left: 1.266em;
+}
+ul.ticks li.third {
+  background-position: 62% 0;
+  padding-left: 1.8em;
+}
+ul.ticks li.fourth {
+  background-position: 82% 0;
+  padding-left: 2.66em;
+}
+
+/* Beacon 
+********************************** */
+
 .beacon {
   position: relative;
   height: 20px;

web/views/dashboard.erb

@@ -1,18 +1,25 @@
 <script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js"></script>
-
-<h3 class="clearfix">
-  <%= t('Dashboard') %>
-  <span class="beacon">
-    <span class="ring"></span>
-    <span class="dot"></span>
-  </span>
-  <span class="interval-slider">
+<div class= "dashboard clearfix">
+  <h3 >
+    <%= t('Dashboard') %>
+    <span class="beacon">
+      <span class="ring"></span>
+      <span class="dot"></span>
+    </span>
+  </h3>
+  <div class="interval-slider">
     <span class="interval-slider-label"><%= t('PollingInterval') %>:</span>
     <span class="current-interval">2 sec</span>
     <br/>
-    <input type="range" min="2000" max="20000" step="10" value="2000"/>
-  </span>
-</h3>
+    <input type="range" min="2000" max="20000" step="1000" value="2000"/>
+    <ul class= "ticks">
+      <li class="first">2</li>
+      <li class="second">8</li>
+      <li class="third">14</li>
+      <li class="fourth">20</li> 
+    </ul>
+  </div>
+</div>
 
 <h5></h5>
 <div id="realtime"></div>