167 lines
9.7 KiB
HTML
167 lines
9.7 KiB
HTML
{% extends 'templates/base.html' %}
|
|
{% block title %}{{ super() }} | Dashboard{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<style>
|
|
.google-play {
|
|
width:150px;
|
|
border: #fbc93d solid 1px;
|
|
border-radius:10px; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<section class='dark'>
|
|
<div class='container'>
|
|
<h1>Welcome{% if user.name %}, {{ user.name }}{% endif %}!</h1>
|
|
<p>To view your location, use this link: <a href="/trac/{{ user.slug }}">http://tracman.org/trac/{{ user.slug }}</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>
|
|
<br>
|
|
<div class='container'>
|
|
<h2>App</h2>
|
|
<p>Click the button below to download the app from the google play store, if you haven't already. </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>
|
|
<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>
|
|
</div>
|
|
<br>
|
|
<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 class='form-group' id='name' 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 class='form-group' id='slug' 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 class='form-group col-xs-12' id='units' 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 class='form-group col-xs-12' id='defaultMap' 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 class='form-group col-xs-12' id='defaultZoom' 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 class='form-group col-xs-12' id='showSpeed' title="PRO ONLY! 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 class='form-group col-xs-12' id='showAltitude' title="PRO ONLY! 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 class='form-group col-xs-12' id='showStreet' title="PRO ONLY! 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>
|
|
<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 class='form-group col-xs-12' style="margin: 30px 0;">
|
|
<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">
|
|
</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(){
|
|
socket.emit('room', 'app-{{ user.id }}');
|
|
});
|
|
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! ');
|
|
location.reload();
|
|
}, function(err){
|
|
alert('ERROR: '+err);
|
|
}, { enableHighAccuracy:true });
|
|
} else { alert('Unable to set location. '); }
|
|
}
|
|
</script>
|
|
{% endblock %}
|