Commit ea51bc9d authored by Kroustouris Stauros's avatar Kroustouris Stauros

change h4 to h1 and separate js

parent 2788460f
......@@ -3,7 +3,7 @@
{% block currentpagetitle %}{% trans "Closest Point API" %}{% endblock %}
{% block homepage %}{% endblock %}
{% block hometop %}{% endblock %}
{% block api %}class="active"{% endblock %}
{% block api %}active{% endblock %}
{% block subcontent %}
......
......@@ -3,291 +3,43 @@
{% load staticfiles %}
{% block currentpagetitle %}{% trans "Closest Access Point" %}{% endblock %}
{% block extrajs %}
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script>
<script type="text/javascript">
var lat = "{{MAP_CENTER.0}}";
var lat = parseFloat(lat.replace(",","."));
var lng = "{{MAP_CENTER.1}}";
var lng = parseFloat(lng.replace(",","."));
var zoomLevel = 6;
var latlng = new google.maps.LatLng(lat, lng);
var map = '';
var bounds = '';
var image = '';
var marker = '';
var eduMarker = false;
var infoWindow;
var getOnce = false;
var geocoder = null;
var infoWindow;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var styles = [{
url : '{% static 'img/edugroup.png' %}',
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}, {
url : '{% static 'img/edugroup.png' %}',
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}, {
url : '{% static 'img/edugroup.png' %}',
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}];
function initialize() {
image = new google.maps.MarkerImage('{% static 'img/edupin.png' %}',
new google.maps.Size(29, 40),
new google.maps.Point(0, 0),
new google.maps.Point(14, 40)
);
var styleArray = [{
featureType : "all",
stylers : [{
saturation : -60
}, {
gamma : 1.00
}]
}, {
featureType : "poi.business",
elementType : "labels",
stylers : [{
visibility : "off"
}]
}, {
"featureType" : "transit.line",
"elementType" : "geometry",
"stylers" : [{
"visibility" : "off"
}]
}, {
"featureType" : "poi",
"elementType" : "all",
"stylers" : [{
"visibility" : "off"
}]
}, {
'featureType' : "administrative.country",
'elementType' : "labels",
'stylers' : [{
'visibility' : "off"
}]
}];
var mapOptions = {
center : latlng,
zoom : zoomLevel,
mapTypeId : google.maps.MapTypeId.ROADMAP,
styles : styleArray,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DEFAULT
},
navigationControl : true,
mapTypeControl : false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
infoWindow = new google.maps.InfoWindow();
bounds = new google.maps.LatLngBounds();
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
directionsDisplay.setMap(map);
if (getOnce == false) {
marker = new google.maps.Marker({
position : latlng,
draggable : true,
animation : google.maps.Animation.DROP,
});
marker.setMap(map);
}
google.maps.event.addListener(map, 'idle', function() {
if(navigator.geolocation && getOnce == false) {
navigator.geolocation.getCurrentPosition(getPosition);
}
});
google.maps.event.addListener(map, 'click', function(event) {
moveMarker(event.latLng);
});
google.maps.event.addListener(marker, 'dragend', function(event) {
moveMarker(event.latLng);
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
moveMarker(place.geometry.location);
});
}
function calcRoute(start, end) {
$("#distanceText").html();
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var distText = route.legs[0].distance.text;
$("#distanceText").html('Total distance: ' + distText);
}
});
}
function moveMarker(position) {
marker.setPosition(position);
getClosest(position);
}
function getPosition(position) {
latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
getOnce = true;
map.setCenter(latlng);
map.setZoom(12);
marker.setPosition(latlng);
getClosest(latlng);
}
function getClosest(coords){
$.ajax({
url:"{% url closest %}",
data: {"lat": coords.lat(), "lng": coords.lng()},
type: "GET",
cache: false,
success:function(data){
bounds = new google.maps.LatLngBounds();
if (eduMarker){
eduMarker.setMap(null);
}
bounds.extend(coords);
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
eduMarker = new google.maps.Marker({
position : new google.maps.LatLng(data.lat, data.lng),
draggable : true,
'icon': image,
animation : google.maps.Animation.DROP,
});
eduMarker.setMap(map);
map.fitBounds(bounds);
calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));
google.maps.event
.addListener(
eduMarker,
'click',
function() {
infoWindow.setContent( "<div>"
+ data.text
+ "</div>");
infoWindow
.open(
map,
eduMarker);
});
}
});
}
function autocomplete() {
var input = $('#searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var marker = new google.maps.Marker({
map: map
});
}
function resizeMap()
{
if (map != undefined)
{
google.maps.event.trigger(map, 'resize');
}
return false;
}
$(document).ready(function() {
initialize();
resizeMap();
$("#myloc").click(function(){
navigator.geolocation.getCurrentPosition(getPosition);
return false;
});
$("#mylocm").click(function(){
navigator.geolocation.getCurrentPosition(getPosition);
return false;
});
});
$(window).resize(function(){
resizeMap();
});
</script>
{% endblock %}
{% block bodyclass %}closest{% endblock%}
{% block header %}
<div class="push-top"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/"><img src="{% static 'img/eduroam_logo.png' %}" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="col-sm-3 col-md-3 pull-right">
<div class="input-group" style="margin-top: 8px;">
<span class="input-group-btn">
<button id="mylocm" class="btn btn-default" type="button">My location</button>
</span>
<input type="text" id="searchTextField" class="form-control" placeholder="Search for...">
</div>
</div>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: 18px">
<span id="distanceText"></span>
</div>
</div>
{% block header %}
<div class="push-top"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/"><img src="{% static 'img/eduroam_logo.png' %}" /></a>
</div>
</nav>
<div id="navbar" class="navbar-collapse collapse">
<div class="col-sm-3 col-md-3 pull-right">
<div class="input-group" style="margin-top: 8px;">
<span class="input-group-btn">
<button id="mylocm" class="btn btn-default" type="button">My location</button>
</span>
<input type="text" id="searchTextField" class="form-control" placeholder="Search for...">
</div>
</div>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: 18px">
<span id="distanceText"></span>
</div>
</div>
</div>
</nav>
{% endblock %}
{% block content %}
<div id="map_canvas" style="width:100%"></div>
<div id="map_canvas" data-center-lat="{{ MAP_CENTER.0 }}" data-closest="{% url closest %}"" data-center-lng="{{ MAP_CENTER.1 }}" data-pin="{% static 'img/edupin.png' %}" data-group="{% static 'img/edugroup.png' %}" style="width:100%"></div>
{% endblock %}
{% block extrajs %}
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script>
<script type="text/javascript" src="{% static 'js/geolocate.js' %}"></script>
{% endblock %}
......@@ -3,9 +3,9 @@
{% block currentpagetitle %}{% trans "Management" %}{% endblock %}
{% block homepage %}{% endblock %}
{% block hometop %}{% endblock %}
{% block mgmt %}class="active"{% endblock %}
{% block mgmt %}active{% endblock %}
{% block subcontent %}
<h4>{% trans "Management" %}</h4>
<h1>{% trans "Management" %}</h1>
<hr>
<div class="span6">
<p>{% blocktrans %}The management application provides an interface for administrators of federation member institutions to maintain the data that is necessary for participating in the federation.{% endblocktrans %}</p>
......
......@@ -4,7 +4,7 @@
{% block currentpagetitle %}{% trans "Participants" %}{% endblock %}
{% block homepage %}{% endblock %}
{% block hometop %}{% endblock %}
{% block participants %}class="active"{% endblock %}
{% block participants %}active{% endblock %}
{% block extrahead %}
<style type="text/css">
......
......@@ -4,7 +4,7 @@
{% block currentpagetitle %}World{% endblock %}
{% block homepage %}{% endblock %}
{% block hometop %}{% endblock %}
{% block world %}class="active"{% endblock %}
{% block world %}active{% endblock %}
{% block extrahead %}
<style type="text/css">
......
var lat;
var lng;
var zoomLevel;
var latlng;
var map;
var bounds;
var image;
var marker;
var eduMarker;
var infoWindow;
var getOnce;
var geocoder;
var infoWindow;
var directionDisplay;
var directionsService;
var closestURL;
var styles;
var pinImg;
function initialize() {
image = new google.maps.MarkerImage(pinImg,
new google.maps.Size(29, 40),
new google.maps.Point(0, 0),
new google.maps.Point(14, 40)
);
var styleArray = [{
featureType : "all",
stylers : [{
saturation : -60
}, {
gamma : 1.00
}]
}, {
featureType : "poi.business",
elementType : "labels",
stylers : [{
visibility : "off"
}]
}, {
"featureType" : "transit.line",
"elementType" : "geometry",
"stylers" : [{
"visibility" : "off"
}]
}, {
"featureType" : "poi",
"elementType" : "all",
"stylers" : [{
"visibility" : "off"
}]
}, {
'featureType' : "administrative.country",
'elementType' : "labels",
'stylers' : [{
'visibility' : "off"
}]
}];
var mapOptions = {
center : latlng,
zoom : zoomLevel,
mapTypeId : google.maps.MapTypeId.ROADMAP,
styles : styleArray,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DEFAULT
},
navigationControl : true,
mapTypeControl : false,
};
console.log(mapOptions);
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
infoWindow = new google.maps.InfoWindow();
bounds = new google.maps.LatLngBounds();
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
directionsDisplay.setMap(map);
if (getOnce == false) {
marker = new google.maps.Marker({
position : latlng,
draggable : true,
animation : google.maps.Animation.DROP,
});
marker.setMap(map);
}
google.maps.event.addListener(map, 'idle', function() {
if(navigator.geolocation && getOnce == false) {
navigator.geolocation.getCurrentPosition(getPosition);
}
});
google.maps.event.addListener(map, 'click', function(event) {
moveMarker(event.latLng);
});
google.maps.event.addListener(marker, 'dragend', function(event) {
moveMarker(event.latLng);
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
moveMarker(place.geometry.location);
});
}
function calcRoute(start, end) {
$("#distanceText").html();
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var distText = route.legs[0].distance.text;
$("#distanceText").html('Total distance: ' + distText);
}
});
}
function moveMarker(position) {
marker.setPosition(position);
getClosest(position);
}
function getPosition(position) {
latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
getOnce = true;
map.setCenter(latlng);
map.setZoom(12);
marker.setPosition(latlng);
getClosest(latlng);
}
function getClosest(coords){
$.ajax({
url: closestURL,
data: {"lat": coords.lat(), "lng": coords.lng()},
type: "GET",
cache: false,
success:function(data){
bounds = new google.maps.LatLngBounds();
if (eduMarker){
eduMarker.setMap(null);
}
bounds.extend(coords);
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
eduMarker = new google.maps.Marker({
position : new google.maps.LatLng(data.lat, data.lng),
draggable : true,
'icon': image,
animation : google.maps.Animation.DROP,
});
eduMarker.setMap(map);
map.fitBounds(bounds);
calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));
google.maps.event.addListener(
eduMarker,
'click',
function() {
infoWindow.setContent( "<div>"
+ data.text
+ "</div>"
);
infoWindow.open(
map,
eduMarker
);
});
}
});
}
function autocomplete() {
var input = $('#searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var marker = new google.maps.Marker({
map: map
});
}
function resizeMap()
{
if (map != undefined)
{
google.maps.event.trigger(map, 'resize');
}
return false;
}
$(document).ready(function() {
var mapDiv = $('#map_canvas');
lat = mapDiv.data('center-lat');
lng = mapDiv.data('center-lng');
lat = parseFloat(lat.toString().replace(",","."));
lng = parseFloat(lng.toString().replace(",","."));
var group = mapDiv.data('group');
pinImg = mapDiv.data('pin');
styles = [{
url : group,
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}, {
url : group,
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}, {
url : group,
height : 54,
width : 63,
textColor : '#ffffff',
textSize : 11
}];
closestURL = mapDiv.data('closest'),
zoomLevel = 6;
latlng = new google.maps.LatLng(lat, lng);
map = '';
bounds = '';
image = '';
marker = '';
eduMarker = false;
infoWindow;
getOnce = false;
geocoder = null;
infoWindow;
directionDisplay;
directionsService = new google.maps.DirectionsService();
initialize();
resizeMap();
$("#mylocm").click(function(){
navigator.geolocation.getCurrentPosition(getPosition);
return false;
});
});
$(window).resize(function(){
resizeMap();
});