Elm To Do

todo.elm

module Main (..) where

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp.Simple as StartApp
import String 

-- MODEL
type alias Id = Int

type Visibility
  = All
  | Active
  | Completed

type alias Model = 
  { tasks : List Task
  , field : String
  , visibility : Visibility
  , uid : Id
  }

type alias Task = 
  { name : String
  , id : Id 
  , completed : Bool
  }

newTask : String -> Id -> Task
newTask name id =
  { name = name
  , id = id
  , completed = False
  }

initialModel : Model
initialModel = 
  { tasks = []
  , field = ""
  , visibility = All
  , uid = 1
  }

-- UPDATE
type Action 
  = Add
  | UpdateField String
  | Remove Id
  | Check Id Bool
  | ChangeVisibility Visibility
  | ClearCompleted
  | ToggleAll Bool


update : Action -> Model -> Model
update action model =
  case action of
    Add -> 
      { model
        | uid = 
            if String.isEmpty model.field
              then model.uid 
              else model.uid + 1
        , field = ""
        , tasks = 
          if String.isEmpty model.field
            then model.tasks
            else model.tasks ++ [ newTask model.field model.uid ]
      }
    UpdateField str ->
      { model
        | field = str
      }
    Remove id ->
      { model
        | tasks = List.filter (\t -> t.id /= id) model.tasks
      }
    Check id isCompleted ->
      let updateTask task = 
        if task.id == id 
           then { task | completed = isCompleted } 
           else task
      in 
         { model | tasks = List.map updateTask model.tasks }
    ChangeVisibility visibility ->
      { model | visibility = visibility }
    ClearCompleted ->
      { model
        | tasks = List.filter (\t -> t.completed == False ) model.tasks
      }
    ToggleAll bool ->
      let updateTask task = 
        { task | completed = bool }
      in 
        { model | tasks = List.map updateTask model.tasks }

-- VIEW
view address model =
  div []
    [ input
        [ placeholder "What needs to be done?"
        , autofocus True
        , value model.field
        , on "input" targetValue ( Signal.message address << UpdateField )
        ]
        []
    , button [ onClick address Add ] [ text "Add " ]
    , br [] [] 
    , taskList address model.tasks model.visibility
    , filterButtons address
    , a [ onClick address ClearCompleted ] [ text "Clear Completed" ]
    , a [ onClick address ( ToggleAll True ) ] [ text "Mark all as completed" ]
    , a [ onClick address ( ToggleAll False ) ] [ text "Mark all as active" ]
    ]

taskList address tasks visibility = 
  let 
    todoItemView todo =
      todoItem address todo 
    filteredTasks = 
      case visibility of
        All ->
          tasks
        Active ->
          List.filter (\t -> t.completed == False ) tasks
        Completed ->
          List.filter (\t -> t.completed == True ) tasks

  in
    ul 
      [ id "todo-list" ]
      ( List.map todoItemView filteredTasks )

filterButtons address =
  div
    []
    [ text "Show: "
    , a [ onClick address ( ChangeVisibility All ) ] [text "All"]
    , a [ onClick address ( ChangeVisibility Active ) ] [text "Active"]
    , a [ onClick address ( ChangeVisibility Completed ) ] [text "Completed"]
    ]

todoItem address todo = 
  li 
    []
    [ text ( if todo.completed then "✓" else "" )
    , text todo.name 
    , button [ onClick address ( Check todo.id (not todo.completed)) ] [ text "Toggle" ]
    , button [ onClick address ( Remove todo.id ) ] [ text "Remove" ]
    ]

-- START APP
main =
    StartApp.start { model = initialModel, view = view, update = update }