Created
February 3, 2016 09:38
-
-
Save tolgap/e00e156863167eb03e26 to your computer and use it in GitHub Desktop.
Admin Page component in Elm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Page exposing (update, view, emptyModel) | |
import StartApp.Simple exposing (start) | |
main = | |
start { model = emptyModel, view = view, update = update } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module Page where | |
import Html exposing (..) | |
import Html.Attributes exposing (..) | |
import Html.Lazy exposing (lazy2, lazy3) | |
import Html.Events exposing (..) | |
import Json.Decode as Json | |
import Signal exposing (Signal, Address) | |
import String | |
type alias Model = | |
{ pages : List Page | |
, idseq : Int | |
, currentPage : Maybe Int | |
, titleField : String | |
, bodyField : String | |
} | |
type alias SeoMeta = | |
{ name : String | |
, value : String | |
} | |
type alias Page = | |
{ id : Int | |
, title : String | |
, body : String | |
, seo : List SeoMeta | |
} | |
emptyModel : Model | |
emptyModel = | |
{ pages = [] | |
, idseq = 0 | |
, currentPage = Nothing | |
, titleField = "" | |
, bodyField = "" | |
} | |
newPage : Int -> String -> String -> List SeoMeta -> Page | |
newPage id title body seos = | |
{ id = id | |
, title = title | |
, body = body | |
, seo = seos | |
} | |
type Action = NoOp | |
| Add | |
| Show Int | |
| UpdateTitle String | |
| UpdateBody String | |
update : Action -> Model -> Model | |
update action model = | |
case action of | |
NoOp -> model | |
Add -> | |
{ model | idseq = model.idseq + 1 | |
, currentPage = Nothing | |
, titleField = "" | |
, bodyField = "" | |
, pages = | |
if (String.isEmpty model.titleField) || (String.isEmpty model.bodyField) | |
then model.pages | |
else model.pages ++ [newPage model.idseq model.titleField model.bodyField []] | |
} | |
Show id -> | |
{ model | currentPage = Just id } | |
UpdateTitle str -> | |
{ model | titleField = str } | |
UpdateBody str -> | |
{ model | bodyField = str } | |
view : Address Action -> Model -> Html | |
view address model = | |
div | |
[ class "pages-wrapper" ] | |
[ section | |
[ id "page-app" ] | |
[ lazy3 pageEntry address model.titleField model.bodyField | |
, lazy2 pageList address model.pages | |
] | |
] | |
onEnter : Address a -> a -> Attribute | |
onEnter address value = | |
on "keydown" | |
(Json.customDecoder keyCode is13) | |
(\_ -> Signal.message address value) | |
is13 : Int -> Result String () | |
is13 code = | |
if code == 13 then Ok () else Err "not the right key code" | |
pageEntry : Address Action -> String -> String -> Html | |
pageEntry address title body = | |
header | |
[ id "header" ] | |
[ h1 [] [ text "pages" ] | |
, input | |
[ id "page-title" | |
, placeholder "Page title" | |
, autofocus True | |
, value title | |
, name "newPageTitle" | |
, on "input" targetValue (Signal.message address << UpdateTitle) | |
, onEnter address Add | |
] | |
[] | |
, textarea | |
[ id "page-body" | |
, placeholder "Page body" | |
, name "newPageBody" | |
, on "input" targetValue (Signal.message address << UpdateBody) | |
] | |
[ text body ] | |
] | |
pageList : Address Action -> List Page -> Html | |
pageList address pages = | |
section | |
[ id "main" ] | |
[ ul | |
[ id "page-list" ] | |
(List.map (pageItem address) pages) | |
] | |
pageItem : Address Action -> Page -> Html | |
pageItem address page = | |
li | |
[ class "page-item" ] | |
[ p [] [ text page.title ]] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment