kopia lustrzana https://github.com/FacilMap/facilmap
Markers working now
Candid Dauth
rodzic
34e5dbaf03
commit
f3e89bd799
|
|
@ -0,0 +1,7 @@
|
|||
- Layers
|
||||
|
||||
- Lines
|
||||
- Read-only link
|
||||
- Confirm message on removing marker
|
||||
- Marker symbols
|
||||
- Add Google and Yahoo layers
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
facilpadApp.controller("PadCtrl", function($scope, socket) {
|
||||
facilpadApp.controller("PadCtrl", function($scope, socket, $timeout, $sce) {
|
||||
|
||||
$("#toolbox").menu();
|
||||
function updateMenu() {
|
||||
|
|
@ -56,11 +56,17 @@
|
|||
$scope.dialog = null;
|
||||
$scope.dialogError = null;
|
||||
$scope.saveViewName = null;
|
||||
$scope.currentMarker = null;
|
||||
$scope.messages = [ ];
|
||||
|
||||
socket.emit("setPadId", location.href.match(/[^\/]*$/)[0]);
|
||||
|
||||
bindSocketToScope($scope, socket);
|
||||
|
||||
fp.onMove = function(bbox) {
|
||||
socket.emit("updateBbox", bbox);
|
||||
};
|
||||
|
||||
$scope.$watch("padData", function(newValue) {
|
||||
if(newValue == null || $scope.loaded)
|
||||
return;
|
||||
|
|
@ -69,14 +75,51 @@
|
|||
$scope.loaded = true;
|
||||
});
|
||||
|
||||
$scope.$watch("currentMarker.descriptionRendered", function(newValue) {
|
||||
if($scope.currentMarker != null)
|
||||
$scope.currentMarker.descriptionHtml = $sce.trustAsHtml(newValue);
|
||||
});
|
||||
|
||||
$scope.$watch("views", updateMenu);
|
||||
|
||||
$scope.addMarker = function() {
|
||||
|
||||
fp.onClickMarker = function(marker) {
|
||||
$scope.$apply(function() {
|
||||
$scope.currentMarker = marker;
|
||||
$scope.openDialog("view-marker-dialog");
|
||||
});
|
||||
};
|
||||
|
||||
$scope.addLine = function() {
|
||||
$scope.addMarker = function() {
|
||||
var message = $scope.showMessage("info", "Please click on the map to add a marker.");
|
||||
fp.addClickListener(function(pos) {
|
||||
$scope.$apply(function() {
|
||||
$scope.closeMessage(message);
|
||||
|
||||
socket.emit("addMarker", { position: { lon: pos.lon, lat: pos.lat } }, function(err, marker) {
|
||||
if(err)
|
||||
return $scope.showMessage("error", err);
|
||||
|
||||
$scope.currentMarker = marker;
|
||||
$scope.openDialog("edit-marker-dialog");
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.saveMarker = function(marker) {
|
||||
socket.emit("editMarker", marker, function(err) {
|
||||
if(err)
|
||||
$scope.dialogError = err;
|
||||
else
|
||||
$scope.closeDialog();
|
||||
})
|
||||
};
|
||||
|
||||
$scope.deleteMarker = function(marker) {
|
||||
socket.emit("deleteMarker", marker, function(err) {
|
||||
if(err)
|
||||
$scope.showMessage("error", err);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.displayView = function(view) {
|
||||
|
|
@ -119,6 +162,35 @@
|
|||
$scope.closeDialog = function() {
|
||||
$scope.dialog.dialog("close");
|
||||
};
|
||||
|
||||
$scope.showMessage = function(type, message, lifetime) {
|
||||
var messageObj = {
|
||||
type: type,
|
||||
message: message
|
||||
};
|
||||
$scope.messages.push(messageObj);
|
||||
|
||||
if(lifetime) {
|
||||
$timeout(function() {
|
||||
$scope.closeMessage(messageObj);
|
||||
}, lifetime);
|
||||
}
|
||||
|
||||
return messageObj;
|
||||
};
|
||||
|
||||
$scope.closeMessage = function(message) {
|
||||
var idx = $scope.messages.indexOf(message);
|
||||
if(idx == -1)
|
||||
return;
|
||||
|
||||
$scope.messages = $scope.messages.slice(0, idx).concat($scope.messages.slice(idx+1));
|
||||
};
|
||||
|
||||
$scope.round = function(number, digits) {
|
||||
var fac = Math.pow(10, digits);
|
||||
return Math.round(number*fac)/fac;
|
||||
}
|
||||
});
|
||||
|
||||
function bindSocketToScope($scope, socket) {
|
||||
|
|
@ -128,10 +200,23 @@
|
|||
|
||||
socket.on("marker", function(data) {
|
||||
$scope.markers[data.id] = data;
|
||||
|
||||
if($scope.currentMarker && $scope.currentMarker.id == data.id) {
|
||||
$scope.currentMarker = data;
|
||||
}
|
||||
|
||||
fp.addMarker(data);
|
||||
});
|
||||
|
||||
socket.on("deleteMarker", function(data) {
|
||||
delete $scope.markers[data.id];
|
||||
|
||||
if($scope.currentMarker && $scope.currentMarker.id == data.id) {
|
||||
$scope.currentMarker = null;
|
||||
$scope.closeDialog();
|
||||
}
|
||||
|
||||
fp.deleteMarker(data);
|
||||
});
|
||||
|
||||
socket.on("line", function(data) {
|
||||
|
|
@ -149,6 +234,12 @@
|
|||
socket.on("deleteView", function(data) {
|
||||
delete $scope.views[data.id];
|
||||
});
|
||||
|
||||
socket.on("disconnect", function() {
|
||||
$scope.loaded = false;
|
||||
|
||||
$scope.showMessage("error", "The connection to the server was lost.");
|
||||
})
|
||||
}
|
||||
|
||||
})(FacilPad, jQuery);
|
||||
|
|
@ -1,7 +1,12 @@
|
|||
var FacilPad = {
|
||||
SERVER : "http://localhost:40829",
|
||||
map : null,
|
||||
socket : null
|
||||
socket : null,
|
||||
layerMarkers : null,
|
||||
clickListeners : [ ],
|
||||
onMove : null,
|
||||
markersById : { },
|
||||
onClickMarker : null
|
||||
};
|
||||
|
||||
(function(fp) {
|
||||
|
|
@ -38,6 +43,27 @@ var FacilPad = {
|
|||
function loadMap(callback) {
|
||||
fp.map = new FacilMap.Map("map");
|
||||
fp.map.addAllAvailableLayers();
|
||||
|
||||
fp.layerMarkers = new FacilMap.Layer.Markers("Markers", { displayInLayerSwitcher: false });
|
||||
fp.map.addLayer(fp.layerMarkers);
|
||||
|
||||
fp.map.events.register("click", map, function(e) {
|
||||
var listener = fp.clickListeners.shift();
|
||||
if(!listener)
|
||||
return;
|
||||
|
||||
if(fp.clickListeners.length == 0)
|
||||
$(fp.map.div).removeClass("fp-clickHandler");
|
||||
|
||||
var coords = fp.map.getLonLatFromViewPortPx(e.xy).clone().transform(fp.map.getProjectionObject(), _p());
|
||||
listener(coords);
|
||||
});
|
||||
|
||||
fp.map.events.register("moveend", this, function(){
|
||||
var x = fp.map.getExtent().clone().transform(fp.map.getProjectionObject(), _p());
|
||||
fp.onMove({ top: x.top, left: x.left, bottom: x.bottom, right: x.right });
|
||||
});
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +130,30 @@ var FacilPad = {
|
|||
fp.map.layers[i].setVisibility(view.layers.indexOf(fp.map.layers[i].permalinkName) != -1 || view.layers.indexOf(fp.map.layers[i].name) != -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fp.addMarker = function(marker) {
|
||||
fp.deleteMarker(marker);
|
||||
|
||||
var markerObj = fp.layerMarkers.createMarker(new OpenLayers.LonLat(marker.position.lon, marker.position.lat));
|
||||
markerObj.events.register("click", markerObj, function(e) {
|
||||
fp.onClickMarker(marker);
|
||||
});
|
||||
fp.markersById[marker.id] = markerObj;
|
||||
};
|
||||
|
||||
fp.deleteMarker = function(marker) {
|
||||
var markerObj = fp.markersById[marker.id];
|
||||
if(!markerObj)
|
||||
return;
|
||||
|
||||
delete fp.markersById[marker.id];
|
||||
fp.layerMarkers.removeMarker(markerObj);
|
||||
};
|
||||
|
||||
fp.addClickListener = function(listener) {
|
||||
fp.clickListeners.push(listener);
|
||||
$(fp.map.div).addClass("fp-clickHandler");
|
||||
};
|
||||
|
||||
})(FacilPad);
|
||||
|
|
@ -10,8 +10,12 @@ html,body {
|
|||
left: 0;
|
||||
}
|
||||
|
||||
#map.fp-clickHandler {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
#map-disabled-cover {
|
||||
z-index: 100000;
|
||||
z-index: 10001;
|
||||
background-color: #888;
|
||||
opacity: 0.7;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
|
|
@ -26,12 +30,35 @@ html,body {
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
.error,.success,.warning,.info {
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #f2dede;
|
||||
color: #a94442;
|
||||
border: 1px solid #ebccd1;
|
||||
padding: 8px 5px;
|
||||
border-radius: 3px;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
color: #31708f;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
color: #8a6d3b;
|
||||
}
|
||||
|
||||
dl {
|
||||
|
|
@ -64,4 +91,32 @@ table td.button {
|
|||
|
||||
table td.button button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#messages {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
left: 25%;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
#messages p {
|
||||
font-size: 1.5em;
|
||||
margin:0 0 10px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 0 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#messages .close-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 5em;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html ng-app="facilpad" ng-controller="PadCtrl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{padData.name}}</title>
|
||||
<script src="js/pad.js"></script>
|
||||
<style type="text/css">
|
||||
|
|
@ -13,15 +14,20 @@
|
|||
|
||||
<ul id="toolbox">
|
||||
<li><a href="#" ng-click="addMarker()">Add marker</a></li>
|
||||
<li><a href="#" ng-click="addLine()">Add line</a></li>
|
||||
<li><a href="#">Display settings</a></li>
|
||||
<!--<li><a href="#" ng-click="addLine()">Add line</a></li>-->
|
||||
<li><a href="#">Views</a><ul>
|
||||
<li ng-repeat="(id, view) in views"><a href="#" ng-click="displayView(view)">{{view.name}}</a></li>
|
||||
<li><a href="#" ng-click="openDialog('save-view-dialog')">Save current view</a></li>
|
||||
<li><a href="#" ng-click="openDialog('manage-views-dialog')">Manage views</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#">Pad settings</a></li>
|
||||
<li><a href="#">Layers</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="messages">
|
||||
<p ng-repeat="message in messages" class="{{message.type}}">{{message.message}} <a href="#" class="close-button" ng-click="closeMessage(message)">×</a></p>
|
||||
</div>
|
||||
|
||||
<div id="save-view-dialog" title="Save current view" fp-dialog>
|
||||
<form>
|
||||
<p class="error" ng-hide="!dialogError">{{dialogError}}</p>
|
||||
|
|
@ -45,5 +51,31 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="view-marker-dialog" fp-dialog>
|
||||
<h2>{{currentMarker.name}}</h2>
|
||||
<p>{{round(currentMarker.position.lat, 5)}}, {{round(currentMarker.position.lon, 5)}}</p>
|
||||
<div ng-bind-html="currentMarker.descriptionHtml"></div>
|
||||
<div>
|
||||
<button ng-click="closeDialog(); openDialog('edit-marker-dialog')">Edit</button>
|
||||
<button ng-click="closeDialog(); deleteMarker(currentMarker)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit-marker-dialog" title="Edit marker" fp-dialog>
|
||||
<form>
|
||||
<p class="error" ng-show="dialogError">{{dialogError}}</p>
|
||||
<dl>
|
||||
<dt><label for="edit-marker-name">Name</label></dt>
|
||||
<dd><input id="edit-marker-name" value="{{currentMarker.name}}" ng-model="currentMarker.name" /></dd>
|
||||
|
||||
<dt><label for="edit-marker-description">Description</label></dt>
|
||||
<dd><textarea id="edit-marker-description" ng-model="currentMarker.description">{{currentMarker.description}}</textarea></dd>
|
||||
</dl>
|
||||
<div>
|
||||
<button ng-click="saveMarker(currentMarker)">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -115,7 +115,7 @@ function updateMarker(markerId, data, callback) {
|
|||
}
|
||||
|
||||
function deleteMarker(markerId, callback) {
|
||||
Marker.remove({ _id: markerId }, data, callback);
|
||||
Marker.remove({ _id: markerId }, callback);
|
||||
}
|
||||
|
||||
function getPadLines(padId, bbox) {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function getPadListeners(padId, position) {
|
|||
|
||||
var ret = [ ];
|
||||
listeners[padId].forEach(function(it) {
|
||||
if(utils.isInBbox(position, it.bbox))
|
||||
if(it.bbox && utils.isInBbox(position, it.bbox))
|
||||
ret.push(it);
|
||||
});
|
||||
return ret;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ var socketIo = require("socket.io");
|
|||
var config = require("../config");
|
||||
var listeners = require("./listeners");
|
||||
var database = require("./database");
|
||||
var marked = require("marked");
|
||||
|
||||
var app = http.createServer();
|
||||
app.listen(config.port, config.host);
|
||||
|
|
@ -61,12 +62,15 @@ function disconnect(socket) {
|
|||
}
|
||||
|
||||
function addMarker(socket, data, callback) {
|
||||
database.createMarker(socket.padId, data, function(err) {
|
||||
database.createMarker(socket.padId, data, function(err, data) {
|
||||
if(err)
|
||||
return callback(err);
|
||||
|
||||
listeners.notifyPadListeners(socket.padId, data.position, "marker", _fixId(data));
|
||||
callback();
|
||||
console.log(data, data.id);
|
||||
|
||||
data = _fixId(data);
|
||||
listeners.notifyPadListeners(socket.padId, data.position, "marker", data);
|
||||
callback(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -91,13 +95,14 @@ function deleteMarker(socket, data, callback) {
|
|||
}
|
||||
|
||||
function addLine(socket, data, callback) {
|
||||
database.createLine(socket.padId, data, function(err) {
|
||||
database.createLine(socket.padId, data, function(err, data) {
|
||||
if(err)
|
||||
return callback(err);
|
||||
|
||||
data = _fixId(data);
|
||||
// Todo: Coordinates
|
||||
listeners.notifyPadListeners(socket.padId, null, "line", _fixId(data));
|
||||
callback();
|
||||
listeners.notifyPadListeners(socket.padId, null, "line", data);
|
||||
callback(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -127,12 +132,13 @@ function addView(socket, data, callback) {
|
|||
if(data.name == null || data.name.trim().length == 0)
|
||||
return callback("No name provided.");
|
||||
|
||||
database.createView(socket.padId, data, function(err) {
|
||||
database.createView(socket.padId, data, function(err, data) {
|
||||
if(err)
|
||||
return callback(err);
|
||||
|
||||
listeners.notifyPadListeners(socket.padId, null, "view", _fixId(data));
|
||||
callback();
|
||||
data = _fixId(data);
|
||||
listeners.notifyPadListeners(socket.padId, null, "view", data);
|
||||
callback(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -184,5 +190,9 @@ function _fixId(data) {
|
|||
delete ret.defaultView._id;
|
||||
}
|
||||
|
||||
if(ret.description) {
|
||||
ret.descriptionRendered = marked(ret.description);
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
"dependencies": {
|
||||
"mongoose": "x.x.x",
|
||||
"socket.io": "x.x.x",
|
||||
"async" : "x.x.x"
|
||||
"async" : "x.x.x",
|
||||
"marked" : "x.x.x"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue