From d5aabbac71fcd12f31c82159fe0d7a58d0ad925d Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 27 Dec 2020 16:57:44 +0530 Subject: add catalog filters, furbyLink component --- frontend/src/Cart.elm | 4 +-- frontend/src/Catalog.elm | 89 ++++++++++++++++++++++++++++++++++++++++-------- frontend/src/Login.elm | 2 +- frontend/src/Main.elm | 31 +++++++++-------- frontend/src/Product.elm | 24 ++++++++----- frontend/src/Signup.elm | 2 +- frontend/src/Styles.elm | 15 ++++++-- frontend/src/Utils.elm | 5 +++ 8 files changed, 128 insertions(+), 44 deletions(-) (limited to 'frontend') 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 -- cgit v1.2.3