Show score and icon

src/Pages/About.elm

@@ -25,7 +25,6 @@ page =
         }
 
 
-
 -- VIEW
 
 

src/Pages/Top.elm

@@ -1,7 +1,7 @@
 module Pages.Top exposing (Model, Msg, Params, page)
 
-import Html exposing (Html, button, div, h2, h5, img, text, ul, li, a)
+import Html exposing (Html, button, div, h2, h5, img, text, ul, li, a, p, span)
-import Html.Attributes exposing (src, style, class)
+import Html.Attributes exposing (src, style, class, alt, href)
 import Html.Events exposing (onClick)
 import Http
 import Json.Decode as Decode
@@ -30,6 +30,8 @@ type alias App =
     , category : String
     , repository : Maybe String
     , versions : Maybe (List String)
+    , icon : Maybe String
+    , status : String
     }
 
 
@@ -44,6 +46,10 @@ init { params } =
     ( Loading, loadApps )
 
 
+default_image : String
+default_image = "http://localhost:8000/logo.png"
+
+
 -- UPDATE
 
 
@@ -78,29 +84,67 @@ subscriptions model =
 
 view : Model -> Document Msg
 view model =
-    { title = "Examples.Cats"
+    { title = "abra apps"
     , body = [ body model ]
     }
 
 
 body : Model -> Html Msg
 body model =
-    div []
+    div [ class "pt-3" ]
         [ viewApps model
         ]
 
+renderStatusBadge : App -> Html Msg
+renderStatusBadge app =
+    let
+        status_class =
+            case app.status of
+                "1" ->
+                    "badge-success"
+                "2" ->
+                    "badge-info"
+                "3" ->
+                    "badge-warning"
+                "4" -> 
+                    "badge-danger"
+                _ ->
+                    "badge-dark"
+    in
+        span [ class ("card-link badge " ++ status_class) ] 
+            [ text ("Score: " ++ app.status) ]
+
 viewAppName : App -> Html Msg
 viewAppName app =
-    div [ class "col-4" ] 
+    let
-        [ div [ class "card" ]
+        icon_url =
-            [ div [ class "card-body" ]
+            case app.icon of
-                [ h5 [ class "card-title" ] [ text app.name ] 
+                Just "" ->
-                , div [ class "card-body" ] 
+                    default_image
-                    [ text app.category 
+                Just i ->
+                    i
+                Nothing ->
+                    default_image
+        repository_link = 
+            case app.repository of
+                Just i ->
+                    a [ class "card-link", href i ] [ text "Code" ]
+                Nothing ->
+                    text ""
+      in
+         div [ class "col-4 mb-3" ] 
+            [ div [ class "card" ]
+                [ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
+                , div [ class "card-body" ]
+                    [ h5 [ class "card-title" ] [ text app.name ] 
+                    , repository_link
+                    ]
+                , div [ class "card-footer" ]
+                    [ span [ class "card-link badge badge-secondary" ] [ text app.category ]
+                    , renderStatusBadge app
                     ]
                 ]
             ]
-    ]
 
 viewApps : Model -> Html Msg
 viewApps model =
@@ -120,8 +164,6 @@ viewApps model =
                   (List.map viewAppName (List.sortBy .name apps))
                 ]
 
-
-
 -- HTTP
 
 
@@ -132,15 +174,24 @@ loadApps =
         , expect = Http.expectJson GotApps appListDecoder
         }
 
+featuresDecoder =
+    (Decode.oneOf
+        [ Decode.at [ "status" ] Decode.string
+        , Decode.succeed ""
+        ]
+    )
+
 
 appDecoder : Decode.Decoder App
 appDecoder =
-    Decode.map4
+    Decode.map6
         App
         (Decode.field "name" Decode.string)
         (Decode.field "category" Decode.string)
+        (Decode.maybe (Decode.field "repository" Decode.string))
         (Decode.succeed Nothing)
-        (Decode.succeed Nothing)
+        (Decode.maybe (Decode.field "icon" Decode.string))
+        (Decode.at [ "features" ] featuresDecoder)
 
 appListDecoder : Decode.Decoder (List App)
 appListDecoder =

src/Shared.elm

@@ -68,8 +68,8 @@ view :
 view { page, toMsg } model =
     { title = page.title
     , body =
-        [ div [] 
+        [ div [ class "bg-dark" ] 
-            [ nav [ class "navbar navbar-expand-lg navbar-dark bg-dark" ]
+            [ nav [ class "navbar navbar-expand-lg navbar-dark bg-primary sticky-top" ]
                 [ a [ class "navbar-brand", href (Route.toString Route.Top) ] [ text "abra apps" ] 
                 , ul [ class "navbar-nav" ]
                     [ li [ class "nav-tem" ] [ a [ class "nav-link", href (Route.toString Route.About) ] [ text "about" ] ]