recipes.coopcloud.tech/src/Pages/Top.elm

module Pages.Top exposing (Model, Msg, Params, page)

import Html exposing (Html, a, button, div, h2, h5, i, img, li, p, span, text, ul)
import Html.Attributes exposing (alt, class, href, src, style)
import Html.Events exposing (onClick)
import Http
import Json.Decode as Decode
import Json.Decode.Extra as Decode exposing (andMap)
import Maybe exposing (withDefault)
import Spa.Document exposing (Document)
import Spa.Generated.Route as Route
import Spa.Page as Page exposing (Page)
import Spa.Url as Url exposing (Url)
import Util exposing (Direction(..), andThen, by)


page : Page Params Model Msg
page =
    Page.element
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- INIT


type alias Params =
    ()


type alias App =
    { name : String
    , category : String
    , repository : Maybe String
    , versions : Maybe (List String)
    , icon : Maybe String
    , status : Int
    , slug : String
    , default_branch : String
    , website : Maybe String
    , description : Maybe String
    }


type Model
    = Failure
    | Loading
    | Success (List App)


init : Url Params -> ( Model, Cmd Msg )
init { params } =
    ( Loading, loadApps )


default_image : String
default_image =
    "/logo.png"



-- UPDATE


type Msg
    = MorePlease
    | GotApps (Result Http.Error (List App))


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MorePlease ->
            ( Loading, loadApps )

        GotApps result ->
            case result of
                Ok apps ->
                    ( Success apps, Cmd.none )

                Err _ ->
                    ( Failure, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Model -> Document Msg
view model =
    { title = "abra apps"
    , body = [ body model ]
    }


body : Model -> Html Msg
body model =
    div [ class "pt-3" ]
        [ viewApps model
        ]


viewStatusBadge : App -> Html Msg
viewStatusBadge 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: " ++ String.fromInt app.status) ]


viewApp : App -> Html Msg
viewApp app =
    let
        icon_url =
            case app.icon of
                Just "" ->
                    default_image

                Just i ->
                    i

                Nothing ->
                    default_image

        repository_link =
            case app.repository of
                Just link ->
                    a [ class "card-link", href link ]
                        [ i [ class "fab fa-git-alt" ] []
                        , text "code"
                        ]

                Nothing ->
                    text ""

        website_link =
            case app.website of
                Just link ->
                    case link of
                        "" ->
                            text ""

                        _ ->
                            a [ class "card-link", href link ]
                                [ i [ class "fas fa-home" ] []
                                , text "homepage"
                                ]

                Nothing ->
                    text ""

        app_href =
            Route.toString <| Route.App_String { app = app.slug }
    in
    div [ class "col-md-4 mb-3 col-sm-12" ]
        [ div [ class "card" ]
            [ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
            , div [ class "card-body" ]
                [ h5 [ class "card-title" ]
                    [ a [ href app_href ] [ text app.name ] ]
                , p [] [ text (withDefault "" app.description) ]
                , repository_link
                , website_link
                , a [ class "card-link", href app_href ]
                    [ i [ class "fas fa-book" ] []
                    , text "docs"
                    ]
                ]
            , div [ class "card-footer" ]
                [ span [ class "card-link badge badge-secondary" ] [ text app.category ]
                , viewStatusBadge app
                ]
            ]
        ]


viewApps : Model -> Html Msg
viewApps model =
    case model of
        Failure ->
            div []
                [ div [ class "alert alert-danger" ]
                    [ p [] [ text "Unable to load app data" ]
                    , button [ class "btn btn-danger", onClick MorePlease ] [ text "Try Again!" ]
                    ]
                ]

        Loading ->
            div [ class "d-flex align-items-center", style "height" "89vh" ]
                [ div [ class "spinner-border m-auto text-light" ]
                    [ span [ class "sr-only" ] [ text "Loading..." ]
                    ]
                ]

        Success apps ->
            div []
                [ div [ class "row" ]
                    (List.map viewApp
                        (apps
                            |> List.sortWith
                                (by .status ASC
                                    |> andThen (String.toLower << .name) ASC
                                )
                        )
                    )
                ]



-- HTTP


loadApps : Cmd Msg
loadApps =
    Http.get
        { url = "https://cors-container.herokuapp.com/https://apps.coopcloud.tech/"
        , expect = Http.expectJson GotApps appListDecoder
        }


featuresDecoder =
    Decode.oneOf
        [ Decode.at [ "status" ] Decode.int
        , Decode.succeed 5
        ]


appDecoder : Decode.Decoder App
appDecoder =
    Decode.succeed App
        |> andMap (Decode.field "name" Decode.string)
        |> andMap (Decode.field "category" Decode.string)
        |> andMap (Decode.maybe (Decode.field "repository" Decode.string))
        |> andMap (Decode.succeed Nothing)
        |> andMap (Decode.maybe (Decode.field "icon" Decode.string))
        |> andMap (Decode.at [ "features" ] featuresDecoder)
        |> andMap (Decode.succeed "")
        |> andMap (Decode.field "default_branch" Decode.string)
        |> andMap (Decode.maybe (Decode.field "website" Decode.string))
        |> andMap (Decode.maybe (Decode.field "description" Decode.string))


appListDecoder : Decode.Decoder (List App)
appListDecoder =
    Decode.keyValuePairs appDecoder
        |> Decode.map buildApp


buildApp : List ( String, App ) -> List App
buildApp apps =
    List.map (\( slug, app ) -> { app | slug = slug }) apps