Better unit showing on shopping list

src/components/shopping/ShoppingListItem.vue

@@ -9,7 +9,7 @@
             <small>
                 <span v-for="(total, index) in totals" :key="total.id">
                     <span v-if="index">, </span>
-                    <span>{{ total.quantity }}&nbsp;{{ total.unit }}</span>
+                    <span>{{ formatQuantity(total.quantity) }}&nbsp;{{ total.unit }}</span>
                 </span> 
                 <span class="found-marker found" v-if="fullyFound && foundDate">✓ {{ getFriendlyDate(foundDate) }}</span>
                 <span class="found-marker partial" v-else-if="foundDate">? {{ getFriendlyDate(foundDate) }}</span>
@@ -19,10 +19,10 @@
             <span v-for="(source, index) in sources" :key="source.id">
                 <span v-if="index">, and </span>
                 <span v-if="source.person">
-                    {{ source.ingredient.quantity }} {{ source.ingredient.unit }} for {{ source.person.name }}
+                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ source.ingredient.unit }} for {{ source.person.name }}
                 </span>
                 <span v-else-if="source.recipe">
-                    {{ source.ingredient.quantity }} {{ source.ingredient.unit }} 
+                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ source.ingredient.unit }} 
                     in <router-link :to="`/recipes/${ source.recipe.id }/`">{{ source.recipe.name }}</router-link>
                     for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.meal_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
                 </span>
@@ -134,6 +134,18 @@ export default {
             }
 
             return "moments ago";
+        },
+        formatQuantity(quantity) {
+            const log10 = Math.log10(quantity);
+            if (log10 < 0) {
+                return quantity.toPrecision(2);
+            }
+            else if (log10 < 1) {
+                return quantity.toFixed(1);
+            }
+            else {
+                return quantity.toFixed(0);
+            }
         }
     }
 }

src/components/shopping/shopping.js

@@ -52,16 +52,37 @@ export function groupingToIngredients(grouping) {
 }
 
 function calculateTotals(sources) {
-    const totals = {};
+    let byBaseUnit = {};
     for (const { quantity, unit } of sources) {
         const conversion = units.getConversionFactor(unit) ?? { unit, factor: 1 };
-
+        
-        const quantityInBase = quantity / conversion.factor;
+        if (!byBaseUnit[conversion.unit]) {
-        if (!totals[conversion.unit]) {
+            byBaseUnit[conversion.unit] = {};
-            totals[conversion.unit] = quantityInBase;
+        }
+        
+        if (!byBaseUnit[conversion.unit][unit]) {
+            byBaseUnit[conversion.unit][unit] = { quantity, factor: conversion.factor };
         }
         else {
-            totals[conversion.unit] += quantityInBase;
+            byBaseUnit[conversion.unit][unit].quantity += quantity;
+        }
+    }
+
+    const totals = {};
+    for (const baseUnit in byBaseUnit) {
+        if (Object.keys(byBaseUnit[baseUnit]).length === 1) {
+            const unit = Object.keys(byBaseUnit[baseUnit])[0];
+            const { quantity, } = byBaseUnit[baseUnit][unit];
+            totals[unit] = quantity;
+        }
+        else {
+            let total = 0;
+            for (const unit in byBaseUnit[baseUnit]) {
+                const { quantity, factor } = byBaseUnit[baseUnit][unit];
+                total += quantity / factor;
+            }
+
+            totals[baseUnit] = total;
         }
     }
 

src/units.js

@@ -16,6 +16,7 @@ export const equivalentUnits = {
     'litres': {
         'l': 1,
         'liter': 1,
+        'litre': 1,
 
         'ml': 1000,
         'milliliters': 1000,