website/frontend/src/Pages/Services/Elm.elm

module Pages.Services.Elm exposing (Model, Msg, page)

import Config.Helpers.Cards.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Types as C
import Config.Helpers.Format exposing (..)
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Types exposing (Header)
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.ServiceFormat exposing (..)
import Config.Helpers.ToolTip exposing (..)
import Config.Pages.Services.Records.ElmBuilds exposing (servicesElmBuilds)
import Config.Style.Colour exposing (..)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleFast
        , transitionStyleSlow
        )
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Html
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Route.Path as Path
import Shared
import View exposing (View)


page : Shared.Model -> Route () -> Page Model Msg
page shared route =
    Page.new
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view shared
        }
        |> Page.withLayout toLayout


toLayout : Model -> Layouts.Layout Msg
toLayout model =
    Layouts.Navbar {}



-- INIT


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init () =
    ( {}
    , Effect.none
    )



-- UPDATE


type Msg
    = NoOp


update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Effect.none
            )



-- SUBSCRIPTIONS


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



-- VIEW


view : Shared.Model -> Model -> View Msg
view shared model =
    { title = "services (elmBuilds)"
    , attributes = []
    , element = elmBuildsContainer shared.device
    }


elmBuildsContainer : Device -> Element msg
elmBuildsContainer device =
    topLevelContainer (elmBuildsList device)


elmBuildsList : Device -> Element msg
elmBuildsList device =
   column
        (case ( device.class, device.orientation ) of
            _ ->
                pageList
        )
    <|
        List.concat
            [ List.map
                (\service ->
                    cardMaker device (C.ServicePage service) contentList
                )
                [ servicesElmBuilds ]
            ]


contentList : List (Element msg)
contentList =
    [ column
        bodyFormat
        [ chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph1
        , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph2
        , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph3
        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title1
        , numberMaker servicesElmBuilds.serviceArticle.articleListEntries.list1
        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title2
        , bulletPointMaker servicesElmBuilds.serviceArticle.articleListEntries.list2
        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title3
        , elmCodeRenderer
        ]
    ]


elmCodeRenderer : Element msg
elmCodeRenderer =
    el
        [ paddingEach
            { top = 15
            , bottom = 15
            , left = 20
            , right = 20
            }
        , B.color colourTheme.backgroundLightGrey
        , D.rounded 10
        , width fill
        , spacing 8
        ]
    <|
        column
            [ F.size 14
            , spacing 5
            , width fill
            ]
            [ renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 0 0 ]
                , text "barMaker"
                    |> el [ F.color syntaxTheme.key ]
                , text " : "
                    |> el [ F.color syntaxTheme.operator ]
                , text "("
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "Int"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " -> "
                    |> el [ F.color syntaxTheme.operator ]
                , text "String"
                    |> el [ F.color syntaxTheme.keyword ]
                , text ")"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " -> "
                    |> el [ F.color syntaxTheme.operator ]
                , text "Int"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " -> "
                    |> el [ F.color syntaxTheme.operator ]
                , text "Element"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " msg"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 0 0 ]
                , text "barMaker"
                    |> el [ F.color syntaxTheme.key ]
                , text " getToolTip"
                , text " num"
                , text " ="
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "el"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 28 0 ]
                , text "("
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "["
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Element"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "height"
                , text " <| "
                    |> el [ F.color syntaxTheme.operator ]
                , text "px"
                , text " 12"
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Element"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "width"
                , text " fill"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Border"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "rounded"
                , text " 10"
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Border"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "color"
                , text " colourTheme"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "textDarkGrey"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Border"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "width"
                , text " 2"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " Background"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "gradient"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " angle"
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "1.57"
                    |> el [ F.color syntaxTheme.string ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " steps"
                , text " = "
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 56 0 ]
                , text "List"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "concat"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 62 0 ]
                , text "[ "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "List"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "repeat"
                , text " num "
                , text "colourTheme"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "barGreen"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 62 0 ]
                , text ", "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "List"
                    |> el [ F.color syntaxTheme.keyword ]
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "repeat"
                , text " ("
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "10"
                    |> el [ F.color syntaxTheme.string ]
                , text " - "
                    |> el [ F.color syntaxTheme.operator ]
                , text "num"
                , text " )"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " colourTheme"
                , text "."
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "barRed"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 62 0 ]
                , text "]"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 40 0 ]
                , text "]"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 48 0 ]
                , text "++"
                    |> el [ F.color syntaxTheme.operator ]
                , text " [ "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "tooltip"
                , text " ("
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "getToolTip"
                , text " num"
                , text ")"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text " ]"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 28 0 ]
                , text ")"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 28 0 ]
                , text "none"
                ]
            ]