kopia lustrzana https://github.com/FacilMap/facilmap
Migrate type dialogs to bootstrap
Candid Dauth
rodzic
03be2b6e65
commit
f6cb4bbe24
|
|
@ -145,8 +145,8 @@ dl:after {
|
|||
content: " ";
|
||||
}
|
||||
|
||||
label.disabled {
|
||||
color: #888;
|
||||
.checkbox.disabled label {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,50 @@
|
|||
<form>
|
||||
<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>
|
||||
<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>
|
||||
<table class="border">
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()"><span aria-hidden="true">×</span></button>
|
||||
<h3 class="modal-title">Edit dropdown</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="checkbox" ng-class="{disabled: !canControl('colour')}">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="field.controlColour" ng-disabled="!canControl('colour')">
|
||||
Control {{type.type}} colour
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox" ng-if="type.type == 'line'" ng-class="{disabled: !canControl('width')}">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="field.controlWidth" ng-disabled="!canControl('width')">
|
||||
Control {{type.type}} width
|
||||
</label>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th ng-show="field.controlColour">Colour</th>
|
||||
<th ng-show="field.controlWidth">Width</th>
|
||||
<th ng-if="field.controlColour">Colour</th>
|
||||
<th ng-if="field.controlWidth">Width</th>
|
||||
<th></th>
|
||||
<th class="move"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody ui-sortable="sortableOptions" ng-model="field.options">
|
||||
<tr ng-repeat="option in field.options">
|
||||
<td><input type="text" ng-model="option.value"></td>
|
||||
<td ng-show="field.controlColour"><input type="text" ng-model="option.colour" fp-colour-picker></td>
|
||||
<td ng-show="field.controlWidth"><input type="text" ng-model="option.width" fp-spinner></td>
|
||||
<td><button ng-click="deleteOption(option)">−</button></td>
|
||||
<td class="move"><span class="sort-handle ui-icon ui-icon-triangle-2-n-s"></span></td>
|
||||
<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()">+</button></td>
|
||||
<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>
|
||||
<div><button ng-click="save()">OK</button></div>
|
||||
</form>
|
||||
</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>
|
||||
|
|
@ -1,17 +1,26 @@
|
|||
<form>
|
||||
<p class="error" ng-show="error">{{error}}</p>
|
||||
<dl>
|
||||
<dt><label for="type-name-input">Name</label></dt>
|
||||
<dd><input id="type-name-input" type="text" ng-model="type.name" /></dd>
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()"><span aria-hidden="true">×</span></button>
|
||||
<h3 class="modal-title">Edit object type</h3>
|
||||
</div>
|
||||
<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>
|
||||
<dd><select id="type-type-input" ng-model="type.type" ng-disabled="type.id != null">
|
||||
<div class="form-group">
|
||||
<label for="type-name-input" class="col-sm-3 control-label">Name</label>
|
||||
<div class="col-sm-9"><input id="type-name-input" type="text" ng-model="type.name" class="form-control" /></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="type-type-input" class="col-sm-3 control-label">Type</label></dt>
|
||||
<div class="col-sm-9"><select id="type-type-input" ng-model="type.type" ng-disabled="type.id != null" class="form-control">
|
||||
<option value="marker">Marker</option>
|
||||
<option value="line">Line</option>
|
||||
</select></dd>
|
||||
</dl>
|
||||
</select></div>
|
||||
</div>
|
||||
|
||||
<h2>Fields</h2>
|
||||
<table class="border">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
@ -23,26 +32,39 @@
|
|||
</thead>
|
||||
<tbody ui-sortable="sortableOptions" ng-model="type.fields">
|
||||
<tr ng-repeat="field in type.fields">
|
||||
<td><input type="text" ng-model="field.name"/></td>
|
||||
<td><select ng-model="field.type">
|
||||
<td><input type="text" ng-model="field.name" class="form-control" /></td>
|
||||
<td>
|
||||
<div class="input-group" ng-if="field.type == 'dropdown'">
|
||||
<select ng-model="field.type" class="form-control">
|
||||
<option value="input">Text field</option>
|
||||
<option value="textarea">Text area</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
<option value="checkbox">Checkbox</option>
|
||||
</select> <button ng-show="field.type == 'dropdown'" ng-click="editDropdown(field)">Edit</button></td>
|
||||
</select>
|
||||
<span class="input-group-btn"><button ng-click="editDropdown(field)" class="btn btn-default">Edit</button></span>
|
||||
</div>
|
||||
<select ng-if="field.type != 'dropdown'" ng-model="field.type" class="form-control">
|
||||
<option value="input">Text field</option>
|
||||
<option value="textarea">Text area</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
<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><button ng-click="deleteField(field)">Delete</button></td>
|
||||
<td class="move"><span class="sort-handle ui-icon ui-icon-triangle-2-n-s"></span></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()">+</button></td>
|
||||
<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>
|
||||
<div>
|
||||
<button ng-click="save()">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
|
@ -1,24 +1,34 @@
|
|||
<form>
|
||||
<p class="error" ng-show="error">{{error}}</p>
|
||||
<table class="border">
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()"><span aria-hidden="true">×</span></button>
|
||||
<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>
|
||||
|
|
@ -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();
|
||||
|
||||
var dialog = fpDialogs.open("map/types/edit-types.html", scope, "Object types");
|
||||
|
||||
scope.create = function() {
|
||||
scope.edit({
|
||||
fields : [ ]
|
||||
$uibModal.open({
|
||||
templateUrl: "map/types/edit-types.html",
|
||||
scope: map.socket,
|
||||
controller: "fpMapTypesEditCtrl",
|
||||
size: "lg",
|
||||
resolve: {
|
||||
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 preserve = fpUtils.preserveObject(map.socket, type.id ? "types["+fpUtils.quoteJavaScript(type.id)+"]" : "type", "type");
|
||||
|
||||
var editDialog = fpDialogs.open("map/types/edit-type.html", scope, "Edit object type", preserve.revert.bind(preserve));
|
||||
|
||||
scope.editDropdown = function(field) {
|
||||
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);
|
||||
var dialog = $uibModal.open({
|
||||
templateUrl: "map/types/edit-type.html",
|
||||
scope: scope,
|
||||
controller: "fpMapTypesEditTypeCtrl",
|
||||
size: "lg",
|
||||
resolve: {
|
||||
map: function() { return map; }
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var preserve = fpUtils.preserveObject(map.socket, type.id ? "types["+fpUtils.quoteJavaScript(type.id)+"]" : "type", "type", function() {
|
||||
dialog.dismiss();
|
||||
});
|
||||
|
||||
dialog.result.then(preserve.leave.bind(preserve), preserve.revert.bind(preserve));
|
||||
},
|
||||
editTypeDropdown : function(type, field) {
|
||||
var scope = map.socket.$new();
|
||||
scope.type = type;
|
||||
scope.field = field;
|
||||
|
||||
var dialog;
|
||||
|
||||
var preserve = fpUtils.preserveObject(scope, "field", "field", function() {
|
||||
dialog.close(false);
|
||||
var dialog = $uibModal.open({
|
||||
templateUrl: "map/types/edit-type-dropdown.html",
|
||||
scope: scope,
|
||||
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) {
|
||||
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);
|
||||
};
|
||||
dialog.result.then(preserve.leave.bind(preserve), preserve.revert.bind(preserve));
|
||||
},
|
||||
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);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue