7 changed files with 217 additions and 123 deletions
@ -0,0 +1,37 @@
@@ -0,0 +1,37 @@
|
||||
function createDateTimePicker(datePicker, checkbox, date){ |
||||
$(datePicker).datetimepicker({ |
||||
//useCurrent: false, //Important! See issue #1075
|
||||
locale: 'en-gb', |
||||
format: 'DD-MM-YYYY HH:mm', |
||||
keepInvalid: true, |
||||
sideBySide: true, |
||||
defaultDate: null, |
||||
timeZone: moment.tz.guess() |
||||
}); |
||||
|
||||
$(checkbox).change(function() { |
||||
updateDateTimePicker(datePicker, checkbox) |
||||
}); |
||||
|
||||
if (!$(checkbox)[0].checked){ |
||||
if ($(datePicker)[0].value == ''){ |
||||
$(datePicker)[0].value = date.format('DD-MM-YYYY HH:mm'); |
||||
} else if (!$('.alert')[0]) { //Don't convert datetime again after error
|
||||
$(datePicker)[0].value = moment.utc($(datePicker)[0].value, 'DD-MM-YYYY HH:mm').local().format('DD-MM-YYYY HH:mm'); |
||||
} |
||||
} else { |
||||
$(datePicker).data("DateTimePicker").disable(); |
||||
}; |
||||
} |
||||
|
||||
function updateDateTimePicker(picker, checkbox){ |
||||
if ($(checkbox).prop("checked")) { |
||||
$(picker).data("DateTimePicker").disable(); |
||||
} |
||||
else { |
||||
$(picker).data("DateTimePicker").enable(); |
||||
if ($(picker)[0].value == ''){ |
||||
$(picker)[0].value = moment().format('DD-MM-YYYY HH:mm'); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,97 @@
@@ -0,0 +1,97 @@
|
||||
{% 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') }}"> |
||||
<script src="{{ url_for('static', filename='assets/utils.js') }}"></script> |
||||
{% endblock %} |
||||
|
||||
{% block app_content %} |
||||
<h1>{{ title }}</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', value="Update") }} |
||||
</form> |
||||
<hr> |
||||
{% if game.hidden %} |
||||
<a href="{{ url_for('main.publish_game', game_name=game.name) }}"> |
||||
<button class="btn btn-success">Publish Game</button> |
||||
</a> |
||||
{% else %} |
||||
<a href="{{ url_for('main.hide_game', game_name=game.name) }}"> |
||||
<button class="btn btn-success">Hide Game</button> |
||||
</a> |
||||
{% endif %} |
||||
|
||||
{% if game.paused %} |
||||
<a href="{{ url_for('main.resume_game', game_name=game.name) }}"> |
||||
<button class="btn btn-primary">Resume Game</button> |
||||
</a> |
||||
{% else %} |
||||
<a href="{{ url_for('main.pause_game', game_name=game.name) }}"> |
||||
<button class="btn btn-primary">Pause Game</button> |
||||
</a> |
||||
{% endif %} |
||||
|
||||
<button class="btn btn-danger" onclick="deleteGame()">Delete Game</button> |
||||
</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"> |
||||
// Datetime pickers |
||||
$(function () { |
||||
$('#timezone')[0].value = moment.tz.guess(); |
||||
var date = moment() |
||||
createDateTimePicker('#datetimepicker_start', "#start_time_disabled", date) |
||||
date.add(1, 'hour'); |
||||
createDateTimePicker('#datetimepicker_end', "#end_time_disabled", date) |
||||
|
||||
$("#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); |
||||
}); |
||||
}); |
||||
|
||||
// Delete Game button |
||||
function deleteGame() { |
||||
if (confirm("Are you sure you want to delete this game?")) { |
||||
window.location.href = "{{ url_for('main.delete_game', game_name=game.name) }}" |
||||
} |
||||
} |
||||
</script> |
||||
{% endblock %} |
||||
Loading…
Reference in new issue