tracman-server/views/trac.html

{% extends 'templates/base.html' %}
{% block title %}Tracman | {{ tracuser.name }}{% endblock %}

{% block main %}

	<link href="/static/css/trac.css" rel="stylesheet">	
	<style>
		.wrap { top:{% if not noHeader %}58{% else %}0{% endif %}px;}
		{% if tracuser.settings.showStreetview %}
		#map, #pano {display:inline-block;}
		@media (orientation: landscape) {
			#map, #pano {
				width:50%;
				height:99%;
			}
			#pano {float:right;}
		}
		@media (orientation: portrait) {
			#map, #pano {
				width:100%;
				height:50%;
			}
			#pano {bottom:0}
		}
		{% else %}
		#map {
			width:100%;
			height:100%;}
		#pano {display:none;}
		{% endif %}
	</style>

	{% if not noHeader %}
		{% include 'templates/header.html' %}
	{% endif %}

	<div class='wrap'>
		
		{% if not tracuser.last.time %}
		<div class='centered alert alert-warning'>
			<strong>No Location Found</strong>
			<br>This user hasn't updated their location yet!
			<br>If this is your page, maybe you want to <a href="/android">download the app</a>.  
		</div>
		{% else %}
			<div id='map'><i class='loading fa fa-refresh fa-spin'></i></div>
			{% if tracuser.settings.showStreetview %}
			<div id='pano'><i class='loading fa fa-refresh fa-spin'></i></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 }}';

		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, pano, dir, lat, lon, spd, alt, newLocation, elevator;
		function initMap() {
			map = new google.maps.Map(document.getElementById('map'),{
				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({
				map: map,
				draggable: false
			});
			if (settings.showStreetview) {
				pano = new google.maps.StreetViewPanorama( document.getElementById('pano'), {
					panControl: false,
					zoomControl: false,
					addressControl: false,
					linksControl: false
				});
			}

			// Create iFrame logo
			if (noHeader) {
				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 = '';
				speedLabel.innerHTML = 'SPEED';
				if (last.spd) {
					speedText.innerHTML = (settings.units=='imperial')?
					(parseFloat(last.spd)*2.23694).toFixed():last.spd;
				}
				if (settings.units=='imperial') {
					speedUnit.innerHTML = 'm.p.h.';
				} else {
					speedUnit.innerHTML = '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) {
				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';
				if (last.lon && settings.showAlt) {
					newLocation = new google.maps.LatLng(last.lat, last.lon);
					getAltitude(newLocation, elevator, function(alt) {
						if (alt) {
							alt = (settings.units=='imperial')?alt*3.28084:alt;
							altitudeText.innerHTML = alt.toFixed();
						}
					});
				}
				if (settings.units=='imperial') {
					altitudeUnit.innerHTML = 'feet above sea level';
				} else {
					altitudeUnit.innerHTML = 'meters above sea level';}
				altitudeSign.appendChild(altitudeLabel);
				altitudeSign.appendChild(altitudeText);
				altitudeSign.appendChild(altitudeUnit);
				map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign);
			}
		}

		socket.on('connect', function(){
			socket.emit('room', tracuserid);
		});

		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);
			$('.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 = (settings.units=='imperial')?alt*3.28084:alt;
						$('.alt').text(alt.toFixed());
					}
				});
			}

			map.setCenter(newLocation);
			marker.setPosition(newLocation);
			if (settings.showStreetview) {
				if (pano.position != newLocation) {
					pano.setPosition(newLocation);
					if (spd>0) {
						pano.setPov({pitch:0,heading:dir});
					}
				}
			}
			
		});

	</script>

{% endblock %}