Home Explore Help
Sign In
zopieux
/
celutz
forked from FFDN/celutz
1
0
Fork 0
Files
Browse Source

essais d'affichage sur page unique

julpec 8 years ago
parent
fdc5fab1d1
commit
08d763137f
3 changed files with 257 additions and 13 deletions
Unified View Show Diff Stats
  1. 13 1
      panorama/templates/panorama/base.html
  2. 238 12
      panorama/templates/panorama/list.html
  3. 6 0
      panorama/views.py

+ 13 - 1
panorama/templates/panorama/base.html
View File 

@@ -6,9 +6,17 @@
 
   <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 %}{% 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" %}"/>
 
-    <link rel="stylesheet" media="screen" href="{% static "panorama/css/base.css" %}" />
 
+
 
+    <link href="{% static "panorama/css/bootstrap.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/css/sb-admin.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/css/plugins/morris.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
 
     {% block css %}{% endblock css %}
 
     {% block css %}{% endblock css %}
 
+
 
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
   </head>
 
   </head>
 
 
 
   <body>
 
   <body>
 
@@ -17,5 +25,9 @@
 
     {% block content %}{% endblock content %}
 
     {% block content %}{% endblock content %}
 
 
 
     {% block js %}{% endblock js %}
 
     {% block js %}{% endblock js %}
 
+
 
+    <script src="{% static "panorama/js/jquery.js" %}"></script>
 
+    <script src="{% static "panorama/js/bootstrap.min.js" %}"></script>
 
+
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 238 - 12
panorama/templates/panorama/list.html
View File 

@@ -1,19 +1,230 @@
 
-<h1>Celutz</h1>
 
+{% extends "panorama/base.html" %}
 
+{% load panorama_url %}
 
+{% load distance_filter %}
 
 
 
-<p>Celutz is a tool for managing and referencing panoramic photos.  <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>.</p>
 
+{% block content %}
 
+   <div id="wrapper">
 
 
 
-<h2>Panoramas</h2>
 
-<p>
 
-  <ul>
 
-    {% 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>
 
-</p>
 
+        <!-- Navigation -->
 
+        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 
+            <!-- Brand and toggle get grouped for better mobile display -->
 
+            <div class="navbar-header">
 
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
 
+                    <span class="sr-only">Toggle navigation</span>
 
+                    <span class="icon-bar"></span>
 
+                    <span class="icon-bar"></span>
 
+                    <span class="icon-bar"></span>
 
+                </button>
 
+                <a class="navbar-brand" href="index.html">Celutz</a>
 
+            </div>
 
+            <!-- Top Menu Items -->
 
+            <ul class="nav navbar-right top-nav">
 
+                <li class="dropdown">
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
 
+                    <ul class="dropdown-menu message-dropdown">
 
+                        <li class="message-preview">
 
+                            <a href="#">
 
+                                <div class="media">
 
+                                    <span class="pull-left">
 
+                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
 
+                                    </span>
 
+                                    <div class="media-body">
 
+                                        <h5 class="media-heading"><strong>John Smith</strong>
 
+                                        </h5>
 
+                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
 
+                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
 
+                                    </div>
 
+                                </div>
 
+                            </a>
 
+                        </li>
 
+                        <li class="message-preview">
 
+                            <a href="#">
 
+                                <div class="media">
 
+                                    <span class="pull-left">
 
+                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
 
+                                    </span>
 
+                                    <div class="media-body">
 
+                                        <h5 class="media-heading"><strong>John Smith</strong>
 
+                                        </h5>
 
+                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
 
+                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
 
+                                    </div>
 
+                                </div>
 
+                            </a>
 
+                        </li>
 
+                        <li class="message-preview">
 
+                            <a href="#">
 
+                                <div class="media">
 
+                                    <span class="pull-left">
 
+                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
 
+                                    </span>
 
+                                    <div class="media-body">
 
+                                        <h5 class="media-heading"><strong>John Smith</strong>
 
+                                        </h5>
 
+                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
 
+                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
 
+                                    </div>
 
+                                </div>
 
+                            </a>
 
+                        </li>
 
+                        <li class="message-footer">
 
+                            <a href="#">Read All New Messages</a>
 
+                        </li>
 
+                    </ul>
 
+                </li>
 
+                <li class="dropdown">
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
 
+                    <ul class="dropdown-menu alert-dropdown">
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
 
+                        </li>
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
 
+                        </li>
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
 
+                        </li>
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
 
+                        </li>
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
 
+                        </li>
 
+                        <li>
 
+                            <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
 
+                        </li>
 
+                        <li class="divider"></li>
 
+                        <li>
 
+                            <a href="#">View All</a>
 
+                        </li>
 
+                    </ul>
 
+                </li>
 
+                <li class="dropdown">
 
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> À propos<b class="caret"></b></a>
 
+                    <ul class="dropdown-menu">
 
+                        <li>
 
+                           <p>Celutz is a tool for managing and referencing panoramic photos.
 
+                           <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>
 
+                        </li>
 
+                    </ul>
 
+                </li>
 
+            </ul>
 
+            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
 
+            <div class="collapse navbar-collapse navbar-ex1-collapse">
 
+                <ul class="nav navbar-nav side-nav">
 
+                    <li class="active">
 
+                        <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>
 
+                    </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> Add new panorama<i class="fa fa-fw fa-caret-down"></i></a>
 
+                        <ul id="new" class="collapse">
 
+                            <li>
 
+                                <form action="" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+                                  {{ form.as_p }}
 
+                                  <input type="submit" value="Submit" />
 
+                                </form>
 
+                            </li>
 
+                        </ul>
 
+                    </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>
 
 
 
-<h2>New panorama</h2>
 
+                    <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>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+            <!-- /.navbar-collapse -->
 
+        </nav>
 
+
 
+        <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>
 
+<form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+  {{ refpoints_form.as_p }}
 
+  <input type="submit" value="Locate" />
 
+</form>
 
+
 
+<p><strong>OR</strong></p>
 
+
 
+<form action="{% url 'panorama:locate_custompoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+  {{ custom_point_form.as_p }}
 
+  <input type="submit" value="Locate" />
 
+</form>
 
 
 
-<p><a href="{% url 'panorama:new' %}">Add new panorama</a></p>
 
 
 
 <h2>Locate a point</h2>
 
 <h2>Locate a point</h2>
 
 
 
@@ -26,3 +237,18 @@
 
 <h2>Documentation</h2>
 
 <h2>Documentation</h2>
 
 
 
 <p><a href="https://code.ffdn.org/FFDN/celutz/src/master/README.md">Detailed documentation</a>.</p>
 
 <p><a href="https://code.ffdn.org/FFDN/celutz/src/master/README.md">Detailed documentation</a>.</p>
 
+
 
+
 
+        </div>
 
+        <!-- /#page-wrapper -->
 
+
 
+    </div>
 
+    <!-- /#wrapper -->
 
+
 
+
 
+
 
+
 
+{% endblock content %}
 
+
 
+{% block js %}
 
+{% endblock js %}

+ 6 - 0
panorama/views.py
View File 

@@ -57,6 +57,12 @@ class PanoramaList(CelutzLoginMixin, ListView):
 
     template_name = "panorama/list.html"
 
     template_name = "panorama/list.html"
 
     context_object_name = "panoramas"
 
     context_object_name = "panoramas"
 
 
 
+    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):
 
 class LocatePointView(CelutzLoginMixin, TemplateView):
 
     """View to choose a point to locate (either an existing reference point,
 
     """View to choose a point to locate (either an existing reference point,