summaryrefslogblamecommitdiffstats
path: root/modules-available/exams/templates/page-add-edit-exam.html
blob: cb1578adec6712bf43ef0d95c1763f789c6a1482 (plain) (tree)
1
2
3
4
5
6
7
8
9
                
                                 

                
                                
                


                                                                                                 


                                                                   

                                                                        
                                                           
                      

                                                                   
                                                                                                                                   



                                      

                                      
                                                                               






                                                                                                                         
                      
                                      
                                                                               







                                                                                                                                      


                      

                                      
                                                                           






                                                                                                                     
                      
                                      
                                                                           



                                                                                      
                                                                                                                                  


                                                                               

                      






                                                                            
                                    
                                                  













                                                                                                                                                            



                                                                                                                                                                                                                                            
                                                         
                         




                                                  







                                                                                                                                          




                                                                                                                                                                                     



                                                           
                                                                                                

                               






                                                                                                               
                                                     

                                              
                                    





                                                      

                                                           
 
                                  
           
 
                                                          
 




                                              
 


                                             

                                          

                                                                


                                                              
                                            


                 
                                           






                                                                                                 
























                                                                    
                                                                                                                                                                                                                          
                 

         




                                                    
 







                                                                                                        



                                                     

               
{{#exam.examid}}
<h1>{{lang_headingEditExam}}</h1>
{{/exam.examid}}
{{^exam.examid}}
<h1>{{lang_headingAddExam}}</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">
		<div>
			<label for="locations">{{lang_location}}</label>
			<p><i>{{lang_locationInfo}}</i></p>
		</div>
		<select id="locations" multiple name="locations[]">
			{{#locations}}
			<option value="{{locationid}}" {{#selected}}selected{{/selected}}>{{locationpad}} {{locationname}}</option>
			{{/locations}}
		</select>
	</div>

	<div class="row form-group">
		<div class="col-xs-6">
			<label for="starttime_date">{{lang_begin_date}}</label>
			<div class="input-group">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-calendar"></span>
				</span>
				<input required class="form-control datepicker" name="starttime_date" id="starttime_date"
						 value="{{exam.starttime_date}}">
			</div>
		</div>
		<div class="col-xs-6">
			<label for="starttime_time">{{lang_begin_time}}</label>
			<div class="input-group bootstrap-timepicker timepicker">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-time"></span>
				</span>
				<input required type="text" class="form-control timepicker2" name="starttime_time" id="starttime_time"
						 value="{{exam.starttime_time}}"
						 pattern="[0-9]{1,2}:[0-9]{2}">
			</div>
		</div>
	</div>

	<div class="row form-group">
		<div class="col-xs-6">
			<label for="endtime_date">{{lang_end_date}}</label>
			<div class="input-group">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-calendar"></span>
				</span>
				<input required class="form-control datepicker" name="endtime_date" id="endtime_date"
						 value="{{exam.endtime_date}}">
			</div>
		</div>
		<div class="col-xs-6">
			<label for="endtime_time">{{lang_end_time}}</label>
			<div class="input-group bootstrap-timepicker timepicker">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-time"></span>
				</span>
				<input required type="text" class="form-control timepicker2" name="endtime_time" id="endtime_time"
						 value="{{exam.endtime_time}}"
						 pattern="[0-9]{1,2}:[0-9]{2}">
			</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_autoStartLecture}}</label>
			<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>
		<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>
		</div>
		<div class="col-xs-12" id="lecture-info">
			-
		</div>
	</div>

	<div class="row form-group">
		<div class="form-group col-xs-12">
			<label for="description">{{lang_description}}</label>
			<textarea class="form-control" type="textarea" name="description" id="description">{{exam.description}}</textarea>
		</div>
	</div>

	<input type="hidden" name="action" value="save">
	<input type="hidden" name="token" value="{{token}}">
	<input type="hidden" name="examid" value="{{exam.examid}}">
	<div class="text-right" style="margin-bottom: 20px">
		<button type="submit" id="saveButton" class="btn btn-primary" style="margin-right: 10px"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button>
		<button type="button" id="cancelButton" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> {{lang_cancel}}</button>
	</div>

</form>

<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 () {
			/* TODO: generalize this (set locale in the clientscript.js of bootstrap_datepicker) */
		var dateSettings = {
				format: 'yyyy-mm-dd',
				weekStart: 1,
				todayHighlight: true,
				language: LANG
			};
		var timeSettings = {
				showSeconds: false,
				showMeridian: false,
				minuteStep: 5,
				appendWidgetTo: 'body'

			};
		$('.datepicker').datepicker(dateSettings);
		$('.timepicker2').timepicker(timeSettings);

		startEndChanged();
	});

	$('#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');

	start_date.focusout(function () {
		var start = start_date.val();
		var end = end_date.val();
		var ok = end.length === 0;
		if (!ok) {
			var ms = slxMoment(start, 'YYYY-MM-DD');
			var me = slxMoment(end, 'YYYY-MM-DD');
			ok = !me.isValid() || me.isBefore(ms);
		}
		if (ok) {
			end_date.val(start);
		}
	});

	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('-');
			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)
				return;
			from = slxMoment(from);
			to = slxMoment(to);
			if (from.isBefore(sd) || to.isAfter(ed)) {
				e.css('color', '#999');
				e.data('inrange', false)
			} else {
				e.css('color', '');
				e.data('inrange', true);
			}
		});
		updateLectureInfo();
	}

	var updateLectureInfo = function() {
		var sel = $('#lecturelist option:selected');
		if (sel.val() === '' || sel.data('inrange')) {
			$('#lecture-info').text('-');
		} else {
			$('#lecture-info').text('{{lang_lectureOutOfRange}} (' + slxMoment(sel.data('from') * 1000).format('YYYY-MM-DD H:mm') + ' - ' + slxMoment(sel.data('to') * 1000).format('YYYY-MM-DD H:mm') + ')');
		}
	}

	start_date.change(startEndChanged);
	start_time.change(startEndChanged);
	end_date.change(startEndChanged);
	end_time.change(startEndChanged);
	$('#lecturelist').change(updateLectureInfo);

	$('#tolleform').submit(function(ev) {
		if ($('#locations option:selected').length === 0 && $('#locations option').length > 1) {
			if (!confirm('{{lang_comfirmGlobalExam}}')) {
				ev.preventDefault();
			}
		}
	});

	$("#cancelButton").click(function () {
		window.location.replace("?do=exams");
	});

}, false);
// --></script>