From 410946b3c55f5b1b3a8e5f1056504caebca37ee1 Mon Sep 17 00:00:00 2001
From: Christian Hofmaier
Date: Thu, 11 Oct 2018 15:29:03 +0200
Subject: [locationinfo] apply design guidelines / table styling - move buttons
 to the right hand side - use modals for confirmation check - table
 styling/adjustment   -- add missing headers   -- remove text from buttons in
 table   -- center buttons / header-text - improve language-tags

---
 .../locationinfo/lang/de/template-tags.json        |   3 +-
 .../locationinfo/lang/en/template-tags.json        |   3 +-
 .../templates/page-config-panel-summary.html       |  13 ++-
 .../templates/page-config-panel-url.html           |   7 +-
 .../locationinfo/templates/page-locations.html     |   6 +-
 .../locationinfo/templates/page-panels.html        |  49 +++++++---
 .../locationinfo/templates/page-servers.html       | 101 ++++++++++++---------
 7 files changed, 114 insertions(+), 68 deletions(-)

(limited to 'modules-available/locationinfo')

diff --git a/modules-available/locationinfo/lang/de/template-tags.json b/modules-available/locationinfo/lang/de/template-tags.json
index b51c420b..7862297c 100644
--- a/modules-available/locationinfo/lang/de/template-tags.json
+++ b/modules-available/locationinfo/lang/de/template-tags.json
@@ -42,6 +42,7 @@
     "lang_locations": "Orte",
     "lang_locationsTable": "R\u00e4ume \/ Orte",
     "lang_locationsTableHints": "Hier k\u00f6nnen Sie f\u00fcr die R\u00e4ume und Orte Ihrer Einrichtung \u00d6ffnungszeiten hinterlegen, sowie die Verkn\u00fcpfung mit Raum-IDs aus konfigurierten Backends (z.B. HISinOne) vornehmen, damit Belegungspl\u00e4ne abgerufen werden k\u00f6nnen.",
+    "lang_locsHint": "Hier k\u00f6nnen Sie die Orte ausw\u00e4hlen, die in diesem Panel angezeigt werden.",
     "lang_longFri": "Freitag",
     "lang_longMon": "Montag",
     "lang_longSat": "Samstag",
@@ -57,7 +58,7 @@
     "lang_modeTooltip": "Die Anzeigemodi, welche das Frontend unterst\u00fctzt",
     "lang_monTilFr": "Montag - Freitag",
     "lang_nameTooltip": "Legt den Namen des Servers fest",
-    "lang_noLocationsWarning": "Sie haben keine Orte f\u00fcr dieses Panel ausgew\u00e4hlt",
+    "lang_noLocationsWarning": "Bitte w\u00e4hlen Sie mindestens einen Ort aus, der vom Panel angezeigt werden soll.",
     "lang_noServer": "<Kein Server>",
     "lang_openingTime": "\u00d6ffnungszeit",
     "lang_openingtimes": "\u00d6ffnungszeiten",
diff --git a/modules-available/locationinfo/lang/en/template-tags.json b/modules-available/locationinfo/lang/en/template-tags.json
index f041dc0a..2a191379 100644
--- a/modules-available/locationinfo/lang/en/template-tags.json
+++ b/modules-available/locationinfo/lang/en/template-tags.json
@@ -42,6 +42,7 @@
     "lang_locations": "Locations",
     "lang_locationsTable": "Rooms \/ Locations",
     "lang_locationsTableHints": "Here you can define opening times for your locations and link the location ID to a configured backend (e.g. HISinOne) to show calendar events.",
+    "lang_locsHint": "You can pick up the locations that will be shown in this panel.",
     "lang_longFri": "Friday",
     "lang_longMon": "Monday",
     "lang_longSat": "Saturday",
@@ -57,7 +58,7 @@
     "lang_modeTooltip": "The display modes the frontend supports",
     "lang_monTilFr": "Monday - Friday",
     "lang_nameTooltip": "Defines the name of the server",
-    "lang_noLocationsWarning": "Please select at least one location this panel should display",
+    "lang_noLocationsWarning": "Please select at least one location this panel should display.",
     "lang_noServer": "<no server>",
     "lang_openingTime": "Opening time",
     "lang_openingtimes": "Opening times",
diff --git a/modules-available/locationinfo/templates/page-config-panel-summary.html b/modules-available/locationinfo/templates/page-config-panel-summary.html
index 7f145916..11f0dc65 100644
--- a/modules-available/locationinfo/templates/page-config-panel-summary.html
+++ b/modules-available/locationinfo/templates/page-config-panel-summary.html
@@ -101,7 +101,7 @@
 					<div class="panel-heading">{{lang_locations}}</div>
 					<div class="panel-body">
 						<input type="hidden" name="locationids" value="{{locationids}}" id="locationids">
-						<p>{{lang_fourLocsHint}}</p>
+						<p>{{lang_locsHint}}</p>
 						<ul id="selected-locations" class="list-unstyled">
 
 						</ul>
@@ -122,8 +122,10 @@
 
 		</div>
 	</div>
-	<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
-	<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+	<div class="text-right">
+		<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
+		<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+	</div>
 </form>
 
 <div class="modal fade" id="no-locations-message" tabindex="-1" role="dialog">
@@ -171,6 +173,7 @@ document.addEventListener("DOMContentLoaded", function () {
 	// Adding/removing locations
 	$locList.find('a').click(function(ev) {
 		ev.preventDefault();
+		ev.stopPropagation();
 		var $this = $(this);
 		var name = $this.find('.name').text();
 		var id = $this.data('lid');
@@ -187,8 +190,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
 	function addLocation(id, name) {
 		$selLocs.find('li[data-lid="' + id + '"]').remove();
-		var delButton = $('<button class="btn btn-danger btn-xs" type="button">').append($('<span class="glyphicon glyphicon-remove">')).click(delParent);
-		$selLocs.append($('<li>').attr('data-lid', id).text(name).prepend(delButton));
+		var delButton = $('<button style="margin-right: 5px;" class="btn btn-danger btn-xs" type="button">').append($('<span class="glyphicon glyphicon-remove">')).click(delParent);
+		$selLocs.append($('<li style="margin-top: 5px;">').attr('data-lid', id).text(name).prepend(delButton));
 	}
 
 	function delParent() {
diff --git a/modules-available/locationinfo/templates/page-config-panel-url.html b/modules-available/locationinfo/templates/page-config-panel-url.html
index efcafb77..1187c19f 100644
--- a/modules-available/locationinfo/templates/page-config-panel-url.html
+++ b/modules-available/locationinfo/templates/page-config-panel-url.html
@@ -87,9 +87,10 @@
 			</div>
 		</div>
 	</div>
-
-	<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
-	<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+	<div class="text-right">
+		<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
+		<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+	</div>
 </form>
 
 <script type="text/javascript"><!--
diff --git a/modules-available/locationinfo/templates/page-locations.html b/modules-available/locationinfo/templates/page-locations.html
index 67da2c2e..c79cdfe8 100644
--- a/modules-available/locationinfo/templates/page-locations.html
+++ b/modules-available/locationinfo/templates/page-locations.html
@@ -8,7 +8,7 @@
 		<th>{{lang_locationName}}</th>
 		<th>{{lang_backend}}</th>
 		<th>{{lang_lastCalendarUpdate}}</th>
-		<th>{{lang_openingtimes}}</th>
+		<th class="text-center slx-smallcol">{{lang_openingtimes}}</th>
 	</tr>
 	</thead>
 
@@ -29,12 +29,12 @@
 			<td {{#backendMissing}}class="text-danger"{{/backendMissing}}>
 				{{backend}}
 			</td>
-			<td>
+			<td class="text-center">
 				{{#backend}}
 					{{lastCalendarUpdate}}
 				{{/backend}}
 			</td>
-			<td>
+			<td class="text-center">
 				<span class="glyphicon glyphicon-{{openingGlyph}}"></span>
 			</td>
 		</tr>
diff --git a/modules-available/locationinfo/templates/page-panels.html b/modules-available/locationinfo/templates/page-panels.html
index 2bccc796..b30e7c87 100644
--- a/modules-available/locationinfo/templates/page-panels.html
+++ b/modules-available/locationinfo/templates/page-panels.html
@@ -9,16 +9,13 @@
 		<th>{{lang_panelType}}</th>
 		<th>{{lang_locations}}</th>
 		{{#hasRunmode}}
-			<th class="slx-smallcol">{{lang_runmodeTHead}}</th>
+			<th class="text-center slx-smallcol">{{lang_runmodeTHead}}</th>
 		{{/hasRunmode}}
-		<th class="slx-smallcol">{{lang_edit}}</th>
-		<th class="slx-smallcol">{{lang_delete}}</th>
+		<th class="text-center slx-smallcol">{{lang_edit}}</th>
+		<th class="text-center slx-smallcol">{{lang_delete}}</th>
 	</tr>
 	</thead>
 	<tbody>
-	<form method="post" action="?do=locationinfo" onsubmit="return confirm('{{lang_areYouSure}}')">
-		<input type="hidden" name="token" value="{{token}}">
-		<input type="hidden" name="action" value="deletePanel">
 		{{#panels}}
 			<tr>
 				<td>
@@ -33,7 +30,7 @@
 					{{#locationurl}}</a>{{/locationurl}}
 				</td>
 				{{#hasRunmode}}
-					<td>
+					<td class="text-center" style="vertical-align: middle">
 						<a class="btn btn-default btn-xs {{runmode_disabled}}"
 							href="?do=runmode&amp;module=locationinfo&amp;modeid={{paneluuid}}&amp;redirect=?do=locationinfo">
 							<span class="glyphicon glyphicon-edit"></span>
@@ -41,20 +38,19 @@
 						{{assignedMachineCount}}
 					</td>
 				{{/hasRunmode}}
-				<td>
+				<td class="text-center" style="vertical-align: middle">
 					<a class="btn btn-default btn-xs {{edit_disabled}}"
 						href="?do=locationinfo&amp;show=edit-panel&amp;uuid={{paneluuid}}">
 						<span class="glyphicon glyphicon-cog"></span>
 					</a>
 				</td>
-				<td>
-					<button type="submit" name="uuid" value="{{paneluuid}}" class="btn btn-danger btn-xs" {{edit_disabled}}>
+				<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}}>
 						<span class="glyphicon glyphicon-trash"></span>
 					</button>
 				</td>
 			</tr>
 		{{/panels}}
-	</form>
 	</tbody>
 </table>
 
@@ -71,4 +67,33 @@
 		<span class="glyphicon glyphicon-plus"></span>
 		{{lang_urlPanel}}
 	</a>
-</div>
\ No newline at end of file
+</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
diff --git a/modules-available/locationinfo/templates/page-servers.html b/modules-available/locationinfo/templates/page-servers.html
index 6b02826e..46a148ce 100644
--- a/modules-available/locationinfo/templates/page-servers.html
+++ b/modules-available/locationinfo/templates/page-servers.html
@@ -2,50 +2,67 @@
 
 <p>{{lang_serverTableHints}}</p>
 
-<table class="table table-hover">
-	<thead>
-	<tr>
-		<th width="1">{{lang_serverType}}</th>
-		<th>{{lang_locationName}}</th>
-		<th width="1"></th>
-		<th width="1"></th>
-	</tr>
-	</thead>
-	<tbody>
-	{{#serverlist}}
-	<form method="post" action="?do=locationinfo">
-		<input type="hidden" name="token" value="{{token}}">
-		<input type="hidden" name="serverid" value="{{serverid}}">
+<form method="post" action="?do=locationinfo">
+	<table class="table table-hover">
+		<thead>
 		<tr>
-			<td nowrap>{{typename}}</td>
-			<td nowrap>{{servername}}</td>
-
-			<td align="center" nowrap>
-				<button class="btn btn-xs {{^autherror}}btn-default{{/autherror}}{{#autherror}}btn-danger{{/autherror}}"
-						data-server-edit="{{serverid}}" {{disabled}} {{perms.backend.edit.disabled}} type="button">
-					<span class="glyphicon glyphicon-cog"></span>
-					{{lang_edit}}
-				</button>
-				<button class="btn btn-xs btn-primary server-check" {{disabled}} {{perms.backend.check.disabled}}
-						name="action" value="checkConnection" type="submit">
-					<span class="glyphicon glyphicon-refresh"></span>
-					{{lang_checkConnection}}
-				</button>
-			</td>
-			<td align="center" nowrap>
-				<button class="btn btn-xs btn-danger server-delete" type="submit" name="action" value="deleteServer"
-					{{perms.backend.edit.disabled}}>
-					<span class="glyphicon glyphicon-trash"></span>
-					{{lang_delete}}
-				</button>
-			</td>
+			<th class="text-center slx-smallcol">{{lang_serverType}}</th>
+			<th>{{lang_locationName}}</th>
+			<th class="text-center slx-smallcol">{{lang_edit}}</th>
+			<th class="text-center slx-smallcol">{{lang_checkConnection}}</th>
+			<th class="text-center slx-smallcol">{{lang_delete}}</th>
 		</tr>
-	</form>
-	{{/serverlist}}
-	</tbody>
-</table>
+		</thead>
+		<tbody>
+		{{#serverlist}}
+			<input type="hidden" name="token" value="{{token}}">
+			<input type="hidden" name="serverid" value="{{serverid}}">
+			<tr>
+				<td nowrap>{{typename}}</td>
+				<td nowrap>{{servername}}</td>
+
+				<td class="text-center">
+					<button class="btn btn-xs {{^autherror}}btn-default{{/autherror}}{{#autherror}}btn-danger{{/autherror}}"
+							data-server-edit="{{serverid}}" {{disabled}} {{perms.backend.edit.disabled}} type="button">
+						<span class="glyphicon glyphicon-cog"></span>
+					</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">
+						<span class="glyphicon glyphicon-refresh"></span>
+					</button>
+				</td>
+				<td class="text-center">
+					<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#deleteModal" {{perms.backend.edit.disabled}}>
+						<span class="glyphicon glyphicon-trash"></span>
+					</button>
+				</td>
+			</tr>
+		{{/serverlist}}
+		</tbody>
+	</table>
+
+	<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>
+</form>
 
-<div>
+<div class="text-right">
 	<button class="btn btn-sm btn-success" id="addServerButton" onclick="addServer()">
 		<span class="glyphicon glyphicon-plus"></span>
 		{{lang_addServer}}
@@ -54,7 +71,6 @@
 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
 	<div class="modal-dialog">
-
 		<div class="modal-content">
 			<div class="modal-header" id="myModalHeader"></div>
 			<div class="modal-body" id="myModalBody"></div>
@@ -63,7 +79,6 @@
 				<button type="submit" id="myModalSubmitButton" class="btn btn-primary" form="">{{lang_save}}</button>
 			</div>
 		</div>
-
 	</div>
 </div>
 
-- 
cgit v1.2.3-55-g7522