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

… elements per meal easily # Before I found it hard to see how much protein I should add to particular meal (category). I could achieve that by clicking on calories button and see category nutriments. Then after closing the dialog I could already forget macros values. And it required way too many clicks. # After There is: - in Diary settings, there is a new setting called 'Show macros summary per category' - macro elements summary next to calories, e.g. 'P15 / F20/ C52 400 kcal'. Prefixes stand for protein, fat, carbohydrate.
davidhealey · Dec 12, 2024 · 3d33a47 · 3d33a47
1 parent 70d5821
commit 3d33a47
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "devDependencies": {
     "cordova": "^12.0.0",
     "cordova-android": "^12.0.1",
+    "cordova-browser": "^7.0.0",
     "cordova-plugin-browsersync-gen2": "^1.1.7",
     "cordova-plugin-camera": "^7.0.0",
     "cordova-plugin-chooser": "^1.3.2",
@@ -43,7 +44,8 @@
       }
     },
     "platforms": [
-      "android"
+      "android",
+      "browser"
     ]
   }
 }
diff --git a/www/activities/diary/js/group.js b/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,42 @@ 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 macroElementsTexts = app.Settings.get("diary", "show-macro-elements-summary") ? [
+      this.getMacroElementFooterText('P', nutrition.proteins, categoryEnergyTotal),
+      this.getMacroElementFooterText('F', nutrition.fat, categoryEnergyTotal),
+      this.getMacroElementFooterText('C', nutrition.carbohydrates, categoryEnergyTotal)
+    ].filter(text => text !== '') : [];
+
+    right.innerText = macroElementsTexts.join(' / ') +
+        (macroElementsTexts.length > 0 ? ' / ' : '') +
+        app.Utils.tidyNumber(Math.round(categoryEnergyTotal), energyUnitSymbol);
     row.appendChild(right);
   },
 
+  getMacroElementFooterText: function(prefix/*: string*/, grams/*: number | undefined*/, categoryEnergyTotal/*: number*/) {
+    if (categoryEnergyTotal === 0) {
+      return '';
+    }
+    if (grams === undefined || isNaN(grams)) {
+      return '';
+    }  else {
+      return prefix  + Math.round(grams);
+    }
+  },
+
   addItem: function(item) {
     this.items.push(item);
   },
@@ -165,4 +184,4 @@ app.Group = {
       reset: app.Group.reset,
     };
   }
-};
+};
diff --git a/www/activities/settings/js/settings.js b/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-elements-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();
 

diff --git a/www/activities/settings/views/diary.html b/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-elements-summary">Show macros summary per category</div>
+              <div class="item-after">
+                <label class="toggle toggle-init">
+                  <input type="checkbox" field="diary" name="show-macro-elements-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>
diff --git a/www/assets/locales/locale-pl.json b/www/assets/locales/locale-pl.json
@@ -262,7 +262,8 @@
       "wifi-thumbnails": "Pokazuj miniatury tylko przez Wi-Fi",
       "show-all-nutriments": "Pokaż wszystkie składniki odżywcze na stronie podglądu",
       "show-units": "Pokaż jednostki odżywcze",
-      "prompt-add-items": "Pytaj o ilość podczas dodawania produktów"
+      "prompt-add-items": "Pytaj o ilość podczas dodawania produktów",
+      "show-macro-elements-summary": "Pokazuj podsumowanie makroelementów per kategoria"
     },
     "nutriments": {
       "title": "Składniki odżywcze",