From 4634ba318ed5fd8ae1e062e92cc2af318ed76207 Mon Sep 17 00:00:00 2001 From: sectore Date: Fri, 15 Jul 2016 20:32:00 +0200 Subject: [PATCH 1/4] exercise 1 --- src/Main.elm | 45 ++++++++++++++++++++++++++++++++++++--------- src/index.js | 7 +++++++ 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index f633b0d..3bf59ec 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -21,12 +21,22 @@ main = type alias Model = - { count : Int } + { count : Int + , countedDays : Int + } init : ( Model, Cmd Msg ) init = - ( { count = 0 }, Cmd.none ) + ( { count = 0 + , countedDays = 0 + } + , Cmd.none + ) + + +type alias NumberOfDays = + Int @@ -36,6 +46,8 @@ init = type Msg = GetCount Int | DoCount + | DoCountDays + | CountDays NumberOfDays update : Msg -> Model -> ( Model, Cmd Msg ) @@ -47,6 +59,12 @@ update msg model = DoCount -> ( model, outputToJS () ) + DoCountDays -> + ( model, countDays () ) + + CountDays value -> + ( { model | countedDays = value }, Cmd.none ) + -- SUBSCRIPTIONS @@ -58,9 +76,18 @@ port outputToJS : () -> Cmd msg port inputFromJS : (Int -> msg) -> Sub msg +port countDays : () -> Cmd msg + + +port daysCounted : (NumberOfDays -> msg) -> Sub msg + + subscriptions : Model -> Sub Msg subscriptions model = - inputFromJS GetCount + Sub.batch + [ inputFromJS GetCount + , daysCounted CountDays + ] @@ -85,8 +112,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,10 +121,10 @@ 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" ] ] ] @@ -133,6 +160,6 @@ view : Model -> Html Msg view model = div [ class "mdl-grid" ] [ exampleView model - , exercise1View - , exercise2View + , exercise1View model + -- , exercise2View ] diff --git a/src/index.js b/src/index.js index afe0951..8d81db4 100644 --- a/src/index.js +++ b/src/index.js @@ -9,3 +9,10 @@ app.ports.outputToJS.subscribe(function () { 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); +}); From 55158053c923fe814e9eca163bc70ffd1cf2bb32 Mon Sep 17 00:00:00 2001 From: sectore Date: Fri, 15 Jul 2016 22:20:16 +0200 Subject: [PATCH 2/4] exercise 2 --- src/Main.elm | 105 ++++++++++++++++++++++++++++++++++++++++----------- src/index.js | 11 ++++++ 2 files changed, 94 insertions(+), 22 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index 3bf59ec..cccb411 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -23,6 +23,9 @@ main = type alias Model = { count : Int , countedDays : Int + , difference : DateDifference + , date1 : DateValue + , date2 : DateValue } @@ -30,6 +33,13 @@ init : ( Model, Cmd Msg ) init = ( { count = 0 , countedDays = 0 + , difference = + { years = 0 + , months = 0 + , days = 0 + } + , date1 = "" + , date2 = "" } , Cmd.none ) @@ -39,6 +49,21 @@ type alias NumberOfDays = Int +type alias DayDifference = + String + + +type alias DateValue = + String + + +type alias DateDifference = + { years : Int + , months : Int + , days : Int + } + + -- UPDATE @@ -48,6 +73,10 @@ type Msg | DoCount | DoCountDays | CountDays NumberOfDays + | UpdateDate1 DateValue + | UpdateDate2 DateValue + | CalculateDayDifference + | UpdateDayDifference DateDifference update : Msg -> Model -> ( Model, Cmd Msg ) @@ -59,12 +88,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 @@ -82,11 +127,18 @@ 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 = Sub.batch [ inputFromJS GetCount , daysCounted CountDays + , dateDifference UpdateDayDifference ] @@ -130,30 +182,39 @@ exercise1View model = ] -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 @@ -161,5 +222,5 @@ view model = div [ class "mdl-grid" ] [ exampleView model , exercise1View model - -- , exercise2View + , exercise2View model ] diff --git a/src/index.js b/src/index.js index 8d81db4..e62dd61 100644 --- a/src/index.js +++ b/src/index.js @@ -16,3 +16,14 @@ app.ports.countDays.subscribe(function () { 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); + app.ports.dateDifference.send({ + years: from.diff(to, 'years'), + months: from.diff(to, 'months'), + days: from.diff(to, 'days') + }); +}); From 5eac6ebef6b5b7cdf6f2caba1f68b66e2ddedab5 Mon Sep 17 00:00:00 2001 From: sectore Date: Sun, 17 Jul 2016 20:16:03 +0200 Subject: [PATCH 3/4] exercise 3 --- src/Main.elm | 35 +++++++++++++++++++---------------- src/index.js | 38 ++++++++++++++++++++++++++++---------- 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index cccb411..2f99f7c 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 Model) main = - Html.program + Html.programWithFlags { init = init , view = view , update = update @@ -29,20 +29,23 @@ type alias Model = } -init : ( Model, Cmd Msg ) -init = - ( { count = 0 - , countedDays = 0 - , difference = - { years = 0 - , months = 0 - , days = 0 - } - , date1 = "" - , date2 = "" - } - , Cmd.none - ) +initialModel : Model +initialModel = + { count = 0 + , countedDays = 0 + , difference = + { years = 0 + , months = 0 + , days = 0 + } + , date1 = "" + , date2 = "" + } + + +init : Maybe Model -> ( Model, Cmd Msg ) +init modelFromJS = + Maybe.withDefault initialModel modelFromJS ! [] type alias NumberOfDays = diff --git a/src/index.js b/src/index.js index e62dd61..facdef2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,36 @@ require("./styles.css"); +var getRandom = function () { + return Math.round(Math.random() * 100); +} + +var calculateDateDifference = function (dates) { + var format = 'DD/MM/YYYY'; + var to = moment(dates[0], format); + var from = moment(dates[1], format); + return { + years: from.diff(to, 'years'), + months: from.diff(to, 'months'), + days: from.diff(to, 'days') + }; +} + +var date1 = "13/07/2016"; +var date2 = "17/07/2016"; +var model = { + count: getRandom(), + countedDays: 0, + difference: calculateDateDifference([date1, date2]), + date1: date1, + date2: date2 +} + var Elm = require('./Main'); -var app = Elm.Main.fullscreen(); +var app = Elm.Main.fullscreen(model); 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); }); @@ -18,12 +43,5 @@ app.ports.countDays.subscribe(function () { }); app.ports.calculateDateDifference.subscribe(function (dates) { - var format = 'DD/MM/YYYY'; - var to = moment(dates[0], format); - var from = moment(dates[1], format); - app.ports.dateDifference.send({ - years: from.diff(to, 'years'), - months: from.diff(to, 'months'), - days: from.diff(to, 'days') - }); + app.ports.dateDifference.send(calculateDateDifference(dates)); }); From bfce96c5bbd5ba358ded1b60af4d167c345fcf2e Mon Sep 17 00:00:00 2001 From: sectore Date: Mon, 18 Jul 2016 13:30:55 +0200 Subject: [PATCH 4/4] update exercise 3 to get just a random value from JS (not all the model data) --- src/Main.elm | 29 +++++++++++++++++++++-------- src/index.js | 34 +++++++++++----------------------- 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index 2f99f7c..4132cce 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -6,7 +6,7 @@ import Html.Attributes exposing (..) import Html.Events exposing (..) -main : Program (Maybe Model) +main : Program (Maybe RandomCount) main = Html.programWithFlags { init = init @@ -21,7 +21,7 @@ main = type alias Model = - { count : Int + { count : RandomCount , countedDays : Int , difference : DateDifference , date1 : DateValue @@ -38,14 +38,27 @@ initialModel = , months = 0 , days = 0 } - , date1 = "" - , date2 = "" + , date1 = "13/07/2000" + , date2 = "17/07/2016" } -init : Maybe Model -> ( Model, Cmd Msg ) -init modelFromJS = - Maybe.withDefault initialModel modelFromJS ! [] +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 = @@ -72,7 +85,7 @@ type alias DateDifference = type Msg - = GetCount Int + = GetCount RandomCount | DoCount | DoCountDays | CountDays NumberOfDays diff --git a/src/index.js b/src/index.js index facdef2..ebdb8a3 100644 --- a/src/index.js +++ b/src/index.js @@ -4,29 +4,8 @@ var getRandom = function () { return Math.round(Math.random() * 100); } -var calculateDateDifference = function (dates) { - var format = 'DD/MM/YYYY'; - var to = moment(dates[0], format); - var from = moment(dates[1], format); - return { - years: from.diff(to, 'years'), - months: from.diff(to, 'months'), - days: from.diff(to, 'days') - }; -} - -var date1 = "13/07/2016"; -var date2 = "17/07/2016"; -var model = { - count: getRandom(), - countedDays: 0, - difference: calculateDateDifference([date1, date2]), - date1: date1, - date2: date2 -} - var Elm = require('./Main'); -var app = Elm.Main.fullscreen(model); +var app = Elm.Main.fullscreen(getRandom()); app.ports.outputToJS.subscribe(function () { console.log('Elm -> JS'); @@ -43,5 +22,14 @@ app.ports.countDays.subscribe(function () { }); app.ports.calculateDateDifference.subscribe(function (dates) { - app.ports.dateDifference.send(calculateDateDifference(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); });