tracman-server/views/map.html

113 lines
3.3 KiB
HTML

{% extends 'templates/base.html' %}
{% block title %}{{super()}}{% if mapuser.name %} | {{mapuser.name}}{% endif %}{% endblock %}
{% block head %}
{{super()}}
<style>/* These styles include values passed from to the template from the server. Other styles are in map.css */
{% if noHeader!='0' %} main { top: 0 !important; } {% endif %}
{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
/* show both */
@media (orientation: landscape) {
#map, #pano {
display: inline-block;
width: 50%;
height: 100%;
}
#pano { float:right; }
}
@media (orientation: portrait) {
#map, #pano {
width: 100%;
height: 50%;
}
#pano { bottom:0; }
}
{% elif mapuser.settings.showStreetview and disp=='1' %}
/* show streetview */
#map { display:none; }
#pano {
width: 100%;
height: 100%;
}
{% else %}
/* show map */
#map {
width: 100%;
height: 100%;
}
#pano { display:none; }
{% endif %}
</style>
{% endblock %}
{% block main %}
{% if user and newuserurl %}
<div class='page-mask'></div>
<div id='welcome' class='popup'>
<div class='topbar'>
<h2>Welcome!</h2>
<div class='close' onclick="$('#welcome').hide();$('.page-mask').hide();">✖️</div>
</div>
<p>This is your map. It's publicly avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>. You can change that URL and other settings in <b><a href="/settings">settings</a></b>. Set your location by clicking <b>set</b> below. Clear it by clicking <b>clear</b>. To track your location, click <b>track</b> or download the <a href="/android">android app</a>. For more information, see the <b><a href="/help">help</a></b> page. </p>
<div class='buttons'>
<a class='btn main' onclick="$('#welcome').hide();$('.page-mask').hide();">Got it!</a>
</div>
</div>
{% endif %}
<div id='map'></div>
<div id='pano'></div>
<div id='notset' class='centered alert alert-warning'>
{% if user.id == mapuser.id %}
Your location is unset. You can click 'set' below to set it to your current position.
{% else %}
This user has no location set.
{% endif %}
</div>
{% if user.id == mapuser.id and mapuser._id != 'demo' %}
<div id='controls'>
{% if mapuser.settings.showStreetview and disp!='0' %}
<style>
@media (orientation: portrait) {
#controls { bottom:30px }
}
</style>
{% endif %}
<button id='set-loc' class='btn set' title="Click here to set your location">Set</button>
<button id='track-loc' class='btn track' title="Click here to track your location"><i class='fa fa-crosshairs'></i>Track</button>
<button id='clear-loc' class='btn clear' title="Click here to clear your location">Clear</button>
</div>
{% endif %}
{% endblock %}
{% block javascript %}
{{super()}}
<!-- Variables from server-side -->
<script>
const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
mapKey = "{{mapApi |safe}}",
noHeader = "{{noHeader |safe}}",
disp = "{{disp |safe}}", // 0=map, 1=streetview, 2=both
userid = "{{user._id |safe}}",
token = "{{user.sk32 |safe}}";
</script>
<!-- Webpacked bundles -->
<script type="application/javascript" src="/static/js/.map.bun.js"></script>
{% if user.id == mapuser.id %}
<script type="application/javascript" src="/static/js/.controls.bun.js"></script>
{% endif %}
{% endblock %}