diff options
Diffstat (limited to 'modules-available/exams/templates/page-add-edit-exam.html')
| -rw-r--r-- | modules-available/exams/templates/page-add-edit-exam.html | 209 |
1 files changed, 147 insertions, 62 deletions
diff --git a/modules-available/exams/templates/page-add-edit-exam.html b/modules-available/exams/templates/page-add-edit-exam.html index a45cbac2..eb77e751 100644 --- a/modules-available/exams/templates/page-add-edit-exam.html +++ b/modules-available/exams/templates/page-add-edit-exam.html @@ -10,6 +10,8 @@ <form class="form" method="POST" action="?do=exams" id="tolleform"> + <!-- fake button to prevent return from messing things up --> + <button type="submit" hidden onclick="return false"></button> <div class="panel panel-default"> <div class="panel-heading"><label for="locations">{{lang_location}}</label></div> <div class="panel-body"> @@ -23,6 +25,7 @@ {{/locations}} </select> </div> + {{lang_checkLocationSelectionHint}} </div> </div> @@ -77,10 +80,10 @@ </div> </div> - <div class="panel"> - <div class="panel-body"> - {{lang_duration}}: <span id="exam-duration">-</span> - </div> + <div> + {{lang_duration}}: <span id="exam-duration">-</span> + <span class="hidden" id="txt-invalid">{{lang_startOrEndInvalid}}</span> + <span class="hidden" id="txt-reverse">{{lang_startAfterEnd}}</span> </div> </div> </div> @@ -88,29 +91,43 @@ <div class="panel panel-default"> <div class="panel-heading"><label for="lecturelist">{{lang_autoStartLecture}}</label></div> <div class="panel-body"> - <div class="row form-group"> - <div class="form-group col-xs-12"> - <p><i>{{lang_autoStartInfo}}</i></p> - <div class="input-group"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-pencil"></span> - </span> - <select class="form-control" id="lecturelist" name="lectureid"> - <option value="">{{lang_none}}</option> - {{#lectures}} - <option data-from="{{starttime}}" data-to="{{endtime}}" value="{{lectureid}}" {{selected}} >{{displayname}}</option> - {{/lectures}} - </select> - </div> + <div class="form-group"> + <p><i>{{lang_autoStartInfo}}</i></p> + <div class="input-group"> + <span class="input-group-addon"> + <span class="glyphicon glyphicon-pencil"></span> + </span> + <select class="form-control" id="lecturelist" name="lectureid"> + <option value="">{{lang_none}}</option> + {{#lectures}} + <option data-from="{{starttime}}" data-to="{{endtime}}" + {{#islocationprivate}}data-locations="{{lids}}"{{/islocationprivate}} + value="{{lectureid}}" {{selected}} >{{displayname}}</option> + {{/lectures}} + </select> </div> - <div class="form-group col-xs-12"> - <div class="checkbox"><input id="autologin" type="checkbox" name="autologin" value="demo" class="form-control" {{#exam.autologin}}checked{{/exam.autologin}}><label for="autologin">{{lang_autoLogin}}</label></div> - <p><i>{{lang_autoLoginInfo}}</i></p> + <b id="sanity-check" class="slx-smallspace collapse">{{lang_sanityCheck}}</b> + <div id="warn-range" class="collapse"> + <div class="text-warning"> + <div class="item start-before-lecture-start text-danger">{{lang_examStartBeforeLectureStart}}</div> + <div class="item start-after-lecture-start">{{lang_examStartAfterLectureStart}}</div> + <div class="item start-after-lecture-end text-danger">{{lang_examStartAfterLectureEnd}}</div> + <div class="item end-before-lecture-end">{{lang_examEndBeforeLectureEnd}}</div> + <div class="item end-after-lecture-end">{{lang_examEndAfterLectureEnd}}</div> + </div> + {{lang_lectureTimespan}}: + <span class="lecture-range"></span> </div> - <div class="col-xs-12" id="lecture-info"> - - + <div id="warn-locations" class="text-danger collapse"> + {{lang_lectureNotForLocation}}: + <span class="locname"></span> </div> </div> + <div class="slx-space"></div> + <div class="form-group"> + <div class="checkbox"><input id="autologin" type="checkbox" name="autologin" value="demo" class="form-control" {{#exam.autologin}}checked{{/exam.autologin}}><label for="autologin">{{lang_autoLogin}}</label></div> + <p><i>{{lang_autoLoginInfo}}</i></p> + </div> </div> </div> @@ -126,7 +143,7 @@ <input type="hidden" name="examid" value="{{exam.examid}}"> <div class="text-right" style="margin-bottom: 20px"> <button type="button" id="cancelButton" class="btn btn-default" style="margin-right: 10px">{{lang_cancel}}</button> - <button type="button" onclick="checkGlobalExam()" id="saveButton" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button> + <button type="button" id="saveButton" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button> </div> <div class ="modal fade" id="confirmGlobalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> @@ -149,14 +166,6 @@ <script type="application/javascript"><!-- -function checkGlobalExam() { - if ($('#locations option:selected').length === 0 && $('#locations option').length > 1) { - $("#confirmGlobalModal").modal(); - } else { - $('#tolleform').submit(); - } -} - document.addEventListener("DOMContentLoaded", function () { moment.locale(LANG); @@ -175,7 +184,8 @@ document.addEventListener("DOMContentLoaded", function () { $('.datepicker').datepicker(dateSettings); $('.timepicker2').timepicker(timeSettings); - $('#locations').multiselect({numberDisplayed: 1}); + var $locations = $('#locations'); + $locations.multiselect({numberDisplayed: 1}); var start_date = $('#starttime_date'); var start_time = $('#starttime_time'); @@ -197,54 +207,129 @@ document.addEventListener("DOMContentLoaded", function () { } }); + var examStart, examEnd; + var startEndChanged = function () { - var sd = slxMoment(start_date.val() + ' ' + start_time.val(), 'YYYY-MM-DD H:mm'); - var ed = slxMoment(end_date.val() + ' ' + end_time.val(), 'YYYY-MM-DD H:mm'); - if (!sd.isValid() || !ed.isValid()) { - rspan.text('-'); + examStart = slxMoment(start_date.val() + ' ' + start_time.val(), 'YYYY-MM-DD H:mm'); + examEnd = slxMoment(end_date.val() + ' ' + end_time.val(), 'YYYY-MM-DD H:mm'); + if (!examStart.isValid() || !examEnd.isValid()) { + rspan.text($('#txt-invalid').text()).addClass('text-danger'); return; } - rspan.text(slxMoment.duration(ed.diff(sd)).humanize()); - // Lecture selection - $('#lecturelist option').each(function (idx, elem) { - var e = $(elem); - var from = e.data('from'); - var to = e.data('to'); - if (!from || !to) + var diff = examEnd.diff(examStart); + if (diff <= 0) { + rspan.text($('#txt-reverse').text()).addClass('text-danger'); + return; + } + rspan.text(slxMoment.duration(diff).humanize()).removeClass('text-danger'); + updateLectureInfo(); + }; + + var $timespanWarning = $('#warn-range'); + var $locationWarning = $('#warn-locations'); + var updateLectureInfo = function() { + (function() { + var $sel = $('#lecturelist option:selected'); + var lectureStart = $sel.data('from'); + var lectureEnd = $sel.data('to'); + if (!lectureStart || !lectureEnd) { + $timespanWarning.hide(); return; - from = slxMoment.unix(from); - to = slxMoment.unix(to); - if (from.isBefore(sd) || to.isAfter(ed)) { - e.css('color', '#999'); - e.data('inrange', false) + } + lectureStart = slxMoment.unix(lectureStart); + lectureEnd = slxMoment.unix(lectureEnd); + var diff; + var warnings = []; + if (examStart.isBefore(lectureStart)) { + warnings.push('.start-before-lecture-start'); + } + if (lectureEnd.diff(lectureStart, 'hours') >= 12) { + // Lecture is longer than 12 hours -- only consider exam start/end date outside range + if (lectureEnd.diff(examStart, 'minutes') < 15) { // Start after end, or very close to end + warnings.push('.start-after-lecture-end'); + } + if (examEnd.diff(lectureEnd, 'minutes') > 15) { + warnings.push('.end-after-lecture-end'); + } } else { - e.css('color', ''); - e.data('inrange', true); + // Lecture is shorter than 12 hours -- assume it's the actual timespan of the exam + if (examStart.diff(lectureStart, 'minutes') > 30) { + warnings.push('.start-after-lecture-start'); + } + diff = examEnd.diff(lectureEnd, 'minutes'); + if (diff > 15) { + warnings.push('.end-after-lecture-end'); + } else if (diff < -30) { + warnings.push('.end-before-lecture-end'); + } } - }); - updateLectureInfo(); + if (warnings.length === 0) { + $timespanWarning.hide(); + return; + } + $timespanWarning.find('.item').hide(); + for (var i = 0; i < warnings.length; ++i) { + $timespanWarning.find(warnings[i]).show(); + } + $timespanWarning.find('.lecture-range').text(slxMoment.unix($sel.data('from')) + .format('LLL') + ' – ' + slxMoment.unix($sel.data('to')).format('LLL')); + $timespanWarning.show(); + })(); + showHeading(); + }; + var updateLocationsInfo = function() { + (function() { + var selectedLocs = $locations.val(); + var lecLocs = $('#lecturelist option:selected').data('locations'); + if (!lecLocs || lecLocs.length === 0 || !selectedLocs) { + $locationWarning.hide(); + return; + } + lecLocs = lecLocs.split(','); + if (!$.isArray(selectedLocs)) { + selectedLocs = [selectedLocs]; + } + for (var i = 0; i < selectedLocs.length; ++i) { + if (lecLocs.indexOf(selectedLocs[i]) === -1) { + $locationWarning.find('.locname').text($locations.find('option[value="' + selectedLocs[i] + '"]').text()); + $locationWarning.show(); + return; + } + } + $locationWarning.hide(); + })(); + showHeading(); }; - var updateLectureInfo = function() { - var sel = $('#lecturelist option:selected'); - if (sel.val() === '' || sel.data('inrange')) { - $('#lecture-info').text('-'); + $('#saveButton').click(function () { + if ($('#locations option:selected').length === 0 && $('#locations option').length > 1) { + $("#confirmGlobalModal").modal(); } else { - $('#lecture-info').text('{{lang_lectureOutOfRange}} (' + slxMoment.unix(sel.data('from')).format('YYYY-MM-DD H:mm') + ' - ' + slxMoment.unix(sel.data('to')).format('YYYY-MM-DD H:mm') + ')'); + $('#tolleform').submit(); + } + }); + + var $sanity = $('#sanity-check'); + var showHeading = function() { + if ($locationWarning.is(':visible') || $timespanWarning.is(':visible')) { + $sanity.show(); + } else { + $sanity.hide(); } }; + startEndChanged(); + updateLocationsInfo(); start_date.change(startEndChanged); start_time.change(startEndChanged); end_date.change(startEndChanged); end_time.change(startEndChanged); - $('#lecturelist').change(updateLectureInfo); + $('#lecturelist').change(updateLectureInfo).change(updateLocationsInfo); + $locations.change(updateLocationsInfo); $("#cancelButton").click(function () { - window.location.replace("?do=exams"); + window.history.back(); }); - startEndChanged(); - }, false); // --></script> |