[locations] Avoid potentially duplicate ids in ajax fragments

5 files changed, 97 insertions, 92 deletions

diff --git a/modules-available/locations/clientscript.js b/modules-available/locations/clientscript.js
index 25c255fb..89abcefc 100644
--- a/modules-available/locations/clientscript.js
+++ b/modules-available/locations/clientscript.js
@@ -61,60 +61,68 @@ function newOpeningTime(vals) {
  * Convert fields from simple mode view to entries in expert mode.
  * @returns {Array}
  */
-function simpleToExpert() {
-	var retval = [];
-	if ($('#week-open').val() || $('#week-close').val()) {
+function simpleToExpert($form) {
+	var retval = [], $open, $close;
+	$open = $form.find('.week-open');
+	$close = $form.find('.week-close');
+	if ($open.val() || $close.val()) {
 		retval.push({
 			'days': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
-			'openingtime': $('#week-open').val(),
-			'closingtime': $('#week-close').val(),
-			'tag': '#week'
+			'openingtime': $open.val(),
+			'closingtime': $close.val(),
+			'tag': 'week'
 		});
 	}
-	if ($('#saturday-open').val() || $('#saturday-close').val()) {
+	$open = $form.find('.saturday-open');
+	$close = $form.find('.saturday-close');
+	if ($open.val() || $close.val()) {
 		retval.push({
 			'days': ['Saturday'],
-			'openingtime': $('#saturday-open').val(),
-			'closingtime': $('#saturday-close').val(),
-			'tag': '#saturday'
+			'openingtime': $open.val(),
+			'closingtime': $close.val(),
+			'tag': 'saturday'
 		});
 	}
-	if ($('#sunday-open').val() || $('#sunday-close').val()) {
+	$open = $form.find('.sunday-open');
+	$close = $form.find('.sunday-close');
+	if ($open.val() || $close.val()) {
 		retval.push({
 			'days': ['Sunday'],
-			'openingtime': $('#sunday-open').val(),
-			'closingtime': $('#sunday-close').val(),
-			'tag': '#sunday'
+			'openingtime': $open.val(),
+			'closingtime': $close.val(),
+			'tag': 'sunday'
 		});
 	}
 	return retval;
 }
 
 /**
- * Triggered when the form is submitted
+ * Triggered when the openingtimes/WOL form is submitted
  */
-function submitLocationSettings(event) {
+function validateOpeningTimes(event) {
 	var schedule, s, e;
 	var badFormat = false;
-	$('#settings-outer').find('.red-bg').removeClass('red-bg');
-	if ($('#week-open').length > 0) {
-		schedule = simpleToExpert();
+	var $form = $(this);
+
+	$form.find('.red-bg').removeClass('red-bg');
+	if ($form.find('.week-open').length > 0) {
+		schedule = simpleToExpert($form);
 		for (var i = 0; i < schedule.length; ++i) {
 			s = getTime(schedule[i].openingtime);
 			e = getTime(schedule[i].closingtime);
 			if (s === false) {
-				$(schedule[i].tag + '-open').addClass('red-bg');
+				$form.find('.' + schedule[i].tag + '-open').addClass('red-bg');
 				badFormat = true;
 			}
 			if (e === false || e <= s) {
-				$(schedule[i].tag + '-close').addClass('red-bg');
+				$form.find('.' + schedule[i].tag + '-close').addClass('red-bg');
 				badFormat = true;
 			}
 		}
 	} else {
 		// Serialize
 		schedule = [];
-		$('#expert-table').find('.expert-row').each(function () {
+		$form.find('.expert-table .expert-row').each(function () {
 			var $t = $(this);
 			if ($t.find('.i-delete').is(':checked')) return; // Skip marked as delete
 			var entry = {
@@ -149,5 +157,5 @@ function submitLocationSettings(event) {
 	if (badFormat) {
 		event.preventDefault();
 	}
-	$('#json-openingtimes').val(JSON.stringify(schedule));
+	$form.find('input[name="openingtimes"]').val(JSON.stringify(schedule));
 }
\ No newline at end of file
diff --git a/modules-available/locations/pages/details.inc.php b/modules-available/locations/pages/details.inc.php
index aa279570..2f444157 100644
--- a/modules-available/locations/pages/details.inc.php
+++ b/modules-available/locations/pages/details.inc.php
@@ -33,15 +33,16 @@ class SubPage
 		return false;
 	}
 
-	private static function updateOpeningTimes() {
-		$openingTimes = Request::post('openingtimes', '', 'string');
-		$locationid = Request::post('locationid', false, 'int');
+	private static function updateOpeningTimes()
+	{
+		$openingTimes = Request::post('openingtimes', Request::REQUIRED, 'string');
+		$locationid = Request::post('locationid', Request::REQUIRED, 'int');
 		$wol = Request::post('wol', false, 'bool');
 		$woloffset = Request::post('wol-offset', 0, 'int');
 		$sd = Request::post('sd', false, 'bool');
 		$sdoffset = Request::post('sd-offset', 0, 'int');
 
-		User::assertPermission('location.edit', $locationid);
+		User::assertPermission('location.edit.*', $locationid); // TODO: Introduce permission
 
 		// Construct opening-times for database
 		if ($openingTimes !== '') {
@@ -109,8 +110,6 @@ class SubPage
 				Scheduler::deleteSchedule($locationid, 'sd');
 			}
 		}
-
-		return true;
 	}
 
 	private static function getTime($str)
diff --git a/modules-available/locations/templates/ajax-opening-location.html b/modules-available/locations/templates/ajax-opening-location.html
index 3b2ea7ae..3207fcd7 100644
--- a/modules-available/locations/templates/ajax-opening-location.html
+++ b/modules-available/locations/templates/ajax-opening-location.html
@@ -1,8 +1,7 @@
-<input type="hidden" name="locationid" value="{{id}}">
-<div id="settings-outer">
+<div>
 	<h3>{{lang_openingTime}}</h3>
 	{{^expertMode}}
-	<div id="simple-mode">
+	<div class="simple-mode">
 
 		<div align="right" style="margin-bottom: 10px;">
 			<a href="#" class="btn btn-default btn-sm" id="btn-show-expert">{{lang_expertMode}}</a>
@@ -22,7 +21,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="week-open" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 week-open" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 				<td>
@@ -30,7 +29,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="week-close" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 week-close" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 			</tr>
@@ -41,7 +40,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="saturday-open" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 saturday-open" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 				<td>
@@ -49,7 +48,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="saturday-close" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 saturday-close" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 			</tr>
@@ -60,7 +59,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="sunday-open" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 sunday-open" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 				<td>
@@ -68,7 +67,7 @@
 						<span class="input-group-addon">
 							<span class="glyphicon glyphicon-time"></span>
 						</span>
-						<input type="text" class="form-control timepicker2" id="sunday-close" pattern="[0-9]{1,2}:[0-9]{2}">
+						<input type="text" class="form-control timepicker2 sunday-close" pattern="[0-9]{1,2}:[0-9]{2}">
 					</div>
 				</td>
 			</tr>
@@ -76,9 +75,9 @@
 	</div>
 	{{/expertMode}}
 
-	<div id="expert-mode" style="{{^expertMode}}display:none{{/expertMode}}">
+	<div class="expert-mode" style="{{^expertMode}}display:none{{/expertMode}}">
 		<div class="clearfix"></div>
-		<div id="expert-table">
+		<div class="expert-table">
 			<div class="row">
 				<div class="col-sm-6">{{lang_openingTime}}</div>
 				<div class="col-sm-4">{{lang_closingTime}}</div>
@@ -87,7 +86,7 @@
 		</div>
 		<hr>
 		<div style="text-align: center;">
-			<a class="btn btn-success btn-sm" id="new-openingtime">
+			<a class="btn btn-success btn-sm" class="new-openingtime">
 				<span class="glyphicon glyphicon-plus-sign"></span>
 				{{lang_openingTime}}
 			</a>
@@ -96,7 +95,7 @@
 	</div>
 </div>
 
-<div class="hidden" id="expert-template">
+<div class="hidden" class="expert-template">
 	<div class="row expert-row">
 		<hr>
 		<div class="col-xs-12 days-box">
@@ -126,48 +125,49 @@
 
 {{#rebootcontrol}}
 <hr>
-<div class="row">
+<div class="row wol">
 	<div class="col-sm-4">
 		<div class="checkbox checkbox-inline">
-			<input id="wol" name="wol" class="wol" type="checkbox">
-			<label for="wol">{{lang_wakeonlan}}</label>
+			<input id="wol-check-{{id}}" name="wol" type="checkbox" {{#wol}}checked{{/wol}}>
+			<label for="wol-check-{{id}}">{{lang_wakeonlan}}</label>
 		</div>
 	</div>
 	<div class="col-sm-8">
-		<input disabled type="number" id="wol-offset" name="wol-offset" class="wol-offset" value="{{wol-options.wol-offset}}" placeholder="0" min="0" max="15">
-		<label for="wol-offset">{{lang_offsetEarly}}</label>
+		<input disabled type="number" id="wol-offset-{{id}}" name="wol-offset"
+				 value="{{wol-options.wol-offset}}" placeholder="0" min="0" max="15">
+		<label for="wol-offset-{{id}}">{{lang_offsetEarly}}</label>
 	</div>
+</div>
+<div class="row shutdown">
 	<div class="col-sm-4">
 		<div class="checkbox checkbox-inline">
-			<input id="sd" name="sd" class="sd" type="checkbox">
-			<label for="sd">{{lang_shutdown}}</label>
+			<input id="sd-check-{{id}}" name="sd" type="checkbox" {{#sd}}checked{{/sd}}>
+			<label for="sd-check-{{id}}">{{lang_shutdown}}</label>
 		</div>
 	</div>
 	<div class="col-sm-8">
-		<input disabled type="number" id="sd-offset" name="sd-offset" class="sd-offset" value="{{sd-options.sd-offset}}" placeholder="0" min="0" max="15">
-		<label for="sd-offset">{{lang_offsetLate}}</label>
+		<input disabled type="number" id="sd-offset-{{id}}" name="sd-offset"
+				 value="{{sd-options.sd-offset}}" placeholder="0" min="0" max="15">
+		<label for="sd-offset-{{id}}">{{lang_offsetLate}}</label>
 	</div>
 </div>
 {{/rebootcontrol}}
 
-<script type="application/javascript"><!--
-	let wol = $('#wol');
-	let sd = $('#sd');
-
-	wol.attr('checked',{{wol}});
-	sd.attr('checked',{{sd}});
-	$('#wol-offset').attr('disabled', !$('#wol').is(':checked'));
-	$('#sd-offset').attr('disabled', !$('#sd').is(':checked'));
+<script type="application/javascript">
+	(function() {
 
-	wol.on('click', function(){
-		$('#wol-offset').attr('disabled', !$(this).is(':checked'));
-	});
+		var $loc = $('#openingTimesModal{{id}}');
+		var $wol = $loc.find('.wol');
+		var $sd = $loc.find('.shutdown');
 
-	sd.on('click', function(){
-		$('#sd-offset').attr('disabled', !$(this).is(':checked'));
-	});
-
-	(function() {
+		var sync = function($div) {
+			$div.find('input[type="number"]').prop('disabled',
+				!$div.find('input[type="checkbox"]').is(':checked'));
+		};
+		sync($wol);
+		sync($sd);
+		$wol.find('input[type="checkbox"]').on('change', function() { sync($wol); });
+		$sd.find('input[type="checkbox"]').on('change', function() { sync($sd); });
 
 		var scheduleData = {{{schedule_data}}};
 
@@ -179,36 +179,36 @@
 		{{^expertMode}}
 			for (var i = 0; i < scheduleData.length; ++i) {
 				if (scheduleData[i].days.length === 5) {
-					$('#week-open').val(scheduleData[i]['openingtime']);
-					$('#week-close').val(scheduleData[i]['closingtime']);
+					$loc.find('.week-open').val(scheduleData[i]['openingtime']);
+					$loc.find('.week-close').val(scheduleData[i]['closingtime']);
 				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Saturday') {
-					$('#saturday-open').val(scheduleData[i]['openingtime']);
-					$('#saturday-close').val(scheduleData[i]['closingtime']);
+					$loc.find('.saturday-open').val(scheduleData[i]['openingtime']);
+					$loc.find('.saturday-close').val(scheduleData[i]['closingtime']);
 				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Sunday') {
-					$('#sunday-open').val(scheduleData[i]['openingtime']);
-					$('#sunday-close').val(scheduleData[i]['closingtime']);
+					$loc.find('.sunday-open').val(scheduleData[i]['openingtime']);
+					$loc.find('.sunday-close').val(scheduleData[i]['closingtime']);
 				}
 			}
 		{{/expertMode}}
 
-		setTimepicker($('#settings-outer').find('.timepicker2'));
-
-		$('p.helptext').tooltip();
+		setTimepicker($loc.find('.timepicker2'));
 
-		$('#new-openingtime').click(function (e) {
+		$loc.find('.new-openingtime').click(function (e) {
 			e.preventDefault();
 			setTimepicker(newOpeningTime({}).find('.timepicker2'));
 		});
 
-		$('#btn-show-expert').click(function (e) {
+		$loc.find('.btn-show-expert').click(function (e) {
 			e.preventDefault();
 			scheduleData = simpleToExpert();
 			for (var i = 0; i < scheduleData.length; ++i) {
 				setTimepicker(newOpeningTime(scheduleData[i]).find('.timepicker2'));
 			}
-			$('#simple-mode').remove();
-			$('#expert-mode').show();
+			$loc.find('.simple-mode').remove();
+			$loc.find('.expert-mode').show();
 		});
+
+		$loc.find('form').submit(validateOpeningTimes);
 	})();
 
-//--></script>
+</script>
diff --git a/modules-available/locations/templates/location-subnets.html b/modules-available/locations/templates/location-subnets.html
index f88e2908..e954bf10 100644
--- a/modules-available/locations/templates/location-subnets.html
+++ b/modules-available/locations/templates/location-subnets.html
@@ -142,28 +142,24 @@
 	<div class="modal-dialog">
 
 		<div class="modal-content">
-			<form method="post" action="?do=Locations" id="settings-form">
+			<form method="post" action="?do=Locations">
 				<input type="hidden" name="token" value="{{token}}">
 				<input type="hidden" name="action" value="updateOpeningtimes">
 				<input type="hidden" name="page" value="details">
-				<input type="hidden" name="openingtimes" id="json-openingtimes" value="">
+				<input type="hidden" name="openingtimes" value="">
+				<input type="hidden" name="locationid" value="{{locationid}}">
 
 				<div class="modal-header">{{locationname}}</div>
 				<div class="modal-body"></div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#openingTimesModal{{locationid}} .modal-body').html('')">{{lang_close}}</button>
+					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_close}}</button>
 					<button type="submit" class="btn btn-primary">
 						<span class="glyphicon glyphicon-floppy-disk"></span>
 						{{lang_save}}
 					</button>
 				</div>
-
 			</form>
 		</div>
 
 	</div>
 </div>
-
-<script type="text/javascript">
-	$('#settings-form').submit(submitLocationSettings);
-</script>
\ No newline at end of file
diff --git a/modules-available/locations/templates/locations.html b/modules-available/locations/templates/locations.html
index 2f4af8af..125c101a 100644
--- a/modules-available/locations/templates/locations.html
+++ b/modules-available/locations/templates/locations.html
@@ -55,7 +55,7 @@
 						<span>{{locationname}}</span>
 					{{/show-only}}
 					{{^show-only}}
-						<a id={{locationid}} href="#" onclick="slxOpenLocation(this, {{locationid}}); return false">
+						<a id="loc-{{locationid}}" href="#" onclick="slxOpenLocation(this, {{locationid}}); return false">
 							{{locationname}}
 							<b class="caret"></b>
 						</a>
@@ -170,7 +170,7 @@ var newRowCounter = 0;
 document.addEventListener("DOMContentLoaded", function() {
 	var id = window.location.hash.substring(1);
 	if (id !== "") {
-		var loc_dom = document.getElementById(id);
+		var loc_dom = document.getElementById("loc-" + id);
 		slxOpenLocation(loc_dom, id);
 	}
 });
@@ -260,7 +260,9 @@ function deleteSubnetWarning(locid) {
 }
 
 function loadOpeningTimes(locid) {
-	$("#openingTimesModal" + locid).find('.modal-body').load("?do=Locations&page=details&action=getOpeningtimes&locid=" + locid)
+	var $e = $("#openingTimesModal" + locid).find('.modal-body');
+	if (!$e.is(':empty')) return;
+	$e.load("?do=Locations&page=details&action=getOpeningtimes&locid=" + locid)
 }
 
 	// -->