Counter Sync Version 2

CounterSync2.elm

import Html exposing (Html, div, button, text)
import Html.App as App exposing (beginnerProgram)
import Html.Events exposing (onClick)
import Html.Attributes exposing (style)

main : Program Never
main =
  beginnerProgram { model = init 0 0 0, view = view, update = update }

-- MODEL 

type alias Model = Int



type alias HighLvlModel = 
  { shared : Model
  , top : Model
  , bottom : Model
  }



init : Int -> Int -> Int -> HighLvlModel
init shared top bottom =
  HighLvlModel shared top bottom
 

-- UPDATE 

type CounterMsg
  = Increment 
  | Decrement


type Msg 
  = Shared CounterMsg
  | Top CounterMsg
  | Bottom CounterMsg

counterUpdate : CounterMsg -> Model -> Model
counterUpdate msg model =
  case msg of 
    Increment -> model + 1
    Decrement -> model - 1

update : Msg -> HighLvlModel -> HighLvlModel
update msg {shared, top, bottom} =
  case msg of
    Shared counterMsg -> 
      HighLvlModel (counterUpdate counterMsg shared) top bottom
    Top counterMsg -> 
      HighLvlModel shared (counterUpdate counterMsg top) bottom
    Bottom counterMsg -> 
      HighLvlModel shared top (counterUpdate counterMsg bottom)

-- VIEW 

counterView : String -> Model -> Html CounterMsg
counterView color model = 
  div [ style [("color", color), ("display", "inline-block")] ]
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

pairView : List  (Html Msg) -> Html Msg
pairView pair =
  div 
  [ style 
      [ ("background-color", "lightgray")
      , ("margin-bottom", "1rem")
      ]
  ]
  pair

view : HighLvlModel -> Html Msg
view model =
  div []
  [ pairView 
      [ App.map Top (counterView "green" model.top)
      , App.map Shared (counterView "red" model.shared)
      ]
  , pairView
      [ App.map Bottom (counterView "green" model.bottom)
      , App.map Shared (counterView "red" model.shared)
      ]
  ]