229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
{% extends 'templates/base.html' %}
|
|
{% block title %}{{super()}} | Dashboard{% endblock %}
|
|
|
|
{% block head %}
|
|
{{super()}}
|
|
<style>
|
|
.sharebuttons .fa {
|
|
text-align: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
padding-top: 8px;
|
|
background: rgba(255,255,255,.2);
|
|
-moz-box-shadow: 2px 2px 4px #000;
|
|
-webkit-box-shadow: 2px 2px 4px #000;
|
|
box-shadow: 2px 2px 4px #000;
|
|
}.sharebuttons .fa:hover {
|
|
background: rgba(255,255,255,.4);
|
|
}.sharebuttons .fa:active {
|
|
-moz-box-shadow: 0;
|
|
-webkit-box-shadow: 0;
|
|
box-shadow: 0;
|
|
}
|
|
.google-play {
|
|
width: 150px;
|
|
border: #fbc93d solid 1px;
|
|
border-radius: 10px; }
|
|
.locate {
|
|
background: #111;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<section class='share dark'>
|
|
<div class='container'>
|
|
<h1>Dashboard</h1>
|
|
<p class='sharebuttons'>
|
|
To view your location, use this link:
|
|
<a href="/trac/{{user.slug}}">https://tracman.org/trac/{{user.slug}}</a>. 
|
|
You can share your map with these buttons: 
|
|
<a href="https://twitter.com/home?status=A%20map%20of%20my%20realtime%20location:%20https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-twitter"></i></a>
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-facebook"></i></a>
|
|
<a href="https://www.reddit.com/submit?title=A%20map%20of%20my%20realtime%20location&url=https://tracman.org/trac/{{user.slug}}" target="_blank"><i class="fa fa-reddit-alien"></i></a>
|
|
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://tracman.org/trac/{{user.slug}}&title=A%20map%20of%20my%20realtime%20location" target="_blank"><i class="fa fa-linkedin"></i></a>
|
|
</p>
|
|
<p>You can also embed a map into your website with this code. Be sure to set the width and height attributes to suit your circumstance. </p>
|
|
<pre><iframe src="https://tracman.org/trac/{{user.slug}}?noheader=1" width="90%" style="height:90vh"></iframe></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='locate dark'>
|
|
<div class='container'>
|
|
<h2>Set location</h2>
|
|
<p>You can set your location to this device's geolocation by clicking the button below. You can also track this device's location by clicking “Start tracking”. Your location will update as long as you keep this window open. For accuracy, try it on your smartphone, but be careful, because it will drain the battery quickly. </p>
|
|
<p class='flexbox'>
|
|
<button id='manual-set' class='btn' style="min-width:40%" onclick="setLocation()"><i class="fa fa-map-marker"></i> Set location</button>
|
|
<button id='tracking' class='btn' style="min-width:40%" onclick="trackLocation()"><i class="fa fa-crosshairs"></i> Start tracking</button>
|
|
</p>
|
|
<h3>Android</h3>
|
|
<p>The android app lets you update your location in the background, and will conserve battery life. Note that it's <a href="https://github.com/Tracman-org/Android/issues" target="_blank">kind of buggy</a> at the moment. </p>
|
|
<p><a href="https://play.google.com/store/apps/details?id=us.keithirwin.tracman&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img class='google-play' alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png" /></a></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='settings dark'>
|
|
<div class='container'>
|
|
<h2>Settings</h2>
|
|
<script src="/static/js/validator.min.js"></script>
|
|
<form id='settings-form' class='col-lg-10 col-lg-offset-1 form-horizontal' data-toggle="validator" role="form" method="post">
|
|
|
|
<div id='name'class='form-group' title="This appears in your page's title. ">
|
|
<label class='control-label col-sm-2 col-lg-3' for="name">Name</label>
|
|
<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
|
|
<input class='form-control' name="name" type="text" value="{{user.name}}"
|
|
maxlength="160" data-error="Invalid input"><br>
|
|
</div>
|
|
<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
|
|
</div>
|
|
|
|
<div id='slug'class='form-group' title="This is the URL which shows your location. Be careful whom you share it with! ">
|
|
<label class='control-label col-sm-2 col-lg-3' for="slug">URL</label>
|
|
<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
|
|
<span class='input-group-addon'>tracman.org/trac/</span>
|
|
<input class='form-control' type="text" name="slug" value="{{user.slug}}" required data-remote="/validate"
|
|
maxlength="160" data-remote-error="That URL is already taken. " data-error="Invalid input"><br>
|
|
</div>
|
|
<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
|
|
</div>
|
|
|
|
<div id='units' class='form-group col-xs-12' title="Select imperial units for feet and miles/hour. Select metric units if you are a commie. ">
|
|
<label class='control-label col-sm-4 col-lg-3' for="units">Units</label>
|
|
<div class='input-group col-sm-8 col-lg-9'>
|
|
<div class='radio-inline'><label>
|
|
<input type="radio" name="units" value="imperial" {% if user.settings.units == 'imperial' %}checked{% endif %}>
|
|
Imperial
|
|
</label></div>
|
|
<div class='radio-inline'><label>
|
|
<input type="radio" name="units" value="metric" {% if user.settings.units == 'metric' %}checked{% endif %}>
|
|
Metric
|
|
</label></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='defaultMap' class='form-group col-xs-12' title="Shows whether to show a satellite image or standard google road map as the default on your page. Visitors will have the option to change this. Note that satellite images load slower. ">
|
|
<label class='control-label col-sm-4 col-lg-3' for="map">Default map</label>
|
|
<div class='input-group col-sm-8 col-lg-9'>
|
|
<div class='radio-inline'><label>
|
|
<input type="radio" name="map" value="road" {% if user.settings.defaultMap == 'road' %}checked{% endif %}>
|
|
Road
|
|
</label></div>
|
|
<div class='radio-inline'><label>
|
|
<input type="radio" name="map" value="sat" {% if user.settings.defaultMap == 'sat' %}checked{% endif %}>
|
|
Satellite
|
|
</label></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='defaultZoom' class='form-group col-xs-12' title="Shows the initial map zoom level on your page. A higher number means more zoom. Note that the size of the viewing window will also have an effect on how much of the map a visitor can see. ">
|
|
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="map">Default zoom</label>
|
|
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
|
<select class='c-select' name="zoom">
|
|
<option {% if user.settings.defaultZoom==1 %}selected {% endif %}value="1">1 World</option>
|
|
<option {% if user.settings.defaultZoom==2 %}selected {% endif %}value="2">2</option>
|
|
<option {% if user.settings.defaultZoom==3 %}selected {% endif %}value="3">3</option>
|
|
<option {% if user.settings.defaultZoom==4 %}selected {% endif %}value="4">4</option>
|
|
<option {% if user.settings.defaultZoom==5 %}selected {% endif %}value="5">5 Landmass</option>
|
|
<option {% if user.settings.defaultZoom==6 %}selected {% endif %}value="6">6</option>
|
|
<option {% if user.settings.defaultZoom==7 %}selected {% endif %}value="7">7</option>
|
|
<option {% if user.settings.defaultZoom==8 %}selected {% endif %}value="8">8</option>
|
|
<option {% if user.settings.defaultZoom==9 %}selected {% endif %}value="9">9</option>
|
|
<option {% if user.settings.defaultZoom==10 %}selected {% endif %}value="10">10 City</option>
|
|
<option {% if user.settings.defaultZoom==11 %}selected {% endif %}value="11">11</option>
|
|
<option {% if user.settings.defaultZoom==12 %}selected {% endif %}value="12">12</option>
|
|
<option {% if user.settings.defaultZoom==13 %}selected {% endif %}value="13">13</option>
|
|
<option {% if user.settings.defaultZoom==14 %}selected {% endif %}value="14">14</option>
|
|
<option {% if user.settings.defaultZoom==15 %}selected {% endif %}value="15">15 Streets</option>
|
|
<option {% if user.settings.defaultZoom==16 %}selected {% endif %}value="16">16</option>
|
|
<option {% if user.settings.defaultZoom==17 %}selected {% endif %}value="17">17</option>
|
|
<option {% if user.settings.defaultZoom==18 %}selected {% endif %}value="18">18</option>
|
|
<option {% if user.settings.defaultZoom==19 %}selected {% endif %}value="19">19</option>
|
|
<option {% if user.settings.defaultZoom==20 %}selected {% endif %}value="20">20 Buildings</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='showSpeed' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a spedometer on the map.">
|
|
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showSpeed">Show speed{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
|
|
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
|
<input class='form-control' name="showSpeed" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showSpeed %}checked{% else %}{% endif %}><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='showAltitude' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows the current elevation on the map. ">
|
|
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showAlt">Show altitude{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
|
|
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
|
<input class='form-control' name="showAlt" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showAlt %}checked{% else %}{% endif %}><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='showStreet' class='form-group col-xs-12' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a Google street view image from your current location, oriented in the direction of travel. This feature is EXPERIMENTAL. ">
|
|
<label class='control-label col-xs-6 col-sm-4 col-lg-3' for="showStreet">Show street view{% if not user.isPro %} <span class='red'>(PRO)</span><br>{% endif %}</label>
|
|
<div class='input-group col-xs-6 col-sm-8 col-lg-9'>
|
|
<input class='form-control' name="showStreet" type="checkbox" {% if not user.isPro %}disabled{% elif user.settings.showStreetview %}checked{% else %}{% endif %}><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='submit' class='form-group col-xs-12 flexbox' style="padding:0 0 60px">
|
|
<input class='btn yellow' style="min-width:50%;" type="submit" value="Save">
|
|
</div>
|
|
</form>
|
|
|
|
{% if not user.isPro %}<p style="clear:both">Want to try <a href="/pro">Tracman Pro</a>? It's free during beta testing. </p>{% endif %}
|
|
<p style="clear:both">Would you like to submit a <a href="/suggestion">suggestion</a> or <a href="/bug">bug report</a>? </p>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
|
|
<script>
|
|
var socket = io.connect();
|
|
socket.on('connect', function(){
|
|
// TODO: Security!
|
|
socket.emit('room', 'app-{{user.id}}');
|
|
});
|
|
|
|
var wpid;
|
|
function trackLocation() {
|
|
if (wpid) { // Stop tracking
|
|
$('#tracking').html('<i class="fa fa-crosshairs"></i> Start tracking');
|
|
navigator.geolocation.clearWatch(wpid);
|
|
wpid = undefined;
|
|
} else { // Start tracking
|
|
$('#tracking').html('<i class="fa fa-crosshairs fa-spin"></i> Stop tracking');
|
|
if (!navigator.geolocation) { alert('Unable to track location. '); }
|
|
else {
|
|
wpid = navigator.geolocation.watchPosition(function(pos) {
|
|
socket.emit('app', {
|
|
usr: '{{user.id}}',
|
|
lat: pos.coords.latitude,
|
|
lon: pos.coords.longitude,
|
|
spd: (pos.coords.speed||0)
|
|
});
|
|
console.log('Sent location:',pos.coords.latitude.toFixed(2)+','+pos.coords.longitude.toFixed(2));
|
|
}, function(err){
|
|
alert('Failed to track: \n'+err);
|
|
}, { enableHighAccuracy:true });
|
|
}
|
|
}
|
|
}
|
|
|
|
function setLocation() {
|
|
if (!navigator.geolocation) { alert('Unable to set location. '); }
|
|
else {
|
|
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 });
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|