Introduce JS helper for bootstrap confirm dialogs on button-submit

3 files changed, 32 insertions, 74 deletions

diff --git a/modules-available/locationinfo/page.inc.php b/modules-available/locationinfo/page.inc.php
index 3e17976d..d1644ce1 100644
--- a/modules-available/locationinfo/page.inc.php
+++ b/modules-available/locationinfo/page.inc.php
@@ -22,21 +22,26 @@ class Page_LocationInfo extends Page
 		$action = Request::post('action');
 		if ($action === 'writePanelConfig') {
 			$this->writePanelConfig();
+			$show = 'panels';
 		} elseif ($action === 'writeLocationConfig') {
 			$this->writeLocationConfig();
 			$show = 'locations';
-		} elseif ($action === 'deleteServer') {
-			$this->deleteServer();
 		} elseif ($action === 'deletePanel') {
 			$this->deletePanel();
-		} elseif ($action === 'checkConnection') {
-			$this->checkConnection(Request::post('serverid', 0, 'int'));
-			$show = 'backends';
+			$show = 'panels';
 		} elseif ($action === 'updateServerSettings') {
 			$this->updateServerSettings();
 			$show = 'backends';
-		} elseif (Request::isPost()) {
-			Message::addWarning('main.invalid-action', $action);
+		} else {
+			if (($id = Request::post('del-serverid', false, 'int')) !== false) {
+				$this->deleteServer($id);
+				$show = 'backends';
+			} elseif (($id = Request::post('chk-serverid', false, 'int')) !== false) {
+				$this->checkConnection($id);
+				$show = 'backends';
+			} elseif (Request::isPost()) {
+				Message::addWarning('main.invalid-action', $action);
+			}
 		}
 		if (Request::isPost() || $this->show === false) {
 			if (!empty($show)) {
@@ -95,11 +100,10 @@ class Page_LocationInfo extends Page
 	/**
 	 * Deletes the server from the db.
 	 */
-	private function deleteServer()
+	private function deleteServer($id)
 	{
 		User::assertPermission('backend.edit');
-		$id = Request::post('serverid', false, 'int');
-		if ($id === false) {
+		if ($id === 0) {
 			Message::addError('server-id-missing');
 			return;
 		}
diff --git a/modules-available/locationinfo/templates/page-panels.html b/modules-available/locationinfo/templates/page-panels.html
index b30e7c87..51acf053 100644
--- a/modules-available/locationinfo/templates/page-panels.html
+++ b/modules-available/locationinfo/templates/page-panels.html
@@ -2,6 +2,9 @@
 
 <p>{{lang_panelsTableHints}}</p>
 
+<form method="post" action="?do=locationinfo">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="action" value="deletePanel">
 <table class="table table-hover">
 	<thead>
 	<tr>
@@ -45,7 +48,8 @@
 					</a>
 				</td>
 				<td class="text-center" style="vertical-align: middle">
-					<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#deleteModal" onclick="deletePanel('{{paneluuid}}')" {{edit_disabled}}>
+					<button type="submit" name="uuid" value="{{paneluuid}}" class="btn btn-xs btn-danger"
+							  data-confirm="#confirm-delete" data-title="{{panelname}}" {{edit_disabled}}>
 						<span class="glyphicon glyphicon-trash"></span>
 					</button>
 				</td>
@@ -53,6 +57,7 @@
 		{{/panels}}
 	</tbody>
 </table>
+</form>
 
 <div class="buttonbar text-right">
 	<a class="btn btn-success" href="?do=locationinfo&amp;show=edit-panel&amp;uuid=new-default">
@@ -68,32 +73,4 @@
 		{{lang_urlPanel}}
 	</a>
 </div>
-
-<form method="post" action="?do=locationinfo">
-<input type="hidden" name="token" value="{{token}}">
-
-<div class ="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-				<h4 class="modal-title" id="myModalLabel">{{lang_delete}}</h4>
-			</div>
-			<div class="modal-body">
-				<p>{{lang_deleteConfirmation}}</p>
-			</div>
-			<div class="modal-footer">
-				<input type="hidden" id="delete-panel-id" name="uuid" value="">
-				<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-				<button type="submit" name="action" value="deletePanel" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
-			</div>
-		</div>
-	</div>
-</div>
-</form>
-
-<script>
-	function deletePanel(panelid) {
-		$("#delete-panel-id").val(panelid);
-	}
-</script>
\ No newline at end of file
+<div class="hidden" id="confirm-delete">{{lang_deleteConfirmation}}</div>
diff --git a/modules-available/locationinfo/templates/page-servers.html b/modules-available/locationinfo/templates/page-servers.html
index e295c4fd..2f692078 100644
--- a/modules-available/locationinfo/templates/page-servers.html
+++ b/modules-available/locationinfo/templates/page-servers.html
@@ -17,7 +17,6 @@
 	{{#serverlist}}
 		<form method="post" action="?do=locationinfo">
 			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="serverid" value="{{serverid}}">
 			<tr>
 				<td nowrap>{{typename}}</td>
 				<td nowrap>{{servername}}</td>
@@ -29,8 +28,8 @@
 					</button>
 				</td>
 				<td class="text-center">
-					<button class="btn btn-xs btn-primary server-check" {{disabled}} {{perms.backend.check.disabled}}
-							name="action" value="checkConnection" type="submit">
+					<button type="submit" class="btn btn-xs btn-primary server-check" {{disabled}} {{perms.backend.check.disabled}}
+							name="chk-serverid" value="{{serverid}}">
 						<span class="glyphicon glyphicon-refresh"></span>
 					</button>
 				</td>
@@ -40,8 +39,8 @@
 					</a>
 				</td>
 				<td class="text-center">
-					<button type="button" class="btn btn-xs btn-danger" onclick="$('#del-serverid').val({{serverid}})"
-							  data-toggle="modal" data-target="#deleteModal" {{perms.backend.edit.disabled}}>
+					<button type="submit" class="btn btn-xs btn-danger" name="del-serverid" value="{{serverid}}"
+							  data-confirm="#confirm-delete" data-title="{{servername}}" {{perms.backend.edit.disabled}}>
 						<span class="glyphicon glyphicon-trash"></span>
 					</button>
 				</td>
@@ -50,31 +49,15 @@
 		{{/serverlist}}
 	</tbody>
 </table>
+<div class="hidden" id="confirm-delete">{{lang_deleteConfirmation}}</div>
 
 <form method="post" action="?do=locationinfo">
 	<input type="hidden" name="token" value="{{token}}">
-	<input type="hidden" name="serverid" value="" id="del-serverid">
-	<div class ="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-					<h4 class="modal-title" id="myModalLabel">{{lang_delete}}</h4>
-				</div>
-				<div class="modal-body">
-					<p>{{lang_deleteConfirmation}}</p>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" name="action" value="deleteServer" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
-				</div>
-			</div>
-		</div>
-	</div>
+	<input type="hidden" name="action" value="deleteServer" class="btn btn-danger">
 </form>
 
 <div class="text-right">
-	<button class="btn btn-sm btn-success" id="addServerButton" onclick="addServer()">
+	<button class="btn btn-success" id="addServerButton" onclick="addServer()">
 		<span class="glyphicon glyphicon-plus"></span>
 		{{lang_addServer}}
 	</button>
@@ -97,19 +80,13 @@
 
 	document.addEventListener("DOMContentLoaded", function () {
 
-		/**
-		 * Confirm deleting a server.
-		 */
-		$('.server-delete').click(function(ev) {
-			var del = confirm("{{lang_deleteConfirmation}}");
-			if (!del) ev.preventDefault();
-		});
-
-		/**
+		/*
 		 * Animate refresh icon while page is loading
 		 */
-		$('.server-check').click(function() {
+		var $checkBtn = $('.server-check');
+		$checkBtn.click(function() {
 			$(this).find('.glyphicon').addClass('slx-rotation');
+			setTimeout(function(){$checkBtn.prop('disabled', true);},1); // Delay to not ignore form value
 		});
 
 		$('button[data-server-edit]').click(function() {