[exams] Show list of upcomfing exam lectures; allow adding exam period based on upcoming exam

5 files changed, 178 insertions, 106 deletions

diff --git a/modules-available/exams/templates/page-add-edit-exam.html b/modules-available/exams/templates/page-add-edit-exam.html
index d112095f..3f0ef372 100644
--- a/modules-available/exams/templates/page-add-edit-exam.html
+++ b/modules-available/exams/templates/page-add-edit-exam.html
@@ -4,6 +4,9 @@
 {{^exam.examid}}
 <h1>{{lang_addExam}}</h1>
 {{/exam.examid}}
+{{#exam.displayname}}
+<div class="alert alert-info">{{lang_addingBasedOnLecture}}:<br><b>{{exam.displayname}}</b></div>
+{{/exam.displayname}}
 
 <form class="form" method="POST" action="?do=exams" id="tolleform">
 	<div class="form-group">
@@ -64,6 +67,13 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="panel">
+		<div class="panel-body">
+			{{lang_duration}}: <span id="exam-duration">-</span>
+		</div>
+	</div>
+
 	<div class="row form-group">
 		<div class="form-group col-xs-12">
 			<label for="description">{{lang_description}}</label>
@@ -80,6 +90,8 @@
 <script type="application/javascript"><!--
 document.addEventListener("DOMContentLoaded", function () {
 	var filename = "modules/bootstrap_datepicker/lang/bootstrap-datepicker." + LANG + ".js";
+	moment.locale(LANG);
+	var slxMoment = moment;
 
 	$.getScript(filename)
 		.always(function () {
@@ -87,38 +99,58 @@ document.addEventListener("DOMContentLoaded", function () {
 		var dateSettings = {
 				format: 'yyyy-mm-dd',
 				weekStart: 1,
-				startDate: 'today',
 				todayHighlight: true,
 				language: LANG
 			};
-			var timeSettings = {
+		var timeSettings = {
 				showSeconds: false,
 				showMeridian: false,
 				minuteStep: 5,
 				appendWidgetTo: 'body'
 
 			};
-			$('.datepicker').datepicker(dateSettings);
-			$('.timepicker2').timepicker(timeSettings);
+		$('.datepicker').datepicker(dateSettings);
+		$('.timepicker2').timepicker(timeSettings);
 
-			$('#locations').multiselect({numberDisplayed: 1});
+		showDuration();
+	});
 
+	$('#locations').multiselect({numberDisplayed: 1});
 
-		});
+	var start_date = $('#starttime_date');
+	var start_time = $('#starttime_time');
+	var end_date = $('#endtime_date');
+	var end_time = $('#endtime_time');
+	var rspan = $('#exam-duration');
 
-	$('#starttime_date').focusout(function () {
-		var start = $('#starttime_date').val();
-		var end = $('#endtime_date').val();
+	start_date.focusout(function () {
+		var start = start_date.val();
+		var end = end_date.val();
 		var ok = end.length === 0;
 		if (!ok) {
-			var ms = moment(start, 'YYYY-MM-DD');
-			var me = moment(end, 'YYYY-MM-DD');
+			var ms = slxMoment(start, 'YYYY-MM-DD');
+			var me = slxMoment(end, 'YYYY-MM-DD');
 			ok = !me.isValid() || me.isBefore(ms);
 		}
 		if (ok) {
-			$('#endtime_date').val(start);
+			end_date.val(start);
 		}
 	});
 
+	var showDuration = 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('-');
+			return;
+		}
+		rspan.text(slxMoment.duration(ed.diff(sd)).humanize());
+	}
+
+	start_date.change(showDuration);
+	start_time.change(showDuration);
+	end_date.change(showDuration);
+	end_time.change(showDuration);
+
 }, false);
 // --></script>
diff --git a/modules-available/exams/templates/page-exams-vis.html b/modules-available/exams/templates/page-exams-vis.html
new file mode 100644
index 00000000..e347900b
--- /dev/null
+++ b/modules-available/exams/templates/page-exams-vis.html
@@ -0,0 +1,52 @@
+<h2>{{lang_headingGraphicalOverview}}</h2>
+
+<div id="timeline" class="slx-space"></div>
+
+<script type="application/javascript"><!--
+
+
+function itemOrderFun(a, b) {
+	return a.content.localeCompare(b.content);
+}
+
+function groupOrderFun(a, b) {
+	var s = a.sortIndex - b.sortIndex;
+	if (s != 0) return s;
+	return itemOrderFun(a, b);
+}
+
+var slxTimeline;
+
+document.addEventListener("DOMContentLoaded", function () {
+	var container = document.getElementById('timeline');
+	var groups_plain = {{{rooms_json}}};
+	var items_plain = {{{exams_json}}};
+	var groups = new vis.DataSet(groups_plain);
+	var items = new vis.DataSet(items_plain);
+
+	var language = window.navigator.userLanguage || window.navigator.language;
+
+	var options = {
+		'start' 	: {{vis_begin}},
+	'end'    : {{vis_end}},
+	'stack' 	: false,
+			'editable': false,
+			'min'		: {{vis_min_date}},
+	'max'		: {{vis_max_date}},
+	'zoomMin': 6 * 3600 * 1000,
+			'zoomMax': 2 * 86400 * 1000,
+			'order' 	: itemOrderFun,
+			'groupOrder': groupOrderFun,
+			'locale'	: language,
+			'moment'	: function(date) { return vis.moment(date).utcOffset('{{utc_offset}}'); },
+	'orientation': { 'axis': '{{axis_label}}' }
+};
+
+	slxTimeline = new vis.Timeline(container, items, groups, options);
+}, false);
+
+function slxShow(st, et) {
+	slxTimeline.setWindow(st * 1000, et * 1000);
+}
+
+// --></script>
diff --git a/modules-available/exams/templates/page-exams.html b/modules-available/exams/templates/page-exams.html
index 5fa4c0c5..184a69e3 100644
--- a/modules-available/exams/templates/page-exams.html
+++ b/modules-available/exams/templates/page-exams.html
@@ -1,96 +1,47 @@
-<div class="container-fluid">
-	<h1>{{lang_allExamPeriods}}</h1>
-
-	<div class="row">
-		<table class="table">
-			<tr>
-				<th>{{lang_id}}</th>
-				<th>{{lang_locations}}</th>
-				<th>{{lang_begin}}</th>
-				<th>{{lang_end}}</th>
-				<th>{{lang_actions}}</th>
-			</tr>
-			{{#exams}}
-			<tr class="{{rowClass}}">
-				<td>{{examid}}</td>
-				<td>
-					{{locationnames}}
-					<div class="small">{{description}}</div>
-				</td>
-				<td class="slx-nowrap">{{starttime_s}}</td>
-				<td class="slx-nowrap">{{endtime_s}}</td>
-				<td class="slx-nowrap">
-					<form method="POST" action="?do=exams&action=delete" {{^liesInPast}}onsubmit="return confirm('{{lang_deleteConfirmation}}');"{{/liesInPast}} >
-						{{^liesInPast}}
-						<span onclick="slxShow({{starttime}}, {{endtime}})" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span></span>
-						{{/liesInPast}}
-						<a href="?do=exams&action=edit&examid={{examid}}" class="btn btn-default btn-sm" >{{lang_edit}}</a>
-						<input type="hidden" name="token" value="{{token}}">
-						<input type="hidden" name="examid" value="{{examid}}">
-						<button class="btn {{btnClass}} btn-sm">{{lang_delete}}</button>
-					</form>
-				</td>
-			</tr>
-			{{/exams}}
-
-		</table>
-		<div class="btn-toolbar" role="toolbar">
-			<div class="btn-group" role="group">
-				<a href="?do=exams&action=add" class="btn btn-success">{{lang_addExam}}</a>
-			</div>
-		</div>
-	</div>
-
-
-	<div class="row" style="margin-top: 2em">
-		<div id="timeline"></div>
-	</div>
+<h2>{{lang_allExamPeriods}}</h2>
+
+<div class="slx-space">
+	<table class="table">
+		<tr>
+			<th>{{lang_id}}</th>
+			<th>{{lang_locations}}</th>
+			<th>{{lang_begin}}</th>
+			<th>{{lang_end}}</th>
+			<th>{{lang_actions}}</th>
+		</tr>
+		{{#exams}}
+		<tr class="{{rowClass}}">
+			<td>{{examid}}</td>
+			<td>
+				{{locationnames}}
+				{{^locationnames}}
+				<i>{{lang_global}}</i>
+				{{/locationnames}}
+				<div class="small">
+					{{description}}
+					{{^description}}
+					<i>{{lang_noDescription}}</i>
+					{{/description}}
+				</div>
+			</td>
+			<td class="slx-nowrap">{{starttime_s}}</td>
+			<td class="slx-nowrap">{{endtime_s}}</td>
+			<td class="slx-nowrap">
+				<form method="POST" action="?do=exams&action=delete" {{^liesInPast}}onsubmit="return confirm('{{lang_deleteConfirmation}}');"{{/liesInPast}} >
+					{{^liesInPast}}
+					<a onclick="slxShow({{starttime}}, {{endtime}})" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span></a>
+					{{/liesInPast}}
+					<a href="?do=exams&action=edit&examid={{examid}}" class="btn btn-default btn-sm" >{{lang_edit}}</a>
+					<input type="hidden" name="token" value="{{token}}">
+					<input type="hidden" name="examid" value="{{examid}}">
+					<button class="btn {{btnClass}} btn-sm">{{lang_delete}}</button>
+				</form>
+			</td>
+		</tr>
+		{{/exams}}
+	</table>
 </div>
-<script type="application/javascript"><!--
-
-
-function itemOrderFun(a, b) {
-	return a.content.localeCompare(b.content);
-}
-
-function groupOrderFun(a, b) {
-	var s = a.sortIndex - b.sortIndex;
-	if (s != 0) return s;
-	return itemOrderFun(a, b);
-}
 
-var slxTimeline;
-
-document.addEventListener("DOMContentLoaded", function () {
-	var container = document.getElementById('timeline');
-	var groups_plain = {{{rooms_json}}};
-	var items_plain = {{{exams_json}}};
-	var groups = new vis.DataSet(groups_plain);
-	var items = new vis.DataSet(items_plain);
-
-	var language = window.navigator.userLanguage || window.navigator.language;
-
-	var options = {
-		'start' 	: {{vis_begin}},
-		'end'    : {{vis_end}},
-		'stack' 	: false,
-		'editable': false,
-		'min'		: {{vis_min_date}},
-		'max'		: {{vis_max_date}},
-		'zoomMin': 6 * 3600 * 1000,
-		'zoomMax': 2 * 86400 * 1000,
-		'order' 	: itemOrderFun,
-		'groupOrder': groupOrderFun,
-		'locale'	: language,
-		'moment'	: function(date) { return vis.moment(date).utc(); },
-		'orientation': { 'axis': '{{axis_label}}' }
-	};
-
-	slxTimeline = new vis.Timeline(container, items, groups, options);
-}, false);
-
-function slxShow(st, et) {
-	slxTimeline.setWindow(st * 1000, et * 1000);
-}
-
-// --></script>
+<div class="btn-group" role="group">
+	<a href="?do=exams&action=add" class="btn btn-success">{{lang_addExam}}</a>
+</div>
diff --git a/modules-available/exams/templates/page-main-heading.html b/modules-available/exams/templates/page-main-heading.html
new file mode 100644
index 00000000..87b92a20
--- /dev/null
+++ b/modules-available/exams/templates/page-main-heading.html
@@ -0,0 +1,3 @@
+<h1>{{lang_headingMain}}</h1>
+
+<p>{{lang_examModeDescription}}</p>
\ No newline at end of file
diff --git a/modules-available/exams/templates/page-upcoming-lectures.html b/modules-available/exams/templates/page-upcoming-lectures.html
new file mode 100644
index 00000000..4a62bc29
--- /dev/null
+++ b/modules-available/exams/templates/page-upcoming-lectures.html
@@ -0,0 +1,34 @@
+<h2>{{lang_headingAllExamLectures}}</h2>
+
+<div class="slx-space">
+	<table class="table">
+		<tr>
+			<th>{{lang_lectureName}}</th>
+			<th>{{lang_timeFrame}}</th>
+			<th>{{lang_actions}}</th>
+		</tr>
+		{{#pending_lectures}}
+		<tr>
+			<td>
+				{{displayname}}
+				<div class="small">
+					<a href="mailto:{{email}}">{{lastname}}, {{firstname}}</a>
+				</div>
+			</td>
+			<td width="30%" class="text-nowrap">
+				{{starttime_s}} &ensp; {{endtime_s}}
+				<div class="small">{{duration_s}}</div>
+			</td>
+			<td width="20%">
+				<div class="pull-right text-nowrap">
+					<a class="btn btn-sm btn-default" role="button" onclick="slxShow({{starttime}}, {{endtime}})"><span class="glyphicon glyphicon-eye-open"></span></a>
+					<a href="?do=exams&amp;action=add&amp;lectureid={{lectureid}}" class="btn btn-sm btn-default" role="button">
+						<span class="glyphicon glyphicon-plus-sign"></span>
+						<span class="hidden-sm">{{lang_addExam}}</span>
+					</a>
+				</div>
+			</td>
+		</tr>
+		{{/pending_lectures}}
+	</table>
+</div>
\ No newline at end of file