1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
module Page
( component
, Query
) where
import Control.Monad.Aff (Aff)
import Data.Array (sortBy, filter)
import Data.Maybe (Maybe(..))
import Data.String (contains, Pattern(..))
import DOM (DOM)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Prelude
import Food (Aliment)
import Food as Food
import Format as Format
import Indicator as Indicator
data Query a =
NoOp a
| UpdateSearch String a
type State = String
type Message = Unit
component :: forall eff. H.Component HH.HTML Query State Message (Aff (dom :: DOM | eff))
component =
H.component
{ initialState: const ""
, render
, eval
, receiver: const Nothing
}
where
render :: State -> H.ComponentHTML Query
render state =
HH.div
[ HP.class_ $ HH.ClassName "page" ]
[ renderHeader state
, HH.div
[ HP.class_ $ HH.ClassName "aliments" ]
( Food.all
# filter (\a -> contains (Pattern $ Format.string state) (Format.string a.name))
# sortBy (\a b -> compare (Format.string a.name) (Format.string b.name))
# map renderAliment
)
]
eval :: Query ~> H.ComponentDSL State Query Message (Aff (dom :: DOM | eff))
eval = case _ of
NoOp next -> pure next
UpdateSearch search next -> do
H.put search
pure next
renderHeader :: String -> H.ComponentHTML Query
renderHeader search =
HH.div
[ HP.class_ $ HH.ClassName "header" ]
[ HH.div
[ HP.class_ $ HH.ClassName "title line" ]
[ HH.div
[]
[ HH.text "Aliment" ]
, HH.div
[]
[ HH.text "Index glycémique" ]
, HH.div
[]
[ HH.text "Glucides pour 100 g" ]
, HH.div
[]
[ HH.text "Charge glycémique" ]
]
, HH.input
[ HP.class_ $ HH.ClassName "search line"
, HP.placeholder "Rechercher…"
, HE.onValueInput (HE.input UpdateSearch)
, HP.value search
]
]
renderAliment :: Aliment -> H.ComponentHTML Query
renderAliment aliment =
HH.div
[ HP.class_ $ HH.ClassName "aliment line" ]
[ HH.div
[]
[ HH.text aliment.name ]
, HH.div
[ HP.class_ $ HH.ClassName "number" ]
[ HH.text (show aliment.glycemicIndex) ]
, HH.div
[ HP.class_ $ HH.ClassName "number" ]
[ HH.text (show aliment.carbohydrates <> " g") ]
, let glycemicLoad = Food.glycemicLoad aliment
in HH.div
[ HP.class_ $ HH.ClassName ("number " <> (Indicator.className $ Indicator.fromGlycemicLoad glycemicLoad)) ]
[ HH.text (Format.number 2 glycemicLoad) ]
]
|
