séparations des parties de html pour rendre modulable

panorama/templates/panorama/base.html

@@ -33,197 +33,21 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand" href="{% url 'panorama:main' %}">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>
-                  <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>
-                        <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>
-                                <form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
-                                  {{ refpoints_form.as_p }}
-                                  <input type="submit" value="Locate" />
-                                </form>
-                            </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 %}
-                                  {{ custom_point_form.as_p }}
-                                  <input type="submit" value="Locate" />
-                                </form>
-                            </li>
-                        </ul>
-                    </li>
-                    <li>
-                      <a href="{% url 'panorama:new' %}"><i class="fa fa-fw fa-edit"></i> Add new panorama</a>
-                    </li>
-                </ul>
+                {% block top-menu-title %}
+                {% endblock top-menu-title %}
             </div>
+            {% block top-menu-items %}
+            {% endblock top-menu-items %}
+            {% block sidebar %}
+            {% endblock sidebar %}
             <!-- /.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: 500px; "></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 %}
         </div>
         <!-- /#page-wrapper -->
@@ -232,6 +56,8 @@
 
     {% block js %}{% endblock js %}
 
+{% block pano %}{% endblock pano %}
+
     <script src="{% static "panorama/js/jquery.js" %}"></script>
     <script src="{% static "panorama/js/bootstrap.min.js" %}"></script>
 

panorama/templates/panorama/locate_point.html

@@ -3,7 +3,6 @@
 {% load distance_filter %}
 
 {% block content %}
-  <div id="map" style="height: 400px; "></div>
 
   {% if located_panoramas != None %}
     <div id="location-result"></div>

panorama/templates/panorama/main.html

@@ -2,8 +2,34 @@
 {% load panorama_url %}
 {% load distance_filter %}
 
+{% block top-menu-title %} 
+    <a class="navbar-brand" href="{% url 'panorama:main' %}">Celutz</a> 
+{% endblock %}
+
+{% block 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-info"></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>
+{% endblock %}
+
+{% block sidebar %}
+  {% include "panorama/sidebar.html" %}
+{% endblock %}
+
 {% block content %}
   <div id="map" style="height: 400px;"></div>
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
+      <style>
+      body{overflow : scroll;}
+      </style>
 {% endblock content %}
 
 {% block css %}

panorama/templates/panorama/new.html

@@ -1,4 +1,6 @@
 {% extends "panorama/base.html" %}
+{% load panorama_url %}
+{% load distance_filter %}
 
 {% block content %}
 <form action="" enctype="multipart/form-data" method="post">{% csrf_token %}

panorama/templates/panorama/view.html

@@ -1,7 +1,70 @@
+{% extends "panorama/base.html" %}
 {% load staticfiles %}
 
 {% block title %}{{ panorama.name }}{% endblock title %}
 
+{% block top-menu-title %}
+    <a class="navbar-brand" href="">{{panorama.name}}</a>
+{% endblock %}
+
+{% block 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-info"></i>  Controls<b class="caret"></b></a>
+        <ul class="dropdown-menu">
+            <li>
+                <fieldset id="control"><legend>contrôle</legend>
+                  <label>Zoom : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
+                  <label>Cap : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
+                  <label>Élévation : <input type="number" min="-90" max="90" step="1" value="0" autofocus="" id="elvtn_ctrl"/></label>
+                </fieldset>
+            </li>
+        </ul>
+    </li>
+    <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  Params<b class="caret"></b></a>
+        <ul class="dropdown-menu">
+            <li>
+                <div id="params">
+                  <p>latitude :   <em><span id="pos_lat">{{ panorama.latitude }}</span>°</em></p>
+                  <p>longitude : <em><span id="pos_lon">{{ panorama.longitude }}</span>°</em></p>
+                  <p>altitude : <em><span id="pos_alt">{{ panorama.altitude }}</span> m</em></p>
+                </div>
+            </li>
+        </ul>
+    </li>
+    <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  Localiser<b class="caret"></b></a>
+        <ul class="dropdown-menu">
+            <li>
+                <fieldset id="control"><legend>Localiser un point</legend>
+                  <label class="form_col" title="La latitude ϵ [-90°, 90°]. Ex: 12.55257">Latitude :
+                    <input  name="loca_latitude" type="number" min="-90" max="90"  id="loca_latitude"/></label>
+                  <label class="form_col" title="La longitude ϵ [-180°, 180°]. Ex: 144.14723">Longitude :
+                    <input name="loca_longitude" type="number" min="-180" max="180" id="loca_longitude"/></label>
+                  <label class="form_col" title="L'altitude positive Ex: 170">Altitude :
+                    <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
+                  <div class="answer">
+                    <input type="button" value="Localiser" id="loca_button"/>
+                    <input type="button" value="Effacer" id="loca_erase"/>
+                  </div>
+                </fieldset><p id="info"></p>
+            </li>
+        </ul>
+    </li>
+    <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></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>
+{% endblock %}
+
+
 {% block js %}
     <script>
       var title = "{{ panorama.name|escapejs }}";
@@ -76,39 +139,18 @@
 {% endblock js %}
 
 {% block css %}
+    <link rel="stylesheet" media="screen" href="{% static "panorama/css/bootstrap.css" %}" />
     <link rel="stylesheet" media="screen" href="{% static "panorama/css/map.css" %}" />
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 {% endblock css %}
 
 {% block content %}
+{% endblock content %}
+
+{% block pano %}
     <canvas id="mon-canvas">
       Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
     </canvas>
-
-    <fieldset id="control"><legend>contrôle</legend>
-      <label>Zoom : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
-      <label>Cap : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
-      <label>Élévation : <input type="number" min="-90" max="90" step="1" value="0" autofocus="" id="elvtn_ctrl"/></label>
-    </fieldset>
-
-    <div id="params">
-      <p>latitude :   <em><span id="pos_lat">{{ panorama.latitude }}</span>°</em></p>
-      <p>longitude : <em><span id="pos_lon">{{ panorama.longitude }}</span>°</em></p>
-      <p>altitude : <em><span id="pos_alt">{{ panorama.altitude }}</span> m</em></p>
-    </div>
-    <img src="{% static "panorama/img/locapoint.svg" %}" id="loca_show" alt="localiser un point" title="pour localiser un point..."/>
-    <fieldset id="locadraw"><legend id="loca_hide">Localiser un point</legend>
-      <label class="form_col" title="La latitude ϵ [-90°, 90°]. Ex: 12.55257">Latitude :
-        <input  name="loca_latitude" type="number" min="-90" max="90"  id="loca_latitude"/></label>
-      <label class="form_col" title="La longitude ϵ [-180°, 180°]. Ex: 144.14723">Longitude :
-        <input name="loca_longitude" type="number" min="-180" max="180" id="loca_longitude"/></label>
-      <label class="form_col" title="L'altitude positive Ex: 170">Altitude :
-        <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
-      <div class="answer">
-        <input type="button" value="Localiser" id="loca_button"/>
-        <input type="button" value="Effacer" id="loca_erase"/>
-      </div>
-    </fieldset><p id="info"></p>
     <p id="insert"><select id="sel_point" name="known_points">
         {% for id, refpoint in panorama.refpoints_data %}
         <option>{{ refpoint.name }}</option>
@@ -119,6 +161,7 @@
       <input type="button" id="do-cancel" value="annuler"/>
     </p>
     <p id="res"></p>
-
     <div id="mapid"></div>
-{% endblock content %}
+
+{% endblock pano %}
+