Skip to content

Commit

Permalink
[frontend/settings] Adapt course settings to use Flatpickr instead of…
Browse files Browse the repository at this point in the history 
… Tempus Dominus
  • Loading branch information
@AlexandreDoneux
AlexandreDoneux committed Jan 22, 2024
1 parent 7fe3ac3 commit bcd4f8f
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 46 deletions.
135 changes: 89 additions & 46 deletions inginious/frontend/templates/course_admin/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,38 +161,59 @@ <h2>{{_("Course settings")}}</h2>
<div class="col-xs-2 col-lg-2"><label class="control-label">{{ _("From") }}</label></div>
<div class="col-xs-10 col-lg-4">
<div class="form-group">
<div class='input-group date' id='accessible_start_picker' data-target-input="nearest">
<input data-target='#accessible_start_picker' name="accessible_start" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2014-06-29 10:00" type='text' class="form-control datetimepicker-input" />
<div class="input-group-append" data-target="#accessible_start_picker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>

<div class="input-group date" id="accessible_start_picker" data-wrap="true" data-clickOpens="false">
<input id="accessible_start" data-input name="accessible_start" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2024-06-29 10:00:00" type='text' class="form-control datetimepicker-input">
<div class="input-group-append" title="toggle" data-toggle>
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>

</div>
<div class="col-xs-2 col-lg-2"><label class="control-label">{{ _("To") }}</label></div>
<div class="col-xs-10 col-lg-4">
<div class="form-group">
<div class='input-group date' id='accessible_end_picker' data-target-input="nearest">
<input data-target='#accessible_end_picker' name="accessible_end" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2014-06-29 10:00" type='text' class="form-control datetimepicker-input" />
<div class="input-group-append" data-target="#accessible_end_picker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>

<div class="input-group date" id="accessible_end_picker" data-wrap="true" data-clickOpens="false">
<input id="accessible_end" data-input name="accessible_end" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2024-06-29 10:00:00" type='text' class="form-control datetimepicker-input">
<div class="input-group-append" title="toggle" data-toggle>
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
let start_date = "{{at.get_std_start_date()}}" ? moment.utc("{{at.get_std_start_date()}}") : null;
let end_date = "{{at.get_std_end_date()}}" ? moment.utc("{{at.get_std_end_date()}}") : null;
let start_date = "{{at.get_std_start_date()}}"
let end_date = "{{at.get_std_end_date()}}"
timeZone = "{{user_manager.session_timezone()}}";

$("#accessible_start_picker").flatpickr({
wrap: true,
clickOpens: false,
enableTime: true,
enableSeconds: true,
dateFormat: "Y-m-d H:i:S",
allowInput: true,
time_24hr: true,
locale: {
firstDayOfWeek: 1,
},
defaultDate : start_date ? moment.utc(start_date, 'YYYY-MM-DD HH:mm:ss').tz(timeZone).toDate() : '',
});

$("#accessible_end_picker").flatpickr({
wrap: true,
clickOpens: false,
enableTime: true,
enableSeconds: true,
dateFormat: "Y-m-d H:i:S",
allowInput: true,
time_24hr: true,
locale: {
firstDayOfWeek: 1,
},
defaultDate : end_date ? moment.utc(end_date, 'YYYY-MM-DD HH:mm:ss').tz(timeZone).toDate() : '',
});


$('#accessible_start_picker').datetimepicker({locale: '{{user_manager.session_language()}}', timeZone: '{{user_manager.session_timezone()}}',
defaultDate: start_date, sideBySide: true, format:'YYYY-MM-DD HH:mm:ss'});
$('#accessible_end_picker').datetimepicker({locale: '{{user_manager.session_language()}}', timeZone: '{{user_manager.session_timezone()}}',
defaultDate: end_date, sideBySide: true, format:'YYYY-MM-DD HH:mm:ss'});

});
</script>
Expand Down Expand Up @@ -227,37 +248,58 @@ <h2>{{_("Course settings")}}</h2>
<div class="col-xs-2 col-lg-2"><label class="control-label">{{ _("From") }}</label></div>
<div class="col-xs-10 col-lg-4">
<div class="form-group">
<div class='input-group date' id='registration_start_picker' data-target-input="nearest">
<input data-target='#registration_start_picker' name="registration_start" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2014-06-29 10:00" type='text' class="form-control datetimepicker-input" />
<div class="input-group-append" data-target="#registration_start_picker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>

<div class="input-group date" id="registration_start_picker" data-wrap="true" data-clickOpens="false">
<input id="registration_start" data-input name="registration_start" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2024-06-29 10:00:00" type='text' class="form-control datetimepicker-input">
<div class="input-group-append" title="toggle" data-toggle>
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xs-2 col-lg-2"><label class="control-label">{{_("To")}}</label></div>
<div class="col-xs-2 col-lg-2"><label class="control-label">{{ _("To") }}</label></div>
<div class="col-xs-10 col-lg-4">
<div class="form-group">
<div class='input-group date' id='registration_end_picker' data-target-input="nearest">
<input data-target='#registration_end_picker' name="registration_end" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2014-06-29 10:00" type='text' class="form-control datetimepicker-input" />
<div class="input-group-append" data-target="#registration_end_picker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>

<div class="input-group date" id="registration_end_picker" data-wrap="true" data-clickOpens="false">
<input id="registration_end" data-input name="registration_end" data-date-format="YYYY-MM-DD HH:mm:ss" placeholder="2024-06-29 10:00:00" type='text' class="form-control datetimepicker-input">
<div class="input-group-append" title="toggle" data-toggle>
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
let start_date = "{{at.get_std_start_date()}}" ? moment.utc("{{at.get_std_start_date()}}") : null;
let end_date = "{{at.get_std_end_date()}}" ? moment.utc("{{at.get_std_end_date()}}") : null;

$('#registration_start_picker').datetimepicker({locale: '{{user_manager.session_language()}}', timeZone: '{{user_manager.session_timezone()}}',
defaultDate: start_date, sideBySide: true, format:'YYYY-MM-DD HH:mm:ss'});
$('#registration_end_picker').datetimepicker({locale: '{{user_manager.session_language()}}', timeZone: '{{user_manager.session_timezone()}}',
defaultDate: end_date, sideBySide: true, format:'YYYY-MM-DD HH:mm:ss'});
let start_date = "{{at.get_std_start_date()}}";
let end_date = "{{at.get_std_end_date()}}";
timeZone = "{{user_manager.session_timezone()}}";

$("#registration_start_picker").flatpickr({
wrap: true,
clickOpens: false,
enableTime: true,
enableSeconds: true,
dateFormat: "Y-m-d H:i:S",
allowInput: true,
time_24hr: true,
locale: {
firstDayOfWeek: 1,
},
defaultDate : start_date ? moment.utc(start_date, 'YYYY-MM-DD HH:mm:ss').tz(timeZone).toDate() : '',
});


$("#registration_end_picker").flatpickr({
wrap: true,
clickOpens: false,
enableTime: true,
enableSeconds: true,
dateFormat: "Y-m-d H:i:S",
allowInput: true,
time_24hr: true,
locale: {
firstDayOfWeek: 1,
},
defaultDate : end_date ? moment.utc(end_date, 'YYYY-MM-DD HH:mm:ss').tz(timeZone).toDate() : '',
});
});
</script>
</div>
Expand Down Expand Up @@ -527,12 +569,13 @@ <h2>{{_("Course settings")}}</h2>

$('#edit_course_form').on('submit', function(event) {
event.preventDefault();
var datetimePickerTargets = ['#accessible_start_picker', '#accessible_end_picker', '#registration_start_picker', '#registration_end_picker'];
var datetimePickerTargets = ['#accessible_start', '#accessible_end', '#registration_start', '#registration_end'];
let timezone = "{{user_manager.session_timezone()}}";

datetimePickerTargets.forEach(function(target) {
var selectedDatetime = $(target).datetimepicker('date');
var modifiedDatetime = selectedDatetime !== null ? selectedDatetime.clone().utc().format('YYYY-MM-DD HH:mm:ss') : null;
$('[data-target="' + target + '"]').val(modifiedDatetime);
var selectedDatetime = $(target).val();
var modifiedDatetime = selectedDatetime !== "" ? moment.tz(selectedDatetime, timezone).clone().utc().format('YYYY-MM-DD HH:mm:ss') : "";
$(target).val(modifiedDatetime);
});

this.submit();
Expand Down
2 changes: 2 additions & 0 deletions inginious/frontend/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
<link href="{{get_homepath(True)}}/static/css/INGInious.css?v2" rel="stylesheet">
{% endif %}
<link href="{{get_homepath(True)}}/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="{{get_homepath(True)}}/static/css/flatpickr.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link href="{{get_homepath(True)}}/static/css/font-awesome.min.css" rel="stylesheet">
Expand Down Expand Up @@ -92,6 +93,7 @@
<script src="{{get_homepath(True)}}/static/js/libs/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
{% endif %}
<script src="{{get_homepath(True)}}/static/js/libs/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="{{get_homepath(True)}}/static/js/libs/flatpickr.min.js" type="text/javascript" charset="utf-8"></script>
<script src='{{get_homepath(True)}}/static/js/libs/Sortable.min.js' type="text/javascript" charset="utf-8"></script>
<script src="{{get_homepath(True)}}/static/js/libs/jquery.twbsPagination.min.js" type="text/javascript" charset="utf-8"></script>
<script src="{{get_homepath(True)}}/static/js/libs/selectize.min.js" type="text/javascript" charset="utf-8"></script>
Expand Down

0 comments on commit bcd4f8f

Please sign in to comment.