Ability to track location from browser
parent
c271fad61a
commit
cd0e8cefe4
|
@ -17,7 +17,7 @@ module.exports = {
|
||||||
if (req.isAuthenticated()) { return next(); }
|
if (req.isAuthenticated()) { return next(); }
|
||||||
else {
|
else {
|
||||||
req.session.returnTo = req.path;
|
req.session.returnTo = req.path;
|
||||||
console.log('mw.ensureAuth: redirect to '+req.path+' after login.');
|
console.log('mw.ensureAuth: Going to redirect to '+req.path+' after login.'); // TODO: Correct next path
|
||||||
req.flash('error', 'You must be signed in to do that. <a href="/login">Click here to log in</a>. ');
|
req.flash('error', 'You must be signed in to do that. <a href="/login">Click here to log in</a>. ');
|
||||||
res.redirect('/');
|
res.redirect('/');
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,15 +6,15 @@
|
||||||
min-width:10px;
|
min-width:10px;
|
||||||
max-width:40px;
|
max-width:40px;
|
||||||
}::-webkit-scrollbar-track {
|
}::-webkit-scrollbar-track {
|
||||||
background-color: #000;
|
background-color: #080808;
|
||||||
}::-webkit-scrollbar-thumb {
|
}::-webkit-scrollbar-thumb {
|
||||||
border-radius: .2vw;
|
border-radius: .2vw;
|
||||||
background: #333;
|
background: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color:#000;
|
background-color: #080808;
|
||||||
color:#eee;
|
color: #eee;
|
||||||
}
|
}
|
||||||
body, input, textarea {
|
body, input, textarea {
|
||||||
padding: 0; margin: 0;
|
padding: 0; margin: 0;
|
||||||
|
@ -37,7 +37,11 @@ pre {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
.dark pre {
|
.dark pre {
|
||||||
color: #777;
|
-moz-box-shadow: 2px 2px 4px #000;
|
||||||
|
-webkit-box-shadow: 2px 2px 4px #000;
|
||||||
|
box-shadow: 2px 2px 4px #000;
|
||||||
|
background-color: rgba(255,255,255,.03);
|
||||||
|
color: #aaa;
|
||||||
padding: 1%;
|
padding: 1%;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
|
@ -160,6 +164,9 @@ section {
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
-moz-box-shadow: 2px 2px 4px #000;
|
||||||
|
-webkit-box-shadow: 2px 2px 4px #000;
|
||||||
|
box-shadow: 2px 2px 4px #000;
|
||||||
}
|
}
|
||||||
.dark .btn {
|
.dark .btn {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -169,6 +176,10 @@ section {
|
||||||
.dark .btn:active:not(.disabled),
|
.dark .btn:active:not(.disabled),
|
||||||
.dark .btn:focus:not(.disabled) {
|
.dark .btn:focus:not(.disabled) {
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.1);
|
||||||
|
}.dark.btn:active:not(.disabled) {
|
||||||
|
-moz-box-shadow: 0;
|
||||||
|
-webkit-box-shadow: 0;
|
||||||
|
box-shadow: 0;
|
||||||
}
|
}
|
||||||
.light .btn {
|
.light .btn {
|
||||||
color: #222;
|
color: #222;
|
||||||
|
|
|
@ -7,6 +7,7 @@ header {
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
header .logo {
|
header .logo {
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
padding: 13px 23px;
|
padding: 13px 23px;
|
||||||
|
|
|
@ -4,30 +4,66 @@
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{super()}}
|
{{super()}}
|
||||||
<style>
|
<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 {
|
.google-play {
|
||||||
width:150px;
|
width: 150px;
|
||||||
border: #fbc93d solid 1px;
|
border: #fbc93d solid 1px;
|
||||||
border-radius:10px; }
|
border-radius: 10px; }
|
||||||
|
.locate {
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<section class='dark'>
|
<section class='share dark'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h1>Welcome{% if user.name %}, {{user.name}}{% endif %}!</h1>
|
<h1>Dashboard</h1>
|
||||||
<p>To view your location, use this link: <a href="/trac/{{ user.slug }}">https://tracman.org/trac/{{user.slug}}</a></p>
|
<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>
|
<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>
|
<pre><iframe src="https://tracman.org/trac/{{user.slug}}?noheader=1" width="90%" style="height:90vh"></iframe></pre>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
</section>
|
||||||
|
|
||||||
|
<section class='locate dark'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h2>App</h2>
|
<h2>Set location</h2>
|
||||||
<p>Click the button below to download the app from the google play store, if you haven't already. </p>
|
<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>
|
<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>
|
||||||
<p>Without the app running, your location won't update. But you can also set your location to this device's geolocation by clicking the button below. </p>
|
</div>
|
||||||
<p><button id='manual-set' class='btn' style="display:block; margin:auto;" onclick="setLocation()"><i class="fa fa-map-marker"></i> Update location manually</button></p>
|
</section>
|
||||||
</div>
|
|
||||||
<br>
|
<section class='settings dark'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h2>Settings</h2>
|
<h2>Settings</h2>
|
||||||
<script src="/static/js/validator.min.js"></script>
|
<script src="/static/js/validator.min.js"></script>
|
||||||
|
@ -108,46 +144,73 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='showSpeed' class='form-group col-xs-12' title="PRO ONLY! Shows a spedometer on the map.">
|
<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>
|
<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'>
|
<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>
|
<input class='form-control' name="showSpeed" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showSpeed %}checked{% else %}{% endif %}><br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='showAltitude' class='form-group col-xs-12' title="PRO ONLY! Shows the current elevation on the map. ">
|
<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>
|
<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'>
|
<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>
|
<input class='form-control' name="showAlt" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showAlt %}checked{% else %}{% endif %}><br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='showStreet' class='form-group col-xs-12' title="PRO ONLY! Shows a Google street view image from your current location, oriented in the direction of travel. This feature is EXPERIMENTAL. ">
|
<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 %} (experimental)</label>
|
<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'>
|
<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>
|
<input class='form-control' name="showStreet" type="checkbox" {% if not user.isPro %}disabled{% elif user.settings.showStreetview %}checked{% else %}{% endif %}><br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='submit' class='form-group col-xs-12' style="margin: 30px 0;">
|
<div id='submit' class='form-group col-xs-12 flexbox' style="padding:0 0 60px">
|
||||||
<input class='btn yellow col-xs-10 col-xs-offset-1 col-sm-offset-2 col-sm-4 col-lg-offset-3 col-lg-6' type="submit" value="Save">
|
<input class='btn yellow' style="min-width:50%;" type="submit" value="Save">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</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 %}
|
{% 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>
|
<p style="clear:both">Would you like to submit a <a href="/suggestion">suggestion</a> or <a href="/bug">bug report</a>? </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
|
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var socket = io.connect();
|
var socket = io.connect();
|
||||||
socket.on('connect', function(){
|
socket.on('connect', function(){
|
||||||
|
// TODO: Security!
|
||||||
socket.emit('room', 'app-{{user.id}}');
|
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() {
|
function setLocation() {
|
||||||
if (navigator.geolocation) {
|
if (!navigator.geolocation) { alert('Unable to set location. '); }
|
||||||
|
else {
|
||||||
navigator.geolocation.getCurrentPosition(function(pos){
|
navigator.geolocation.getCurrentPosition(function(pos){
|
||||||
socket.emit('app', {
|
socket.emit('app', {
|
||||||
usr: '{{user.id}}',
|
usr: '{{user.id}}',
|
||||||
|
@ -156,11 +219,10 @@
|
||||||
spd: (pos.coords.speed||0)
|
spd: (pos.coords.speed||0)
|
||||||
});
|
});
|
||||||
alert('Location updated! ');
|
alert('Location updated! ');
|
||||||
location.reload();
|
|
||||||
}, function(err){
|
}, function(err){
|
||||||
alert('ERROR: '+err);
|
alert('ERROR: '+err);
|
||||||
}, { enableHighAccuracy:true });
|
}, { enableHighAccuracy:true });
|
||||||
} else { alert('Unable to set location. '); }
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<section class='splash dark' id='splash'>
|
<section class='splash dark' id='splash'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h1>Tracman</h1>
|
<h1>Tracman</h1>
|
||||||
<h3>Let friends track your GPS location in realtime</h3>
|
<h3>Display your realtime GPS location on a map</h3>
|
||||||
<a class='btn' href="#" data-scrollto="overview">More info<i class='fa fa-angle-down'></i></a>
|
<a class='btn' href="#" data-scrollto="overview">More info<i class='fa fa-angle-down'></i></a>
|
||||||
{% if not user %}
|
{% if not user %}
|
||||||
<a class='btn' href="#" data-scrollto="get">Request invite<i class='fa fa-angle-down'></i></a>
|
<a class='btn' href="#" data-scrollto="get">Request invite<i class='fa fa-angle-down'></i></a>
|
||||||
|
@ -47,22 +47,22 @@
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<img src="/static/img/style/phone.png" alt="Mobile phone">
|
<img src="/static/img/style/phone.png" alt="Mobile phone">
|
||||||
<div>
|
<div>
|
||||||
<h2>The App</h2>
|
<h2>Setting your location</h2>
|
||||||
<p>Tracman uses an android app to recieve GPS location of your device. Sorry, there's no iPhone version yet. </p>
|
<p>You can track your GPS location from your phone's web browsers. There's also has an android app which can run in the background. With the app, you can: </p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<i class='fa fa-toggle-on'></i>
|
<i class='fa fa-toggle-on'></i>
|
||||||
<h4>On/off switch</h4>
|
<h4>Turn off tracking</h4>
|
||||||
<p>If you need to go undercover, just turn tracman off with the flip of a switch. </p>
|
<p>If you need to go undercover, just turn tracman off with the flip of a switch. </p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<i class='fa fa-cog'></i>
|
<i class='fa fa-cog'></i>
|
||||||
<h4>Settings</h4>
|
<h4>Change settings</h4>
|
||||||
<p>Change your settings to show a less accurate location, if you want an air of mystery. </p>
|
<p>Change your settings to show a less accurate location, if you want an air of mystery. </p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<i class='fa fa-battery-3'></i>
|
<i class='fa fa-battery-3'></i>
|
||||||
<h4>Saves energy</h4>
|
<h4>Save energy</h4>
|
||||||
<p>If nobody's tracking you, tracman won't needlessly drain your battery. </p>
|
<p>If nobody's tracking you, tracman won't needlessly drain your battery. </p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
<li>
|
<li>
|
||||||
<i class='fa fa-cogs'></i>
|
<i class='fa fa-cogs'></i>
|
||||||
<h4>Customizable</h4>
|
<h4>Customizable</h4>
|
||||||
<p>Change the map default type and zoom level. You can also show speed and altitude. </p>
|
<p>Change the map default type and zoom level. You can also show speed, altitude, and streetview. </p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -100,9 +100,9 @@
|
||||||
<section class='disclaimer light' id='disclaimer'>
|
<section class='disclaimer light' id='disclaimer'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h2>Warning! </h2>
|
<h2>Warning! </h2>
|
||||||
<p>This is beta software, so there are still kinks to be worked out… </p>
|
<p>This is beta software, so there are still kinks to be worked out. </p>
|
||||||
<p>Also keep in mind that there are a lot of reasons why publishing your location online could be a bad idea. </p>
|
<p>Also keep in mind that publishing your location online could be a bad idea. </p>
|
||||||
<p>I assume no responsibility whatsoever. </p>
|
<p>I assume no responsibilities. </p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue