propses change to ul>li from div>div for list of past timers. #101

dwyl · Apr 9, 2015 · 753d1ea · 753d1ea
1 parent 83295bb
commit 753d1ea
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 29 deletions.
diff --git a/front/public/js/alpha.js b/front/public/js/alpha.js
@@ -189,33 +189,30 @@ $(document).ready(function() {
    * rendertimers renders your list of past timers in the ui.
    * centralises all the view rendering.
    */
-   var rendertimers = function() {
-     // transform the timers object to an arry:
+  var rendertimers = function() {
+    // transform the timers Object to an Array so we can SORT it below:
     var arr = Object.keys(timers).map(function(id) {
-      var timer = timers[id];
-      timer.endtimestamp = new Date(timer.end).getTime(); // used to sort below
+    var timer = timers[id];
+    timer.endtimestamp = new Date(timer.end).getTime(); // used to sort below
       return timer;
     });
-     var byDate = arr.sort(function(a,b) {
-        console.log(" >>>>>>>>>>>>> "+ b.endtimestamp +" - " +a.endtimestamp)
-        return b.endtimestamp - a.endtimestamp;
-     });
-     // Add timer to past-timers list using handlebars
-     var raw_template = $('#timer_list_template').html();
-     var template = Handlebars.compile(raw_template);
-     var placeHolder = $("#past-timers");
-     var html = '';
-     console.log(timers);
-    //  var ids = Object.keys(timers);
-     byDate.map(function(i){
-       var timer = i // timers[i]
-       timer.took = timeformat(timer.elapsed); // repetitive ...
-       html += template(timer);
-       console.log(" >>> "+i, timer);
-     })
-     placeHolder.html(html);
-     return;
-   }
+    var byDate = arr.sort(function(a,b) {
+      return b.endtimestamp - a.endtimestamp;
+    });
+    // Add timer to past-timers list using handlebars
+    var raw_template = $('#timer_list_template').html();
+    var template = Handlebars.compile(raw_template);
+    var parent = $("#past-timers-list");
+    var html = '';
+    byDate.map(function(i){
+      var timer = i // timers[i]
+      timer.took = timeformat(timer.elapsed); // repetitive ...
+      html += template(timer);
+      console.log(" >>> "+i, timer);
+    })
+    parent.html(html); // completely re-write the DOM each time! :-O
+    return;
+  }
 
   /**
    * transform our timers object of timer objects into an array (list)

diff --git a/front/views/index.html b/front/views/index.html
@@ -29,9 +29,9 @@
     </section>
 
     <section id="past-timers">
-      <div id="why">
-        <p>Track your time. Your past timers will appear here.</p>
-      </div>
+      <ul id="past-timers-list">
+        <li id="why">Track your time. Your past timers will appear here.</li>
+      </ul>
     </section>
 
 
@@ -51,11 +51,11 @@
 
 <!-- HANDLEBARS TEMPLATE -->
   <script id="timer_list_template" type="text/x-handlebars-template">
-    <div class="timer-one-line">
+    <li class="timer-one-line" id="\{{id}}">
         <i class="fa fa-check-circle-o"></i>
         <span class="timer-desc">\{{desc}}</span>
         <span class="timer-time">\{{took}}</span>
-    </div>
+    </li>
   </script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>