Merge pull request #91 from leonbeon/pr-ingredient-units

Add option to show quantities next to ingredients in recipe text

Author: dubadub

ui/src/App.svelte

@@ -8,6 +8,7 @@
     import Recipe from "./Recipe.svelte";
     import Logo from "./Logo.svelte";
     import ShoppingList from "./ShoppingList.svelte";
+    import Preferences from "./Preferences.svelte";
 
     import {fetchRecipes} from "./backend.js";
     import {fileTree, convertPathsIntoTree} from "./store.js";
@@ -37,12 +38,18 @@
                 <NavItem>
                     <NavLink href="/shopping-list">Shopping list</NavLink>
                 </NavItem>
+
+                <NavItem>
+                    <NavLink href="/preferences">Preferences</NavLink>
+                </NavItem>
             </Nav>
         </Navbar>
 
         <div class="py-3">
             <Route path="shopping-list" component="{ShoppingList}" />
 
+            <Route path="preferences" component="{Preferences}" />
+
             <Route path="recipe/*recipePath" let:params>
                 <Recipe recipePath={params.recipePath} />
             </Route>

ui/src/Preferences.svelte

@@ -0,0 +1,17 @@
+<script>
+    import {ListGroup, ListGroupItem, TabContent, TabPane, Button} from "sveltestrap";
+
+    import {showQuantitiesNextToIngredients} from "./store.js";
+</script>
+
+<TabContent>
+    <TabPane tabId="preferences" tab="Preferences" active>
+    <!-- add checkbox input to toggle showQuantitiesNextToIngredients store -->
+    <label class="my-3" for="show-quantities-next-to-ingredients">
+        <input type="checkbox" id="show-quantities-next-to-ingredients" bind:checked={$showQuantitiesNextToIngredients}>
+        <span>Show quantities next to ingredients in recipes</span>
+    </label>
+</TabPane>
+
+
+</TabContent>

ui/src/Step.svelte

@@ -1,6 +1,7 @@
 <script>
 export let step, ingredients, cookware, timers;
 import {formatQuantity} from "./quantity";
+import {showQuantitiesNextToIngredients} from "./store.js"
 
 function formatText(item) {
     return item.value;
@@ -26,7 +27,11 @@ function itemsToString(items, ingredients, cookware, timers) {
     return items.map((item) => {
         switch(item.type) {
             case "ingredient":
-                return formatIngredient(ingredients[item.index]);
+                if ($showQuantitiesNextToIngredients) {
+                    return `${formatIngredient(ingredients[item.index])} <span class="text-muted">(${formatQuantity(ingredients[item.index].quantity)})</span>`;
+                } else {
+                    return formatIngredient(ingredients[item.index]);
+                }
             case "cookware":
                 return formatCookware(cookware[item.index]);
             case "text":
@@ -43,7 +48,7 @@ function itemsToString(items, ingredients, cookware, timers) {
 <div class="card border-0">
     <div class="card-body">
         <h6 class="card-title">Step {step.number}</h6>
-        <p class="card-text">{itemsToString(step.items, ingredients, cookware, timers)}</p>
+        <p class="card-text">{@html itemsToString(step.items, ingredients, cookware, timers)}</p>
     </div>
 </div>
 

ui/src/store.js

@@ -49,3 +49,12 @@ function createShoppingListPaths() {
 }
 
 export const shoppingListPaths = createShoppingListPaths();
+
+// Preference for showing quantities next to ingredients, default is false
+const showQuantitiesNextToIngredientsValue = localStorage.getItem("showQuantitiesNextToIngredients") || "false";
+export const showQuantitiesNextToIngredients = writable(JSON.parse(showQuantitiesNextToIngredientsValue));
+
+// Subscribe method to update local storage
+showQuantitiesNextToIngredients.subscribe((val) => {
+    localStorage.setItem("showQuantitiesNextToIngredients", JSON.stringify(val));
+})