220 lines
7.8 KiB
HTML
220 lines
7.8 KiB
HTML
{% extends 'templates/base.html' %}
|
|
{% block title %}{{ super() }} | {{ tracuser.name }}{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<link href="/static/css/trac.css" rel="stylesheet">
|
|
<style>
|
|
.wrap { top:{% if not noHeader %}58{% else %}0{% endif %}px;}
|
|
img#panoImg { width:100%; height:100%; }
|
|
|
|
{% if tracuser.settings.showStreetview and disp!='0' and disp!='1' %}
|
|
/* show both */
|
|
@media (orientation: landscape) {
|
|
#map, #pano {
|
|
display:inline-block;
|
|
width:50%;
|
|
height:99%;
|
|
}
|
|
#pano { float:right; }
|
|
}
|
|
@media (orientation: portrait) {
|
|
#map, #pano {
|
|
width:100%;
|
|
height:50%;
|
|
}
|
|
#pano { bottom:0; }
|
|
}
|
|
{% elif tracuser.settings.showStreetview and disp=='1' %}
|
|
/* show streetview */
|
|
#pano {
|
|
width:100%;
|
|
height:100%;}
|
|
#map {display:none;}
|
|
{% else %}
|
|
/* show map */
|
|
#map {
|
|
width:100%;
|
|
height:100%;}
|
|
#pano {display:none;}
|
|
{% endif %}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class='wrap'>
|
|
|
|
{% if not tracuser.last.time %}
|
|
<div class='centered alert alert-warning'>
|
|
<b>No Location Found</b>
|
|
{% if user.id == tracuser.id %}
|
|
<br>You can <a href="#" onclick="setLocation()">click here to set use this device's location</a>.
|
|
<br>Maybe you also want to <a href="/android">download the android app</a>.
|
|
{% else %}
|
|
<br>This user hasn't updated their location yet!
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<div id='map'><i class='loading fa fa-refresh fa-spin'></i></div>
|
|
{% if tracuser.settings.showStreetview and not noStreetview.length %}
|
|
<div id='pano'><img id='panoImg' src="https://maps.googleapis.com/maps/api/streetview?size=800x800&location={{ tracuser.last.lat }},{{ tracuser.last.lon }}&fov=90&heading={{ tracuser.last.dir|default(0) }}&key={{ api }}" alt="Street view image"></div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key={{ api }}&callback=initMap" async defer></script>
|
|
<script>
|
|
var socket = io.connect();
|
|
var tracuserid = {{ tracuser._id | dump | safe }},
|
|
settings = JSON.parse('{{ tracuser.settings | dump | safe }}'),
|
|
last = JSON.parse('{{ tracuser.last | dump | safe }}'),
|
|
noHeader = {{ noHeader | dump | safe }},
|
|
disp = {{ disp | dump | safe }};
|
|
|
|
// Set location manually
|
|
function setLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(pos){
|
|
socket.emit('app', {
|
|
usr: '{{ user.id }}',
|
|
lat: pos.coords.latitude,
|
|
lon: pos.coords.longitude,
|
|
spd: (pos.coords.speed||0)
|
|
});
|
|
alert('Location updated! ');
|
|
}, function(err){
|
|
alert('ERROR: '+err);
|
|
}, { enableHighAccuracy:true });
|
|
} else { alert('Unable to set location. '); }
|
|
}
|
|
|
|
var getAltitude = function(location, elevator, cb){
|
|
elevator = elevator || new google.maps.ElevationService;
|
|
elevator.getElevationForLocations({
|
|
'locations': [location]
|
|
}, function(results, status) {
|
|
if (status === google.maps.ElevationStatus.OK && results[0]) {
|
|
cb(results[0].elevation);
|
|
}
|
|
});
|
|
}
|
|
|
|
var map, marker, elevator;
|
|
function initMap() {
|
|
// Create map
|
|
if (disp!='1' || !settings.showStreetview) {
|
|
map = new google.maps.Map( document.getElementById('map'), {
|
|
center: new google.maps.LatLng( last.lat, last.lon ),
|
|
panControl: false,
|
|
draggable: false,
|
|
zoom: settings.defaultZoom,
|
|
streetViewControl: false,
|
|
zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
|
|
mapTypeId: (settings.defaultMap=='road')?google.maps.MapTypeId.ROADMAP:google.maps.MapTypeId.HYBRID
|
|
});
|
|
marker = new google.maps.Marker({
|
|
position: { lat:last.lat, lng:last.lon },
|
|
title: {{ tracuser.name | dump | safe }},
|
|
map: map,
|
|
draggable: false
|
|
});
|
|
|
|
// Create iFrame logo
|
|
if (noHeader.length) {
|
|
var logoDiv = document.createElement('div');
|
|
logoDiv.className = 'map-logo';
|
|
logoDiv.innerHTML = '<a href="https://tracman.org/">'+
|
|
'<img src="https://tracman.org/static/img/style/logo-28.png" alt="[]">'+
|
|
'Tracman</a>';
|
|
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);
|
|
}
|
|
|
|
// Create update time block
|
|
var timeDiv = document.createElement('div');
|
|
timeDiv.className = 'tim';
|
|
if (last.time) {
|
|
timeDiv.innerHTML = 'location updated '+new Date(last.time).toLocaleString();
|
|
}
|
|
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(timeDiv);
|
|
|
|
// Create speed block
|
|
if (settings.showSpeed) {
|
|
var speedSign = document.createElement('div'),
|
|
speedLabel = document.createElement('div'),
|
|
speedText = document.createElement('div'),
|
|
speedUnit = document.createElement('div');
|
|
speedLabel.className = 'spd-label';
|
|
speedText.className = 'spd';
|
|
speedUnit.className = 'spd-unit';
|
|
speedSign.className = 'spd-sign';
|
|
speedText.innerHTML = (settings.units=='imperial')?(parseFloat(last.spd)*2.23694).toFixed():last.spd.toFixed();
|
|
speedLabel.innerHTML = 'SPEED';
|
|
speedUnit.innerHTML = (settings.units=='imperial')?'m.p.h.':'k.p.h.';
|
|
speedSign.appendChild(speedLabel);
|
|
speedSign.appendChild(speedText);
|
|
speedSign.appendChild(speedUnit);
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(speedSign);
|
|
}
|
|
|
|
// Create altitude block
|
|
if (settings.showAlt) {
|
|
var elevator = new google.maps.ElevationService;
|
|
var altitudeSign = document.createElement('div'),
|
|
altitudeLabel = document.createElement('div'),
|
|
altitudeText = document.createElement('div'),
|
|
altitudeUnit = document.createElement('div');
|
|
altitudeLabel.className = 'alt-label';
|
|
altitudeText.className = 'alt';
|
|
altitudeUnit.className = 'alt-unit';
|
|
altitudeSign.className = 'alt-sign';
|
|
altitudeText.innerHTML = '';
|
|
altitudeLabel.innerHTML = 'ALTITUDE';
|
|
getAltitude(new google.maps.LatLng(last.lat,last.lon), elevator, function(alt) {
|
|
if (alt) { altitudeText.innerHTML = (settings.units=='imperial')?(alt*3.28084).toFixed():alt.toFixed(); }
|
|
});
|
|
altitudeUnit.innerHTML = (settings.units=='imperial')?'feet above sea level':'meters above sea level';
|
|
altitudeSign.appendChild(altitudeLabel);
|
|
altitudeSign.appendChild(altitudeText);
|
|
altitudeSign.appendChild(altitudeUnit);
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign);
|
|
}
|
|
}
|
|
|
|
// Create streetview
|
|
if (settings.showStreetview && disp!='0') {
|
|
document.getElementById('panoImg').src='https://maps.googleapis.com/maps/api/streetview?size='+$('#pano').outerWidth()+'x'+$('#pano').outerHeight()+'&location='+last.lat+','+last.lon+'&fov=90&heading='+(last.dir||0)+'&key={{ api }}';
|
|
}
|
|
|
|
}
|
|
|
|
// Sockets
|
|
socket.on('connect', function(){
|
|
socket.emit('room', tracuserid);
|
|
});
|
|
var dir, lat, lon, spd, alt, newLocation;
|
|
socket.on('trac', function(loc){
|
|
spd = (settings.units=='imperial')?parseFloat(loc.spd)*2.23694:parseFloat(loc.spd);
|
|
dir = parseFloat(loc.dir);
|
|
lat = parseFloat(loc.lat);
|
|
lon = parseFloat(loc.lon);
|
|
newLocation = new google.maps.LatLng(loc.lat,loc.lon)
|
|
if (disp!='1' || !settings.showStreetview) {
|
|
$('.tim').text('location updated '+new Date(loc.time).toLocaleString());
|
|
if (settings.showSpeed) { $('.spd').text(spd.toFixed()); }
|
|
if (settings.showAlt) {
|
|
getAltitude(newLocation, elevator, function(alt) {
|
|
if (alt) { $('.alt').text((settings.units=='imperial')?(alt*3.28084).toFixed():alt.toFixed()); }
|
|
});
|
|
}
|
|
map.setCenter(newLocation);
|
|
marker.setPosition(newLocation);
|
|
}
|
|
if (settings.showStreetview && disp!='0') {
|
|
document.getElementById('panoImg').src='https://maps.googleapis.com/maps/api/streetview?size='+$('#pano').width()+'x'+$('#pano').height()+'&location='+loc.lat+','+loc.lon+'&fov=90&heading='+dir+'&key={{ api }}';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|