kopia lustrzana https://github.com/FacilMap/facilmap
Migrate "Edit Marker" dialog to bootstrap
rodzic
c5658ffb3e
commit
1f1a2dea46
|
@ -1,19 +1,35 @@
|
|||
<form>
|
||||
<p class="error" ng-show="error">{{error}}</p>
|
||||
<dl>
|
||||
<dt><label for="edit-marker-name">Name</label></dt>
|
||||
<dd><input id="edit-marker-name" ng-model="marker.name" /></dd>
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()"><span aria-hidden="true">×</span></button>
|
||||
<h3 class="modal-title">Edit Marker</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div uib-alert class="alert-danger" ng-show="error">{{error}}</div>
|
||||
|
||||
<dt ng-show="canControl('colour')"><label for="edit-marker-colour">Colour</label></dt>
|
||||
<dd ng-show="canControl('colour')"><input id="edit-marker-colour" ng-model="marker.colour" fp-colour-picker></dd>
|
||||
<div class="form-group">
|
||||
<label for="edit-marker-name" class="col-sm-3 control-label">Name</label>
|
||||
<div class="col-sm-9"><input id="edit-marker-name" ng-model="marker.name" class="form-control" /></div>
|
||||
</div>
|
||||
|
||||
<dt ng-repeat-start="field in types[marker.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1"><label for="marker-{{$index}}-input">{{field.name}}</label></dt>
|
||||
<dd ng-repeat-end ng-show="field.type != 'dropdown' || field.options.length > 1" fp-type-field="field" fp-type-field-model="marker.data[field.name]" fp-type-field-id="marker-{{$index}}-input"></dd>
|
||||
</dl>
|
||||
<div>
|
||||
<button ng-click="save()">Save</button>
|
||||
<div class="form-group" ng-show="canControl('colour')">
|
||||
<label for="edit-marker-colour" class="col-sm-3 control-label">Colour</label>
|
||||
<div class="col-sm-9"><input id="edit-marker-colour" ng-model="marker.colour" class="form-control" fp-colour-picker></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="btn-group pull-left" uib-dropdown ng-if="(types | fpPropertyCount:{type:'marker'}) > 1">
|
||||
<button id="change-type-button" type="button" class="btn btn-default" uib-dropdown-toggle>Change type <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="change-type-button" uib-dropdown-menu>
|
||||
<li role="menuitem" ng-repeat="type in types | fpObjectFilter:{type:'marker'}" ng-class="{active: type.id == marker.typeId}"><a href="#" ng-click="marker.typeId = type.id">{{type.name}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="type-select">
|
||||
<select ng-options="type.id as type.name for type in types | fpObjectFilter:{type:'marker'}" ng-model="marker.typeId"></select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<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,6 +1,6 @@
|
|||
(function(fp, $, ng, undefined) {
|
||||
|
||||
fp.app.factory("fpMapMarkers", [ "fpDialogs", "fpUtils", function(fpDialogs, fpUtils) {
|
||||
fp.app.factory("fpMapMarkers", function($uibModal, fpUtils) {
|
||||
return function(map) {
|
||||
var ret = {
|
||||
viewMarker: function(marker) {
|
||||
|
@ -31,32 +31,22 @@
|
|||
}, true);
|
||||
},
|
||||
editMarker: function(marker) {
|
||||
var scope = map.socket.$new();
|
||||
|
||||
scope.marker = marker; // In case it is not in global markers list yet
|
||||
var preserve = fpUtils.preserveObject(scope, "markers["+fpUtils.quoteJavaScript(marker.id)+"]", "marker", function() {
|
||||
scope.dialog.close(false);
|
||||
var dialog = $uibModal.open({
|
||||
templateUrl: "map/markers/edit-marker.html",
|
||||
scope: map.socket,
|
||||
controller: "fpMapMarkerEditCtrl",
|
||||
size: "lg",
|
||||
resolve: {
|
||||
marker: function() { return marker; },
|
||||
map: function() { return map; }
|
||||
}
|
||||
});
|
||||
|
||||
scope.dialog = fpDialogs.open("map/markers/edit-marker.html", scope, "Edit Marker", preserve.revert.bind(preserve));
|
||||
|
||||
scope.canControl = function(what) {
|
||||
return map.typesUi.canControl(scope.types[scope.marker.typeId], what);
|
||||
};
|
||||
|
||||
scope.save = function() {
|
||||
scope.error = null;
|
||||
map.socket.emit("editMarker", scope.marker, function(err) {
|
||||
if(err)
|
||||
return scope.error = err;
|
||||
|
||||
scope.dialog.close(false);
|
||||
});
|
||||
};
|
||||
|
||||
scope.$watch("marker.colour", function() {
|
||||
map.addMarker(scope.marker);
|
||||
var preserve = fpUtils.preserveObject(map.socket, "markers["+fpUtils.quoteJavaScript(marker.id)+"]", "marker", function() {
|
||||
dialog.dismiss();
|
||||
});
|
||||
|
||||
dialog.result.then(preserve.leave.bind(preserve), preserve.revert.bind(preserve));
|
||||
},
|
||||
moveMarker: function(marker) {
|
||||
var message = map.messages.showMessage("info", "Click somewhere on the map to reposition the marker there.", [
|
||||
|
@ -128,6 +118,28 @@
|
|||
|
||||
return ret;
|
||||
};
|
||||
} ]);
|
||||
});
|
||||
|
||||
fp.app.controller("fpMapMarkerEditCtrl", function($scope, map, marker) {
|
||||
$scope.marker = marker;
|
||||
|
||||
$scope.canControl = function(what) {
|
||||
return map.typesUi.canControl($scope.types[$scope.marker.typeId], what);
|
||||
};
|
||||
|
||||
$scope.save = function() {
|
||||
$scope.error = null;
|
||||
map.socket.emit("editMarker", $scope.marker, function(err) {
|
||||
if(err)
|
||||
return $scope.error = err;
|
||||
|
||||
$scope.$close();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$watch("marker.colour", function() {
|
||||
map.addMarker($scope.marker);
|
||||
});
|
||||
});
|
||||
|
||||
})(FacilPad, jQuery, angular);
|
Ładowanie…
Reference in New Issue