2017-03-15 01:33:02 -06:00
{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Settings{% endblock %}
2017-04-10 01:00:56 -06:00
2017-04-09 21:40:08 -06:00
{% block head %}
{{super()}}
< link rel = "stylesheet" type = "text/css" href = "/static/css/form.css" >
{% endblock %}
2017-03-15 01:33:02 -06:00
{% block main %}
< section class = 'container' >
2017-04-09 21:40:08 -06:00
< h1 > Settings< / h1 >
< form id = 'settings-form' role = "form" method = "post" >
2017-04-09 21:59:29 -06:00
< h2 > Account settings< / h2 >
< div id = 'name' class = 'form-group' title = "This appears in your page's title. " >
2017-04-11 19:37:14 -06:00
< label for = "name" > Name< / label >
< input class = 'form-control' name = "name" type = "text" value = "{{user.name}}" maxlength = "160" >
< / div >
2017-04-09 21:59:29 -06:00
< div id = 'email' class = 'form-group' title = "For account stuff, no dumb newsletters. " >
2017-04-09 21:40:08 -06:00
< label for = "email" > Email< / label >
< input class = 'form-control' name = "email" type = "email" value = "{{user.email}}" maxlength = "160" >
2017-03-15 01:33:02 -06:00
< / div >
2017-04-09 21:59:29 -06:00
2017-04-10 01:00:56 -06:00
< div id = 'social-connect' class = 'form-group' >
< style >
#social-connect {
flex-wrap: wrap;
}
#social-connect > .btn {
display: flex;
align-items: center;
margin-left: 1vw;
margin-right: 1vw;
flex-grow: 1;
flex-basis: 0;
font-size: .9em;
}
#social-connect > .btn:hover {
color: #fff;
}
#social-connect > .btn .fa {
font-size: 1.1em;
margin-left: 0;
margin-right: 5%;
}
/* Connected social button styles */
#social-connect > .btn.gp.connected {
border: 2px solid rgb(206,77,57);
}
#social-connect > .btn.fb.connected {
border: 2px solid rgb(48,88,145);
}
#social-connect > .btn.tw.connected {
border: 2px solid rgb(44,168,210);
}
/* Unconnected social button styles */
#social-connect > .btn.gp:not(.connected) {
background: rgb(206,77,57);
}
#social-connect > .btn.gp:not(.connected):hover {
background: rgb(251,122,102);
}
#social-connect > .btn.fb:not(.connected) {
background: rgb(48,88,145);
}
#social-connect > .btn.fb:not(.connected):hover {
background: rgb(93,133,190);
}
#social-connect > .btn.tw:not(.connected) {
background: rgb(44,168,210);
}
#social-connect > .btn.tw:not(.connected):hover {
background: rgb(89,213,255);
}
< / style >
< a href = "/login/google" class = 'btn gp{% if user.auth.google %} connected{% endif %}' >
< i class = "fa fa-google-plus" > < / i >
{% if user.auth.google %}Disconnect{% else %}Connect{% endif %} Google
< / a >
< a href = "/login/facebook" class = 'btn fb{% if user.auth.facebook %} connected{% endif %}' >
< i class = "fa fa-facebook" > < / i >
{% if user.auth.facebook %}Disconnect{% else %}Connect{% endif %} Facebook
< / a >
< a href = "/login/twitter" class = 'btn tw{% if user.auth.twitter %} connected{% endif %}' >
< i class = "fa fa-twitter" > < / i >
{% if user.auth.twitter %}Disconnect{% else %}Connect{% endif %} Twitter
< / a >
< / div >
2017-04-09 21:59:29 -06:00
2017-04-10 01:00:56 -06:00
< div id = 'password-delete' class = 'form-group' >
2017-04-12 11:41:27 -06:00
< a class = 'underline' href = "/settings/password" title = "Click here to {% if user.auth.password %}change{% else %}set{% endif %} your password. " > {% if user.auth.password %}Change{% else %}Set{% endif %} password< / a >
2017-04-11 19:37:14 -06:00
< a class = 'red underline' style = "text-align:right" href = "#" onclick = "deleteAccount()" title = "Permently delete your Tracman account. " > Delete account< / a >
2017-04-09 21:59:29 -06:00
< / div >
< h2 > Map settings< / h2 >
2017-03-15 01:33:02 -06:00
2017-04-09 21:59:29 -06:00
< div id = 'slug' class = 'form-group' title = "This is the URL which shows your location. Be careful whom you share it with! " >
< label for = "slug" > URL< / label >
< div class = 'input-with-addon-group' >
< input type = "text" class = 'input-addon' size = "13" value = "tracman.org/map/" disabled readonly >
< input type = "text" class = 'input-with-addon' name = "slug" value = "{{user.slug}}" maxlength = "160" required >
< / div >
2017-03-15 01:33:02 -06:00
< / div >
2017-04-09 21:59:29 -06:00
< div id = 'units' class = 'form-group' title = "Select standard units for feet and miles/hour. Select metric units if you are a commie. " >
< label for = "units" > Units< / label >
< div class = 'radio-group' >
< div class = 'radio' >
< label > Standard< / label >
< input type = "radio" name = "units" value = "standard" { % if user . settings . units = = ' standard ' % } checked { % endif % } >
< / div >
< div class = 'radio' >
< label > Metric< / label >
< input type = "radio" name = "units" value = "metric" { % if user . settings . units = = ' metric ' % } checked { % endif % } >
< / div >
< / div >
< / div >
< div id = 'defaultMap' class = 'form-group' 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 for = "map" > Default map< / label >
2017-04-09 21:40:08 -06:00
< div class = 'radio-group' >
< div class = 'radio' >
2017-04-09 21:59:29 -06:00
< label > Road< / label >
< input type = "radio" name = "map" value = "road" { % if user . settings . defaultMap = = ' road ' % } checked { % endif % } >
2017-04-09 21:40:08 -06:00
< / div >
< div class = 'radio' >
2017-04-09 21:59:29 -06:00
< label > Satellite< / label >
< input type = "radio" name = "map" value = "sat" { % if user . settings . defaultMap = = ' sat ' % } checked { % endif % } >
2017-04-09 21:40:08 -06:00
< / div >
< / div >
2017-03-15 01:33:02 -06:00
< / div >
2017-04-09 21:59:29 -06:00
< div id = 'defaultZoom' class = 'form-group' 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 for = "map" > Default zoom< / label >
< 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 id = 'showSpeed' class = 'form-group' title = "{% if not user.isPro %}PRO ONLY! {% endif %}Shows a spedometer on the map." >
< label for = "showSpeed" > Show speed{% if not user.isPro %} < span class = 'red' > (PRO)< / span > {% endif %}< / label >
< input name = "showSpeed" type = "checkbox" { % if not user . isPro % } disabled { % elif user . settings . showSpeed % } checked { % else % } { % endif % } >
< / div >
< div id = 'showAltitude' class = 'form-group' title = "{% if not user.isPro %}PRO ONLY! {% endif %}Shows the current elevation on the map. " >
< label for = "showAlt" > Show altitude{% if not user.isPro %} < span class = 'red' > (PRO)< / span > {% endif %}< / label >
< input name = "showAlt" type = "checkbox" { % if not user . isPro % } disabled { % elif user . settings . showAlt % } checked { % else % } { % endif % } >
< / div >
< div id = 'showStreet' class = 'form-group' title = "{% if not user.isPro %}PRO ONLY! {% endif %}Shows a Google street view image at or near your current location, oriented in the direction of travel. " >
< label for = "showStreet" > Show street view{% if not user.isPro %} < span class = 'red' > (PRO)< / span > {% endif %}< / label >
< input name = "showStreet" type = "checkbox" { % if not user . isPro % } disabled { % elif user . settings . showStreetview % } checked { % else % } { % endif % } >
< / div >
2017-03-15 01:33:02 -06:00
2017-04-09 21:44:19 -06:00
< div id = 'submit-group' class = 'form-group flexbox' style = "padding:0 0 60px; justify-content:space-around" >
2017-03-15 01:36:36 -06:00
< input class = 'btn yellow' style = "width:50%; background:#333" type = "submit" value = "Save" >
2017-04-09 21:44:19 -06:00
< a href = "#" class = 'btn' > cancel< / a >
2017-03-15 01:33:02 -06:00
< / div >
< / form >
2017-04-10 01:00:56 -06:00
{% if not user.isPro %}< p style = "clear:both" > Want to try < a href = "/settings/pro" > Tracman Pro< / a > ? It's free during beta testing. < / p > {% endif %}
2017-03-15 01:33:02 -06:00
< p style = "clear:both" > Would you like to < a href = "https://github.com/Tracman-org/Server/issues/new" > submit a suggestion or bug report< / a > ? < / p >
< / section >
2017-04-10 01:00:56 -06:00
{% endblock %}
{% block javascript %}
{{super()}}
< script >
// Delete account
function deleteAccount() {
if (confirm("Are you sure you want to delete your account? This CANNOT be undone! ")) {
$.ajax({
url: "/settings",
type: "DELETE",
success: function(){
location.reload();
},
fail: function(){
alert("Failed to delete account!");
}
})
}
}
< / script >
2017-03-15 01:33:02 -06:00
{% endblock %}