Skip to content

Instantly share code, notes, and snippets.

@pfitz

pfitz/ChildAges.elm

Last active July 26, 2016 10:10
Show Gist options
  • Save pfitz/fd5a1909a95212665ccb0a0399e99ed0 to your computer and use it in GitHub Desktop.
Save pfitz/fd5a1909a95212665ccb0a0399e99ed0 to your computer and use it in GitHub Desktop.
Download ZIP
Trying to dynamically add seletors
Raw
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
}
Raw
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>
Raw
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]);
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment