Kan nå velge porsjonsstørrelse på matvaresiden

Mattilsynet · Oct 25, 2023 · 7154f09 · 7154f09
1 parent 3d5f399
commit 7154f09
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/src/matvaretabellen/i18n/en.edn b/src/matvaretabellen/i18n/en.edn
@@ -36,6 +36,7 @@
   :nutrients "Nutrients"
   :nutrition-heading "Main Components and Energy Content"
   :nutrition-title "Nutritional Information"
+  :portion-size "Portion Size:"
   :total [:fn/str "{{:en}}, total"]
   :toc-title "Contents"
   :total-alcohol "Alcohol"

diff --git a/src/matvaretabellen/i18n/nb.edn b/src/matvaretabellen/i18n/nb.edn
@@ -36,6 +36,7 @@
   :nutrients "Næringsstoffer"
   :nutrition-heading "Hovedkomponenter og energiinnhold"
   :nutrition-title "Næringsinnhold"
+  :portion-size "Porsjonsstørrelse:"
   :toc-title "Innhold"
   :total [:fn/str "{{:nb}}, total"]
   :total-alcohol "Alkohol"

diff --git a/src/matvaretabellen/pages/food_page.clj b/src/matvaretabellen/pages/food_page.clj
@@ -6,12 +6,16 @@
             [mt-designsystem.components.breadcrumbs :refer [Breadcrumbs]]
             [mt-designsystem.components.site-header :refer [SiteHeader]]))
 
+(defn wrap-in-portion-span [num]
+  [:span {:data-portion num} num])
+
 (defn get-nutrient-grams [food id]
   (some->> (:food/constituents food)
            (filter (comp #{id} :nutrient/id :constituent/nutrient))
            first
            :measurement/quantity
-           b/num))
+           b/num
+           wrap-in-portion-span))
 
 (defn get-nutrient-parts [food nutrient-id]
   (->> (:food/constituents food)
@@ -96,8 +100,13 @@
                             :href "#adi"}
                            {:title [:i18n ::description-title]
                             :href "#beskrivelse"}]})]]]
-       [:div.container.mtl
-        [:h2.h2 [:i18n ::nutrition-title]]]
+       [:div.container.mtl.flex
+        [:h2.h2 {:style {:flex 1}} [:i18n ::nutrition-title]]
+        [:div
+         [:div {:style {:margin-bottom 5}} [:i18n ::portion-size]]
+         [:select.select.form-field#portion-selector
+          [:option {:value "100"} "100 gram"]
+          [:option {:value "1000"} "1000 gram"]]]]
        [:div.container.container-narrow.text#naringsinnhold
         [:h3.h3 [:i18n ::nutrition-heading]]
         [:ul.subtle-list
@@ -110,6 +119,4 @@
 
         [:h3.h3 [:i18n ::fat-title]]
         (for [table (prepare-fat-tables food)]
-          (render-table table))
-
-]]]]))
+          (render-table table))]]]]))
diff --git a/src/matvaretabellen/ui/main.cljs b/src/matvaretabellen/ui/main.cljs
@@ -113,12 +113,26 @@
     (update-vals (apply hash-map (str/split (subs js/location.search 1) #"[=&]"))
                  #(js/decodeURIComponent %))))
 
+(defn handle-portion-select-event [e portion-elements]
+  (let [portion-size-in-grams (js/Number. (.-value (.-target e)))]
+    (doseq [elem (seq portion-elements)]
+      (set! (.-innerHTML elem) (* portion-size-in-grams
+                                  (/ (js/Number. (.-portion (.-dataset elem))) 100.0))))))
+
+(defn initialize-portion-selector [select-element portion-elements]
+  (when select-element
+    (.addEventListener select-element "change" #(handle-portion-select-event % portion-elements))))
+
 (defn boot []
   (main)
   (initialize-foods-autocomplete
    (js/document.querySelector ".mvt-autocomplete")
    (keyword js/document.documentElement.lang)
-   (get (get-params) "search")))
+   (get (get-params) "search"))
+
+  (initialize-portion-selector
+   (js/document.querySelector "#portion-selector")
+   (js/document.querySelectorAll "[data-portion]")))
 
 (defonce ^:export kicking-out-the-jams (boot))