5 files changed, 240 insertions, 34 deletions

diff --git a/frontend/src/Catalog.elm b/frontend/src/Catalog.elm
index 5b233f2..7e9bde7 100644
--- a/frontend/src/Catalog.elm
+++ b/frontend/src/Catalog.elm
@@ -27,6 +27,8 @@ type alias Product =
     , price : Float
     , description : Maybe String
     , averageRating : Maybe Float
+    , src : String
+    , iosSrc : String
     }
 
 
@@ -129,13 +131,15 @@ update msg model =
 
 decodeProduct : D.Decoder Product
 decodeProduct =
-    D.map6 Product
+    D.map8 Product
         (D.field "id" D.int)
         (D.field "name" D.string)
         (D.field "kind" (D.nullable D.string))
         (D.field "price" D.float)
         (D.field "description" (D.nullable D.string))
         (D.field "average_rating" (D.nullable D.float))
+        (D.field "src" D.string)
+        (D.field "ios_src" D.string)
 
 
 decodeResponse : D.Decoder (List Product)
@@ -170,18 +174,83 @@ viewStatus s =
 
 viewProduct : Product -> Html Msg
 viewProduct p =
-    div []
-        [ div [] [ text p.name ]
-        , div [] [ text <| Maybe.withDefault "" p.kind ]
-        , div [] [ text <| Maybe.withDefault "" p.description ]
-        , div [] [ text <| String.fromFloat p.price ]
-        , case p.averageRating of
-            Just v ->
-                text <| "Avg Rating: " ++ String.fromFloat v
-
-            Nothing ->
-                text "No Ratings"
-        , div [] [ a [ href ("/product/" ++ String.fromInt p.id) ] [ text "View Product" ] ]
+    div
+        [ css
+            [ marginBottom (px 20)
+            , border3 (px 1) solid theme.primary
+            , borderRadius (px 4)
+            , padding (px 20)
+            , Css.width (pct 100)
+            , maxWidth (px 650)
+            ]
+        ]
+        [ div
+            [ css
+                [ float left
+                , Css.width (pct 50)
+                ]
+            ]
+            [ modelViewer
+                [ cameraControls
+                , autoRotate
+                , arSrc p.src
+                , arIosSrc p.iosSrc
+                , loading "eager"
+                , arModes "webxr"
+                ]
+                []
+            ]
+        , div
+            [ css
+                [ float left
+                , Css.width (pct 50)
+                ]
+            ]
+            [ div
+                [ css
+                    [ cardSecondaryText
+                    , paddingBottom (px 3)
+                    , fontVariant smallCaps
+                    ]
+                ]
+                [ text <| Maybe.withDefault "" p.kind ]
+            , div
+                [ css
+                    [ cardPrimaryText
+                    , paddingBottom (px 3)
+                    ]
+                ]
+                [ a [ href ("/product/" ++ String.fromInt p.id) ] [ text p.name ] ]
+            , div
+                [ css
+                    [ cardSecondaryText
+                    , paddingBottom (px 12)
+                    ]
+                ]
+                [ case p.averageRating of
+                    Just v ->
+                        text <| "Avg Rating: " ++ String.fromFloat v
+
+                    Nothing ->
+                        text "No Ratings"
+                ]
+            , div
+                [ css
+                    [ cardSupportingText
+                    , paddingBottom (px 6)
+                    ]
+                ]
+                [ text <| Maybe.withDefault "No description provided" p.description ]
+            , div
+                [ css
+                    [ fontWeight bold
+                    , fontSize (px 14)
+                    , money
+                    ]
+                ]
+                [ text <| String.fromFloat p.price ]
+            ]
+        , div [ style "clear" "both" ] []
         ]
 
 
@@ -260,7 +329,10 @@ view model =
                     ]
                     [ div [ css [ bigHeading ] ] [ text "Products" ]
                     , ul
-                        [ css [ padding (px 0) ]
+                        [ css
+                            [ padding (px 0)
+                            , listStyle Css.none
+                            ]
                         ]
                         (filterProducts model |> List.map viewProduct)
                     ]
diff --git a/frontend/src/Icons.elm b/frontend/src/Icons.elm
index d3b862f..96fa6ff 100644
--- a/frontend/src/Icons.elm
+++ b/frontend/src/Icons.elm
@@ -1,6 +1,6 @@
 module Icons exposing (..)
 
-import FeatherIcons exposing (toHtml)
+import FeatherIcons exposing (toHtml, withSize)
 import Html
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (..)
@@ -8,8 +8,12 @@ import Html.Styled.Events exposing (..)
 
 
 convert =
-    Html.Styled.fromUnstyled << toHtml []
+    Html.Styled.fromUnstyled << toHtml [] << withSize 14
 
 
 loginIcon =
     convert FeatherIcons.logIn
+
+
+starIcon =
+    convert FeatherIcons.star
diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
index ea80921..c1489bf 100644
--- a/frontend/src/Main.elm
+++ b/frontend/src/Main.elm
@@ -403,6 +403,7 @@ viewHeader model =
                 [ css
                     [ listStyle Css.none
                     , padding (px 0)
+                    , margin (px 24)
                     ]
                 ]
         ]
diff --git a/frontend/src/Product.elm b/frontend/src/Product.elm
index b97a847..79256cc 100644
--- a/frontend/src/Product.elm
+++ b/frontend/src/Product.elm
@@ -2,13 +2,16 @@ module Product exposing (..)
 
 import Browser
 import Browser.Navigation as Nav
+import Css exposing (..)
 import Html
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (..)
 import Html.Styled.Events exposing (..)
 import Http
+import Icons exposing (..)
 import Json.Decode as D
 import Json.Encode as Encode
+import Styles exposing (..)
 import Url
 import Url.Parser as P exposing ((</>), Parser, int, oneOf, s, string)
 import Utils exposing (..)
@@ -77,7 +80,7 @@ type Msg
 
 init : Model
 init =
-    Model NotLoaded emptyProduct [] 0 "" NotSubmitted
+    Model NotLoaded emptyProduct [] 5 "" NotSubmitted
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -251,12 +254,19 @@ viewStatus s =
 
 viewProduct : Product -> Html Msg
 viewProduct p =
-    div []
-        [ div [] [ text p.name ]
-        , div [] [ text <| Maybe.withDefault "" p.kind ]
-        , div [] [ text <| Maybe.withDefault "" p.description ]
-        , div [] [ text <| String.fromFloat p.price ]
-        , div []
+    div
+        [ css
+            [ marginBottom (px 20)
+            , padding (px 20)
+            , Css.width (pct 100)
+            ]
+        ]
+        [ div
+            [ css
+                [ float left
+                , Css.width (pct 50)
+                ]
+            ]
             [ modelViewer
                 [ cameraControls
                 , autoRotate
@@ -267,16 +277,96 @@ viewProduct p =
                 ]
                 []
             ]
+        , div
+            [ css
+                [ float left
+                , Css.width (pct 50)
+                ]
+            ]
+            [ div
+                [ css
+                    [ cardSecondaryText
+                    , paddingBottom (px 3)
+                    , fontVariant smallCaps
+                    ]
+                ]
+                [ text <| Maybe.withDefault "" p.kind ]
+            , div
+                [ css
+                    [ cardPrimaryText
+                    , paddingBottom (px 12)
+                    ]
+                ]
+                [ text p.name ]
+            , div
+                [ css
+                    [ cardSupportingText
+                    , paddingBottom (px 6)
+                    ]
+                ]
+                [ text <| Maybe.withDefault "No description provided" p.description ]
+            , div
+                [ css
+                    [ fontWeight bold
+                    , fontSize (px 14)
+                    , money
+                    ]
+                ]
+                [ text <| String.fromFloat p.price
+                , div []
+                    [ furbyButton [ onClick AddToCartPressed ] [ text "Add To Cart" ]
+                    ]
+                ]
+            ]
+        , div [ style "clear" "both" ] []
         ]
 
 
+viewStarRating : Int -> Html Msg
+viewStarRating i =
+    div []
+        (List.repeat i starIcon)
+
+
 viewRating : Rating -> Html Msg
 viewRating r =
-    div []
-        [ text <| r.customerName ++ " posted on "
-        , text <| r.commentDate ++ " "
-        , text <| Maybe.withDefault "" r.commentText
-        , text <| " Stars: " ++ String.fromInt r.stars
+    -- div []
+    --     [ text <| r.customerName ++ " posted on "
+    --     , text <| r.commentDate ++ " "
+    --     , text <| Maybe.withDefault "" r.commentText
+    --     , text <| " Stars: " ++ String.fromInt r.stars
+    --     ]
+    div
+        [ css
+            [ border3 (px 1) solid theme.primary
+            , borderRadius (px 4)
+            , marginBottom (px 20)
+            , padding (px 20)
+            ]
+        ]
+        [ div
+            [ css
+                [ fontSize (px 16)
+                , fontWeight bold
+                , paddingBottom (px 3)
+                ]
+            ]
+            [ text r.customerName ]
+        , viewStarRating r.stars
+        , div
+            [ css
+                [ cardSecondaryText
+                , paddingBottom (px 12)
+                ]
+            ]
+            [ text <| "Reviewed on " ++ r.commentDate ]
+        , if r.commentText /= Nothing then
+            div
+                [ css [ cardSupportingText ] ]
+                [ text <| Maybe.withDefault "" <| r.commentText ]
+
+          else
+            text ""
         ]
 
 
@@ -290,7 +380,7 @@ viewStars =
     ul []
         (List.map
             (\i -> button [ onClick (AddRatingStars i) ] [ text <| String.fromInt i ])
-            [ 0, 1, 2, 3, 4, 5 ]
+            [ 1, 2, 3, 4, 5 ]
         )
 
 
@@ -301,9 +391,30 @@ view model =
             div [] [ text <| viewStatus Loading ]
 
         _ ->
-            div []
+            div
+                [ css
+                    [ Css.width (pct 60)
+                    , margin auto
+                    ]
+                ]
                 [ div [] [ viewProduct model.listing ]
-                , ul [] (List.map viewRating model.ratings)
+                , div
+                    [ css
+                        [ cardPrimaryText
+                        ]
+                    ]
+                    [ text "User Reviews" ]
+                , if model.ratings == [] then
+                    text "Be the first to add a review."
+
+                  else
+                    ul
+                        [ css
+                            [ padding (px 0)
+                            , listStyle Css.none
+                            ]
+                        ]
+                        (List.map viewRating model.ratings)
                 , div [] [ text "Add Rating: " ]
                 , div []
                     [ viewStars
@@ -311,9 +422,6 @@ view model =
                     , button [ onClick AddRatingPressed ] [ text "Submit Rating" ]
                     ]
                 , div []
-                    [ button [ onClick AddToCartPressed ] [ text "Add To Cart" ]
-                    ]
-                , div []
                     [ a [ href "/catalog" ] [ text "Back to catalog" ]
                     ]
                 ]
diff --git a/frontend/src/Styles.elm b/frontend/src/Styles.elm
index 36f2a81..fbef6e1 100644
--- a/frontend/src/Styles.elm
+++ b/frontend/src/Styles.elm
@@ -60,6 +60,7 @@ furbyButton =
         , color theme.fg
         , Css.height (px 40)
         , border (px 0)
+        , borderRadius (px 2)
         , padding2 (px 6) (px 12)
         , backgroundColor theme.primary
         , hover
@@ -102,3 +103,23 @@ loginInputField =
 bigHeading : Style
 bigHeading =
     fontSize (px 24)
+
+
+
+-- card styles
+
+
+cardPrimaryText =
+    fontSize (px 18)
+
+
+cardSecondaryText =
+    Css.batch [ color theme.fgLight, fontSize (px 12) ]
+
+
+cardSupportingText =
+    fontSize (px 16)
+
+
+money =
+    before [ Css.property "content" "\"₹ \"" ]