Collapsible

app/views/longterm/index.html.erb

@@ -9,7 +9,7 @@
         class: "btn #{button_name metric} pull-right" %>
   </div>
 </div>
-<%= render partial: 'shared/table', locals: {
+<%= render partial: 'shared/accordion_table', locals: {
   metrics: metric,
   with_year: true
 } %>

app/views/shared/_accordion_table.html.erb

@@ -0,0 +1,28 @@
+<% id = metrics.first.class.name.underscore.gsub('_', '-') %>
+<table class='table table-bordered table-hover' id='<%= id %>-table'>
+  <% count = 0 %>
+  <% date_sift(metrics).each_pair do |day, values| %>
+    <tr<% if count > 0 %> class='collapse <%= id %>-accordion'<% end %>>
+      <th colspan='4' class='day-marker'> <!-- bootstrap ignores this maybe? -->
+        <% date = Time.parse(day) %>
+        <% header = date.strftime "%A %B #{date.day.ordinalize}" %>
+        <% if with_year %>
+          <% header = date.strftime "%A %B #{date.day.ordinalize} %Y" %>
+        <% end %>
+        <%= header %>
+        <% if count == 0 %>
+          <span class='pull-right clickable' data-toggle='collapse' data-target='.<%= id %>-accordion' class='clickable'>Show / Hide</span>
+        <% end %>
+      </th>
+    </tr>
+
+    <% values.each do |value| %>
+      <%= render partial: 'shared/table_row', locals: {
+        value: value,
+        count: count,
+        id: id
+      } %>
+      <% count += 1 %>
+    <% end %>
+  <% end %>
+</table>

app/views/shared/_table_row.html.erb

@@ -1,6 +1,6 @@
-<tr>
+<tr<% if count > 0 %> class='collapse <%= id %>-accordion'<% end %>>
   <td>
-    <%= link_to value.datetime.strftime('%H:%M'),
+     <%= link_to value.datetime.strftime('%H:%M'),
       send(edit_path(value), value),
       title: 'Edit this metric'
     %>