Add toggleable macro elements summary in category footer to see macro…

www/activities/diary/js/group.js

@@ -30,7 +30,7 @@ app.Group = {
     let ul = document.createElement("ul");
     list.appendChild(ul);
 
-    //Collapsable list item 
+    //Collapsable list item
     let li = document.createElement("li");
     li.className = "accordion-item";
 
@@ -94,7 +94,7 @@ app.Group = {
     row.className = "row item-content";
     li.appendChild(row);
 
-    //Add button 
+    //Add button
     let left = document.createElement("div");
     left.className = "add-button";
     left.id = "add-button-" + id;
@@ -116,23 +116,46 @@ app.Group = {
     icon.innerText = "add";
     a.appendChild(icon);
 
-    //Energy 
+    //Energy
     const energyUnit = app.Settings.get("units", "energy");
     const energyName = app.Utils.getEnergyUnitName(energyUnit);
 
     let right = document.createElement("div");
     right.className = "margin-horizontal group-energy link icon-only";
-    let value = nutrition[energyName] || 0;
+    let categoryEnergyTotal = nutrition[energyName] || 0;
     let energyUnitSymbol = app.strings["unit-symbols"][energyUnit] || energyUnit;
 
     right.addEventListener("click", function(e) {
       app.Diary.showCategoryNutriments(id, nutrition);
     });
 
-    right.innerText = app.Utils.tidyNumber(Math.round(value), energyUnitSymbol);
+    let categoryMacroNutriments = app.Settings.get("diary", "show-macro-nutriments-summary") ? [
+      this.getMacroNutrimentFooterText('fat', nutrition.fat, categoryEnergyTotal),
+      this.getMacroNutrimentFooterText('carbohydrates', nutrition.carbohydrates, categoryEnergyTotal),
+      this.getMacroNutrimentFooterText('proteins', nutrition.proteins, categoryEnergyTotal)
+    ].filter(text => text !== null) : [];
+
+    right.innerText = categoryMacroNutriments.join(' / ') +
+        (categoryMacroNutriments.length > 0 ? ' / ' : '') +
+        app.Utils.tidyNumber(Math.round(categoryEnergyTotal), energyUnitSymbol);
     row.appendChild(right);
   },
 
+  getMacroNutrimentFooterText: function (nutriment/*: string*/, grams/*: number | undefined*/, categoryEnergyTotal/*: number*/) {
+    if (categoryEnergyTotal === 0) {
+      return null;
+    }
+    if (!app.Goals.showInDiary(nutriment)) {
+      return null;
+    }
+    if (grams === undefined || isNaN(grams)) {
+      return null;
+    } else {
+      const nutrimentPrefix = nutriment.charAt(0).toUpperCase();
+      return nutrimentPrefix + app.Utils.tidyNumber(Math.round(grams));
+    }
+  },
+
   addItem: function(item) {
     this.items.push(item);
   },
@@ -165,4 +188,4 @@ app.Group = {
       reset: app.Group.reset,
     };
   }
-};
+};

www/activities/settings/js/settings.js

@@ -146,7 +146,7 @@ app.Settings = {
       });
     }
 
-    // Import/Export 
+    // Import/Export
     let exportDb = document.getElementById("export-db");
     if (exportDb) {
       exportDb.addEventListener("click", function(e) {
@@ -221,7 +221,7 @@ app.Settings = {
       locale.hasSecondaryChangeEvent = true;
     }
 
-    // Animations 
+    // Animations
     let toggleAnimations = document.querySelector(".page[data-name='settings-appearance'] #toggle-animations");
 
     if (toggleAnimations != undefined && !toggleAnimations.hasSecondaryChangeEvent) {
@@ -232,7 +232,7 @@ app.Settings = {
       toggleAnimations.hasSecondaryChangeEvent = true;
     }
 
-    // Nutriment list 
+    // Nutriment list
     let nutrimentList = document.getElementById("nutriment-list");
     if (nutrimentList != undefined) {
       nutrimentList.addEventListener("sortable:sort", (li) => {
@@ -245,7 +245,7 @@ app.Settings = {
       });
     }
 
-    // Body stats list 
+    // Body stats list
     let bodyStatsList = document.getElementById("body-stats-list");
     if (bodyStatsList != undefined) {
       bodyStatsList.addEventListener("sortable:sort", (li) => {
@@ -667,6 +667,7 @@ app.Settings = {
         "show-thumbnails": false,
         "wifi-thumbnails": true,
         "show-all-nutriments": false,
+        "show-macro-nutriments-summary": false,
         "show-nutrition-units": false,
         "prompt-add-items": false
       },
@@ -850,8 +851,8 @@ app.Settings = {
         settings.statistics["last-stat"] = lastStat;
       }
       window.localStorage.removeItem("last-stat");
-      
-      // Show Brands setting should be initialized to "true", as is the historical default behaviour 
+
+      // Show Brands setting should be initialized to "true", as is the historical default behaviour
       if (settings.diary["show-brands"] === undefined) {
         settings.diary["show-brands"] = true;
       }
@@ -914,7 +915,7 @@ document.addEventListener("page:init", async function(e) {
 
   if (pageName == "settings-nutriments")
     app.Nutriments.populateNutrimentList();
-  
+
   if (pageName == "settings-body-stats")
     app.BodyStats.populateBodyStatsList();
 

www/activities/settings/views/diary.html

@@ -123,6 +123,20 @@
           </div>
         </li>
 
+        <li>
+          <div class="item-content">
+            <div class="item-inner">
+              <div class="item-title" data-localize="settings.diary.show-macro-nutriments-summary">Show macros summary per category</div>
+              <div class="item-after">
+                <label class="toggle toggle-init">
+                  <input type="checkbox" field="diary" name="show-macro-nutriments-summary" />
+                  <span class="toggle-icon"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </li>
+
         <li>
           <div class="item-content">
             <div class="item-inner">
@@ -141,4 +155,4 @@
     </div>
 
   </div>
-</div>
+</div>

www/assets/locales/locale-en.json

@@ -262,7 +262,8 @@
       "wifi-thumbnails": "Only show thumbnails over Wi-Fi",
       "show-all-nutriments": "Show all nutrients on Overview page",
       "show-units": "Show nutrition units",
-      "prompt-add-items": "Prompt for quantity when adding items"
+      "prompt-add-items": "Prompt for quantity when adding items",
+      "show-macro-nutriments-summary": "Show macros summary per category"
     },
     "nutriments": {
       "title": "Nutrients",