add catalog filters, furbyLink component

8 files changed, 128 insertions, 44 deletions

diff --git a/frontend/src/Cart.elm b/frontend/src/Cart.elm
index 4f4cbef..f4697a8 100644
--- a/frontend/src/Cart.elm
+++ b/frontend/src/Cart.elm
@@ -193,7 +193,7 @@ viewCartItemListing listing =
     --     , div [] [ a [ href ("/product/" ++ String.fromInt listing.productItem.id) ] [ text "View Product" ] ]
     --     ]
     tr []
-        [ td [] [ a [ href ("/product/" ++ String.fromInt listing.productItem.id) ] [ text listing.productItem.name ] ]
+        [ td [] [ furbyLink [ href ("/product/" ++ String.fromInt listing.productItem.id) ] [ text listing.productItem.name ] ]
         , td [] [ text <| String.fromFloat listing.productItem.price ]
         , td []
             [ furbyButton [ onClick (RemoveFromCart listing.productItem.id) ] [ div [ style "font-family" "monospace" ] [ text "-" ] ]
@@ -250,6 +250,6 @@ view model =
                         [ css [ textAlign right ] ]
                         [ furbyButton
                             []
-                            [ a [ href "/checkout" ] [ text "Checkout" ] ]
+                            [ furbyLink [ href "/checkout" ] [ text "Checkout" ] ]
                         ]
                     ]
diff --git a/frontend/src/Catalog.elm b/frontend/src/Catalog.elm
index d4cbf96..666245e 100644
--- a/frontend/src/Catalog.elm
+++ b/frontend/src/Catalog.elm
@@ -10,6 +10,7 @@ import Html.Styled.Events exposing (..)
 import Http
 import Json.Decode as D
 import Json.Encode as Encode
+import Set
 import Styles exposing (..)
 import Tuple exposing (..)
 import Utils exposing (..)
@@ -35,12 +36,13 @@ type alias Product =
 type alias Filters =
     { price : ( Float, Float )
     , rating : ( Float, Float )
+    , kinds : Set.Set String
     }
 
 
 defaultFilters : Filters
 defaultFilters =
-    Filters ( -1, 100000 ) ( 0, 5 )
+    Filters ( -1, 100000 ) ( 0, 5 ) (Set.fromList [ "Chair", "Sofa", "Bed", "Table", "Lamp" ])
 
 
 type alias Model =
@@ -63,6 +65,7 @@ type Msg
     | ChangePriceUpper Float
     | ChangeRatingLower Float
     | ChangeRatingUpper Float
+    | FilterCheck String Bool
 
 
 init : Model
@@ -128,6 +131,28 @@ update msg model =
             in
             ( { model | filters = nfs }, Cmd.none )
 
+        FilterCheck field val ->
+            case val of
+                True ->
+                    let
+                        fs =
+                            model.filters
+
+                        nfs =
+                            { fs | kinds = Set.insert field fs.kinds }
+                    in
+                    ( { model | filters = nfs }, Cmd.none )
+
+                False ->
+                    let
+                        fs =
+                            model.filters
+
+                        nfs =
+                            { fs | kinds = Set.remove field fs.kinds }
+                    in
+                    ( { model | filters = nfs }, Cmd.none )
+
 
 decodeProduct : D.Decoder Product
 decodeProduct =
@@ -181,13 +206,13 @@ viewProduct p =
             , borderRadius (px 4)
             , padding (px 20)
             , Css.width (pct 100)
-            , maxWidth (px 650)
+            , maxWidth (px 350)
             ]
         ]
         [ div
             [ css
-                [ float left
-                , Css.width (pct 50)
+                [ Css.width (pct 100)
+                , Css.height (px 350)
                 ]
             ]
             [ modelViewer
@@ -197,13 +222,13 @@ viewProduct p =
                 , arIosSrc p.iosSrc
                 , loading "eager"
                 , arModes "webxr"
+                , css [ Css.width (pct 100), Css.height (pct 100) ]
                 ]
                 []
             ]
         , div
             [ css
-                [ float left
-                , Css.width (pct 50)
+                [ Css.width (pct 100)
                 ]
             ]
             [ div
@@ -220,7 +245,7 @@ viewProduct p =
                     , paddingBottom (px 3)
                     ]
                 ]
-                [ a [ href ("/product/" ++ String.fromInt p.id) ] [ text p.name ] ]
+                [ furbyLink [ href ("/product/" ++ String.fromInt p.id) ] [ text p.name ] ]
             , div
                 [ css
                     [ cardSecondaryText
@@ -274,22 +299,57 @@ viewFilters model =
         [ div
             [ css
                 [ bigHeading
-                , paddingBottom (px 12)
+                , paddingBottom (px 18)
                 ]
             ]
             [ text "Filters" ]
-        , div []
+        , div
+            [ css
+                [ paddingBottom (px 12)
+                ]
+            ]
             [ div [] [ text "Price" ]
             , furbySelect [ onInput (ChangePriceLower << inp), style "appearance" "none" ] (viewRange 0 priceRange)
             , text "to"
             , furbySelect [ onInput (ChangePriceUpper << inp), style "appearance" "none" ] (viewRange 50000 priceRange)
             ]
-        , div []
+        , div
+            [ css
+                [ paddingBottom (px 12)
+                ]
+            ]
             [ div [] [ text "Rating" ]
             , furbySelect [ onInput (ChangeRatingLower << inp), style "appearance" "none" ] (viewRange 1 ratingRange)
             , text "to"
             , furbySelect [ onInput (ChangeRatingUpper << inp), style "appearance" "none" ] (viewRange 5 ratingRange)
             ]
+        , let
+            kinds =
+                [ "Chair", "Sofa", "Bed", "Table", "Lamp" ]
+          in
+          div []
+            ([ div
+                [ css
+                    [ paddingBottom (px 12)
+                    ]
+                ]
+                [ text "Furniture Kind" ]
+             ]
+                ++ List.map
+                    (\k ->
+                        div
+                            []
+                            [ input
+                                [ type_ "checkbox"
+                                , onCheck (FilterCheck k)
+                                , Html.Styled.Attributes.checked (Set.member k model.filters.kinds)
+                                ]
+                                []
+                            , text k
+                            ]
+                    )
+                    kinds
+            )
         ]
 
 
@@ -297,6 +357,7 @@ filterProducts : Model -> List Product
 filterProducts model =
     model.products
         |> List.filter (between model.filters.price << .price)
+        |> List.filter (flip Set.member model.filters.kinds << Maybe.withDefault "Chair" << .kind)
         |> List.filter
             (\p ->
                 p.averageRating
@@ -328,11 +389,9 @@ view model =
                         ]
                     ]
                     [ div [ css [ bigHeading ] ] [ text "Products" ]
-                    , ul
-                        [ css
-                            [ padding (px 0)
-                            , listStyle Css.none
-                            ]
+                    , div
+                        [ style "display" "grid"
+                        , style "grid-template-columns" "auto auto auto"
                         ]
                         (filterProducts model |> List.map viewProduct)
                     ]
diff --git a/frontend/src/Login.elm b/frontend/src/Login.elm
index 87657bb..92a894f 100644
--- a/frontend/src/Login.elm
+++ b/frontend/src/Login.elm
@@ -134,5 +134,5 @@ view model =
         , div [ fieldPadding ] [ viewInput "password" "Password" model.password PassEntered ]
         , div [ css [ textAlign center ], fieldPadding ] [ furbyButton [ onClick LoginPressed ] [ text "Login" ] ]
         , div [ css [ textAlign center ] ] [ text (viewStatus model.loginStatus) ]
-        , div [ fieldPadding ] [ text "Don't have an account? ", a [ href "/signup" ] [ text "Register now!" ] ]
+        , div [ fieldPadding ] [ text "Don't have an account? ", furbyLink [ href "/signup" ] [ text "Register now!" ] ]
         ]
diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
index 09a851d..07b029d 100644
--- a/frontend/src/Main.elm
+++ b/frontend/src/Main.elm
@@ -315,23 +315,24 @@ view model =
         HomePage ->
             { title = "Login"
             , body =
-                -- model.loginModel
-                --     |> Login.view
-                --     |> Html.Styled.map LoginMessage
-                --     |> toUnstyled
-                --     |> List.singleton
-                div []
-                    [ ul []
-                        (List.map
-                            (\l ->
-                                li []
-                                    [ a [ href l ] [ text l ] ]
-                            )
-                            [ "/login", "/catalog", "/cart" ]
-                        )
-                    ]
+                model.loginModel
+                    |> Login.view
+                    |> Html.Styled.map LoginMessage
                     |> toUnstyled
                     |> List.singleton
+
+            --div []
+            --    [ ul []
+            --        (List.map
+            --            (\l ->
+            --                li []
+            --                    [ a [ href l ] [ text l ] ]
+            --            )
+            --            [ "/login", "/catalog", "/cart" ]
+            --        )
+            --    ]
+            --    |> toUnstyled
+            --    |> List.singleton
             }
 
         LoginPage ->
diff --git a/frontend/src/Product.elm b/frontend/src/Product.elm
index 964538b..bedb22d 100644
--- a/frontend/src/Product.elm
+++ b/frontend/src/Product.elm
@@ -257,7 +257,7 @@ viewProduct p =
     div
         [ css
             [ marginBottom (px 20)
-            , padding (px 20)
+            , paddingTop (px 20)
             , Css.width (pct 100)
             ]
         ]
@@ -265,6 +265,7 @@ viewProduct p =
             [ css
                 [ float left
                 , Css.width (pct 50)
+                , Css.height (px 400)
                 ]
             ]
             [ modelViewer
@@ -274,6 +275,7 @@ viewProduct p =
                 , arIosSrc p.iosSrc
                 , loading "eager"
                 , arModes "webxr"
+                , css [ Css.height (pct 100), Css.width (pct 100) ]
                 ]
                 []
             ]
@@ -312,12 +314,11 @@ viewProduct p =
                     , money
                     ]
                 ]
-                [ text <| String.fromFloat p.price
-                , div []
-                    [ furbyButton [ onClick AddToCartPressed ] [ text "Add To Cart" ]
-                    ]
-                ]
+                [ text <| String.fromFloat p.price ]
             ]
+        , div
+            [ css [ textAlign center, float bottom ] ]
+            [ furbyButton [ onClick AddToCartPressed, style "width" "100%" ] [ text "Add To Cart" ] ]
         , div [ style "clear" "both" ] []
         ]
 
@@ -377,7 +378,7 @@ viewInput t p v toMsg =
         , placeholder p
         , value v
         , onInput toMsg
-        , css [ Css.width (pct 100), Css.height (px 100) ]
+        , css [ Css.width (pct 100) ]
         ]
         []
 
@@ -457,7 +458,14 @@ view model =
                     [ viewStars model
                     , div
                         []
-                        [ viewInput "textarea" "Enter Comment Text" model.ratingText AddRatingComment ]
+                        [ textarea
+                            [ onInput AddRatingComment
+                            , rows 5
+                            , placeholder "Enter comment text"
+                            , css [ Css.width (pct 100) ]
+                            ]
+                            [ text model.ratingText ]
+                        ]
                     , div
                         [ css
                             [ textAlign center ]
diff --git a/frontend/src/Signup.elm b/frontend/src/Signup.elm
index 028af9c..64c744e 100644
--- a/frontend/src/Signup.elm
+++ b/frontend/src/Signup.elm
@@ -217,7 +217,7 @@ view model =
             ]
         , div [ fieldPadding ]
             [ text "Already have a account? "
-            , a [ href "/login" ] [ text "Login >" ]
+            , furbyLink [ href "/login" ] [ text "Login >" ]
             ]
         , text (viewStatus model.status)
         ]
diff --git a/frontend/src/Styles.elm b/frontend/src/Styles.elm
index 4222024..08cd6f3 100644
--- a/frontend/src/Styles.elm
+++ b/frontend/src/Styles.elm
@@ -47,8 +47,7 @@ headerLink =
         , padding (px 12)
         , textDecoration Css.none
         , hover
-            [ backgroundColor theme.secondary
-            , textDecoration underline
+            [ textDecoration underline
             ]
         ]
 
@@ -71,6 +70,17 @@ furbyButton =
         ]
 
 
+furbyLink : List (Attribute msg) -> List (Html msg) -> Html msg
+furbyLink =
+    styled a
+        [ color theme.fgLight
+        , textDecoration Css.none
+        , hover
+            [ backgroundColor theme.secondary
+            ]
+        ]
+
+
 furbyRadio : String -> msg -> Html msg
 furbyRadio value msg =
     label
@@ -108,6 +118,7 @@ loginInputField =
         , color theme.fg
         , border (px 0)
         , borderBottom3 (px 1) solid theme.bgLight
+        , outline Css.none
         , focus
             [ borderBottom3 (px 2) solid theme.fg
             ]
diff --git a/frontend/src/Utils.elm b/frontend/src/Utils.elm
index b6c4bd5..3a308ca 100644
--- a/frontend/src/Utils.elm
+++ b/frontend/src/Utils.elm
@@ -11,6 +11,11 @@ between ( l, u ) v =
     v >= l && v <= u
 
 
+flip : (a -> b -> c) -> (b -> a -> c)
+flip f =
+    \b a -> f a b
+
+
 range : Int -> Int -> Int -> List Int
 range start stop step =
     if start >= stop then