ffhb/freifunkmanager
ffhb
/
freifunkmanager
mirror of https://github.com/FreifunkBremen/freifunkmanager.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add map on edit

This commit is contained in:
Martin Geno 2016-07-09 10:15:03 +02:00
parent 23fe7f2e0a
commit cd19a507cb
14 changed files with 167 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.js
View File

@ -242,6 +242,14 @@ module.exports = function (grunt) {
'*.*'
]
},
{
expand: true,
cwd: 'public/bower_components/bootstrap/fonts',
dest: 'build/fonts',
src: [
'*.*'
]
},
{
expand: true,
cwd: '.tmp/img',

4
bower.json
View File

@ -23,6 +23,8 @@
"angular-moment": "^0.10.3",
"angular-web-notification": "^0.0.83",
"ui-leaflet": "^1.0.1",
"angular-cookies": "^1.5.7"
"angular-cookies": "^1.5.7",
"Leaflet.label": "^0.2.1",
"lodash": "^4.13.1"
}
}

3
public/app/app.js
View File

@ -5,8 +5,9 @@ angular.module('ffhb', [
'ngResource',
'ngCookies',
'ui.router',
'angularMoment',
'ui.bootstrap',
'ui-leaflet',
'angularMoment',
'Authentication',
'angular-web-notification',
'config'

9
public/app/main.jade
View File

@ -1,15 +1,20 @@
.navbar.navbar-default.navbar-fixed-top
.container-fluid
.navbar-header
button.navbar-toggle.collapsed(ng-click="toggleOpen()")
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(ui-sref="app")
img(src="/favicon.ico")
.navbar-collapse
.navbar-collapse.collapse(uib-collapse="!isOpen")
ui.nav.navbar-nav
li(ui-sref="app.nodes.sort",ng-class="{ active: $state.includes('app.nodes') }")
a(nav navbar-nav) Nodes
li(ui-sref="app.changes",ui-sref-active="active")
a(nav navbar-nav) Changes
// li(ui-sref="app.map",ui-sref-active="active")
li(ui-sref="app.map",ui-sref-active="active")
a(nav navbar-nav) Map
ui.nav.navbar-nav.navbar-right
li

15
public/app/main.js
View File

@ -2,22 +2,31 @@
angular.module('ffhb')
.controller('MainCtrl',function($scope,$interval,store,$state,AuthenticationService){
$scope.isOpen = false;
$scope.$state = $state;
$scope.refresh = store.refresh;
$scope.passphrase = '';
var timediff = new Date(1970,1,1);
function render(prom){
prom.then(function(data){
timediff = data.lastupdate;
});
}
$interval(function() {
$scope.timeRefresh = parseInt((new Date() - timediff) / 1000);
},100);
render(store.getData);
$scope.$on('store', function(ev, prom) {
render(prom);
});
$scope.toggleOpen = function(){
$scope.isOpen = !$scope.isOpen;
};
$interval(function() {
$scope.timeRefresh = parseInt((new Date() - timediff) / 1000);
},100);
$scope.passphraseUpdate = function(){
AuthenticationService.SetCredentials('client',$scope.passphrase);
};

4
public/app/node.jade
View File

@ -10,10 +10,10 @@
.form-group(ng-class="rowForm.hostname.$invalid ? 'has-error' : ''")
label(for="formHostname") Hostname
input.form-control(id="formHostname",placeholder="Hostname",type="text",name="hostname",pattern="[a-zA-Z0-9-]*",ng-model='node.nodeinfo.hostname',required)
// leaflet.map.node(geojson=geojson,center=center,markers=markers)
leaflet.map.node(geojson="geojson",center="center",markers="markers",event-broadcast="events")
button.btn.btn-default(type="submit")
span.glyphicon.glyphicon-floppy-disk(aria-hidden="true")
| Save
// span.btn.btn-default(ng-click="gps()")
span.btn.btn-default(ng-click="gps()")
span.glyphicon.glyphicon-map-marker(aria-hidden="true")
| GPS

50
public/app/node.js
View File

@ -1,13 +1,30 @@
'use strict';
angular.module('ffhb')
.controller('NodeCtrl',function($stateParams,$scope,store,config){
.controller('NodeCtrl',function($stateParams,$scope,store,config,leafletData){
$scope.nodeid = $stateParams.nodeid;
$scope.node = {};
$scope.center = config.map.view;
$scope.markers = [];
angular.extend($scope, {
center: config.map.view,
markers: {node:{
lat: config.map.view.lat,
lng: config.map.view.lng,
focus: true,
title: 'Marker',
draggable: true,
label: {
message: 'Node:'+$stateParams.nodeid,
options: {
noHide: true
}
}
}},
events:{}
});
store.getGeojson.then(function(data){
$scope.geojson = data;
leafletData.getMap().then(function(map) {
L.geoJson(data,config.map.geojson).addTo(map);
});
});
function render(prom){
prom.then(function(data){
@ -19,8 +36,31 @@ angular.module('ffhb')
render(prom);
});
$scope.$on('leafletDirectiveMarker.dragend', function(event, args){
if($scope.node !== undefined && $scope.node.nodeinfo !== undefined && $scope.node.nodeinfo.location !== undefined){
$scope.node.nodeinfo.location.latitude = args.model.lat;
$scope.node.nodeinfo.location.latitude = args.model.lng;
store.saveNode($stateParams.nodeid);
}
});
var setToGps = function(position){
var pos = [position.coords.latitude,position.coords.longitude];
console.log('gps',pos);
if($scope.node !== undefined && $scope.node.nodeinfo !== undefined && $scope.node.nodeinfo.location !== undefined){
$scope.node.nodeinfo.location.latitude = position.coords.latitude;
$scope.node.nodeinfo.location.longitude = position.coords.longitude;
leafletData.getMap().then(function(map) {
map.setView(pos);
});
store.saveNode($stateParams.nodeid);
}
};
$scope.gps = function() {
console.log('gps');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setToGps);
}else{
window.alert('No Permission for location');
}
};
$scope.save = function() {
store.saveNode($stateParams.nodeid);

13
public/app/nodes/nodes.js
View File

@ -1,15 +1,6 @@
'use strict';
angular.module('ffhb')
.controller('NodesCtrl',function(NgTableParams,$scope){
$scope.cancel = function(row, rowForm) {
console.log('cancel',row,rowForm);
row.isEditing = false;
//angular.extend(row, originalRow);
};
$scope.save = function(row, rowForm) {
console.log('save',row,rowForm);
row.isEditing = false;
//angular.extend(row, originalRow);
};
.controller('NodesCtrl',function(){
});

2
public/app/nodes/nodesGroup.jade
View File

@ -44,3 +44,5 @@ table.table.table-striped.table-condensed( ng-table="tableParams")
span.glyphicon.glyphicon-remove
.btn.btn-primary.btn-sm(ng-click="row.isEditing = true",ng-if="!row.isEditing")
span.glyphicon.glyphicon-pencil
a.btn.btn-default(ui-sref="app.node({nodeid: row.nodeid})")
span.glyphicon.glyphicon-qrcode

25
public/app/nodes/nodesGroup.js
View File

@ -10,13 +10,36 @@ angular.module('ffhb')
}, {
dataset: []
});
var originalData = {};
function resetRow(row, rowForm){
row.isEditing = false;
rowForm.$setPristine();
return _.findWhere(originalData, function(r){
return r.id === row.id;
});
}
$scope.cancel = function(row, rowForm) {
console.log('cancel',row,rowForm);
row.isEditing = false;
var originalRow = resetRow(row, rowForm);
angular.extend(row, originalRow);
};
$scope.save = function(row, rowForm) {
console.log('save',row,rowForm);
row.isEditing = false;
var originalRow = resetRow(row, rowForm);
angular.extend(originalRow, row);
store.saveNode(row.nodeid);
};
function render(prom){
prom.then(function(data){
var result = Object.keys(data.merged).map(function(nodeid){
data.merged[nodeid].nodeid = nodeid;
return data.merged[nodeid];
});
$scope.tableParams.settings({dataset: result,total: data.nodesCount});
originalData = result;
$scope.tableParams.settings({dataset: angular.copy(result),total: data.nodesCount});
});
}
render(store.getData);

2
public/app/nodes/nodesSort.jade
View File

@ -38,3 +38,5 @@ table.table.table-striped.table-condensed( ng-table="tableParams")
span.glyphicon.glyphicon-remove
.btn.btn-primary.btn-sm(ng-click="row.isEditing = true",ng-if="!row.isEditing")
span.glyphicon.glyphicon-pencil
a.btn.btn-default(ui-sref="app.node({nodeid: row.nodeid})")
span.glyphicon.glyphicon-qrcode

25
public/app/nodes/nodesSort.js
View File

@ -9,13 +9,36 @@ angular.module('ffhb')
}, {
dataset: []
});
var originalData = {};
function resetRow(row, rowForm){
row.isEditing = false;
rowForm.$setPristine();
return _.findWhere(originalData, function(r){
return r.id === row.id;
});
}
$scope.cancel = function(row, rowForm) {
console.log('cancel',row,rowForm);
row.isEditing = false;
var originalRow = resetRow(row, rowForm);
angular.extend(row, originalRow);
};
$scope.save = function(row, rowForm) {
console.log('save',row,rowForm);
row.isEditing = false;
var originalRow = resetRow(row, rowForm);
angular.extend(originalRow, row);
store.saveNode(row.nodeid);
};
function render(prom){
prom.then(function(data){
var result = Object.keys(data.merged).map(function(nodeid){
data.merged[nodeid].nodeid = nodeid;
return data.merged[nodeid];
});
$scope.tableParams.settings({dataset: result,total: data.nodesCount});
originalData = result;
$scope.tableParams.settings({dataset: angular.copy(result),total: data.nodesCount});
});
}
render(store.getData);

32
public/components/config.js
View File

@ -4,7 +4,37 @@ angular.module('config', [])
return {
api: 'https://mgmt.ffhb.de/api',
map: {
view: {lat: 53.0702, lng: 8.815}
view: {lat: 53.0702, lng: 8.815, zoom: 16},
geojson: {
pointToLayer: function (feature, latlng){
feature.properties.radius = 10;
return L.circleMarker(latlng, feature.properties);
},
onEachFeature: function(feature, layer) {
if(feature.properties.name.length >0){
layer.bindLabel(feature.properties.name);
}
},
style: function(feature){
if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){
return {color: feature.properties.stroke,
opacity:feature.properties['stroke-opacity'],
fillColor: feature.properties.fill,
fillOpacity:feature.properties['fill-opacity'],
stroke: true,
weight: feature.properties['stroke-width'],
lineCap: 'round',
lineJoin: 'round'};
}
return {
color: feature.properties['marker-color'],
fillColor: feature.properties['marker-color'],
fillOpacity: 0.2,
weight: 2,
stroke: true
};
}
}
},
geojson: 'https://meshviewer.breminale.ffhb.de/data/meshviewer.geojson',
refresh: 60000

3
public/index.html
View File

@ -18,6 +18,7 @@
<link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.css" />
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<!-- endbower -->
<link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<!-- endbuild -->
<!-- build:css({.tmp,public}) app/app.css -->
@ -50,7 +51,9 @@
<script src="bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="bower_components/ui-leaflet/dist/ui-leaflet.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<!-- endbower -->
<script src="bower_components/Leaflet.label/dist/leaflet.label.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,public}) app/app.js -->