From 192a5c36c46b50167461c3cf1d7afa069e816e01 Mon Sep 17 00:00:00 2001
From: Akshay <nerdy@peppe.rs>
Date: Sun, 27 Dec 2020 12:31:43 +0530
Subject: add more styles, profile page

---
 frontend/src/Profile.elm | 211 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 211 insertions(+)
 create mode 100644 frontend/src/Profile.elm

(limited to 'frontend/src/Profile.elm')

diff --git a/frontend/src/Profile.elm b/frontend/src/Profile.elm
new file mode 100644
index 0000000..6575d41
--- /dev/null
+++ b/frontend/src/Profile.elm
@@ -0,0 +1,211 @@
+module Profile 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 Utils exposing (..)
+
+
+emptyProfile =
+    UserProfile "" "" "" Nothing 0 []
+
+
+type alias Transaction =
+    { amount : Float
+    , transactionId : Int
+    , orderDate : String
+    , paymentMode : String
+    }
+
+
+type alias UserProfile =
+    { username : String
+    , phoneNumber : String
+    , emailId : String
+    , address : Maybe String
+    , ratingsGiven : Int
+    , transactions : List Transaction
+    }
+
+
+type alias Model =
+    { profile : UserProfile
+    , status : Status
+    }
+
+
+type Status
+    = Loading
+    | Loaded
+    | NotLoaded
+
+
+type Msg
+    = ProfileLoaded (Result Http.Error UserProfile)
+    | FetchProfile
+
+
+init : Model
+init =
+    Model emptyProfile NotLoaded
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ProfileLoaded res ->
+            case res of
+                Ok p ->
+                    ( { model | profile = p }, Cmd.none )
+
+                Err _ ->
+                    ( { model | status = NotLoaded }, Cmd.none )
+
+        FetchProfile ->
+            ( { model | status = Loading }, tryFetchProfile )
+
+
+decodeProfile : D.Decoder UserProfile
+decodeProfile =
+    D.map6 UserProfile
+        (D.field "username" D.string)
+        (D.field "phone_number" D.string)
+        (D.field "email_id" D.string)
+        (D.field "address" (D.nullable D.string))
+        (D.field "ratings_given" D.int)
+        (D.field "transactions" (D.list decodeTransaction))
+
+
+decodeTransaction : D.Decoder Transaction
+decodeTransaction =
+    D.map4 Transaction
+        (D.field "amount" D.float)
+        (D.field "id" D.int)
+        (D.field "order_date" D.string)
+        (D.field "payment_type" D.string)
+
+
+tryFetchProfile : Cmd Msg
+tryFetchProfile =
+    let
+        _ =
+            Debug.log "err" <| "fetching user profile"
+    in
+    Http.riskyRequest
+        { method = "GET"
+        , headers = []
+        , url = "http://127.0.0.1:7878/user/profile"
+        , body = Http.emptyBody
+        , expect = Http.expectJson ProfileLoaded decodeProfile
+        , timeout = Nothing
+        , tracker = Nothing
+        }
+
+
+viewStatus : Status -> String
+viewStatus s =
+    case s of
+        Loading ->
+            "Loading"
+
+        Loaded ->
+            "Ready!"
+
+        NotLoaded ->
+            "Not loaded ..."
+
+
+viewTransactions : List Transaction -> Html Msg
+viewTransactions ts =
+    let
+        headings =
+            [ "Order ID", "Date", "Amount (₹)", "Payment Mode" ]
+                |> List.map (th [] << List.singleton << text)
+
+        transactionRow t =
+            List.map (td [] << List.singleton)
+                [ text <| String.fromInt t.transactionId
+                , text t.orderDate
+                , text <| String.fromFloat t.amount
+                , text t.paymentMode
+                ]
+    in
+    div []
+        [ div
+            [ css [ bigHeading, marginTop (px 20), marginBottom (px 12) ] ]
+            [ text "Transactions" ]
+        , Html.Styled.table
+            [ css
+                [ Css.width (pct 100)
+                , maxWidth (px 650)
+                ]
+            ]
+            ([ tr [ style "text-align" "right" ] headings
+             ]
+                ++ List.map (tr [ style "text-align" "right" ] << transactionRow) ts
+            )
+        ]
+
+
+profileField : String -> String -> Html Msg
+profileField fieldName entry =
+    div []
+        [ div
+            [ css
+                [ cardSecondaryText
+                , textTransform uppercase
+                , paddingBottom (px 3)
+                ]
+            ]
+            [ text fieldName ]
+        , div
+            [ css
+                [ cardPrimaryText
+                , paddingBottom (px 12)
+                ]
+            ]
+            [ text entry ]
+        ]
+
+
+viewProfile : UserProfile -> Html Msg
+viewProfile u =
+    div
+        []
+        [ div
+            [ css [ bigHeading, marginTop (px 20), marginBottom (px 12) ] ]
+            [ text "Profile" ]
+        , profileField "name" u.username
+        , profileField "email" u.emailId
+        , profileField "contact number" u.phoneNumber
+        , profileField "address" <| Maybe.withDefault "No address provided" u.address
+        , profileField "Total Reviews" <| String.fromInt u.ratingsGiven
+        , hr [] []
+        , viewTransactions u.transactions
+        ]
+
+
+view : Model -> Html Msg
+view model =
+    case model.status of
+        Loading ->
+            div [] [ text <| viewStatus Loading ]
+
+        _ ->
+            div
+                [ css
+                    [ margin auto
+                    , marginTop (pct 5)
+                    , Css.width (pct 40)
+                    ]
+                ]
+                [ viewProfile model.profile ]
-- 
cgit v1.2.3