Sort recipe calculator output by grams

center-key · Jul 12, 2024 · c173765 · c173765
1 parent 92d3afa
commit c173765
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/src/website/app.js b/src/website/app.js
@@ -64,11 +64,12 @@ const app = {
          const round =        (grams) => grams < 10 ? Math.ceil(grams) : round5(grams);
          const toGrams =      (ingredient) => round((isVolume ? byVolume(ingredient) : qty * gramsPerUnit));
          const toMetric =     (ingredient) => ({ ingredient: ingredient, grams: toGrams(ingredient)});
+         const byGrams =      (metric1, metric2) => metric1.grams - metric2.grams;
          const calcResults = () => ({
             qty,
             unitsLabel,
             key,
-            metric: ingredients.map(toMetric),
+            metric: ingredients.map(toMetric).sort(byGrams),
             packed: ingredients.some(ingredient => ingredient.packed),
             });
          if (qty)

diff --git a/src/website/calculator/calculator.less b/src/website/calculator/calculator.less
@@ -2,6 +2,23 @@
 // Style: Calculator
 
 section.grams-calculator {
+   // section.grams-calculator
+   //    h2
+   //    div
+   //       form
+   //          label
+   //             input[name=quantity]
+   //          label
+   //             select[name=units]
+   //          label
+   //             select[name=ingredient]
+   //       p
+   //    figure#grams-calculator-result
+   //       figcaption
+   //       p
+   //       div
+   //          output
+   //       small
    min-height: 750px;  //reduce jitter when calculations refresh
    >div {
       position: relative;
@@ -34,11 +51,19 @@ section.grams-calculator {
          margin-bottom: 15px;
          }
       >div {
+         display: flex;
+         flex-direction: column;
+         width: max-content;
+         align-items: start;
+         margin: 0px auto;
          >output {
             display: block;
             font-style: normal;
             margin-bottom: 5px;
-            b {
+            b:first-child {
+               display: inline-block;
+               min-width: 3em;
+               text-align: right;
                }
             }
          }

diff --git a/src/website/calculator/ingredients-db.js b/src/website/calculator/ingredients-db.js
@@ -389,9 +389,6 @@ globalThis.ingredientsDB = [
    { key: 'Groats',        description: 'Roasted Buckwheat Groats',                 gramsPerCup: 198 },
    { key: 'Gumdrops',      description: 'Gumdrops',                                 gramsPerCup: 162 },
    { key: 'Ham',           description: 'Cooked Diced Ham',                         gramsPerCup: 150 },
-   { key: 'Hazelnuts',     description: 'Chopped Hazelnuts',                        gramsPerCup: 175 },
-   { key: 'Hazelnuts',     description: 'Ground Hazelnuts',                         gramsPerCup: 100 },
-   { key: 'Hazelnuts',     description: 'Whole Hazelnuts',                          gramsPerCup: 155 },
    { key: 'Honey',         description: 'Honey',                                    gramsPerCup: 340 },
    { key: 'Ice',           description: 'Crushed Ice',                              gramsPerCup: 140 },
    { key: 'Ice',           description: 'Dry Ice',                                  gramsPerCup: 200 },
@@ -478,15 +475,18 @@ globalThis.ingredientsDB = [
    { key: 'Noodles',       description: 'Dry Egg Noodles',                          gramsPerCup:  38 },
    { key: 'Noodles',       description: 'UnCooked Noodles',                         gramsPerCup:  75 },
    { key: 'Nuts',          description: 'Chopped Cashew Nuts',                      gramsPerCup: 150 },
+   { key: 'Nuts',          description: 'Chopped Hazelnuts',                        gramsPerCup: 175 },
    { key: 'Nuts',          description: 'Chopped Nuts',                             gramsPerCup: 150 },
    { key: 'Nuts',          description: 'Chopped Pistachio Nuts',                   gramsPerCup: 100 },
+   { key: 'Nuts',          description: 'Ground Hazelnuts',                         gramsPerCup: 100 },
    { key: 'Nuts',          description: 'Ground Nuts',                              gramsPerCup: 120 },
    { key: 'Nuts',          description: 'Nutella Hazelnut Cocoa Spread',            gramsPerCup: 298 },
    { key: 'Nuts',          description: 'Pine Nuts',                                gramsPerCup: 130 },
    { key: 'Nuts',          description: 'Pistachio Paste',                          gramsPerCup: 312 },
    { key: 'Nuts',          description: 'Shelled Pistachio Nuts',                   gramsPerCup: 120 },
    { key: 'Nuts',          description: 'Whole Brazil Nuts',                        gramsPerCup: 153 },
    { key: 'Nuts',          description: 'Whole Cashew Nuts',                        gramsPerCup: 150 },
+   { key: 'Nuts',          description: 'Whole Hazelnuts',                          gramsPerCup: 155 },
    { key: 'Nuts',          description: 'Whole Macadamia Nuts',                     gramsPerCup: 149 },
    { key: 'Nuts',          description: 'Whole Pistachio Nuts',                     gramsPerCup: 150 },
    { key: 'Oats',          description: 'Oat Bran',                                 gramsPerCup:  80 },