diff --git a/src/Main.elm b/src/Main.elm index f633b0d..4132cce 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -6,9 +6,9 @@ import Html.Attributes exposing (..) import Html.Events exposing (..) -main : Program Never +main : Program (Maybe RandomCount) main = - Html.program + Html.programWithFlags { init = init , view = view , update = update @@ -21,12 +21,63 @@ main = type alias Model = - { count : Int } + { count : RandomCount + , countedDays : Int + , difference : DateDifference + , date1 : DateValue + , date2 : DateValue + } + + +initialModel : Model +initialModel = + { count = 0 + , countedDays = 0 + , difference = + { years = 0 + , months = 0 + , days = 0 + } + , date1 = "13/07/2000" + , date2 = "17/07/2016" + } + + +init : Maybe RandomCount -> ( Model, Cmd Msg ) +init randomCount = + let + model = + case randomCount of + Just randomCount -> + { initialModel | count = randomCount } + + Nothing -> + initialModel + in + ( model, Cmd.none ) + + +type alias RandomCount = + Int + + +type alias NumberOfDays = + Int + + +type alias DayDifference = + String -init : ( Model, Cmd Msg ) -init = - ( { count = 0 }, Cmd.none ) +type alias DateValue = + String + + +type alias DateDifference = + { years : Int + , months : Int + , days : Int + } @@ -34,8 +85,14 @@ init = type Msg - = GetCount Int + = GetCount RandomCount | DoCount + | DoCountDays + | CountDays NumberOfDays + | UpdateDate1 DateValue + | UpdateDate2 DateValue + | CalculateDayDifference + | UpdateDayDifference DateDifference update : Msg -> Model -> ( Model, Cmd Msg ) @@ -47,6 +104,28 @@ update msg model = DoCount -> ( model, outputToJS () ) + UpdateDate1 value -> + ( { model | date1 = value }, Cmd.none ) + + UpdateDate2 value -> + ( { model | date2 = value }, Cmd.none ) + + DoCountDays -> + ( model, countDays () ) + + CountDays value -> + ( { model | countedDays = value }, Cmd.none ) + + CalculateDayDifference -> + let + { date1, date2 } = + model + in + ( model, calculateDateDifference ( date1, date2 ) ) + + UpdateDayDifference difference -> + ( { model | difference = difference }, Cmd.none ) + -- SUBSCRIPTIONS @@ -58,9 +137,25 @@ port outputToJS : () -> Cmd msg port inputFromJS : (Int -> msg) -> Sub msg +port countDays : () -> Cmd msg + + +port daysCounted : (NumberOfDays -> msg) -> Sub msg + + +port calculateDateDifference : ( DateValue, DateValue ) -> Cmd msg + + +port dateDifference : (DateDifference -> msg) -> Sub msg + + subscriptions : Model -> Sub Msg subscriptions model = - inputFromJS GetCount + Sub.batch + [ inputFromJS GetCount + , daysCounted CountDays + , dateDifference UpdateDayDifference + ] @@ -85,8 +180,8 @@ exampleView model = ] -exercise1View : Html Msg -exercise1View = +exercise1View : Model -> Html Msg +exercise1View model = div [ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ] [ div [ class "mdl-card__title mdl-card--expand" ] @@ -94,45 +189,54 @@ exercise1View = ] , h2 [ class "result" ] - [ text "Result?" ] + [ text <| toString model.countedDays ] , div [ class "mdl-card__actions mdl-card--border" ] [ a - [ class "mdl-button mdl-js-button mdl-js-ripple-effect button" ] + [ class "mdl-button mdl-js-button mdl-js-ripple-effect button", onClick DoCountDays ] [ text "Calculate" ] ] ] -exercise2View : Html Msg -exercise2View = - div - [ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ] - [ div [ class "mdl-card__title mdl-card--expand" ] - [ h2 [ class "mdl-card__title-text" ] [ text "Exercise 2" ] - ] - , div [] - [ div [ id "date1-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ] - [ input [ id "date1", type' "text", class "mdl-textfield__input", placeholder "Date 1" ] [] +exercise2View : Model -> Html Msg +exercise2View model = + let + { years, months, days } = + model.difference + in + div + [ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ] + [ div [ class "mdl-card__title mdl-card--expand" ] + [ h2 [ class "mdl-card__title-text" ] [ text "Exercise 2" ] ] - , div [ id "date2-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ] - [ input [ id "date2", type' "text", class "mdl-textfield__input", placeholder "Date 2" ] [] + , div [] + [ div [ id "date1-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ] + [ input [ id "date1", type' "text", class "mdl-textfield__input", placeholder "DD/MM/YYYY", value model.date1, onInput UpdateDate1 ] [] + ] + , div [ id "date2-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ] + [ input [ id "date2", type' "text", class "mdl-textfield__input", placeholder "DD/MM/YYYY", value model.date2, onInput UpdateDate2 ] [] + ] + ] + , h2 + [ class "result" ] + [ text <| toString years ++ " years" + , br [] [] + , text <| " or " ++ toString months ++ " months" + , br [] [] + , text <| " or " ++ toString days ++ " days" + ] + , div [ class "mdl-card__actions mdl-card--border" ] + [ a + [ class "mdl-button mdl-js-button mdl-js-ripple-effect button", onClick CalculateDayDifference ] + [ text "Differenced" ] ] ] - , h2 - [ class "result" ] - [ text "Result?" ] - , div [ class "mdl-card__actions mdl-card--border" ] - [ a - [ class "mdl-button mdl-js-button mdl-js-ripple-effect button" ] - [ text "Differenced" ] - ] - ] view : Model -> Html Msg view model = div [ class "mdl-grid" ] [ exampleView model - , exercise1View - , exercise2View + , exercise1View model + , exercise2View model ] diff --git a/src/index.js b/src/index.js index afe0951..ebdb8a3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,35 @@ require("./styles.css"); +var getRandom = function () { + return Math.round(Math.random() * 100); +} + var Elm = require('./Main'); -var app = Elm.Main.fullscreen(); +var app = Elm.Main.fullscreen(getRandom()); app.ports.outputToJS.subscribe(function () { console.log('Elm -> JS'); - var random = Math.round(Math.random() * 100); + var random = getRandom(); console.log('JS -> Elm ' + random); app.ports.inputFromJS.send(random); }); + +app.ports.countDays.subscribe(function () { + var to = moment([2016, 1, 1]); + var from = moment(); + var days = from.diff(to, 'days'); + app.ports.daysCounted.send(days); +}); + +app.ports.calculateDateDifference.subscribe(function (dates) { + var format = 'DD/MM/YYYY'; + var to = moment(dates[0], format); + var from = moment(dates[1], format); + var diff = { + years: from.diff(to, 'years'), + months: from.diff(to, 'months'), + days: from.diff(to, 'days') + }; + console.log('diff', diff); + app.ports.dateDifference.send(diff); +});