Nutrients list expandable, displays description

app/controllers/ingredients_controller.rb

@@ -20,18 +20,20 @@ class IngredientsController < ApplicationController
 
     ingredients = @project.ingredients.includes(:ref_unit, nutrients: [:quantity, :unit])
     @header = @project.quantities.where(primary: true)
-    @nutrients = Hash.new { |h,k| h[k] = {} }
-    @descriptions = Hash.new { |h,k| h[k] = [] }
+    @nutrients = {}
+    @descriptions = {}
     ingredients.each do |i|
+      @nutrients[i] = {}
+      @descriptions[i] = []
       i.nutrients.sort_by { |n| n.quantity.lft }.each do |n|
         if @header.include?(n.quantity)
-          @nutrients[i.name][n.quantity_id] = "#{n.amount} [#{n.unit.shortname}]"
+          @nutrients[i][n.quantity_id] = "#{n.amount} [#{n.unit.shortname}]"
         else
-          @descriptions[i.name] << "#{n.quantity.name}: #{n.amount} [#{n.unit.shortname}]"
+          @descriptions[i] << "#{n.quantity.name}: #{n.amount} [#{n.unit.shortname}]"
         end
       end
     end
-    @descriptions.each { |k, v| @descriptions[k] = v.join(", ") }
+    @descriptions.each { |i, v| @descriptions[i] = v.join(", ") }
   end
 
   def create

app/views/ingredients/_list.html.erb

@@ -18,8 +18,7 @@
                   remote: true,
                   method: :post,
                   class: "icon icon-eye"
-                }
-            %>
+                } %>
             <%= i.name %>
           </td>
           <td class="reference value"><%= i.ref_amount %> [<%= i.ref_unit.shortname %>]</td>

app/views/ingredients/nutrients.html.erb

@@ -24,13 +24,27 @@
       </tr>
     </thead>
     <tbody>
-      <% @nutrients.each do |name, values| %>
-        <tr class="ingredient">
-          <td class="name"><%= name %></td>
+      <% @nutrients.each do |i, values| %>
+        <tr id="ingredient-<%= i.id %>" class="ingredient <%= 'hidden' if i.hidden %>">
+          <td class="name">
+            <%= link_to '', '#', {
+                  onclick: "$(this).closest('tr').next('tr').toggle(); $(this).toggleClass('icon-bullet-closed'); $(this).toggleClass('icon-bullet-open'); return false;",
+                  class: "icon icon-bullet-closed"
+                } %>
+            <%= i.name %>
+          </td>
           <% @header.each do |q| %>
             <td class="value"><%= values[q.id] || '-' %></td>
           <% end %>
         </tr>
+        <tr id="ingredient-desc-<%= i.id %>" class="ingredient <%= 'hidden' if i.hidden %>"
+            style="display:none">
+          <td></td>
+          <td colspan="<%= @header.length %>" class="description">
+            <%= @descriptions[i] %>
+          </td>
+        </tr>
+        <tr style="display:none"></tr>
       <% end %>
     </tbody>
   </table>

assets/stylesheets/body_tracking.css

@@ -8,3 +8,5 @@ table.list td.name {white-space: nowrap;}
 .icon-move-left { background-image: url(../images/1leftarrow.png); }
 .icon-move-right { background-image: url(../images/1rightarrow.png); }
 .icon-eye { background-image: url(../images/eye.png); }
+.icon-bullet-open { background-image: url(../../../images/bullet_toggle_minus.png); }
+.icon-bullet-closed { background-image: url(../../../images/bullet_toggle_plus.png); }