Displaying heirarchical quantity headers

app/helpers/body_trackers_helper.rb

@@ -37,4 +37,38 @@ module BodyTrackersHelper
       [u.shortname, u.id]
     end
   end
+
+  def table_header_spec(quantities)
+    # spec: table of rows (tr), where each row is a hash of cells (td) (hash keeps items
+    # ordered the way they were added). Hash values determine cell property:
+    # * int > 0 - quantity name-labelled cell with 'int' size colspan
+    # * int < 0 - quantity name-labelled cell with 'int' size rowspan
+    # * nil - non-labelled cell without col-/rowspan
+    spec = []
+    default_row = Hash.new(0)
+
+    # Determine colspans first...
+    quantities.each do |q|
+      ancestors = q.self_and_ancestors.each_with_index do |a, i|
+        spec[i] ||= default_row.dup
+        spec[i][a] += 1
+      end
+      spec[ancestors.length...spec.length].each { |row| row[ancestors.last] = nil }
+      default_row[ancestors.last] = nil
+    end
+
+    # ...then rowspans
+    single_columns = []
+    spec.each_with_index do |row, i|
+      single_columns.each { |q| row.delete(q) }
+      row.each do |q, span|
+        if span == 1
+          row[q] = -(spec.length - i)
+          single_columns << q
+        end
+      end
+    end
+
+    spec
+  end
 end

app/views/meals/_index.html.erb

@@ -8,21 +8,33 @@
   <table id="meals" class="list odd-even">
     <tbody>
       <% total_width = 4 + @quantities.length %>
+      <% header = table_header_spec(@quantities) %>
       <% @meals_by_date.reverse_each do |date, meals| %>
-        <tr class="header">
+        <% header.each_with_index do |row, i| %>
-          <td colspan="2" rowspan="2"
+          <tr class="header">
-              style="width:<%= 3 * 100/total_width %>%; border: none;"></td>
+            <% if i == 0 %>
-          <td class="quantityhead" style="width:<%= 100/total_width %>%;">
+              <td colspan="2" rowspan="<%= 1 + header.length %>"
-            <%= l(:field_amount) %>
+                  style="width:<%= 3 * 100/total_width %>%; border: none;"></td>
-          </td>
+              <td class="quantityhead" rowspan="<%= header.length %>"
-          <% @quantities.each do |q| %>
+                  style="width:<%= 100/total_width %>%;"><%= l(:field_amount) %></td>
-            <td class="quantityhead" style="width: <%= 100/total_width %>%;"
+            <% end %>
-                title="<%= q.description %>">
+
-              <%= q.name %>
+            <% row.each do |q, span| %>
-            </td>
+              <td class="<%= span ? 'quantityhead' : 'quantityheadempty' %>"
-          <% end %>
+                  <%= "colspan=#{span}" if span && span > 0 %>
-          <td rowspan="2" style="width:<%= 100/total_width %>%; border: none;"></td>
+                  <%= "rowspan=#{-span}" if span && span < 0 %>
-        </tr>
+                  style="width: <%= (span && span > 0 ? span : 1) * 100/total_width %>%;"
+                  title="<%= q.description %>">
+                <%= q.name if span %>
+              </td>
+            <% end %>
+
+            <% if i == 0 %>
+              <td rowspan="<%= 1 + header.length %>"
+                  style="width:<%= 100/total_width %>%; border: none;"></td>
+            <% end %>
+          </tr>
+        <% end %>
 
         <tr class="header">
           <td class="quantityhead"><%= "[#{@amount_mfu_unit.shortname}]" %></td>

assets/stylesheets/body_tracking.css

@@ -8,11 +8,11 @@ table.list .quantity {text-align: left;}
 /* TODO: merge with .closable */
 table.list .quantityhead {
   text-align: center;
-  vertical-align: bottom;
   position: relative;
   padding: 2px 0;
-  border: none;
+  border-bottom: none;
 }
+table.list .quantityheadempty {border-top: none; border-bottom: none;}
 
 table.list .action,
 table.list .value {text-align: right; padding-right: 2px;}