Skip to content

Commit

Permalink
Better url handling in frontendd on index site
Browse files Browse the repository at this point in the history
  • Loading branch information
@the-infinity
the-infinity committed Feb 22, 2015
1 parent 28759cc commit b50877b
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 85 deletions.
2 changes: 1 addition & 1 deletion scripts/osm-import/bochum.cfg
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
CITY=bochum CITYID=54626a479bcda406fb531236 REGBEZ=arnsberg-regbez FOLDER=nordrhein-westfalen OSM_RELATION=62644
CITY=bochum CITYID=54e8f3f9fc93e90761fd805f REGBEZ=arnsberg-regbez FOLDER=nordrhein-westfalen OSM_RELATION=62644
50 changes: 36 additions & 14 deletions webapp/static/js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,13 @@ $(document).ready(function(){

var lastLocationEntry = ''; // die letzte vom User eingegebene Strasse

map.setView(new L.LatLng(region_data['lat'], region_data['lon']), region_data['zoom']).addLayer(backgroundLayer);
map.setView(new L.LatLng(OpenRIS.region.lat, OpenRIS.region.lon), OpenRIS.region.zoom).addLayer(backgroundLayer);

if (search_data.address) {
$('#address').val(search_data.address);
handleLocationInput();
}

/*
Alternative tile config. This tile-set should only be used for testing.
// OSM Copyright Notice
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
*/

// set to user position, if set and within cologne
/*OpenRIS.session({}, function(data){
sessionData = data.response;
Expand Down Expand Up @@ -60,7 +52,28 @@ $(document).ready(function(){

// register post region change actions
OpenRIS.post_region_change = function() {
map.setView(new L.LatLng(region_data['lat'], region_data['lon']), region_data['zoom']).addLayer(backgroundLayer);
map.setView(new L.LatLng(OpenRIS.region.lat, OpenRIS.region.lon), OpenRIS.region.zoom).addLayer(backgroundLayer);
window.history.pushState(String(Date.now()), document.title, "/?r=" + OpenRIS.region.id);

// update street description
if (OpenRIS.region.type == 1)
$('#address-label').text('Straße:');
else
$('#address-label').text('Straße und Stadt:');
// update search examples
if ($('#search-examples')) {
$('#search-examples').html('');
$('#search-examples').append(document.createTextNode('Beispiele: '));
$.each(region_data.keyword, function(id, keyword){
$('<a/>')
.text(keyword)
.attr({'href': '/suche/?q=' + encodeURI(keyword)})
.appendTo('#search-examples');
if (region_data.keyword.length > id + 1)
$('#search-examples').append(document.createTextNode(', '));
});
}
changePositionTransform();
}


Expand All @@ -85,6 +98,7 @@ $(document).ready(function(){
$('#position-prompt-submit').trigger('click');
}
});

$('#submit').click(function(evt){
evt.preventDefault();
$('#search-form').trigger('submit');
Expand All @@ -108,7 +122,7 @@ $(document).ready(function(){
if (address !== '') {
data = {
address: address,
region: region_data['id']
region: OpenRIS.region.id
};
$.getJSON('/api/proxy/geocode', data, function(places){
$('#position-prompt .spinner').css({visibility: 'hidden'});
Expand Down Expand Up @@ -242,11 +256,16 @@ $(document).ready(function(){

function resetMap() {
clearMap();
map.setView(new L.LatLng(region_data['lat'], region_data['lon']), region_data['zoom']);
map.setView(new L.LatLng(OpenRIS.region.lat, OpenRIS.region.lon), OpenRIS.region.zoom);
}

function handleChangePositionClick(evt) {
evt.preventDefault();
changePositionTransform();
}

function changePositionTransform() {
window.history.pushState(String(Date.now()), document.title, "/?r=" + OpenRIS.region.id);
$('#map-claim').remove();
$('#position-prompt').show();
$('#address').focus();
Expand Down Expand Up @@ -279,6 +298,9 @@ $(document).ready(function(){
if (streetString === '') {
streetString = sessionData.location_entry;
}
// Set new URL
window.history.pushState(String(Date.now()), document.title, "/?r=" + OpenRIS.region.id + '&l=\"' + streetString + '\"');

var changeLocationLink = $(document.createElement('span')).text(streetString).attr({'id': 'map-claim-street'});
var newSearchLink = $(document.createElement('a')).text('Neue Suche').attr({'href': '#', 'class': 'awesome extrawide'}).css('margin-left', '20px').click(handleChangePositionClick);
var article = '';
Expand Down Expand Up @@ -312,7 +334,7 @@ $(document).ready(function(){
markerLayerGroup.addLayer(innerDot);
var streets = [];
// Strassen aus der Umgebung abrufen
OpenRIS.streetsForPosition(region_data['id'], lat, lon, radius, function(data){
OpenRIS.streetsForPosition(OpenRIS.region.id, lat, lon, radius, function(data){
$.each(data.response, function(street_name, street) {
if (street.paper_count) {
$.each(street.nodes, function(nodes_id, nodes){
Expand All @@ -322,7 +344,7 @@ $(document).ready(function(){
node[1], node[0]
));
});
var markerHtml = '<p><b><a href="/suche/?r=' + region_data['id'] + '&q=&quot;' + street_name + '&quot;">' + street_name + ': ' + street.paper_count + ' Treffer</a></b>';
var markerHtml = '<p><b><a href="/suche/?r=' + OpenRIS.region.id + '&q=&quot;' + street_name + '&quot;">' + street_name + ': ' + street.paper_count + ' Treffer</a></b>';
if (street.paper_publishedDate && street.paper_name)
markerHtml += '<br/>Der jüngste Treffer vom ' + OpenRIS.formatIsoDate(street.paper_publishedDate) + ' (' + street.paper_name + ')';
markerHtml += '</p>';
Expand Down
39 changes: 8 additions & 31 deletions webapp/static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ var OpenRIS = {
a: 6378137,
b: (6378137 * 297.257223563) / 298.257223563,

region: null,
region: {},
start_method_queue: new Array(),

monthstr: {
Expand Down Expand Up @@ -69,7 +69,8 @@ var OpenRIS = {


regionLoad: function() {
OpenRIS.updateRegion();
// copy region_data in region object
this.region = region_data;
// region click
$('#change-region').click(function(){
$.getJSON('/api/regions', function(data) {
Expand All @@ -81,7 +82,7 @@ var OpenRIS = {
.click(
{'region': region},
function(event) {
region_data = {
OpenRIS.region = {
'id': event.data.region.id,
'name': event.data.region.name,
'lat': event.data.region.lat,
Expand All @@ -90,14 +91,13 @@ var OpenRIS = {
'type': event.data.region.type,
'keyword': event.data.region.keyword
}
//OpenRIS.region = event.data.region;
$('#region-choice').html('');
$('#region-question').css({'display': 'block'});
OpenRIS.updateRegion();
// update region name
$('#region-current').text(OpenRIS.region.name);
sessionParams = {
'region_id': region_data['id']
'region_id': OpenRIS.region.id
};
//setUserPosition(parseFloat(evt.data.resultObject.lat), parseFloat(evt.data.resultObject.lon));
OpenRIS.session(sessionParams, function() {});
if (typeof(OpenRIS.post_region_change) == 'function') {
OpenRIS.post_region_change();
Expand All @@ -109,29 +109,6 @@ var OpenRIS = {
});
});
},

updateRegion: function() {
// update region name
$('#region-current').text(region_data.name);
// update street description
if (region_data.type == 1)
$('#address-label').text('Straße:');
else
$('#address-label').text('Straße und Stadt:');
// update search examples
if ($('#search-examples')) {
$('#search-examples').html('');
$('#search-examples').append(document.createTextNode('Beispiele: '));
$.each(region_data.keyword, function(id, keyword){
$('<a/>')
.text(keyword)
.attr({'href': '/suche/?q=' + encodeURI(keyword)})
.appendTo('#search-examples');
if (region_data.keyword.length > id + 1)
$('#search-examples').append(document.createTextNode(', '));
});
}
},

/**
* Formatiert ein ISO-Datum zum gebräuchlichen deutschen Format DD.MM.YYYY
Expand Down Expand Up @@ -173,7 +150,7 @@ var OpenRIS = {
* Takes an object of standard search parameters and deletes those which are default or null
*/
processSearchParams: function(params){
params['r'] = region_data['id']
params['r'] = OpenRIS.region.id
if (typeof params['q'] === 'undefined'
|| params['q'] == null
|| params['q'] === ''
Expand Down
80 changes: 41 additions & 39 deletions webapp/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,24 @@

{% block scripts %}
{{ super() }}

<script type="text/javascript" src="{{ url_for('static', filename='js/leaflet.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ajaxq.js') }}"></script>
{% if session['region_id'] %}{% set region_id = session['region_id'] %}{% else %}{% set region_id = config['region_default'] %}{% endif %}
<script>
{% if session['region_id'] %}{% set region_id = session['region_id'] %}{% else %}{% set region_id = config['region_default'] %}{% endif %}
var region_data = {
'id': '{{ region_id }}',
'name': '{{ config['regions'][region_id]['name'] }}',
'type': {{ config['regions'][region_id]['type'] }},
'lat': {{ config['regions'][region_id]['lat'] }},
'lon': {{ config['regions'][region_id]['lon'] }},
'zoom': {{ config['regions'][region_id]['zoom'] }},
'keyword': [{% for keyword in config['regions'][region_id]['keyword'] %}'{{ keyword }}', {% endfor %}]
'id': '{{ region_id }}',
'name': '{{ config['regions'][region_id]['name'] }}',
'type': {{ config['regions'][region_id]['type'] }},
'lat': {{ config['regions'][region_id]['lat'] }},
'lon': {{ config['regions'][region_id]['lon'] }},
'zoom': {{ config['regions'][region_id]['zoom'] }},
'keyword': [{% for keyword in config['regions'][region_id]['keyword'] %}'{{ keyword }}', {% endfor %}]
}
var search_data = {
'address': {% if session['address'] %}'{{ session['address'] }}'{% else %}null{% endif %},
'osm_id': {% if session['osm_id'] %}{{ session['osm_id'] }}{% else %}null{% endif %}
'address': {% if session['address'] %}'{{ session['address'] }}'{% else %}null{% endif %},
'osm_id': {% if session['osm_id'] %}{{ session['osm_id'] }}{% else %}null{% endif %}
}

var CONF = {
Expand All @@ -35,35 +36,36 @@
{% endblock %}

{% block riscontent %}
{% if session['region_id'] %}{% set region_id = session['region_id'] %}{% else %}{% set region_id = config['region_default'] %}{% endif %}
<div id="home">
<div class="content top">
<div id="region-prompt">
<div id="region-question" class="question">Ausgewählte Region: <span id="region-current">Deutschland</span> <span id="change-region" class="awesome extrawide">Ändern</span></div>
<div id="region-choice"></div>
</div>
</div>
<div id="position-form-container" class="content middle">
<div id="position-prompt">
<form id="position-prompt-form" action="/" method="GET">
<div class="question">Sehen Sie sich an, was die Politik in Ihrer Umgebung macht:</div>
<div>
<span class="mobilerow"><label for="address" id='address-label'>Straße und Stadt:</label> <input id="address" type="text" name='address' title="Straße und Stadt, in der Sie wohnen oder für die Sie sich interessieren"/></span>
<a href="#" id='position-prompt-submit' class="awesome extrawide">Anzeigen</a>
<span class="spinner placeholder"></span>
</div>
</form>
</div>
<p style="text-align: center;">Bislang gibt es Daten für die Städte Bochum, Köln und Moers. Die Suche benötigt die Angabe einer Straße und Stadt für sinnvolle Ergebnisse.</p>
</div>
<div id="map" style="margin-top: 3px;"></div>
<div class="content bottom searchform">
<div class="header">&hellip; oder suchen Sie nach Themen, die Sie interessieren:</div>
<form id="search-form" method="get" action="/suche/" accept-charset="utf-8">
<input type="text" id="qinput" name="q" value="" />
<a href="#" id="submit" class="awesome extrawide">Suchen</a>
</form>
<div class="examples" id='search-examples'>
</div>
</div>
<div class="content top">
<div id="region-prompt">
<div id="region-question" class="question">Ausgewählte Region: <span id="region-current">{{ config['regions'][region_id]['name'] }}</span> <span id="change-region" class="awesome extrawide">Ändern</span></div>
<div id="region-choice"></div>
</div>
</div>
<div id="position-form-container" class="content middle">
<div id="position-prompt">
<form id="position-prompt-form" action="/" method="GET">
<div class="question">Sehen Sie sich an, was die Politik in Ihrer Umgebung macht:</div>
<div>
<span class="mobilerow"><label for="address" id='address-label'>Straße und Stadt:</label> <input id="address" type="text" name='address' title="Straße und Stadt, in der Sie wohnen oder für die Sie sich interessieren"/></span>
<a href="#" id='position-prompt-submit' class="awesome extrawide">Anzeigen</a>
<span class="spinner placeholder"></span>
</div>
</form>
</div>
<p style="text-align: center;">Bislang gibt es Daten für die Städte Bochum, Köln und Moers. Die Suche benötigt die Angabe einer Straße und Stadt für sinnvolle Ergebnisse.</p>
</div>
<div id="map" style="margin-top: 3px;"></div>
<div class="content bottom searchform">
<div class="header">&hellip; oder suchen Sie nach Themen, die Sie interessieren:</div>
<form id="search-form" method="get" action="/suche/" accept-charset="utf-8">
<input type="text" id="qinput" name="q" value="" />
<a href="#" id="submit" class="awesome extrawide">Suchen</a>
</form>
<div class="examples" id='search-examples'>
</div>
</div>
</div>
{% endblock %}
11 changes: 11 additions & 0 deletions webapp/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,17 @@

@app.route("/")
def index():
# Set region to get value
region_id_get = request.args.get('r', False)
if region_id_get:
session['region_id'] =region_id_get
# Set location to get value
location_string_get = request.args.get('l', False)
if region_id_get and location_string_get:
session['address'] = location_string_get.replace("\"", "")
# Delete location when location is set + region is not set:
if not region_id_get and location_string_get:
session['address'] = ''
return render_template('index.html', session=session)


Expand Down

0 comments on commit b50877b

Please sign in to comment.