tracman-server/views/settings.html

{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Settings{% endblock %}
{% block head %}
{{super()}}
	<link rel="stylesheet" type="text/css" href="/static/css/form.css">
	<style>
		/*#slug-input {*/
		/*	padding-left: calc(146px + 1.6%);*/
		/*}*/
	</style>
{% endblock %}

{% block main %}

	<section class='container'>
		
		<h1>Settings</h1>
		
		<form id='settings-form' role="form" method="post">
			
			<h2>Account settings</h2>
				
				<div id='name' class='form-group' title="This appears in your page's title. ">
				<label for="name">Name</label>
				<input class='form-control' name="name" type="text" value="{{user.name}}" maxlength="160">
			</div>
				
				<div id='email' class='form-group' title="For account stuff, no dumb newsletters.  ">
				<label for="email">Email</label>
				<input class='form-control' name="email" type="email" value="{{user.email}}" maxlength="160">
			</div>
				
				<!--TODO: add password field-->
				
				<!--TODO: add social login buttons-->
				
				<div id='delete' class='form-group' title="Permently delete your Tracman account. ">
					<a class='red' style='width:100%; text-align:right' href="" onclick="deleteAccount()">Delete account</a>
				</div>
				
			<h2>Map settings</h2>
			
				<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>
				</div>
	
				<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>
					<div class='radio-group'>
						<div class='radio'>
							<label>Road</label>
							<input type="radio" name="map" value="road" {% if user.settings.defaultMap == 'road' %}checked{% endif %}>
						</div>
						<div class='radio'>
							<label>Satellite</label>
							<input type="radio" name="map" value="sat" {% if user.settings.defaultMap == 'sat' %}checked{% endif %}>
						</div>
					</div>
				</div>
				
				<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>
			
			<div id='submit-group' class='form-group flexbox' style="padding:0 0 60px; justify-content:space-around">
				<input class='btn yellow' style="width:50%; background:#333" type="submit" value="Save">
				<a href="#" class='btn'>cancel</a>
			</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 <a href="https://github.com/Tracman-org/Server/issues/new">submit a suggestion or bug report</a>? </p>
	
	</section>
	
{% endblock %}