Migrate type dialogs to bootstrap

frontend/app/app.css

@@ -145,8 +145,8 @@ dl:after {
 	content: " ";
 }
 
-label.disabled {
+.checkbox.disabled label {
-	color: #888;
+	color: #aaa;
 }
 
 tr.selected td {
@@ -188,6 +188,11 @@ table.border input, table.border textarea, table.border select {
 	box-sizing: border-box;
 }
 
+.td-buttons {
+	white-space: nowrap;
+	width: 1px;
+}
+
 .messages {
 	position: absolute;
 	top: 10px;

frontend/app/fieldTypes/fieldTypes.js

@@ -13,10 +13,10 @@
 					var el;
 					switch(field.type) {
 						case "textarea":
-							el = $('<textarea/>');
+							el = $('<textarea class="form-control"/>');
 							break;
 						case "dropdown":
-							el = $('<select/>');
+							el = $('<select class="form-control"/>');
 							if(field.options) {
 								for(var i=0; i<field.options.length; i++) {
 									$('<option/>').attr("value", field.options[i].key).text(field.options[i].value).appendTo(el);
@@ -28,7 +28,7 @@
 							break;
 						case "input":
 						default:
-							el = $('<input type="text"/>');
+							el = $('<input type="text" class="form-control"/>');
 							break;
 					}
 
@@ -36,8 +36,6 @@
 
 					if(attrs.fpTypeFieldId)
 						el.attr("id", attrs.fpTypeFieldId);
-					if(attrs.fpTypeFieldClass)
-						el.attr("class", attrs.fpTypeFieldClass);
 
 					el.appendTo(element.empty());
 					$compile(el)(scope);

frontend/app/map/lines/edit-line.html

@@ -34,7 +34,7 @@
 
 		<div class="form-group" ng-repeat="field in types[line.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1">
 			<label for="line-{{$index}}-input" class="col-sm-3 control-label">{{field.name}}</label>
-			<div class="col-sm-9" fp-type-field="field" fp-type-field-model="line.data[field.name]" fp-type-field-id="line-{{$index}}-input" fp-type-field-class="form-control"></div>
+			<div class="col-sm-9" fp-type-field="field" fp-type-field-model="line.data[field.name]" fp-type-field-id="line-{{$index}}-input"></div>
 		</div>
 	</form>
 </div>

frontend/app/map/markers/edit-marker.html

@@ -18,7 +18,7 @@
 
 		<div class="form-group" ng-repeat="field in types[marker.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1">
 			<label for="marker-{{$index}}-input" class="col-sm-3 control-label">{{field.name}}</label>
-			<div class="col-sm-9" fp-type-field="field" fp-type-field-model="marker.data[field.name]" fp-type-field-id="marker-{{$index}}-input" fp-type-field-class="form-control"></div>
+			<div class="col-sm-9" fp-type-field="field" fp-type-field-model="marker.data[field.name]" fp-type-field-id="marker-{{$index}}-input"></div>
 		</div>
 	</form>
 </div>

frontend/app/map/types/edit-type-dropdown.html

@@ -1,31 +1,50 @@
-<form>
+<div class="modal-header">
-	<div><input type="checkbox" id="control-colour-input" ng-model="field.controlColour" ng-disabled="!canControl('colour')"><label for="control-colour-input" ng-class="{disabled: !canControl('colour')}"> Control {{type.type}} colour</label></div>
+	<button class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
-	<div ng-show="type.type == 'line'"><input type="checkbox" id="control-width-input" ng-model="field.controlWidth" ng-disabled="!canControl('width')"><label for="control-width-input" ng-class="{disabled: !canControl('width')}"> Control {{type.type}} width</label></div>
+	<h3 class="modal-title">Edit dropdown</h3>
-	<table class="border">
+</div>
-		<thead>
+<div class="modal-body">
-			<tr>
+	<form class="form-horizontal">
-				<th>Option</th>
+		<div class="checkbox" ng-class="{disabled: !canControl('colour')}">
-				<th ng-show="field.controlColour">Colour</th>
+			<label>
-				<th ng-show="field.controlWidth">Width</th>
+				<input type="checkbox" ng-model="field.controlColour" ng-disabled="!canControl('colour')">
-				<th></th>
+				Control {{type.type}} colour
-				<th class="move"></th>
+			</label>
-			</tr>
+		</div>
-		</thead>
+		<div class="checkbox" ng-if="type.type == 'line'" ng-class="{disabled: !canControl('width')}">
-		<tbody ui-sortable="sortableOptions" ng-model="field.options">
+			<label>
-			<tr ng-repeat="option in field.options">
+				<input type="checkbox" ng-model="field.controlWidth" ng-disabled="!canControl('width')">
-				<td><input type="text" ng-model="option.value"></td>
+				Control {{type.type}} width
-				<td ng-show="field.controlColour"><input type="text" ng-model="option.colour" fp-colour-picker></td>
+			</label>
-				<td ng-show="field.controlWidth"><input type="text" ng-model="option.width" fp-spinner></td>
+		</div>
-				<td><button ng-click="deleteOption(option)">−</button></td>
+		<table class="table table-striped">
-				<td class="move"><span class="sort-handle ui-icon ui-icon-triangle-2-n-s"></span></td>
+			<thead>
-			</tr>
+				<tr>
-		</tbody>
+					<th>Option</th>
-		<tfoot>
+					<th ng-if="field.controlColour">Colour</th>
-			<tr>
+					<th ng-if="field.controlWidth">Width</th>
-				<td colspan="4"><button ng-click="addOption()">+</button></td>
+					<th></th>
-				<td class="move"></td>
+					<th class="move"></th>
-			</tr>
+				</tr>
-		</tfoot>
+			</thead>
-	</table>
+			<tbody ui-sortable="sortableOptions" ng-model="field.options">
-	<div><button ng-click="save()">OK</button></div>
+				<tr ng-repeat="option in field.options">
-</form>
+					<td><input type="text" ng-model="option.value" class="form-control"></td>
+					<td ng-if="field.controlColour"><input type="text" ng-model="option.colour" fp-colour-picker class="form-control"></td>
+					<td ng-if="field.controlWidth"><input type="text" ng-model="option.width" fp-spinner class="form-control"></td>
+					<td class="td-buttons"><button ng-click="deleteOption(option)" class="btn btn-default"><span class="glyphicon glyphicon-minus"></span></button></td>
+					<td class="td-buttons move"><a href="javascript:" class="btn btn-default sort-handle"><span class="glyphicon glyphicon-resize-vertical"></span></a></td>
+				</tr>
+			</tbody>
+			<tfoot>
+				<tr>
+					<td colspan="4"><button ng-click="addOption()" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></td>
+					<td class="move"></td>
+				</tr>
+			</tfoot>
+		</table>
+	</form>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
+	<button type="button" class="btn btn-primary" ng-click="save()">OK</button>
+</div>

frontend/app/map/types/edit-type.html

@@ -1,48 +1,70 @@
-<form>
+<div class="modal-header">
-	<p class="error" ng-show="error">{{error}}</p>
+	<button class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
-	<dl>
+	<h3 class="modal-title">Edit object type</h3>
-		<dt><label for="type-name-input">Name</label></dt>
+</div>
-		<dd><input id="type-name-input" type="text" ng-model="type.name" /></dd>
+<div class="modal-body">
+	<form class="form-horizontal">
+		<div uib-alert class="alert-danger" ng-show="error">{{error}}</div>
 
-		<dt><label for="type-type-input">Type</label></dt>
+		<div class="form-group">
-		<dd><select id="type-type-input" ng-model="type.type" ng-disabled="type.id != null">
+			<label for="type-name-input" class="col-sm-3 control-label">Name</label>
-			<option value="marker">Marker</option>
+			<div class="col-sm-9"><input id="type-name-input" type="text" ng-model="type.name" class="form-control" /></div>
-			<option value="line">Line</option>
+		</div>
-		</select></dd>
+
-	</dl>
+		<div class="form-group">
-	<h2>Fields</h2>
+			<label for="type-type-input" class="col-sm-3 control-label">Type</label></dt>
-	<table class="border">
+			<div class="col-sm-9"><select id="type-type-input" ng-model="type.type" ng-disabled="type.id != null" class="form-control">
-		<thead>
+				<option value="marker">Marker</option>
-			<tr>
+				<option value="line">Line</option>
-				<th>Name</th>
+			</select></div>
-				<th>Type</th>
+		</div>
-				<th>Default value</th>
+
-				<th>Delete</th>
+		<h2>Fields</h2>
-				<th class="move"></th>
+		<table class="table table-striped">
-			</tr>
+			<thead>
-		</thead>
+				<tr>
-		<tbody ui-sortable="sortableOptions" ng-model="type.fields">
+					<th>Name</th>
-			<tr ng-repeat="field in type.fields">
+					<th>Type</th>
-				<td><input type="text" ng-model="field.name"/></td>
+					<th>Default value</th>
-				<td><select ng-model="field.type">
+					<th>Delete</th>
-					<option value="input">Text field</option>
+					<th class="move"></th>
-					<option value="textarea">Text area</option>
+				</tr>
-					<option value="dropdown">Dropdown</option>
+			</thead>
-					<option value="checkbox">Checkbox</option>
+			<tbody ui-sortable="sortableOptions" ng-model="type.fields">
-				</select> <button ng-show="field.type == 'dropdown'" ng-click="editDropdown(field)">Edit</button></td>
+				<tr ng-repeat="field in type.fields">
-				<td fp-type-field="field" fp-type-field-model="field.default" fp-type-field-ignore-default></td>
+					<td><input type="text" ng-model="field.name" class="form-control" /></td>
-				<td><button ng-click="deleteField(field)">Delete</button></td>
+					<td>
-				<td class="move"><span class="sort-handle ui-icon ui-icon-triangle-2-n-s"></span></td>
+						<div class="input-group" ng-if="field.type == 'dropdown'">
-			</tr>
+							<select ng-model="field.type" class="form-control">
-		</tbody>
+								<option value="input">Text field</option>
-		<tfoot>
+								<option value="textarea">Text area</option>
-			<tr>
+								<option value="dropdown">Dropdown</option>
-				<td colspan="4"><button ng-click="createField()">+</button></td>
+								<option value="checkbox">Checkbox</option>
-				<td class="move"></td>
+							</select>
-			</tr>
+							<span class="input-group-btn"><button ng-click="editDropdown(field)" class="btn btn-default">Edit</button></span>
-		</tfoot>
+						</div>
-	</table>
+						<select ng-if="field.type != 'dropdown'" ng-model="field.type" class="form-control">
-	<div>
+							<option value="input">Text field</option>
-		<button ng-click="save()">Save</button>
+							<option value="textarea">Text area</option>
-	</div>
+							<option value="dropdown">Dropdown</option>
-</form>
+							<option value="checkbox">Checkbox</option>
+						</select>
+					</td>
+					<td fp-type-field="field" fp-type-field-model="field.default" fp-type-field-ignore-default></td>
+					<td class="td-buttons"><button ng-click="deleteField(field)" class="btn btn-default">Delete</button></td>
+					<td class="move td-buttons"><a href="javascript:" class="btn btn-default sort-handle"><span class="glyphicon glyphicon-resize-vertical"></span></a></td>
+				</tr>
+			</tbody>
+			<tfoot>
+				<tr>
+					<td colspan="4"><button ng-click="createField()" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></td>
+					<td class="move"></td>
+				</tr>
+			</tfoot>
+		</table>
+	</form>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
+	<button type="button" class="btn btn-primary" ng-click="save()">Save</button>
+</div>

frontend/app/map/types/edit-types.html

@@ -1,24 +1,34 @@
-<form>
+<div class="modal-header">
-	<p class="error" ng-show="error">{{error}}</p>
+	<button class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
-	<table class="border">
+	<h3 class="modal-title">Object types</h3>
+</div>
+<div class="modal-body">
+	<div uib-alert class="alert-danger" ng-show="error">{{error}}</div>
+	<table class="table table-striped">
 		<thead>
 			<tr>
 				<th>Name</th>
 				<th>Type</th>
-				<th colspan="3">Edit</th>
+				<th>Edit</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr ng-repeat="type in types">
 				<td>{{type.name}}</td>
 				<td>{{type.type}}</td>
-				<td class="button"><button ng-click="edit(type)">Edit</button><button ng-click="delete(type)">Delete</button></td>
+				<td class="td-buttons">
+					<button ng-click="edit(type)" class="btn btn-default">Edit</button>
+					<button ng-click="delete(type)" class="btn btn-default">Delete</button>
+				</td>
 			</tr>
 		</tbody>
 		<tfoot>
 			<tr>
-				<td colspan="4"><button ng-click="create()">Create</button></td>
+				<td colspan="3"><button ng-click="create()" class="btn btn-default">Create</button></td>
 			</tr>
 		</tfoot>
 	</table>
-</form>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-default" ng-click="$dismiss()">Close</button>
+</div>

frontend/app/map/types/types.js

@@ -1,94 +1,59 @@
 (function(fp, $, ng, undefined) {
 
-	fp.app.factory("fpMapTypes", function(fpDialogs, fpUtils) {
+	fp.app.factory("fpMapTypes", function($uibModal, fpUtils) {
 		return function(map) {
 			var ret = {
 				editTypes : function() {
-					var scope = map.socket.$new();
+					$uibModal.open({
-
+						templateUrl: "map/types/edit-types.html",
-					var dialog = fpDialogs.open("map/types/edit-types.html", scope, "Object types");
+						scope: map.socket,
-
+						controller: "fpMapTypesEditCtrl",
-					scope.create = function() {
+						size: "lg",
-						scope.edit({
+						resolve: {
-							fields : [ ]
+							map: function() { return map; }
-						});
+						}
-					};
+					});
-
-					scope.edit = ret.editType.bind(ret);
-
-					scope['delete'] = function(type) {
-						scope.error = null;
-						map.socket.emit("deleteType", { id: type.id }, function(err) {
-							if(err)
-								scope.error = err;
-						});
-					};
 				},
 				editType : function(type) {
 					var scope = map.socket.$new();
+					scope.type = type;
 
-					scope.type = type; // In case it is not in global types object
+					var dialog = $uibModal.open({
-					var preserve = fpUtils.preserveObject(map.socket, type.id ? "types["+fpUtils.quoteJavaScript(type.id)+"]" : "type", "type");
+						templateUrl: "map/types/edit-type.html",
+						scope: scope,
+						controller: "fpMapTypesEditTypeCtrl",
+						size: "lg",
+						resolve: {
+							map: function() { return map; }
+						}
+					});
 
-					var editDialog = fpDialogs.open("map/types/edit-type.html", scope, "Edit object type", preserve.revert.bind(preserve));
+					var preserve = fpUtils.preserveObject(map.socket, type.id ? "types["+fpUtils.quoteJavaScript(type.id)+"]" : "type", "type", function() {
+						dialog.dismiss();
+					});
 
-					scope.editDropdown = function(field) {
+					dialog.result.then(preserve.leave.bind(preserve), preserve.revert.bind(preserve));
-						ret.editTypeDropdown(type, field);
-					};
-
-					scope.createField = function() {
-						type.fields.push({ name: "", type: "input", "default": "" });
-					};
-
-					scope.deleteField = function(field) {
-						var idx = type.fields.indexOf(field);
-						if(idx != -1)
-							type.fields = type.fields.slice(0, idx).concat(type.fields.slice(idx+1));
-					};
-
-					scope.save = function() {
-						scope.error = null;
-						map.socket.emit(type.id == null ? "addType" : "editType", type, function(err) {
-							if(err)
-								return scope.error = err;
-
-							editDialog.close(false);
-						});
-					};
 				},
 				editTypeDropdown : function(type, field) {
 					var scope = map.socket.$new();
 					scope.type = type;
 					scope.field = field;
 
-					var dialog;
+					var dialog = $uibModal.open({
-
+						templateUrl: "map/types/edit-type-dropdown.html",
-					var preserve = fpUtils.preserveObject(scope, "field", "field", function() {
+						scope: scope,
-						dialog.close(false);
+						controller: "fpMapTypesEditTypeDropdownCtrl",
+						size: "lg",
+						resolve: {
+							map: function() { return map; }
+						}
 					});
 
-					dialog = fpDialogs.open("map/types/edit-type-dropdown.html", scope, "Edit dropdown", preserve.revert.bind(preserve));
+					var preserve = fpUtils.preserveObject(scope, "field", "field", function() {
+						dialog.dismiss();
+					});
 
-					scope.canControl = function(what) {
+					dialog.result.then(preserve.leave.bind(preserve), preserve.revert.bind(preserve));
-						return ret.canControl(type, what, field);
-					};
-
-					scope.addOption = function() {
-						if(field.options == null)
-							field.options = [ ];
-
-						field.options.push({ key: fpUtils.generateRandomPadId(), value: "" });
-					};
-
-					scope.deleteOption = function(option) {
-						var idx = field.options.indexOf(option);
-						if(idx != -1)
-							field.options = field.options.slice(0, idx).concat(field.options.slice(idx+1));
-					};
-
-					scope.save = function() {
-						dialog.close(false);
-					};
 				},
 				canControl : function(type, what, ignoreField) {
 					var idx = "control"+what.charAt(0).toUpperCase() + what.slice(1);
@@ -103,4 +68,71 @@
 		};
 	});
 
+	fp.app.controller('fpMapTypesEditCtrl', function($scope, map) {
+		$scope.create = function() {
+			$scope.edit({
+				fields : [ ]
+			});
+		};
+
+		$scope.edit = map.typesUi.editType.bind(map.typesUi);
+
+		$scope['delete'] = function(type) {
+			$scope.error = null;
+			map.socket.emit("deleteType", { id: type.id }, function(err) {
+				if(err)
+					$scope.error = err;
+			});
+		};
+	});
+
+	fp.app.controller('fpMapTypesEditTypeCtrl', function($scope, map) {
+		$scope.editDropdown = function(field) {
+			map.typesUi.editTypeDropdown($scope.type, field);
+		};
+
+		$scope.createField = function() {
+			$scope.type.fields.push({ name: "", type: "input", "default": "" });
+		};
+
+		$scope.deleteField = function(field) {
+			var idx = $scope.type.fields.indexOf(field);
+			if(idx != -1)
+				$scope.type.fields = $scope.type.fields.slice(0, idx).concat($scope.type.fields.slice(idx+1));
+		};
+
+		$scope.save = function() {
+			$scope.error = null;
+			map.socket.emit($scope.type.id == null ? "addType" : "editType", $scope.type, function(err) {
+				if(err)
+					return $scope.error = err;
+
+				$scope.$close();
+			});
+		};
+	});
+
+	fp.app.controller('fpMapTypesEditTypeDropdownCtrl', function($scope, map, fpUtils) {
+		$scope.canControl = function(what) {
+			return map.typesUi.canControl($scope.type, what, $scope.field);
+		};
+
+		$scope.addOption = function() {
+			if($scope.field.options == null)
+				$scope.field.options = [ ];
+
+			$scope.field.options.push({ key: fpUtils.generateRandomPadId(), value: "" });
+		};
+
+		$scope.deleteOption = function(option) {
+			var idx = $scope.field.options.indexOf(option);
+			if(idx != -1)
+				$scope.field.options = $scope.field.options.slice(0, idx).concat($scope.field.options.slice(idx+1));
+		};
+
+		$scope.save = function() {
+			$scope.$close();
+		};
+	})
+
 })(FacilPad, jQuery, angular);

frontend/app/map/views/manage-views.html

@@ -8,7 +8,7 @@
 		<tbody>
 			<tr ng-class="{success: view.id == padData.defaultView.id}" ng-repeat="view in views">
 				<td><a href="javascript:" ng-click="display(view)">{{view.name}}</a></td>
-				<td class="text-right">
+				<td class="td-buttons">
 					<button ng-hide="view.id == padData.defaultView.id" ng-click="makeDefault(view)" class="btn btn-default">Make default</button>
 					<button ng-click="delete(view)" class="btn btn-default">Delete</button>
 				</td>