Adds an editor for geometry and properties
This commit is contained in:
Laurent Bossavit
parent
6ef16787ab
commit
8bf79a1288
4 changed files with 285 additions and 10 deletions
42
backend.py
42
backend.py
|
|
@ -6,6 +6,7 @@ import falcon
|
||||||
import psycopg2
|
import psycopg2
|
||||||
import uuid
|
import uuid
|
||||||
import json
|
import json
|
||||||
|
import codecs
|
||||||
|
|
||||||
def db_connect():
|
def db_connect():
|
||||||
db_host = os.getenv("DB_HOST","localhost")
|
db_host = os.getenv("DB_HOST","localhost")
|
||||||
|
|
@ -13,6 +14,11 @@ def db_connect():
|
||||||
db = psycopg2.connect(dbname="oedb",host=db_host,password=db_password,user="postgres")
|
db = psycopg2.connect(dbname="oedb",host=db_host,password=db_password,user="postgres")
|
||||||
return db
|
return db
|
||||||
|
|
||||||
|
def standard_headers(resp):
|
||||||
|
resp.set_header('X-Powered-By', 'OpenEventDatabase')
|
||||||
|
resp.set_header('Access-Control-Allow-Origin', '*')
|
||||||
|
resp.set_header('Access-Control-Allow-Headers', 'X-Requested-With')
|
||||||
|
|
||||||
class StatsResource(object):
|
class StatsResource(object):
|
||||||
def on_get(self, req, resp):
|
def on_get(self, req, resp):
|
||||||
db = db_connect()
|
db = db_connect()
|
||||||
|
|
@ -22,10 +28,21 @@ class StatsResource(object):
|
||||||
cur.close()
|
cur.close()
|
||||||
db.close()
|
db.close()
|
||||||
|
|
||||||
|
standard_headers(resp)
|
||||||
resp.body = """{"events_count": %s, "last_created": "%s", "last_updated": "%s"}""" % (stat[0], stat[1],stat[2])
|
resp.body = """{"events_count": %s, "last_created": "%s", "last_updated": "%s"}""" % (stat[0], stat[1],stat[2])
|
||||||
resp.set_header('X-Powered-By', 'OpenEventDatabase')
|
resp.status = falcon.HTTP_200
|
||||||
resp.set_header('Access-Control-Allow-Origin', '*')
|
|
||||||
resp.set_header('Access-Control-Allow-Headers', 'X-Requested-With')
|
class EventsResource(object):
|
||||||
|
def on_get(self,req,resp):
|
||||||
|
db = db_connect()
|
||||||
|
cur = db.cursor()
|
||||||
|
# get event geojson Feature
|
||||||
|
cur.execute("""
|
||||||
|
SELECT format('{"type":"Feature", "id": "'|| events_id::text ||'", "properties": '|| events_tags::text ||', "geometry":'|| st_asgeojson(geom)) ||' }'
|
||||||
|
FROM events
|
||||||
|
JOIN geo ON (hash=events_geo)""");
|
||||||
|
standard_headers(resp)
|
||||||
|
resp.body = '{"type": "FeatureCollection","features": ['+','.join([x[0] for x in cur.fetchall()])+']}'
|
||||||
resp.status = falcon.HTTP_200
|
resp.status = falcon.HTTP_200
|
||||||
|
|
||||||
class EventResource(object):
|
class EventResource(object):
|
||||||
|
|
@ -39,9 +56,7 @@ FROM events
|
||||||
JOIN geo ON (hash=events_geo)
|
JOIN geo ON (hash=events_geo)
|
||||||
WHERE events_id=%s;""", (id,))
|
WHERE events_id=%s;""", (id,))
|
||||||
e = cur.fetchone()
|
e = cur.fetchone()
|
||||||
resp.set_header('X-Powered-By', 'OpenEventDatabase')
|
standard_headers(resp)
|
||||||
resp.set_header('Access-Control-Allow-Origin', '*')
|
|
||||||
resp.set_header('Access-Control-Allow-Headers', 'X-Requested-With')
|
|
||||||
if e is not None:
|
if e is not None:
|
||||||
resp.body = e[0]
|
resp.body = e[0]
|
||||||
resp.status = falcon.HTTP_200
|
resp.status = falcon.HTTP_200
|
||||||
|
|
@ -50,9 +65,7 @@ WHERE events_id=%s;""", (id,))
|
||||||
db.close()
|
db.close()
|
||||||
|
|
||||||
def on_post(self, req, resp):
|
def on_post(self, req, resp):
|
||||||
resp.set_header('X-Powered-By', 'OpenEventDatabase')
|
standard_headers(resp)
|
||||||
resp.set_header('Access-Control-Allow-Origin', '*')
|
|
||||||
resp.set_header('Access-Control-Allow-Headers', 'X-Requested-With')
|
|
||||||
|
|
||||||
# get request body payload (geojson Feature)
|
# get request body payload (geojson Feature)
|
||||||
body = req.stream.read().decode('utf-8')
|
body = req.stream.read().decode('utf-8')
|
||||||
|
|
@ -94,16 +107,25 @@ WHERE events_id=%s;""", (id,))
|
||||||
resp.body = """{"id":"%s"}""" % (e[0])
|
resp.body = """{"id":"%s"}""" % (e[0])
|
||||||
resp.status = falcon.HTTP_201
|
resp.status = falcon.HTTP_201
|
||||||
|
|
||||||
|
class StaticResource(object):
|
||||||
|
def on_get(self, req, resp):
|
||||||
|
resp.status = falcon.HTTP_200
|
||||||
|
resp.content_type = 'text/html'
|
||||||
|
with codecs.open('editor/index.html', 'r', 'utf-8') as f:
|
||||||
|
resp.body = f.read()
|
||||||
|
|
||||||
# falcon.API instances are callable WSGI apps
|
# falcon.API instances are callable WSGI apps
|
||||||
app = falcon.API()
|
app = falcon.API()
|
||||||
|
|
||||||
# Resources are represented by long-lived class instances
|
# Resources are represented by long-lived class instances
|
||||||
|
events = EventsResource()
|
||||||
event = EventResource()
|
event = EventResource()
|
||||||
stats = StatsResource()
|
stats = StatsResource()
|
||||||
|
editor = StaticResource()
|
||||||
|
|
||||||
# things will handle all requests to the matching URL path
|
# things will handle all requests to the matching URL path
|
||||||
|
app.add_route('/events', events)
|
||||||
app.add_route('/event/{id}', event) # handle single event requests
|
app.add_route('/event/{id}', event) # handle single event requests
|
||||||
app.add_route('/event', event) # handle single event requests
|
app.add_route('/event', event) # handle single event requests
|
||||||
app.add_route('/stats', stats)
|
app.add_route('/stats', stats)
|
||||||
|
app.add_route('/editor', editor)
|
||||||
|
|
|
||||||
17
editor/event-schema.json
Normal file
17
editor/event-schema.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
{
|
||||||
|
"title": "Evenement",
|
||||||
|
"type": "object",
|
||||||
|
"id": "event",
|
||||||
|
"properties": {
|
||||||
|
"what" : {
|
||||||
|
"type":"string",
|
||||||
|
"title":"Libellé de l'événement"
|
||||||
|
},
|
||||||
|
"when" : {
|
||||||
|
"title":"Date et heure de début",
|
||||||
|
"type" : "string",
|
||||||
|
"format" : "datetime-local"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
167
editor/index.html
Normal file
167
editor/index.html
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title> Détail d'un événement </title>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-editor/0.7.25/jsoneditor.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"/>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
|
||||||
|
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css"/>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" id="icon_stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
||||||
|
|
||||||
|
<script id="entry-template" type="text/x-handlebars-template">
|
||||||
|
{{#each features}}
|
||||||
|
<div class="entry">
|
||||||
|
<a id="{{id}}" href="#">{{properties.what}}</a>
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%;"></div>
|
||||||
|
<div class="container" style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%; margin: 20px;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span8 col-md-8 columns eight large-8">
|
||||||
|
<div class="tab-content" id="tabs">
|
||||||
|
<div role="tabpanel" class="tab-pane active" id="events_list"><h1>Events</h1></div>
|
||||||
|
<div role="tabpanel" class="tab-pane" id="json_editor"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="submit"/><div id="restore"/><div id="valid_indicator"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Initialize the editor
|
||||||
|
var editor = new JSONEditor(document.getElementById('json_editor'),{
|
||||||
|
// Enable fetching schemas via ajax
|
||||||
|
ajax: true,
|
||||||
|
|
||||||
|
// The schema for the editor
|
||||||
|
schema: {
|
||||||
|
"title": "Evenement",
|
||||||
|
"type": "object",
|
||||||
|
"id": "event",
|
||||||
|
"properties": {
|
||||||
|
"what" : {
|
||||||
|
"type":"string",
|
||||||
|
"title":"Libellé de l'événement"
|
||||||
|
},
|
||||||
|
"when" : {
|
||||||
|
"title":"Date et heure de début",
|
||||||
|
"type" : "string",
|
||||||
|
"format" : "datetime-local"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
iconlib: "fontawesome4",
|
||||||
|
theme: "bootstrap3",
|
||||||
|
|
||||||
|
// Seed the form with a starting value
|
||||||
|
startval: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hook up the submit button to log to the console
|
||||||
|
document.getElementById('submit').addEventListener('click',function() {
|
||||||
|
// Get the value from the editor
|
||||||
|
console.log(editor.getValue());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hook up the Restore to Default button
|
||||||
|
document.getElementById('restore').addEventListener('click',function() {
|
||||||
|
editor.setValue(starting_value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hook up the validation indicator to update its
|
||||||
|
// status whenever the editor changes
|
||||||
|
editor.on('change',function() {
|
||||||
|
// Get an array of errors from the validator
|
||||||
|
var errors = editor.validate();
|
||||||
|
|
||||||
|
var indicator = document.getElementById('valid_indicator');
|
||||||
|
|
||||||
|
// Not valid
|
||||||
|
if(errors.length) {
|
||||||
|
indicator.className = 'label alert';
|
||||||
|
indicator.textContent = 'not valid';
|
||||||
|
}
|
||||||
|
// Valid
|
||||||
|
else {
|
||||||
|
indicator.className = 'label success';
|
||||||
|
indicator.textContent = 'valid';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||||
|
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||||
|
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
||||||
|
map = new L.Map('map', {layers: [osm], center: new L.LatLng(48.9244643, 2.3594117), zoom: 15 });
|
||||||
|
|
||||||
|
var drawnItems = new L.FeatureGroup();
|
||||||
|
map.addLayer(drawnItems);
|
||||||
|
|
||||||
|
$("#tabs").tab();
|
||||||
|
|
||||||
|
$.getJSON("/events",function(events) {
|
||||||
|
events["features"].map(function(event) {
|
||||||
|
L.geoJson(event["geometry"]).addTo(drawnItems);
|
||||||
|
});
|
||||||
|
|
||||||
|
var source = $("#entry-template").html();
|
||||||
|
var template = Handlebars.compile(source);
|
||||||
|
$('#events_list').append(template(events));
|
||||||
|
|
||||||
|
$('#events_list a').click(function(item) {
|
||||||
|
// Load properties in editor
|
||||||
|
events["features"].map(function(event) {
|
||||||
|
if (event.id == item.target.id) {
|
||||||
|
editor.setValue(event["properties"]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// TODO - focus map on layer
|
||||||
|
// Switch tabs
|
||||||
|
$("#events_list").removeClass("active");
|
||||||
|
$("#json_editor").addClass("active");
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var drawControl = new L.Control.Draw({
|
||||||
|
draw: {
|
||||||
|
position: 'topleft',
|
||||||
|
polyline: false,
|
||||||
|
circle: false,
|
||||||
|
marker: false
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
featureGroup: drawnItems
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.addControl(drawControl);
|
||||||
|
|
||||||
|
map.on('draw:created', function (e) {
|
||||||
|
var type = e.layerType,
|
||||||
|
layer = e.layer;
|
||||||
|
drawnItems.addLayer(e.layer);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
69
examples/other.json
Normal file
69
examples/other.json
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
{
|
||||||
|
"geometry":
|
||||||
|
{
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [
|
||||||
|
[
|
||||||
|
[
|
||||||
|
2.396119236946106,
|
||||||
|
48.84943571607033
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.395314574241638,
|
||||||
|
48.84936511598567
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.394644021987915,
|
||||||
|
48.8490791846248
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.394316792488098,
|
||||||
|
48.84860968884877
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3943114280700684,
|
||||||
|
48.84820020021693
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3946386575698853,
|
||||||
|
48.84773775644264
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3950570821762085,
|
||||||
|
48.84749064733159
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3957008123397827,
|
||||||
|
48.84733532098047
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.396720051765442,
|
||||||
|
48.8474694664939
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3973584175109863,
|
||||||
|
48.84796368370562
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.39751398563385,
|
||||||
|
48.84849672680203
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.3970580101013184,
|
||||||
|
48.849114484881156
|
||||||
|
],
|
||||||
|
[
|
||||||
|
2.396119236946106,
|
||||||
|
48.84943571607033
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
,
|
||||||
|
"properties":{
|
||||||
|
"type":"protest"
|
||||||
|
,"what":"Loi travail"
|
||||||
|
,"start":"2016-06-10T21:00+01:00"
|
||||||
|
,"stop":"2016-06-10T23:30+01:00"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue