Skip to content

Instantly share code, notes, and snippets.

@choonkeat
Last active Oct 10, 2020
Embed
What would you like to do?
various Main.elm templates (app, minimum, bootstrap)
module App exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)
import Browser
import Browser.Navigation
import Html exposing (Html, text)
import Url
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlRequest = OnUrlRequest
, onUrlChange = OnUrlChange
}
type alias Model =
{ navKey : Browser.Navigation.Key
, message : String
}
type alias Flags =
{}
type Msg
= OnUrlRequest Browser.UrlRequest
| OnUrlChange Url.Url
init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
( Model navKey "init", Cmd.none )
view : Model -> Browser.Document Msg
view model =
Browser.Document "App"
[ text model.message ]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
module Bootstrap exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)
import Browser
import Browser.Navigation
import Html exposing (Html, button, div, form, h1, input, label, main_, node, p, pre, text)
import Html.Attributes exposing (class, for, href, id, rel, type_, value)
import Html.Events exposing (onInput)
import Time
import Url
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlRequest = OnUrlRequest
, onUrlChange = OnUrlChange
}
type alias Alert =
{ category : String
, message : String
}
type alias Detail =
{ title : String
}
type alias Model =
{ navKey : Browser.Navigation.Key
, alert : Maybe Alert
, detail : Detail
}
type alias Flags =
{}
type Msg
= OnUrlRequest Browser.UrlRequest
| OnUrlChange Url.Url
| ModelChanged (Model -> String -> Model) String
init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
let
alert =
{ category = "info", message = "Welcome!" }
detail =
{ title = "" }
in
( { navKey = navKey
, alert = Just alert
, detail = detail
}
, Cmd.none
)
view : Model -> Browser.Document Msg
view model =
Browser.Document "App"
[ node "link"
[ rel "stylesheet"
, href "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
]
[]
, main_ [ class "container" ]
[ div [ class "jumbotron mt-3" ]
[ h1 [] [ text "Hello" ]
, p [ class "lead" ] [ text "Lorem ipsum" ]
]
, viewAlert model.alert
, div [ class "row-fluid mt-5" ]
[ viewDetail model.detail ]
, div [ class "row-fluid mt-5" ]
[ pre [] [ text (Debug.toString model) ] ]
]
]
viewAlert : Maybe Alert -> Html Msg
viewAlert alertMaybe =
case alertMaybe of
Just alert ->
div [ class "row-fluid mt-5" ]
[ div [ class ("alert alert-" ++ alert.category) ] [ text alert.message ] ]
Nothing ->
text ""
viewDetail : Detail -> Html Msg
viewDetail detail =
form []
[ div [ class "form-group" ]
[ label [ for "title" ] [ text "Title" ]
, input
[ type_ "text"
, class "form-control"
, id "title"
, value detail.title
, onInput (ModelChanged (\m s -> { m | detail = { detail | title = s } })) -- complicated because we nest `model.detail`
]
[]
]
, button [ type_ "submit", class "btn btn-primary" ] [ text "Submit" ]
]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case Debug.log "update" msg of
-- [url] decide what to do
OnUrlRequest (Browser.Internal urlUrl) ->
( model, Browser.Navigation.pushUrl model.navKey (Url.toString urlUrl) )
OnUrlRequest (Browser.External urlString) ->
( model, Browser.Navigation.load urlString )
-- [url] given that we _are at this url_ how should our model change?
OnUrlChange urlUrl ->
( model, Cmd.none )
ModelChanged function string ->
( function model string, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
module Minimum exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)
import Browser
import Html exposing (Html, text)
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
type alias Model =
String
type alias Flags =
{}
type Msg
= Msg
init : Flags -> ( Model, Cmd Msg )
init flags =
( "init", Cmd.none )
view : Model -> Html Msg
view model =
text model
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
module Tailwind exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)
import Browser
import Browser.Navigation
import Html exposing (Html, button, div, form, input, label, node, pre, span, text)
import Html.Attributes exposing (class, for, href, id, rel, value)
import Html.Events exposing (onInput)
import Url
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlRequest = OnUrlRequest
, onUrlChange = OnUrlChange
}
type alias Alert =
{ color : String
, message : String
}
type alias Model =
{ navKey : Browser.Navigation.Key
, alert : Maybe Alert
}
type alias Flags =
{}
type Msg
= OnUrlRequest Browser.UrlRequest
| OnUrlChange Url.Url
init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
let
alert =
{ color = "blue", message = "Welcome!" }
in
( { navKey = navKey
, alert = Just alert
}
, Cmd.none
)
view : Model -> Browser.Document Msg
view model =
Browser.Document "App"
[ node "link"
[ rel "stylesheet"
, href "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
]
[]
, div
[ class "flex bg-gray-200" ]
[ div
[ class "md:w-3/5 ml-auto mr-auto bg-white min-h-full shadow" ]
[ div [ class "md:p-4" ]
[ viewMaybe viewAlert model.alert
, pre [ class "whitespace-pre-wrap" ] [ text (Debug.toString model) ]
]
]
]
]
viewMaybe : (a -> Html msg) -> Maybe a -> Html msg
viewMaybe f maybeValue =
case maybeValue of
Just a ->
f a
Nothing ->
text ""
viewAlert : Alert -> Html Msg
viewAlert alert =
div [ class "mb-5" ]
[ div [ class ("bg-" ++ alert.color ++ "-100 border border-" ++ alert.color ++ "-400 text-" ++ alert.color ++ "-700 px-4 py-3 md:rounded relative") ]
[ span [ class "block sm:inline" ] [ text alert.message ]
]
]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case Debug.log "update" msg of
-- [url] decide what to do
OnUrlRequest (Browser.Internal urlUrl) ->
( model, Browser.Navigation.pushUrl model.navKey (Url.toString urlUrl) )
OnUrlRequest (Browser.External urlString) ->
( model, Browser.Navigation.load urlString )
-- [url] given that we _are at this url_ how should our model change?
OnUrlChange urlUrl ->
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
module Main exposing (..)
type alias Flags =
{}
type alias Model =
String
type Msg
= Msg
main : Program Flags Model Msg
main =
Platform.worker
{ init = init
, update = update
, subscriptions = subscriptions
}
init : Flags -> ( Model, Cmd Msg )
init flags =
( "", Cmd.none )
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
( "", Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment