From 03424ad19ac1bb42635a3d6653565aa0dc6ccf5a Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 25 Mar 2019 11:46:50 +0100
Subject: Introduce JS helper for bootstrap confirm dialogs on button-submit

---
 .../statistics/templates/clientlist.html           | 120 ++++++---------------
 .../statistics/templates/page-replace.html         |  24 +----
 2 files changed, 32 insertions(+), 112 deletions(-)

(limited to 'modules-available/statistics/templates')

diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index 6d7c7f36..fdf4c72b 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -1,6 +1,6 @@
 <h2>{{lang_clientList}} ({{rowCount}})</h2>
 
-<form method="post" action="?do=statistics">
+<form method="post" action="?do=statistics" id="list-form">
 <input type="hidden" name="token" value="{{token}}">
 <input type="hidden" name="redirect" value="?{{redirect}}">
 
@@ -115,116 +115,56 @@
 		</button>
 		{{#rebootcontrol}}
 		{{#canShutdown}}
-			<button type="button" class="btn btn-danger btn-machine-action" data-toggle="modal" data-target="#shutdown-confirm">
+			<button type="submit" name="action" value="shutdownmachines" class="btn btn-danger btn-machine-action"
+					  data-confirm="{{lang_shutdownConfirm}}" data-title="{{lang_shutdown}}">
 				<span class="glyphicon glyphicon-off"></span>
 				{{lang_shutdown}}
 			</button>
 		{{/canShutdown}}
 		{{#canReboot}}
-			<button type="button" class="btn btn-warning btn-machine-action" data-toggle="modal" data-target="#reboot-confirm">
+			<button type="submit" name="action" value="rebootmachines" class="btn btn-warning btn-machine-action"
+					  data-confirm="#confirm-reboot">
 				<span class="glyphicon glyphicon-repeat"></span>
 				{{lang_reboot}}
 			</button>
 		{{/canReboot}}
 		{{/rebootcontrol}}
 		{{#canDelete}}
-		<button type="button" class="btn btn-danger btn-machine-action" data-toggle="modal" data-target="#del-confirm">
-			<span class="glyphicon glyphicon-trash"></span>
-			{{lang_delete}}
-		</button>
+			<button type="submit" name="action" value="delmachines" class="btn btn-danger btn-machine-action"
+					  data-confirm="{{lang_sureDeletePermanent}}">
+				<span class="glyphicon glyphicon-trash"></span>
+				{{lang_delete}}
+			</button>
 		{{/canDelete}}
 	</div>
-	<div class="modal fade" id="del-confirm" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal">&times;</button>
-					<b>{{lang_delete}}</b>
-				</div>
-				<div class="modal-body">
-					{{lang_sureDeletePermanent}}
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" class="btn btn-danger"  name="action" value="delmachines">
-						<span class="glyphicon glyphicon-trash"></span>
-						{{lang_delete}}
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal fade" id="reboot-confirm" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal">&times;</button>
-					<b>{{lang_reboot}}</b>
-				</div>
-				<div class="modal-body">
-					<p>{{lang_rebootConfirm}}</p>
-					<div class="checkbox">
-						<input type="checkbox" name="kexec" value="1" id="kexec-input">
-						<label for="kexec-input">{{lang_rebootKexecCheck}}</label>
-					</div>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" class="btn btn-danger"  name="action" value="rebootmachines">
-						<span class="glyphicon glyphicon-repeat"></span>
-						{{lang_reboot}}
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal fade" id="shutdown-confirm" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal">&times;</button>
-					<b>{{lang_shutdown}}</b>
-				</div>
-				<div class="modal-body">
-					{{lang_shutdownConfirm}}
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" class="btn btn-danger"  name="action" value="shutdownmachines">
-						<span class="glyphicon glyphicon-off"></span>
-						{{lang_shutdown}}
-					</button>
-				</div>
-			</div>
+	<div class="hidden" id="confirm-reboot">
+		<p>{{lang_rebootConfirm}}</p>
+		<div class="checkbox">
+			<input type="checkbox" name="kexec" value="1" id="kexec-input" form="list-form">
+			<label for="kexec-input">{{lang_rebootKexecCheck}}</label>
 		</div>
 	</div>
 </form>
 
 <script type="application/javascript"><!--
 
-var selectedMachineCounter = 0;
-
 document.addEventListener("DOMContentLoaded", function () {
 	var $buttons = $('.btn-machine-action');
-	$buttons.prop("disabled", true);
-	$(".machine-checkbox").change(function() {
-		if ($(this).is(':checked')) {
-			selectedMachineCounter++;
-			if (selectedMachineCounter === 1) {
-				$buttons.prop("disabled", false);
-			}
-		} else {
-			selectedMachineCounter--;
-			if (selectedMachineCounter === 0) {
-				$buttons.prop("disabled", true);
-			}
-		}
-	});
-
-	$("button[type=reset]").click(function() {
-		selectedMachineCounter = 0;
-		$buttons.prop("disabled", true);
-	});
+	var $fn = function () {
+		$buttons.prop("disabled", $('.machine-checkbox:checked').length === 0);
+	};
+	var $boxes = $('.machine-checkbox');
+	$boxes.change($fn);
+	$("button[type=reset]").click(function() { setTimeout($fn, 1); });
+	if (window && window.opera && window.opera.version && Number(window.opera.version()) < 13) {
+		$(document).ready(function () {
+			setTimeout(function () {
+				$('div.checkbox > input').click().click();
+			}, 1);
+		});
+	} else {
+		$fn();
+	}
 });
 
 //--></script>
diff --git a/modules-available/statistics/templates/page-replace.html b/modules-available/statistics/templates/page-replace.html
index d0e9f766..a83774f6 100644
--- a/modules-available/statistics/templates/page-replace.html
+++ b/modules-available/statistics/templates/page-replace.html
@@ -60,34 +60,14 @@
 	</table>
 
 	<div class="text-right">
-		<button type="button" class="btn btn-danger" name="action" value="replace" data-toggle="modal" data-target="#confirm-dialog">
+		<button type="submit" class="btn btn-danger" name="action" value="replace" data-confirm="#confirm-replace" data-title="{{lang_replace}}">
 			<span class="glyphicon glyphicon-floppy-disk"></span>
 			{{lang_replace}}
 			(<span id="rep-count">0</span>)
 		</button>
 	</div>
-
-	<div class="modal fade" id="confirm-dialog" 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_replace}}</h4>
-				</div>
-				<div class="modal-body">
-					{{lang_sureReplaceNoUndo}}
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" name="action" value="replace" class="btn btn-danger">
-						<span class="glyphicon glyphicon-floppy-disk"></span>
-						{{lang_replace}}
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
 </form>
+<div class="hidden" id="confirm-replace">{{lang_sureReplaceNoUndo}}</div>
 
 <script type="application/javascript"><!--
 	document.addEventListener('DOMContentLoaded', function () {
-- 
cgit v1.2.3-55-g7522