|
|
|
@ -2,46 +2,107 @@
@@ -2,46 +2,107 @@
|
|
|
|
|
{% import 'bootstrap/wtf.html' as wtf %} |
|
|
|
|
|
|
|
|
|
{% block head %} |
|
|
|
|
{{ super() }} |
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"> |
|
|
|
|
{{ super() }} |
|
|
|
|
<link rel="stylesheet" |
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"> |
|
|
|
|
{% endblock %} |
|
|
|
|
|
|
|
|
|
{% block app_content %} |
|
|
|
|
<h1>Create a new game</h1> |
|
|
|
|
<div class="row"> |
|
|
|
|
<div class="col-md-4"> |
|
|
|
|
{{ wtf.quick_form(form) }} |
|
|
|
|
<h1>Create a new game</h1> |
|
|
|
|
|
|
|
|
|
<div class="col-md-4 col-sm-6 col-xs-8"> |
|
|
|
|
<hr> |
|
|
|
|
<form action="" method="post" class="form" role="form"> |
|
|
|
|
{{ form.csrf_token() }} |
|
|
|
|
{{ form.timezone }} |
|
|
|
|
{{ wtf.form_field(form.game_name, class='form-control') }} |
|
|
|
|
|
|
|
|
|
{{ form.start_time.label }} |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<div class="col-sm-7"> |
|
|
|
|
{{ form.start_time }} |
|
|
|
|
</div> |
|
|
|
|
<div class="col-sm-5 align-self-center"> |
|
|
|
|
{{ wtf.form_field(form.start_time_disabled, class='form-control') }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{{ form.end_time.label }} |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<div class="col-sm-7"> |
|
|
|
|
{{ form.end_time }} |
|
|
|
|
</div> |
|
|
|
|
<div class="col-sm-5 align-self-center"> |
|
|
|
|
{{ wtf.form_field(form.end_time_disabled, class='form-control') }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button> |
|
|
|
|
</form> |
|
|
|
|
<hr> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock %} |
|
|
|
|
|
|
|
|
|
TODO: |
|
|
|
|
- maak time picker 24 uur based |
|
|
|
|
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#locale+ |
|
|
|
|
- optie voor nu |
|
|
|
|
|
|
|
|
|
{% block scripts %} |
|
|
|
|
{{ super() }} |
|
|
|
|
<!-- TODO: Scripts downloaden naar repo? --> |
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> |
|
|
|
|
<script type="text/javascript"> |
|
|
|
|
{{ super() }} |
|
|
|
|
<!-- TODO: Scripts downloaden naar repo? --> |
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script> |
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> |
|
|
|
|
<script type="text/javascript"> |
|
|
|
|
$(function () { |
|
|
|
|
$('#datetimepicker1').datetimepicker({ |
|
|
|
|
useCurrent: false, //Important! See issue #1075 |
|
|
|
|
locale: 'en-gb' |
|
|
|
|
}); |
|
|
|
|
$('#datetimepicker2').datetimepicker({ |
|
|
|
|
useCurrent: false, //Important! See issue #1075 |
|
|
|
|
locale: 'en-gb' |
|
|
|
|
}); |
|
|
|
|
$("#datetimepicker1").on("dp.change", function (e) { |
|
|
|
|
$('#datetimepicker2').data("DateTimePicker").minDate(e.date); |
|
|
|
|
}); |
|
|
|
|
$("#datetimepicker2").on("dp.change", function (e) { |
|
|
|
|
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date); |
|
|
|
|
}); |
|
|
|
|
var date = new Date() |
|
|
|
|
$('#datetimepicker_start').datetimepicker({ |
|
|
|
|
//useCurrent: false, //Important! See issue #1075 |
|
|
|
|
locale: 'en-gb', |
|
|
|
|
format: 'DD-MM-YYYY HH:mm', |
|
|
|
|
keepInvalid: true, |
|
|
|
|
sideBySide: true, |
|
|
|
|
defaultDate: date, |
|
|
|
|
timeZone: moment.tz.guess() |
|
|
|
|
}); |
|
|
|
|
date.setDate(date.getDate() + 1) |
|
|
|
|
$('#datetimepicker_end').datetimepicker({ |
|
|
|
|
//useCurrent: false, //Important! See issue #1075 |
|
|
|
|
locale: 'en-gb', |
|
|
|
|
format: 'DD-MM-YYYY HH:mm', |
|
|
|
|
keepInvalid: true, |
|
|
|
|
sideBySide: true, |
|
|
|
|
defaultDate: date, |
|
|
|
|
timeZone: moment.tz.guess() |
|
|
|
|
}); |
|
|
|
|
$("#datetimepicker_start").on("dp.change", function (e) { |
|
|
|
|
$('#datetimepicker_end').data("DateTimePicker").minDate(e.date); |
|
|
|
|
}); |
|
|
|
|
$("#datetimepicker_end").on("dp.change", function (e) { |
|
|
|
|
$('#datetimepicker_start').data("DateTimePicker").maxDate(e.date); |
|
|
|
|
}); |
|
|
|
|
$("#start_time_disabled").change(function() { |
|
|
|
|
updateDateTimePicker('#datetimepicker_start', '#start_time_disabled') |
|
|
|
|
}); |
|
|
|
|
$("#end_time_disabled").change(function() { |
|
|
|
|
updateDateTimePicker('#datetimepicker_end', '#end_time_disabled') |
|
|
|
|
}); |
|
|
|
|
function updateDateTimePicker(picker, checkbox){ |
|
|
|
|
if ($(checkbox).prop("checked")) { |
|
|
|
|
$(picker).data("DateTimePicker").disable(); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
$(picker).data("DateTimePicker").enable(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
updateDateTimePicker('#datetimepicker_start', '#start_time_disabled'); |
|
|
|
|
updateDateTimePicker('#datetimepicker_end', '#end_time_disabled'); |
|
|
|
|
$('#timezone')[0].value = moment.tz.guess(); |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
</script> |
|
|
|
|
{% endblock %} |