From 8bfd6122b07b4ca2abbbcf13a4498c856d24ab64 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Wed, 22 Jul 2020 17:15:10 +0200
Subject: [exams] More sanity checks regarding date/time and locations

Implausible start/end time, or mismatch between defined exam interval
and interval of selected lecture will now be reported.

Also, if the list of selected locations contains a location that is not
also assiged to the selected lecture, a warning will be displayed. This
only triggers if the lecture is restricted to certain locations
(exclusive mode, aka "islocationprivate" column.
---
 .../exams/templates/page-add-edit-exam.html        | 209 +++++++++++++++------
 1 file changed, 147 insertions(+), 62 deletions(-)

(limited to 'modules-available/exams/templates/page-add-edit-exam.html')

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>
-- 
cgit v1.2.3-55-g7522