diff options
Diffstat (limited to 'src/Page.purs')
| -rw-r--r-- | src/Page.purs | 73 |
1 files changed, 49 insertions, 24 deletions
diff --git a/src/Page.purs b/src/Page.purs index f7c04c2..40c8ddc 100644 --- a/src/Page.purs +++ b/src/Page.purs @@ -1,10 +1,11 @@ module Page ( component , Query + , init ) where import Control.Monad.Aff (Aff) -import Data.Array (sortBy, filter) +import Data.Array (sortBy, filter, reverse) import Data.Maybe (Maybe(..)) import Data.String (contains, Pattern(..)) import DOM (DOM) @@ -18,19 +19,30 @@ import Food (Aliment) import Food as Food import Format as Format import Indicator as Indicator +import Order (Order, OrderKind) +import Order as Order data Query a = - NoOp a - | UpdateSearch String a + UpdateSearch String a + | SelectOrder OrderKind a -type State = String +type State = + { search :: String + , order :: Order + } + +init :: State +init = + { search: "" + , order: Order.init + } type Message = Unit component :: forall eff. H.Component HH.HTML Query State Message (Aff (dom :: DOM | eff)) component = H.component - { initialState: const "" + { initialState: const init , render , eval , receiver: const Nothing @@ -40,41 +52,46 @@ component = render state = HH.div [ HP.class_ $ HH.ClassName "page" ] - [ renderHeader state + [ renderHeader state.order.kind state.search , 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)) + # filter (\a -> contains (Pattern $ Format.string state.search) (Format.string a.name)) + # sortBy compareAliments + # (if state.order.direction == Order.Ascending then id else reverse) # map renderAliment ) ] + where + compareAliments :: Aliment -> Aliment -> Ordering + compareAliments a b = + case state.order.kind of + Order.Name -> compare (Format.string a.name) (Format.string b.name) + Order.GlycemicIndex -> compare a.glycemicIndex b.glycemicIndex + Order.Carbohydrates -> compare a.carbohydrates b.carbohydrates + Order.GlycemicLoad -> compare (Food.glycemicLoad a) (Food.glycemicLoad b) 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 + state <- H.get + H.put $ state { search = search } + pure next + SelectOrder kind next -> do + state <- H.get + H.put $ state { order = Order.select kind state.order } pure next -renderHeader :: String -> H.ComponentHTML Query -renderHeader search = +renderHeader :: OrderKind -> String -> H.ComponentHTML Query +renderHeader orderKind 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" ] + [ button Order.Name "Aliment" + , button Order.GlycemicIndex "Index glycémique" + , button Order.Carbohydrates "Glucides pour 100 g" + , button Order.GlycemicLoad "Charge glycémique" ] , HH.input [ HP.class_ $ HH.ClassName "search line" @@ -83,6 +100,14 @@ renderHeader search = , HP.value search ] ] + where + button :: OrderKind -> String -> H.ComponentHTML Query + button kind label = + HH.button + [ HE.onClick (HE.input_ (SelectOrder kind)) + , HP.class_ $ HH.ClassName (if orderKind == kind then "sorted" else "") + ] + [ HH.text label ] renderAliment :: Aliment -> H.ComponentHTML Query renderAliment aliment = |