You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

99 lines
3.6 KiB

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/bootstrap/bootstrap-datetimepicker.min.css') }}">
{% endblock %}
{% block app_content %}
<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.hidden_tag() }}
{{ 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>
{{ 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>
{{ wtf.form_field(form.submit, class='btn btn-primary') }}
</form>
<hr>
</div>
{% endblock %}
{% 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-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 () {
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>
{% endblock %}