pfitz/ChildAges.elm

## ChildAges.elm
module ChildAge exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import Html.App
import String exposing (toInt)
import Array exposing (Array)


-- view


printOption : Int -> Int -> Html Msg
printOption age n =
    option [ value (toString n), selected (age == n) ] [ text (toString n) ]


ageSelect : ( Int, Int ) -> Html Msg
ageSelect ( i, age ) =
    select [ name ("child_age_" ++ (toString (i + 1))), (onInput (childAgeDidChangeHandler i)) ]
        (List.map (printOption age) [1..18])


numChildSelect : Model -> List (Html Msg)
numChildSelect model =
    [ label [ for "child_age" ] [ text model.textKinder ]
    , select [ onInput numberChangedHandler ] (List.map (printOption <| Array.length model.alterDerKinder) [0..6])
    ]


ageSelects : Model -> List (Html Msg)
ageSelects model =
    [ label [] [ text model.textAlter ] ]
        ++ (List.indexedMap (,) (Array.toList model.alterDerKinder) |> List.map ageSelect)


view : Model -> Html Msg
view model =
    div [] (numChildSelect model ++ ageSelects model)


-- model


type alias Model =
    { textKinder : String, textAlter : String, alterDerKinder : Array Int }


model : Model
model =
    { textKinder = "Anzahl der Kinder", textAlter = "Alter der Kinder", alterDerKinder = Array.fromList [ 3, 4 ] }


-- update


type Msg
    = NumberOfKidsDidChanged Int
    | AgeOfKidChanged Int Int


update : Msg -> Model -> Model
update msg model =
    case msg of
        NumberOfKidsDidChanged newListLength ->
            case newListLength of
                0 ->
                    { model | alterDerKinder = Array.empty }

                _ ->
                    let
                        oldListLength =
                            Array.length model.alterDerKinder

                        entriesToTake =
                            oldListLength - difference

                        difference =
                            oldListLength - newListLength

                        newAgeList =
                            -- fewer kids
                            if difference > 0 then
                                Array.slice 0 difference model.alterDerKinder
                                -- more kids
                            else if difference < 0 then
                                Array.append model.alterDerKinder (Array.repeat (difference * -1) 1)
                            else
                                model.alterDerKinder
                    in
                        { model | alterDerKinder = newAgeList }

        AgeOfKidChanged value nth ->
            { model | alterDerKinder = (Array.set nth value model.alterDerKinder) }


numberChangedHandler : String -> Msg
numberChangedHandler numStrg =
    NumberOfKidsDidChanged (Result.withDefault 0 (toInt numStrg))


childAgeDidChangeHandler : Int -> String -> Msg
childAgeDidChangeHandler nth valueString =
    AgeOfKidChanged (Result.withDefault 0 (toInt valueString)) nth


-- main


main : Program Never
main =
    Html.App.beginnerProgram
        { model = model
        , view = view
        , update = update
        }

## index.html
<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>

    <link rel="stylesheet" href="js/pickadate/themes/default.css"/>
    <link rel="stylesheet" href="js/pickadate/themes/default.date.css"/>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

<label for="child">Kinder</label>
<select name="child" id="child" class="child_count" data-childage="9,6,9,14,1">
    <option selected>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

<label for="arrival">Anreise</label>
<input type="date" class="datepicker-from" data-value="2016-02-01"
       name="arrival" id="arrival">

<label for="departure">Abreise</label>
<input type="date" class="datepicker-to" data-value="2016-02-04"
       name="departure" id="departure">

<div id="child_ages">
    <script src="ChildAges.js"></script>
    <script>Elm.ChildAge.embed(document.getElementById("child_ages")); </script>
</div>


<script src="js/jquery.min.js"></script>
<!--<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!--<script>
    $(".child_count").change(function () {
        var numberOfChilds = $(".child_count :selected").text();
        var storedChildAges = $(this).data("childage");
        if (storedChildAges) {
            storedChildAges = storedChildAges.split(",");
        }

        if (numberOfChilds == 0) {
            $("#child_ages").empty();
        } else {
            var childages = '<label for="child_age">Alter der Kinder</label>';

            for (i = 1; i <= numberOfChilds; i++) {
                childages += '<select name = "child_age_' + i + '" id = "age_child_' + i + '"> ';
                for (j = 1; j <= 18; j++) {
                    childages += '<option value="' + j + '">' + j + '</option>';
                }
                childages += '</select>'
            }
            $("#child_ages").html(childages);

            if (storedChildAges.length > 0) {
                for (i = 1; i <= storedChildAges.length + 1; i++) {
                    $("#age_child_" + i).val(storedChildAges[i - 1]);
                }
            }
        }
    });
</script>
<script>
    $(document).ready(function () {
        $(".child_count").trigger("change");
    })
</script>-->


<script src="js/pickadate/picker.js"></script>
<script src="js/pickadate/picker.date.js"></script>

<!--<script>


    var from_$input = $('.datepicker-from').pickadate({
                monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
                monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
                weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
                weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
                today: 'Heute',
                clear: 'Löschen',
                close: 'Schließen',
                formatSubmit: 'yyyy-mm-dd',
                firstDay: 1,
                //format: 'dddd, dd. mmmm yyyy',

                formatSubmit: 'yyyy-mm-dd',

                container: '#container',
                // editable: true,
                closeOnSelect: true,
                closeOnClear: true
    }),
            from_picker = from_$input.pickadate('picker');

    var to_$input = $('.datepicker-to').pickadate({
                monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
                monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
                weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
                weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
                today: 'Heute',
                clear: 'Löschen',
                close: 'Schließen',
                firstDay: 1,
                //format: 'dddd, dd. mmmm yyyy',

                formatSubmit: 'yyyy-mm-dd',

                container: '#container',
                // editable: true,
                closeOnSelect: true,
                closeOnClear: true
    }),
            to_picker = to_$input.pickadate('picker');
    // Check if there’s a “from” or “to” date to start with.
    if (from_picker.get('value')) {
        to_picker.set('min', from_picker.get('select'))
    }
    if (to_picker.get('value')) {
        from_picker.set('max', to_picker.get('select'))
    }

    // When something is selected, update the “from” and “to” limits.
    from_picker.on('set', function (event) {
        if (event.select) {
            to_picker.set('min', from_picker.get('select'))
        }
    });
    to_picker.on('set', function (event) {
        if (event.select) {
            from_picker.set('max', to_picker.get('select'))
        }
    });

</script>--
</body>
</html>


## js_i_want_to_reproduce.js
$(".child_count").change(function () {
        var numberOfChilds = $(".child_count :selected").text();
        var storedChildAges = $(this).data("childage");
        if (storedChildAges) {
            storedChildAges = storedChildAges.split(",");
        }

        if (numberOfChilds == 0) {
            $("#child_ages").empty();
        } else {
            var childages = '<label for="child_age">Alter der Kinder</label>';

            for (i = 1; i <= numberOfChilds; i++) {
                childages += '<select name = "child_age_' + i + '" id = "age_child_' + i + '"> ';
                for (j = 1; j <= 18; j++) {
                    childages += '<option value="' + j + '">' + j + '</option>';
                }
                childages += '</select>'
            }
            $("#child_ages").html(childages);

            if (storedChildAges.length > 0) {
                for (i = 1; i <= storedChildAges.length + 1; i++) {
                    $("#age_child_" + i).val(storedChildAges[i - 1]);
                }
            }
        }
    });
	module ChildAge exposing (..)

	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput)
	import Html.App
	import String exposing (toInt)
	import Array exposing (Array)


	-- view


	printOption : Int -> Int -> Html Msg
	printOption age n =
	option [ value (toString n), selected (age == n) ] [ text (toString n) ]


	ageSelect : ( Int, Int ) -> Html Msg
	ageSelect ( i, age ) =
	select [ name ("child_age_" ++ (toString (i + 1))), (onInput (childAgeDidChangeHandler i)) ]
	(List.map (printOption age) [1..18])


	numChildSelect : Model -> List (Html Msg)
	numChildSelect model =
	[ label [ for "child_age" ] [ text model.textKinder ]
	, select [ onInput numberChangedHandler ] (List.map (printOption <\| Array.length model.alterDerKinder) [0..6])
	]


	ageSelects : Model -> List (Html Msg)
	ageSelects model =
	[ label [] [ text model.textAlter ] ]
	++ (List.indexedMap (,) (Array.toList model.alterDerKinder) \|> List.map ageSelect)


	view : Model -> Html Msg
	view model =
	div [] (numChildSelect model ++ ageSelects model)



	-- model


	type alias Model =
	{ textKinder : String, textAlter : String, alterDerKinder : Array Int }


	model : Model
	model =
	{ textKinder = "Anzahl der Kinder", textAlter = "Alter der Kinder", alterDerKinder = Array.fromList [ 3, 4 ] }



	-- update


	type Msg
	= NumberOfKidsDidChanged Int
	\| AgeOfKidChanged Int Int


	update : Msg -> Model -> Model
	update msg model =
	case msg of
	NumberOfKidsDidChanged newListLength ->
	case newListLength of
	0 ->
	{ model \| alterDerKinder = Array.empty }

	_ ->
	let
	oldListLength =
	Array.length model.alterDerKinder

	entriesToTake =
	oldListLength - difference

	difference =
	oldListLength - newListLength

	newAgeList =
	-- fewer kids
	if difference > 0 then
	Array.slice 0 difference model.alterDerKinder
	-- more kids
	else if difference < 0 then
	Array.append model.alterDerKinder (Array.repeat (difference * -1) 1)
	else
	model.alterDerKinder
	in
	{ model \| alterDerKinder = newAgeList }

	AgeOfKidChanged value nth ->
	{ model \| alterDerKinder = (Array.set nth value model.alterDerKinder) }


	numberChangedHandler : String -> Msg
	numberChangedHandler numStrg =
	NumberOfKidsDidChanged (Result.withDefault 0 (toInt numStrg))


	childAgeDidChangeHandler : Int -> String -> Msg
	childAgeDidChangeHandler nth valueString =
	AgeOfKidChanged (Result.withDefault 0 (toInt valueString)) nth



	-- main


	main : Program Never
	main =
	Html.App.beginnerProgram
	{ model = model
	, view = view
	, update = update
	}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<script src="js/vendor/modernizr-2.8.3.min.js"></script>

	<link rel="stylesheet" href="js/pickadate/themes/default.css"/>
	<link rel="stylesheet" href="js/pickadate/themes/default.date.css"/>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
	your browser</a> to improve your experience.</p>
	<![endif]-->

	<!-- Add your site or application content here -->
	<p>Hello world! This is HTML5 Boilerplate.</p>

	<label for="child">Kinder</label>
	<select name="child" id="child" class="child_count" data-childage="9,6,9,14,1">
	<option selected>0</option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select>

	<label for="arrival">Anreise</label>
	<input type="date" class="datepicker-from" data-value="2016-02-01"
	name="arrival" id="arrival">

	<label for="departure">Abreise</label>
	<input type="date" class="datepicker-to" data-value="2016-02-04"
	name="departure" id="departure">

	<div id="child_ages">
	<script src="ChildAges.js"></script>
	<script>Elm.ChildAge.embed(document.getElementById("child_ages")); </script>
	</div>


	<script src="js/jquery.min.js"></script>
	<!--<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>-->
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

	<!--<script>
	$(".child_count").change(function () {
	var numberOfChilds = $(".child_count :selected").text();
	var storedChildAges = $(this).data("childage");
	if (storedChildAges) {
	storedChildAges = storedChildAges.split(",");
	}

	if (numberOfChilds == 0) {
	$("#child_ages").empty();
	} else {
	var childages = '<label for="child_age">Alter der Kinder</label>';

	for (i = 1; i <= numberOfChilds; i++) {
	childages += '<select name = "child_age_' + i + '" id = "age_child_' + i + '"> ';
	for (j = 1; j <= 18; j++) {
	childages += '<option value="' + j + '">' + j + '</option>';
	}
	childages += '</select>'
	}
	$("#child_ages").html(childages);

	if (storedChildAges.length > 0) {
	for (i = 1; i <= storedChildAges.length + 1; i++) {
	$("#age_child_" + i).val(storedChildAges[i - 1]);
	}
	}
	}
	});
	</script>
	<script>
	$(document).ready(function () {
	$(".child_count").trigger("change");
	})
	</script>-->


	<script src="js/pickadate/picker.js"></script>
	<script src="js/pickadate/picker.date.js"></script>

	<!--<script>



	var from_$input = $('.datepicker-from').pickadate({
	monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
	monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
	weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
	weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
	today: 'Heute',
	clear: 'Löschen',
	close: 'Schließen',
	formatSubmit: 'yyyy-mm-dd',
	firstDay: 1,
	//format: 'dddd, dd. mmmm yyyy',

	formatSubmit: 'yyyy-mm-dd',

	container: '#container',
	// editable: true,
	closeOnSelect: true,
	closeOnClear: true
	}),
	from_picker = from_$input.pickadate('picker');

	var to_$input = $('.datepicker-to').pickadate({
	monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
	monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
	weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
	weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
	today: 'Heute',
	clear: 'Löschen',
	close: 'Schließen',
	firstDay: 1,
	//format: 'dddd, dd. mmmm yyyy',

	formatSubmit: 'yyyy-mm-dd',

	container: '#container',
	// editable: true,
	closeOnSelect: true,
	closeOnClear: true
	}),
	to_picker = to_$input.pickadate('picker');
	// Check if there’s a “from” or “to” date to start with.
	if (from_picker.get('value')) {
	to_picker.set('min', from_picker.get('select'))
	}
	if (to_picker.get('value')) {
	from_picker.set('max', to_picker.get('select'))
	}

	// When something is selected, update the “from” and “to” limits.
	from_picker.on('set', function (event) {
	if (event.select) {
	to_picker.set('min', from_picker.get('select'))
	}
	});
	to_picker.on('set', function (event) {
	if (event.select) {
	from_picker.set('max', to_picker.get('select'))
	}
	});

	</script>--
	</body>
	</html>