an elm spa view example

view : State -> Html Action
view state =
  case state.onDemand of
    NoData -> viewDefault state
    TeamListBulkAddViewState _ -> viewBulkAdd state

viewBulkAdd : State -> Html Action
viewBulkAdd state =
  RELM_VIEW(state,RELM_TeamListBulkAddView)

viewDefault : State -> Html Action
viewDefault state =
  div
  [ css "overflow-x" "auto" ]
  [ table
      [ ]
      [ thead
        []
        [ tr [] (tableHeaders state) ]
      , tbody
        []
        (List.indexedMap (viewItem state.teamList state.mdl MDL_IDX) state.teamList)
      ]
  , Snackbar.view state.snackbar |> Html.map Snackbar
  ]

tableHeaders
    : { b | mdl : Mdl }
    -> List (Html Action)
tableHeaders state  =
  [ th [] [] -- Navigation
  , th [] [text "Rank"]
  , th [] [text "Name"]
  , th [] [text "Important"]
  , th []
    [ Button.render Mdl [MDL_IDX] state.mdl
      [ Button.ripple
      , Button.colored
      , Button.raised
      , css "float" "right"
      , onClick EnterBulkAddView
      ]
      [ text "Bulk Add"]
    ] -- Add/Remove  ]
  ]

viewItem : TeamList -> Mdl -> Int -> Int -> Team -> Html Action
viewItem teamList mdl baseIndex index item =
  tr
  [ ]
  -- Navigation
  [ td OurOptions.optionsNoVerticalPadding <| tableCellNavigation teamList mdl baseIndex index item
  -- Data
  , td OurOptions.optionsNoVerticalPadding
    [ Textfield.render Mdl [baseIndex, index, MDL_IDX] mdl
      [ Maybe.map toString item.rank
          |> Maybe.withDefault "" |> Textfield.value
      , Textfield.label "Rank"
      , css "width" "3em"
      , validateRank item teamList
        |> resultToTextfieldError
        |> (when <| not <| item.id == 0)
      , onInput (UpdateRankAction index item)
      , dispatch Batch
      , onBlur  SortRankAction
      ] []
    ]
  , td OurOptions.optionsNoVerticalPadding
    [ Textfield.render Mdl [baseIndex, index, MDL_IDX] mdl
      [ Textfield.value item.name
      , Textfield.label "Name"
      , validateName item teamList
        |> resultToTextfieldError
        |> (when <| not <| item.id == 0 && isBlank item.name)
      , Textfield.text_
      , onInput (UpdateNameAction index item)
      ] []
    ]
  , td OurOptions.optionsNoVerticalPadding
    [ Toggles.switch Mdl [baseIndex, index, MDL_IDX] mdl
      [ Toggles.value item.isImportant
      , Toggles.ripple
      , onToggle (ToggleIsImportantAction index item)
      ] [text "Important"]
    ]
  -- Add/Remove Buttons
  , td OurOptions.optionsNoVerticalPadding <| tableCellActions teamList mdl baseIndex index item
  ]

tableCellNavigation : a -> b -> c -> d -> e -> List f
tableCellNavigation teamList mdl baseIndex index item =
  [ ]

tableCellActions
    : List Team
    -> Mdl
    -> Int
    -> Int
    -> Team
    -> List (Html Action)

tableCellActions teamList mdl baseIndex index item =
    [
      if item.id == 0 then
        Button.render Mdl [baseIndex, index, MDL_IDX] mdl
          [ Button.fab
          , Button.colored
          , onClick (CreateAction index item)
          , Button.disabled |> when (isErr <| Team.validate item teamList)
          ]
        [ i "add"]
      else
        Button.render Mdl [baseIndex, index, MDL_IDX] mdl
        ( [ Button.minifab
          , onClick (RemoveAction index item)
          ]
        )
        [ i "remove"]
    ]