new ui that also works without javascript

src/c3nav/mapdata/models/locations.py

@@ -3,6 +3,7 @@ from collections import OrderedDict
 
 from django.core.cache import cache
 from django.db import models
+from django.db.models import Q
 from django.utils.functional import cached_property
 from django.utils.translation import ugettext_lazy as _
 
@@ -245,6 +246,34 @@ def get_location(request, name):
     return filter_queryset_by_package_access(request, AreaLocation.objects.filter(name=name)).first()
 
 
+def filter_words(queryset, words):
+    for word in words:
+        queryset = queryset.filter(Q(name__icontains=word) | Q(titles__icontains=word))
+    return queryset
+
+
+def search_location(request, search):
+    results = []
+    location = get_location(request, search)
+    if location:
+        results.append(location)
+
+    words = search.split(' ')[:10]
+
+    queryset = AreaLocation.objects.all()
+    if isinstance(location, AreaLocation):
+        queryset.exclude(name=location.name)
+    results += sorted(filter_words(filter_queryset_by_package_access(request, queryset), words),
+                      key=AreaLocation.get_sort_key, reverse=True)
+
+    queryset = LocationGroup.objects.all()
+    if isinstance(location, LocationGroup):
+        queryset.exclude(name=location.name)
+    results += list(filter_words(filter_queryset_by_package_access(request, queryset), words)[:10])
+
+    return results
+
+
 class PointLocation(Location):
     def __init__(self, level: Level, x: int, y: int):
         self.level = level

src/c3nav/site/static/site/css/c3nav.css

@@ -3,6 +3,14 @@ body, .btn {
 }
 
 
+.main-view.mode-location .locations > .origin-select,
+.main-view.mode-location .locations > .destination-select,
+.main-view.mode-route .locations > .location-select,
+.main-view.mode-location .routing {
+    display:none
+}
+
+
 .locationselect .input-lg {
     height: 62px;
 }
@@ -12,10 +20,10 @@ body, .btn {
 .locationselect .locationselect-selected {
     display:none;
 }
-.locationselect.selected .locationselect-selected {
+.location-group.selected .locationselect-selected {
     display:block;
 }
-.locationselect.selected .locationselect-input {
+.location-group.selected .locationselect-input {
     display:none;
 }
 .locationselect .icons {
@@ -33,6 +41,16 @@ body, .btn {
 .locationselect .icons .reset {
     background-image:url('../img/icons/cross.svg');
 }
+.locationselect .icons .link {
+    background-image:url('../img/icons/link.svg');
+}
+
+.location-group .only-if-selected {
+    display:none;
+}
+.location-group.selected .only-if-selected {
+    display:block;
+}
 
 
 .location {
@@ -67,6 +85,9 @@ body, .btn {
     overflow:hidden;
     padding-bottom:4px;
 }
+.tt-menu.noscript {
+    margin-top:0;
+}
 .tt-dataset {
     background-color: #ffffff;
     border-width: 1px;
@@ -77,8 +98,15 @@ body, .btn {
     -webkit-box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
     box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
 }
+.noscript .tt-dataset {
+    border-width:0 1px 1px;
+    border-color: #E7E7E7;
+    -webkit-box-shadow: 0 0 8px rgba(231, 231, 231, 0.6);
+    box-shadow: 0 0 8px rgba(231, 231, 231, 0.6);
+}
 .tt-suggestion {
 	padding: 6px 10px;
+    display:block;
 }
 .tt-suggestion.tt-cursor {
 	color: #fff;
@@ -91,6 +119,13 @@ body, .btn {
 	margin: 0;
 }
 
+.routing {
+    display:none;
+}
+.can-route .routing {
+    display:block;
+}
+
 svg {
     width:100%;
     height:auto;
@@ -183,8 +218,3 @@ circle.pos {
     vertical-align:middle;
     line-height: 1.42857143;
 }
-
-
-.login .container {
-    max-width:420px;
-}

src/c3nav/site/static/site/js/c3nav.js

@@ -1,6 +1,6 @@
 c3nav = {
     init: function() {
-        if (!$('#main_view').length) return;
+        if (!$('.main-view').length) return;
 
         c3nav._typeahead_locations = new Bloodhound({
             datumTokenizer: function(data) {
@@ -29,19 +29,43 @@ c3nav = {
             }
         };
 
-        c3nav.update_history_state(true);
         c3nav.init_typeahead($('.locationselect input:text'));
 
         $('.locationselect:not(.selected) .locationselect-input .tt-input').first().focus();
-        $('.locationselect .icons .reset').click(c3nav._locationselect_reset)
+        $('.locationselect .icons .reset').click(c3nav._locationselect_reset);
+        $('#route-from-here').click(c3nav._click_route_from_here);
+        $('#route-to-here').click(c3nav._click_route_to_here);
+
+        window.onpopstate = c3nav._onpopstate;
     },
 
     _locationselect_reset: function(e) {
         e.preventDefault();
-        var locationselect = $(this).closest('.locationselect');
+        var location_group = $(this).closest('.location-group');
-        locationselect.find('.id-field').val('');
+        location_group.find('.id-field').val('');
-        locationselect.removeClass('selected').find('.tt-input').focus().keyup().removeData('enter_item');
+        location_group.removeClass('selected').find('.tt-input').focus().removeData('enter_item');
-        c3nav.update_history_state();
+        location_group,find('.tt-suggestion').remove();
+        c3nav._locations_changed();
+    },
+    locationselect_focus: function() {
+        $('.location-group:visible:not(.selected) .locationselect-input .tt-input').first().focus();
+    },
+
+    _click_route_from_here: function(e) {
+        c3nav._click_route_x_here(e, $('.origin-select'));
+    },
+    _click_route_to_here: function(e) {
+        c3nav._click_route_x_here(e, $('.destination-select'));
+    },
+    _click_route_x_here: function(e, location_group) {
+        e.preventDefault();
+        $('.main-view').removeClass('mode-location').addClass('mode-route');
+        from_group = $('.location-select');
+        from_group.removeClass('selected');
+        location_group.addClass('selected').find('.id-field').val(from_group.find('.id-field').val());
+        location_group.find('.locationselect-selected .location').html(from_group.find('.locationselect-selected .location').html());
+        c3nav._locations_changed();
+        c3nav.locationselect_focus();
     },
 
     init_typeahead: function(elem) {
@@ -55,6 +79,7 @@ c3nav = {
     },
     _typeahead_keydown: function(e) {
         if (e.which == 13) {
+            e.preventDefault();
             var target = $(e.target);
             enter_item = target.data('enter_item');
             if (enter_item !== undefined) {
@@ -63,16 +88,15 @@ c3nav = {
         }
     },
     _typeahead_select: function(e, item) {
-        var locationselect = $(e.target).closest('.locationselect');
+        var location_group = $(e.target).closest('.location-group');
-        locationselect.addClass('selected');
+        location_group.addClass('selected');
-        var selected = locationselect.find('.locationselect-selected');
+        var selected = location_group.find('.locationselect-selected');
         selected.find('.title').text(item.title);
         selected.find('.subtitle').text(item.subtitle);
         selected.find('.id-field').val(item.id);
         e.target.blur();
-        c3nav.update_history_state();
+        c3nav._locations_changed();
-
+        c3nav.locationselect_focus();
-        $('.locationselect:not(.selected) .locationselect-input .tt-input').first().focus();
     },
     _typeahead_blur: function(e) {
         $(e.target).val('');
@@ -81,24 +105,25 @@ c3nav = {
         $(e.target).data('enter_item', item);
     },
 
-    update_history_state: function(e, replace) {
+    _locations_changed: function(e) {
-        var origin = $(':input[name=origin]').val();
+        var url;
-        var destination = $(':input[name=destination]').val();
+        if ($('.main-view').is('.mode-location')) {
-        url = '/';
+            url = '/l/'+$(':input[name=location]').val()+'/';
-        if (origin !== '') {
-            url += origin + '/'
-            if (destination !== '') {
-                url += destination + '/'
-            }
-        } else if (destination !== '') {
-            url += '_/' + destination + '/'
-        }
-        if (replace) {
-            history.replaceState({}, '', url);
         } else {
-            history.pushState({}, '', url);
+            var origin = $(':input[name=origin]').val();
+            var destination = $(':input[name=destination]').val();
+            if (origin !== '') {
+                url = (destination !== '') ? '/r/'+origin+'/'+destination+'/' : '/o/'+origin+'/';
+            } else {
+                url = (destination !== '') ? '/d/'+destination+'/' : '/';
+            }
+            $('.main-view').toggleClass('can-route', (origin !== '' && destination !== ''));
         }
-
+        history.pushState({}, '', url);
+    },
+    _onpopstate: function() {
+        document.location.href = document.location;
     }
+
 };
 $(document).ready(c3nav.init);

src/c3nav/site/templates/site/fragment_location.html

@@ -1,19 +1,60 @@
 {% load i18n %}
-<div class="form-group col-md-6">
+<div class="col-md-{% if name == 'location' %}12{% else %}6{% endif %} location-group {{ name }}-select{% if location %} selected{% endif %}">
-    <label for="{{ name }}_input">{{ heading }}</label>
+    <div class="form-group{% if search == name and not search_results %} has-error{% endif %}" data-name="{{ name }}">
-    <div class="locationselect {% if location %} selected{% endif %}">
+        <label for="{{ name }}_input">{{ heading }}</label>
-        <div class="locationselect-input">
+        <div class="locationselect">
-            <input type="text" class="form-control input-lg" id="{{ name }}_input" name="{{ name }}_search" placeholder="{% trans 'Search any Location…' %}">
+            <div class="locationselect-input">
-        </div>
+                {% if search == name and search_results %}
-        <div class="locationselect-selected">
+                    <span class="twitter-typeahead" style="position: relative; display: inline-block;">
-            <div class="location form-control input-lg">
+                {% endif %}
-                <span class="title">{{ location.title }}</span>
+                        <input type="text" class="form-control input-lg" id="{{ name }}_input"
-                <small class="subtitle">{{ location.subtitle }}</small>
+                               name="{{ name }}_search" placeholder="{% trans 'Search any Location…' %}"
+                               {% if search and not location %} value="{% if search == name %}{{ search_query }}{% endif %}"{% endif %}>
+                {% if search == name and search_results %}
+                        <div class="tt-menu tt-open noscript" style="display: block;">
+                            <div class="tt-dataset tt-dataset-0">
+                                {% for result in search_results %}
+                                    <a href="{{ result.url }}" class="location tt-suggestion">
+                                        <span class="title">{{ result.title }}</span>
+                                        <small class="subtitle">{{ result.subtitle }}</small>
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </span>
+                {% endif %}
             </div>
-            <div class="icons">
+            <div class="locationselect-selected">
-                <a href="" class="reset"></a>
+                <div class="location form-control input-lg">
+                    <span class="title">{{ location.title }}</span>
+                    <small class="subtitle">{{ location.subtitle }}</small>
+                </div>
+                <div class="icons">
+                    {% if name != 'location' %}
+                        <a href="{% if location %}{% url 'site.location' location=location.location_id %}{% endif %}" class="link"></a>
+                    {% endif %}
+                    <a href="{{ reset_url }}" class="reset"></a>
+                </div>
+                <input type="hidden" name="{{ name }}" value="{{ location.location_id }}" class="id-field">
             </div>
-            <input type="hidden" name="{{ name }}" value="{{ location.location_id }}" class="id-field">
         </div>
+        {% if search == name and not search_results %}
+            <span class="help-block">{% trans 'No location matched your search query.' %}</span>
+        {% endif %}
     </div>
+    {% if name == 'location' %}
+        <div class="row only-if-selected">
+            <div class="col-xs-6">
+                <a class="btn btn-primary btn-block" id="route-to-here" href="{% if location %}{% url 'site.destination' destination=location.location_id %}{% endif %}">{% trans 'Route to here' %}</a>
+            </div>
+            <div class="col-xs-6">
+                <a class="btn btn-default btn-block" id="route-from-here" href="{% if location %}{% url 'site.origin' origin=location.location_id %}{% endif %}">{% trans 'Route from here' %}</a>
+            </div>
+        </div>
+    {% endif %}
+    {% if not location %}
+        <noscript>
+            <button type="submit" class="btn btn-primary btn-block">{% trans 'Search' %}</button>
+        </noscript>
+    {% endif %}
 </div>

src/c3nav/site/templates/site/main.html

@@ -4,54 +4,62 @@
 {% load i18n %}
 
 {% block content %}
-<form method="post" id="main_view">
+<form method="post" class="main-view mode-{{ mode }}{% if origin and destination %} can-route{% endif %}">
     {% csrf_token %}
-    <div class="row">
+    <div class="row locations">
+        {% trans "Location" as heading %}
+        {% url 'site.index' as reset_url %}
+        {% include 'site/fragment_location.html' with name='location' location=location heading=heading reset_url=reset_url %}
+
         {% trans "Origin" as heading %}
-        {% include 'site/fragment_location.html' with name='origin' location=origin heading=heading %}
+        {% url 'site.destination' destination=destination.location_id as reset_url %}
+        {% include 'site/fragment_location.html' with name='origin' location=origin heading=heading reset_url=reset_url %}
 
         {% trans "Destination" as heading %}
-        {% include 'site/fragment_location.html' with name='destination' location=destination heading=heading %}
+        {% url 'site.origin' origin=origin.location_id as reset_url %}
+        {% include 'site/fragment_location.html' with name='destination' location=destination heading=heading reset_url=reset_url %}
     </div>
-    <div class="row settings">
+    <div class="routing">
-        <div class="form-group col-md-2">
+        <div class="row settings">
-            <label for="stairs-select">{% trans 'Stairs' %}</label>
+            <div class="form-group col-md-2">
-            {% include 'site/fragment_select.html' with name='stairs' value=stairs %}
+                <label for="stairs-select">{% trans 'Stairs' %}</label>
-        </div>
+                {% include 'site/fragment_select.html' with name='stairs' value=stairs %}
-        <div class="form-group col-md-2">
+            </div>
-            <label for="escalators-select">{% trans 'Escalators' %}</label>
+            <div class="form-group col-md-2">
-            {% include 'site/fragment_select.html' with name='escalators' value=escalators %}
+                <label for="escalators-select">{% trans 'Escalators' %}</label>
-        </div>
+                {% include 'site/fragment_select.html' with name='escalators' value=escalators %}
-        <div class="form-group col-md-2">
+            </div>
-            <label for="elevators-select">{% trans 'Elevators' %}</label>
+            <div class="form-group col-md-2">
-            {% include 'site/fragment_select.html' with name='elevators' value=elevators %}
+                <label for="elevators-select">{% trans 'Elevators' %}</label>
-        </div>
+                {% include 'site/fragment_select.html' with name='elevators' value=elevators %}
-        <div class="form-group col-md-6">
+            </div>
-            <label>{% trans 'Include / Avoid areas' %}</label>
+            <div class="form-group col-md-6">
-            <p class="form-control-static">
+                <label>{% trans 'Include / Avoid areas' %}</label>
-                {% for name, includable in includables %}
+                <p class="form-control-static">
-                    <label class="checkbox-inline">
+                    {% for name, includable in includables %}
-                        <input type="checkbox" name="include" value="{{ name }}"{% if name in include %} checked{% endif %}> {% blocktrans %}Include {{ includable }}{% endblocktrans %}
+                        <label class="checkbox-inline">
-                    </label>
+                            <input type="checkbox" name="include" value="{{ name }}"{% if name in include %} checked{% endif %}> {% blocktrans %}Include {{ includable }}{% endblocktrans %}
-                {% endfor %}
+                        </label>
-                {% for name, excludable in excludables %}
+                    {% endfor %}
-                    <label class="checkbox-inline">
+                    {% for name, excludable in excludables %}
-                        <input type="checkbox" name="avoid" value="{{ name }}"{% if name in avoid %} checked{% endif %}> {% blocktrans %}Avoid {{ excludable }}{% endblocktrans %}
+                        <label class="checkbox-inline">
-                    </label>
+                            <input type="checkbox" name="avoid" value="{{ name }}"{% if name in avoid %} checked{% endif %}> {% blocktrans %}Avoid {{ excludable }}{% endblocktrans %}
-                {% endfor %}
+                        </label>
-            </p>
+                    {% endfor %}
-        </div>
+                </p>
-    </div>
-    <div class="row">
-        <div class="form-group col-md-6">
-            <div class="checkbox">
-                <label>
-                    <input type="checkbox" name="save_settings" value="1"{% if save_settings %} checked{% endif %}>  {% trans 'Save Settings in cookie' %}
-                </label>
             </div>
         </div>
-        <div class="form-group col-md-6">
+        <div class="row">
-            <button type="submit" id="submitbtn" class="btn btn-block btn-lg btn-primary">{% trans 'Get Route' %}</button>
+            <div class="form-group col-md-6">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" name="save_settings" value="1"{% if save_settings %} checked{% endif %}>  {% trans 'Save Settings in cookie' %}
+                    </label>
+                </div>
+            </div>
+            <div class="form-group col-md-6">
+                <button type="submit" id="submitbtn" class="btn btn-block btn-lg btn-primary">{% trans 'Get Route' %}</button>
+            </div>
         </div>
     </div>
 </form>

src/c3nav/site/urls.py

@@ -4,8 +4,9 @@ from c3nav.site.views import level_image, main
 
 urlpatterns = [
     url(r'^map/(?P<level>[a-z0-9-_:]+).png$', level_image, name='site.level_image'),
-    url(r'^(?P<origin>[a-z0-9-_:]+)/$', main, name='site.main'),
+    url(r'^l/(?P<location>[a-z0-9-_:]+)/$', main, name='site.location'),
-    url(r'^_/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.main'),
+    url(r'^o/(?P<origin>[a-z0-9-_:]+)/$', main, name='site.origin'),
-    url(r'^(?P<origin>[a-z0-9-_:]+)/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.main'),
+    url(r'^d/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.destination'),
-    url(r'^$', main, name='site.main')
+    url(r'^r/(?P<origin>[a-z0-9-_:]+)/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.route'),
+    url(r'^$', main, name='site.index')
 ]

src/c3nav/site/views.py

@@ -2,10 +2,11 @@ from datetime import timedelta
 
 from django.http import Http404
 from django.shortcuts import get_object_or_404, render
+from django.urls import reverse
 from django.utils import timezone
 
 from c3nav.mapdata.models import Level
-from c3nav.mapdata.models.locations import get_location
+from c3nav.mapdata.models.locations import get_location, search_location
 from c3nav.mapdata.permissions import get_excludables_includables
 from c3nav.mapdata.render.compose import composer
 from c3nav.mapdata.utils.misc import get_dimensions
@@ -30,17 +31,61 @@ def reverse_ctypes(ctypes, name):
         return 'down' if name + '_down' in ctypes else 'no'
 
 
-def main(request, origin=None, destination=None):
+def get_location_or_404(request, location):
-    if origin:
+    if location is None:
-        origin = get_location(request, origin)
+        return None
-        if origin is None:
-            raise Http404
 
-    if destination:
+    location = get_location(request, location)
-        destination = get_location(request, destination)
+    if location is None:
-        if destination is None:
+        raise Http404
-            raise Http404
 
+    return location
+
+
+def main(request, location=None, origin=None, destination=None):
+    location = get_location_or_404(request, location)
+    origin = get_location_or_404(request, origin)
+    destination = get_location_or_404(request, destination)
+
+    mode = 'location' if not origin and not destination else 'route'
+
+    ctx = {
+        'location': location,
+        'origin': origin,
+        'destination': destination,
+        'mode': mode,
+    }
+
+    search = None
+    if not origin and not destination:
+        search = 'location'
+    elif origin and not destination:
+        search = 'destination'
+    elif destination and not origin:
+        search = 'origin'
+
+    if search is not None:
+        search_query = request.POST.get(search+'_search', '').strip() or None
+        if search_query:
+            results = search_location(request, search_query)
+
+            url = 'site.location' if search == 'location' else 'site.route'
+            kwargs = {}
+            if origin:
+                kwargs['origin'] = origin.location_id
+            if destination:
+                kwargs['destination'] = destination.location_id
+            for result in results:
+                kwargs[search] = result.location_id
+                result.url = reverse(url, kwargs=kwargs)
+
+            ctx.update({
+                'search': search,
+                'search_query': search_query,
+                'search_results': results,
+            })
+
+    # everything about settings
     include = ()
     avoid = ()
     stairs = 'yes'
@@ -50,7 +95,6 @@ def main(request, origin=None, destination=None):
     save_settings = False
     if 'c3nav_settings' in request.COOKIES:
         cookie_value = request.COOKIES['c3nav_settings']
-        print(cookie_value)
 
         if isinstance(cookie_value, dict):
             stairs = cookie_value.get('stairs', stairs)
@@ -65,7 +109,7 @@ def main(request, origin=None, destination=None):
 
         save_settings = True
 
-    if request.method in 'POST':
+    if request.method == 'POST':
         stairs = request.POST.get('stairs', stairs)
         escalators = request.POST.get('escalators', escalators)
         elevators = request.POST.get('elevators', elevators)
@@ -86,11 +130,22 @@ def main(request, origin=None, destination=None):
     include = set(include) & set(includables)
     avoid = set(avoid) & set(excludables)
 
-    if request.method in 'POST':
+    if request.method == 'POST':
         save_settings = request.POST.get('save_settings', '') == '1'
 
-    route = None
+    ctx.update({
-    if request.method in 'POST' and origin and destination:
+        'stairs': stairs,
+        'escalators': escalators,
+        'elevators': elevators,
+        'excludables': excludables.items(),
+        'includables': includables.items(),
+        'include': include,
+        'avoid': avoid,
+        'save_settings': save_settings,
+    })
+
+    # routing
+    if request.method == 'POST' and origin and destination:
         public = ':public' not in avoid
         nonpublic = ':nonpublic' in include
 
@@ -100,29 +155,22 @@ def main(request, origin=None, destination=None):
         route = route.split()
         route.create_routeparts()
 
+        ctx.update({
+            'route': route,
+        })
+
     width, height = get_dimensions()
 
-    response = render(request, 'site/main.html', {
+    ctx.update({
-        'origin': origin,
-        'destination': destination,
-
-        'stairs': stairs,
-        'escalators': escalators,
-        'elevators': elevators,
-        'excludables': excludables.items(),
-        'includables': includables.items(),
-        'include': include,
-        'avoid': avoid,
-        'save_settings': save_settings,
-
-        'route': route,
         'width': width,
         'height': height,
         'svg_width': width*6,
         'svg_height': height*6,
     })
 
-    if request.method in 'POST' and save_settings:
+    response = render(request, 'site/main.html', ctx)
+
+    if request.method == 'POST' and save_settings:
         cookie_value = {
             'stairs': stairs,
             'escalators': escalators,