MovieList.elm

import Graphics.Element (..)
import Html (..)
import Html.Attributes (..)
import Html.Events (..)
import Html.Lazy (lazy, lazy2)
import Json.Decode as Json
import List
import Maybe
import Signal
import String
import Window
import Markdown


type alias State = 
  { movies: List Movie
  , field : String
  }
  
type alias Movie = 
  { name: String
  , id  : Int
  }
  

type Update = NoOp | UpdateField String

step : Update -> State -> State
step update state = 
  case update of
    NoOp -> state
    UpdateField str -> { state | field <- str }
    
view : State -> Html
view state = 
  div [ class "hello"
      , style [ ("visibility", "visible") ]
      ]
      
      [ section
        [ id "app" ]
        [ movieList state.movies ]
      , infoFooter
      ]
      
movieList : List Movie -> Html
movieList movies = 
  section
    [ id "main" ]
    [ ol 
      [ id "movie-list" ]
      (List.map movieItem movies)
    ]
    
movieItem : Movie -> Html
movieItem movie =
  li 
    [ class "movie-item" ]
    [ a 
      [ href ("#" ++ movie.name) ]
      [ text movie.name ]
    ]

infoFooter : Html
infoFooter = 
    footer [ id "info" ]
      [
        p [] [ text "Written by "
             , a [ href "https://github.com/ctran" ] [ text "Cuong Tran" ]
             ]
      ]

scene : State -> (Int, Int) -> Element
scene state (w,h) = container w h midTop (toElement 550 h (view state))

state : Signal State
state = Signal.foldp step startingState (Signal.subscribe updates)

startingState : State
startingState = 
  { movies = 
    [ movie "Penguins of Medagascar"
    , movie "Cleanskin"
    , movie "Maze Runner"
    ]
  , field = ""
  }

movie : String -> Movie
movie name = { name = name, id = 1 }

emptyState : State
emptyState =
    { movies = []
    , field = ""
    }

-- updates from user input
updates : Signal.Channel Update
updates = Signal.channel NoOp

main : Signal Element
main = Signal.map2 scene state Window.dimensions