|
|
@@ -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>
|
|
|
|
|
|
@@ -26,3 +237,18 @@
|
|
|
<h2>Documentation</h2>
|
|
|
|
|
|
<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 %}
|
