Home Explore Help
Sign In
FFDN
/
celutz
3
1
Fork 2
Files Issues 18 Pull Requests 0 Wiki
Browse Source

View: several changes, now a single main page with nice menu

Baptiste Jonglez 8 years ago
parent
9f75a5f393
commit
c4ac10af18
6 changed files with 120 additions and 152 deletions
Unified View Show Diff Stats
  1. 24 83
      panorama/templates/panorama/base.html
  2. 0 14
      panorama/templates/panorama/list.html
  3. 16 22
      panorama/templates/panorama/locate_point.html
  4. 61 0
      panorama/templates/panorama/main.html
  5. 4 5
      panorama/urls.py
  6. 15 28
      panorama/views.py

+ 24 - 83
panorama/templates/panorama/base.html
View File 

@@ -5,7 +5,7 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
   <head>
 
   <head>
 
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
 
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
 
-    <title>{% block title %}{% endblock title %}</title>
 
+    <title>{% block title %}Celutz, a panorama viewer{% endblock title %}</title>
 
 
 
     <link type="image/x-icon" rel="shortcut icon" href="{% static "panorama/img/tsf.png" %}"/>
 
     <link type="image/x-icon" rel="shortcut icon" href="{% static "panorama/img/tsf.png" %}"/>
 
 
 
@@ -33,7 +33,7 @@
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
 
                 </button>
 
                 </button>
 
-                <a class="navbar-brand" href="index.html">Celutz</a>
 
+                <a class="navbar-brand" href="{% url 'panorama:main' %}">Celutz</a>
 
             </div>
 
             </div>
 
             <!-- Top Menu Items -->
 
             <!-- Top Menu Items -->
 
             <ul class="nav navbar-right top-nav">
 
             <ul class="nav navbar-right top-nav">
 
@@ -129,20 +129,33 @@
 
             </ul>
 
             </ul>
 
             <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
 
             <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
 
             <div class="collapse navbar-collapse navbar-ex1-collapse">
 
             <div class="collapse navbar-collapse navbar-ex1-collapse">
 
-                <ul class="nav navbar-nav side-nav">
 
-                    <li class="active">
 
-                    {% block list %}{% endblock list %}
 
+              <ul class="nav navbar-nav side-nav">
 
+                <li>
 
+                  <a href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i> Map</a>
 
+                </li>
 
+                    <li>
 
+                      <a href="javascript:;" data-toggle="collapse" data-target="#panos"><i class="fa fa-fw fa-arrows-v"></i> Panoramas<i class="fa fa-fw fa-caret-down"></i></a>
 
+                      <ul id="panos" class="collapse">
 
+                        {% for pano in panoramas %}
 
+                        <li><a href="{% url 'panorama:view_pano' pano.id %}"><i class="fa fa-fw fa-eye"></i> {{ pano.name }}</a></li>
 
+                        {% endfor %}
 
+                      </ul>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
 
-                        <!--<a href="{% url 'panorama:new' %}"><i class="fa fa-fw fa-bar-chart-o"></i> Add new panorama</a>-->
 
-                        <a href="javascript:;" data-toggle="collapse" data-target="#new"><i class="fa fa-fw fa-arrows-v"></i> Locate a point<i class="fa fa-fw fa-caret-down"></i></a>
 
-                        <ul id="new" class="collapse">
 
+                        <a href="javascript:;" data-toggle="collapse" data-target="#locate-existing"><i class="fa fa-fw fa-arrows-v"></i> Locate existing point<i class="fa fa-fw fa-caret-down"></i></a>
 
+                        <ul id="locate-existing" class="collapse">
 
                             <li>
 
                             <li>
 
                                 <form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
                                 <form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
                                   {{ refpoints_form.as_p }}
 
                                   {{ refpoints_form.as_p }}
 
                                   <input type="submit" value="Locate" />
 
                                   <input type="submit" value="Locate" />
 
                                 </form>
 
                                 </form>
 
-                                <p><strong>OR</strong></p>
 
+                            </li>
 
+                        </ul>
 
+                    </li>
 
+                    <li>
 
+                        <a href="javascript:;" data-toggle="collapse" data-target="#locate-gps"><i class="fa fa-fw fa-arrows-v"></i> Locate GPS point<i class="fa fa-fw fa-caret-down"></i></a>
 
+                        <ul id="locate-gps" class="collapse">
 
+                            <li>
 
                                 <form action="{% url 'panorama:locate_custompoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
                                 <form action="{% url 'panorama:locate_custompoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
                                   {{ custom_point_form.as_p }}
 
                                   {{ custom_point_form.as_p }}
 
                                   <input type="submit" value="Locate" />
 
                                   <input type="submit" value="Locate" />
 
@@ -151,86 +164,14 @@
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
 
-                        <a href="tables.html"><i class="fa fa-fw fa-table"></i> Tables</a>
 
-                    </li>
 
-                    <li>
 
-                        <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a>
 
-                    </li>
 
-                    <li>
 
-                        <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
 
-                    </li>
 
-                    <li>
 
-                        <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
 
-                    </li>
 
-
 
-                    <li>
 
-                        <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
 
-                    </li>
 
-                    <li>
 
-                        <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
 
+                      <a href="{% url 'panorama:new' %}"><i class="fa fa-fw fa-edit"></i> Add new panorama</a>
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
             <!-- /.navbar-collapse -->
 
             <!-- /.navbar-collapse -->
 
         </nav>
 
         </nav>
 
         <div id="page-wrapper">
 
         <div id="page-wrapper">
 
-
 
-            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
-            <div id="map" style="height: 400px; "></div>
 
-            <style>
 
-            body{overflow : scroll;}
 
-            </style>
 
-            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 
-            <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 
-            <script>
 
-              var map;
 
-              var ajaxRequest;
 
-              var plotlist;
 
-              var plotlayers=[];
 
-            
-              function initmap() {
 
-                // set up the map
 
-                map = new L.Map('map');
 
-            
-                // create the tile layer with correct attribution
 
-                var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 
-                var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 
-                var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
 
-                // start the map in Grenoble
 
-                map.setView(new L.LatLng(45.1842, 5.7218),13);
 
-                map.addLayer(osm);
 
-            
-                // Add in a crosshair for the map
 
-                var crosshairIcon = L.icon({
 
-                    iconUrl: 'images/crosshair.png',
 
-                    iconSize:     [20, 20], // size of the icon
 
-                    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
 
-                  });
 
-                crosshair = new L.marker(map.getCenter(), {clickable:false});
 
-                crosshair.addTo(map);
 
-            
-                // Move the crosshair to the center of the map when the user pans
 
-                map.on('move', function(e) {
 
-                    crosshair.setLatLng(map.getCenter());
 
-                  });
 
-            
-                map.on('moveend', function(e) {
 
-                    var lat = map.getCenter().lat;
 
-                    var lng = map.getCenter().lng;
 
-                    $('#id_latitude').val(lat);
 
-                    $('#id_longitude').val(lng);
 
-                    $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
 
-                        function(data) {
 
-                            $('#id_altitude').val(parseInt(data));
 
-                            });
 
-                    });
 
-              }
 
-              initmap();
 
-            </script>
 
-
 
-    {% block content %}{% endblock content %}
 
-    {% block result %}{% endblock result %}
 
-
 
+          {% block content %}{% endblock content %}
 
         </div>
 
         </div>
 
         <!-- /#page-wrapper -->
 
         <!-- /#page-wrapper -->
 
     </div>
 
     </div>

+ 0 - 14
panorama/templates/panorama/list.html
View File 

@@ -1,14 +0,0 @@
 
-{% extends "panorama/base.html" %}
 
-{% load panorama_url %}
 
-{% load distance_filter %}
 
-
 
-{% block list %}
 
-<a href="javascript:;" data-toggle="collapse" data-target="#panos"><i class="fa fa-fw fa-arrows-v"></i>Panoramas<i class="fa fa-fw fa-caret-down"></i></a>
 
-<ul id="panos" class="collapse">
 
-    {% for pano in panoramas %}
 
-    <li>{{ pano.name }} ({{ pano.latitude}}°, {{ pano.longitude }}°, {{ pano.altitude }}m).  Has tiles: {{ pano.has_tiles|yesno }}.
 
-        <a href="{% url 'panorama:view_pano' pano.id %}">View panorama</a>
 
-    </li>
 
-    {% endfor %}
 
-</ul>
 
-{% endblock list %}

+ 16 - 22
panorama/templates/panorama/locate_point.html
View File 

@@ -1,28 +1,22 @@
 
-{% extends "panorama/base.html" %}
 
+{% extends "panorama/main.html" %}
 
 {% load panorama_url %}
 
 {% load panorama_url %}
 
 {% load distance_filter %}
 
 {% load distance_filter %}
 
 
 
 {% block content %}
 
 {% block content %}
 
+  <div id="map" style="height: 400px; "></div>
 
 
 
-{% if panoramas != None %}
 
-
 
-<h2>Result</h2>
 
-<p>Panoramas that see the point
 
-  <strong>{% if point_name %}{{ point_name }}{% else %}{{ point_lat }}°, {{ point_lon }}°{% endif %}</strong>:
 
-</p>
 
-
 
-{% if panoramas|length == 0 %}
 
-<p><strong>No panorama seeing this point!</strong></p>
 
-{% else %}
 
-<p>
 
-<ul>
 
-{% for panorama, distance, bearing, elevation in panoramas %}
 
-<li><a href="{% panorama_url panorama bearing elevation %}">{{ panorama.name }}</a> at {{ distance|distance }} (click to visualise)</li>
 
-{% endfor %}
 
-</ul>
 
-</p>
 
-{% endif %}
 
-
 
-{% endif %}
 
-
 
+  {% if located_panoramas != None %}
 
+    <div id="location-result"></div>
 
+    {% if located_panoramas|length == 0 %}
 
+      <p><strong>No panorama seeing this point!</strong></p>
 
+    {% else %}
 
+      <p>
 
+        <ul>
 
+          {% for panorama, distance, bearing, elevation in located_panoramas %}
 
+            <li><a href="{% panorama_url panorama bearing elevation %}">{{ panorama.name }}</a> at {{ distance|distance }} (click to visualise)</li>
 
+          {% endfor %}
 
+        </ul>
 
+      </p>
 
+    {% endif %}
 
+  {% endif %}
 
 {% endblock content %}
 
 {% endblock content %}

+ 61 - 0
panorama/templates/panorama/main.html
View File 

@@ -0,0 +1,61 @@
 
+{% extends "panorama/base.html" %}
 
+{% load panorama_url %}
 
+{% load distance_filter %}
 
+
 
+{% block content %}
 
+  <div id="map" style="height: 400px;"></div>
 
+{% endblock content %}
 
+
 
+{% block css %}
 
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
+{% endblock css %}
 
+
 
+{% block js %}
 
+<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 
+<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 
+<script>
 
+    var map;
 
+    var ajaxRequest;
 
+    var plotlist;
 
+    var plotlayers=[];
 
+
 
+    function initmap() {
 
+        // set up the map
 
+        map = new L.Map('map');
 
+
 
+        // create the tile layer with correct attribution
 
+        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 
+        var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 
+        var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
 
+        // start the map in Grenoble
 
+        map.setView(new L.LatLng(45.1842, 5.7218),13);
 
+        map.addLayer(osm);
 
+
 
+        // Add in a crosshair for the map
 
+        var crosshairIcon = L.icon({
 
+            iconUrl: 'images/crosshair.png',
 
+            iconSize:     [20, 20], // size of the icon
 
+            iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
 
+        });
 
+        crosshair = new L.marker(map.getCenter(), {clickable:false});
 
+        crosshair.addTo(map);
 
+
 
+        // Move the crosshair to the center of the map when the user pans
 
+        map.on('move', function(e) {
 
+            crosshair.setLatLng(map.getCenter());
 
+        });
 
+
 
+        map.on('moveend', function(e) {
 
+            var lat = map.getCenter().lat;
 
+            var lng = map.getCenter().lng;
 
+            $('#id_latitude').val(lat);
 
+            $('#id_longitude').val(lng);
 
+            $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
 
+                function(data) {
 
+                    $('#id_altitude').val(parseInt(data));
 
+                });
 
+        });
 
+    }
 
+    initmap();
 
+</script>
 
+{% endblock js %}

+ 4 - 5
panorama/urls.py
View File 

@@ -3,14 +3,13 @@ from __future__ import unicode_literals
 
 
 
 from django.conf.urls import include, url
 
 from django.conf.urls import include, url
 
 
 
-from .views import PanoramaUpload, PanoramaView, PanoramaList, PanoramaGenTiles, LocatePointView, LocateReferencePointView, LocateCustomPointView
 
+from .views import MainView, PanoramaUpload, PanoramaView, PanoramaGenTiles, LocateReferencePointView, LocateCustomPointView
 
 
 
 
 
 urlpatterns = [
 
 urlpatterns = [
 
-    url(r'^$', PanoramaList.as_view(), name="list"),
 
-    url(r'^locate/$', LocatePointView.as_view(), name="locate"),
 
-    url(r'^locate/refpoint/$', LocateReferencePointView.as_view(), name="locate_refpoint"),
 
-    url(r'^locate/custompoint/$', LocateCustomPointView.as_view(), name="locate_custompoint"),
 
+    url(r'^$', MainView.as_view(), name="main"),
 
+    url(r'^locate_refpoint/$', LocateReferencePointView.as_view(), name="locate_refpoint"),
 
+    url(r'^locate_custompoint/$', LocateCustomPointView.as_view(), name="locate_custompoint"),
 
     url(r'^pano/new/$', PanoramaUpload.as_view(), name="new"),
 
     url(r'^pano/new/$', PanoramaUpload.as_view(), name="new"),
 
     url(r'^pano/view/(?P<pk>\d+)/$', PanoramaView.as_view(), name="view_pano"),
 
     url(r'^pano/view/(?P<pk>\d+)/$', PanoramaView.as_view(), name="view_pano"),
 
     url(r'^pano/gen_tiles/(?P<pk>\d+)/$', PanoramaGenTiles.as_view(), name="gen_tiles"),
 
     url(r'^pano/gen_tiles/(?P<pk>\d+)/$', PanoramaGenTiles.as_view(), name="gen_tiles"),

+ 15 - 28
panorama/views.py
View File 

@@ -52,27 +52,14 @@ class PanoramaGenTiles(CelutzLoginMixin, RedirectView):
 
         return super(PanoramaGenTiles, self).get_redirect_url(*args, **kwargs)
 
         return super(PanoramaGenTiles, self).get_redirect_url(*args, **kwargs)
 
 
 
 
 
-class PanoramaList(CelutzLoginMixin, ListView):
 
-    model = Panorama
 
-    template_name = "panorama/list.html"
 
-    context_object_name = "panoramas"
 
+class MainView(CelutzLoginMixin, TemplateView):
 
+    template_name = "panorama/main.html"
 
 
 
     def get_context_data(self, **kwargs):
 
     def get_context_data(self, **kwargs):
 
-        context = super(PanoramaList, self).get_context_data(**kwargs)
 
-        context['refpoints_form'] = SelectReferencePointForm
 
-        context['custom_point_form'] = CustomPointForm
 
-        return context
 
-
 
-
 
-class LocatePointView(CelutzLoginMixin, TemplateView):
 
-    """View to choose a point to locate (either an existing reference point,
 
-    or from GPS coordinates)"""
 
-    template_name = 'panorama/locate_point.html'
 
-
 
-    def get_context_data(self, **kwargs):
 
-        context = super(LocatePointView, self).get_context_data(**kwargs)
 
+        context = super(MainView, self).get_context_data(**kwargs)
 
         context['refpoints_form'] = SelectReferencePointForm
 
         context['refpoints_form'] = SelectReferencePointForm
 
         context['custom_point_form'] = CustomPointForm
 
         context['custom_point_form'] = CustomPointForm
 
+        context['panoramas'] = Panorama.objects.all()
 
         return context
 
         return context
 
 
 
     def compute_interesting_panoramas(self, point):
 
     def compute_interesting_panoramas(self, point):
 
@@ -90,30 +77,30 @@ class LocatePointView(CelutzLoginMixin, TemplateView):
 
         return sorted(l, key=lambda x: x[1])
 
         return sorted(l, key=lambda x: x[1])
 
 
 
 
 
-class LocateReferencePointView(LocatePointView):
 
-    """Subclass that handles locating a reference point"""
 
+class LocateReferencePointView(MainView):
 
+    """Displays a located reference point"""
 
+    template_name = 'panorama/locate_point.html'
 
 
 
     def post(self, request, *args, **kwargs):
 
     def post(self, request, *args, **kwargs):
 
         context = self.get_context_data()
 
         context = self.get_context_data()
 
         form = SelectReferencePointForm(request.POST)
 
         form = SelectReferencePointForm(request.POST)
 
-        context['refpoints_form'] = form
 
         if form.is_valid():
 
         if form.is_valid():
 
             point = form.cleaned_data['reference_point']
 
             point = form.cleaned_data['reference_point']
 
-            context['panoramas'] = self.compute_interesting_panoramas(point)
 
-            context['point_name'] = point.name
 
+            context['located_panoramas'] = self.compute_interesting_panoramas(point)
 
+            context['located_point_name'] = point.name
 
         return super(LocateReferencePointView, self).render_to_response(context)
 
         return super(LocateReferencePointView, self).render_to_response(context)
 
 
 
 
 
-class LocateCustomPointView(LocatePointView):
 
-    """Subclass that handles locating a custom point"""
 
+class LocateCustomPointView(MainView):
 
+    """Displays a located custom GPS point"""
 
+    template_name = 'panorama/locate_point.html'
 
 
 
     def post(self, request, *args, **kwargs):
 
     def post(self, request, *args, **kwargs):
 
         context = self.get_context_data()
 
         context = self.get_context_data()
 
         form = CustomPointForm(request.POST)
 
         form = CustomPointForm(request.POST)
 
-        context['custom_point_form'] = form
 
         if form.is_valid():
 
         if form.is_valid():
 
             point = Point(**form.cleaned_data)
 
             point = Point(**form.cleaned_data)
 
-            context['panoramas'] = self.compute_interesting_panoramas(point)
 
-            context['point_lat'] = point.latitude
 
-            context['point_lon'] = point.longitude
 
+            context['located_panoramas'] = self.compute_interesting_panoramas(point)
 
+            context['located_point_lat'] = point.latitude
 
+            context['located_point_lon'] = point.longitude
 
         return super(LocateCustomPointView, self).render_to_response(context)
 
         return super(LocateCustomPointView, self).render_to_response(context)