From e1951a6ce477b39ed10f39a1322d46a96752070e Mon Sep 17 00:00:00 2001
From: Candid Dauth <cdauth@cdauth.eu>
Date: Tue, 4 Oct 2016 17:13:11 +0300
Subject: [PATCH] Migrate "View as table" dialog to bootstrap

---
 frontend/app/app.css          |  4 ++
 frontend/app/table/table.html | 79 +++++++++++++++++++----------------
 frontend/app/table/table.js   | 73 ++++++++++++++++++--------------
 3 files changed, 90 insertions(+), 66 deletions(-)

diff --git a/frontend/app/app.css b/frontend/app/app.css
index 61035fc2..305c07ee 100644
--- a/frontend/app/app.css
+++ b/frontend/app/app.css
@@ -193,6 +193,10 @@ table.border input, table.border textarea, table.border select {
 	width: 1px;
 }
 
+.modal-fs {
+	width: 95%;
+}
+
 .messages {
 	position: absolute;
 	top: 10px;
diff --git a/frontend/app/table/table.html b/frontend/app/table/table.html
index a0591430..48e76d31 100644
--- a/frontend/app/table/table.html
+++ b/frontend/app/table/table.html
@@ -1,35 +1,44 @@
-<h2 ng-repeat-start="type in types">{{type.name}}</h2>
-<table ng-if="type.type == 'marker'" class="border">
-	<thead>
-		<tr>
-			<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
-			<th>Position</th>
-			<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr ng-repeat="marker in markers | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
-			<td>{{marker.name}}</td>
-			<td>{{marker.lat}},{{marker.lon}}</td>
-			<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></td>
-		</tr>
-	</tbody>
-</table>
-<table ng-repeat-end ng-if="type.type == 'line'" class="border">
-	<thead>
-		<tr>
-			<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
-			<th class="sort" ng-click="sort(type, '__distance')">Distance <span ng-class="getSortIcon(type, '__distance')"></span></th>
-			<th class="sort" ng-click="sort(type, '__time')">Time <span ng-class="getSortIcon(type, '__time')"></span></th>
-			<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr ng-repeat="line in lines | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
-			<td>{{line.name}}</td>
-			<td>{{round(line.distance, 2)}} km</td>
-			<td><span ng-show="line.time != null">{{formatTime(line.time)}} h ({{routingMode(line.mode)}})</span></td>
-			<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="modal-header">
+	<button class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
+	<h3 class="modal-title">Table</h3>
+</div>
+<div class="modal-body">
+	<h2 ng-repeat-start="type in types">{{type.name}}</h2>
+	<table ng-if="type.type == 'marker'" class="table table-striped table-bordered table-condensed">
+		<thead>
+			<tr>
+				<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
+				<th>Position</th>
+				<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="marker in markers | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
+				<td>{{marker.name}}</td>
+				<td>{{marker.lat}},{{marker.lon}}</td>
+				<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></td>
+			</tr>
+		</tbody>
+	</table>
+	<table ng-repeat-end ng-if="type.type == 'line'" class="table table-striped table-bordered table-condensed">
+		<thead>
+			<tr>
+				<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
+				<th class="sort" ng-click="sort(type, '__distance')">Distance <span ng-class="getSortIcon(type, '__distance')"></span></th>
+				<th class="sort" ng-click="sort(type, '__time')">Time <span ng-class="getSortIcon(type, '__time')"></span></th>
+				<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="line in lines | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
+				<td>{{line.name}}</td>
+				<td>{{round(line.distance, 2)}} km</td>
+				<td><span ng-show="line.time != null">{{formatTime(line.time)}} h ({{routingMode(line.mode)}})</span></td>
+				<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-default" ng-click="$dismiss()">Close</button>
+</div>
\ No newline at end of file
diff --git a/frontend/app/table/table.js b/frontend/app/table/table.js
index 58fe4a55..ff732b14 100644
--- a/frontend/app/table/table.js
+++ b/frontend/app/table/table.js
@@ -11,7 +11,23 @@
 		};
 	});
 
-	fp.app.factory("fpTable", function(fpSocket, fpDialogs, $rootScope, fpTypeFields) {
+	fp.app.factory("fpTable", function(fpSocket, $rootScope, $uibModal) {
+		return {
+			showTable : function() {
+				var socket = fpSocket($rootScope.padId);
+				socket.updateBbox({ top: 90, left: -180, right: 180, bottom: -90, zoom: 0 });
+				
+				$uibModal.open({
+					templateUrl: "table/table.html",
+					scope: socket,
+					controller: "fpTableCtrl",
+					size: "fs"
+				});
+			}
+		};
+	});
+	
+	fp.app.controller("fpTableCtrl", function($scope, fpTypeFields) {
 		function _getField(type, fieldName) {
 			for(var i=0; i<type.fields.length; i++) {
 				if(type.fields[i].name == fieldName)
@@ -23,39 +39,34 @@
 			return (text ? ""+text : "").trim().toLowerCase().replace(/\d+/g, function(m) { return ("000000000"+m).slice(-10) });
 		}
 
-		return {
-			showTable : function() {
-				var socket = fpSocket($rootScope.padId);
-				socket.updateBbox({ top: 90, left: -180, right: 180, bottom: -90, zoom: 0 });
+		$scope.sort = function(type, field) {
+			$scope.sortOrder[type.id] = (($scope.sortField[type.id] == null ? "__name" : $scope.sortField[type.id]) == field ? !$scope.sortOrder[type.id] : false);
+			$scope.sortField[type.id] = field;
+		};
 
-				socket.sort = function(type, field) {
-					socket.sortOrder[type.id] = ((socket.sortField[type.id] == null ? "__name" : socket.sortField[type.id]) == field ? !socket.sortOrder[type.id] : false);
-					socket.sortField[type.id] = field;
+		$scope.getSortField = function(type) {
+			var f = $scope.sortField[type.id];
+
+			if(f == null || f == "__name" || f == "__distance" || f == "__time")
+				return function(it) { return _normaliseNumbers(it[f ? f.replace(/^__/, "") : "name"]) };
+			else
+				return function(it) { return _normaliseNumbers($("<div/>").append(fpTypeFields.formatField(_getField(type, f), it.data[f])).text()); };
+		};
+
+		$scope.getSortIcon = function(type, fieldName) {
+			if(($scope.sortField[type.id] == null ? "__name" : $scope.sortField[type.id]) == fieldName) {
+				return {
+					'glyphicon': true,
+					'glyphicon-triangle-bottom': !$scope.sortOrder[type.id],
+					'glyphicon-triangle-top': $scope.sortOrder[type.id]
 				};
-
-				socket.getSortField = function(type) {
-					var f = socket.sortField[type.id];
-
-					if(f == null || f == "__name" || f == "__distance" || f == "__time")
-						return function(it) { return _normaliseNumbers(it[f ? f.replace(/^__/, "") : "name"]) };
-					else
-						return function(it) { return _normaliseNumbers($("<div/>").append(fpTypeFields.formatField(_getField(type, f), it.data[f])).text()); };
-				};
-
-				socket.getSortIcon = function(type, fieldName) {
-					return {
-						'ui-icon': ((socket.sortField[type.id] == null ? "__name" : socket.sortField[type.id]) == fieldName),
-						'ui-icon-triangle-1-s': !socket.sortOrder[type.id],
-						'ui-icon-triangle-1-n': socket.sortOrder[type.id]
-					};
-				};
-
-				socket.sortField = { };
-				socket.sortOrder = { };
-
-				fpDialogs.open("table/table.html", socket, "Table", null, true);
+			} else {
+				return { };
 			}
 		};
-	});
+
+		$scope.sortField = { };
+		$scope.sortOrder = { };
+	})
 
 })(FacilPad, jQuery, angular);
\ No newline at end of file