<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="icon" href="img/favicon.ico"/> {{>index_assets}} <!-- our scripts --> <script type="text/javascript" src="assets/index.js"></script> <link rel="stylesheet" href="assets/style.css"/> <title>Your Own Tracks</title> </head> <body> <div class="container"> <div class="row page-header"> <div class="col-xs-1 text-left"> <a href="#" onclick="gotoDate(datePrevFrom, datePrevTo);" class="btn btn-primary" role="button"> <span class="hidden-xs">Previous</span> <span class="visible-xs"><span class="glyphicon glyphicon-arrow-left"></span></span> </a> </div> <div class="col-xs-5 text-center"> <div class="input-group input-daterange"> <input type="text" class="form-control" value="{{date_from}}" id="dateFrom"/> <span class="input-group-addon">to</span> <input type="text" class="form-control" value="{{date_to}}" id="dateTo"/> </div> </div> <div class="col-xs-6 text-right"> <div class="btn-group" role="group"> <a role="button" data-toggle="collapse" href="#configCollapse" class="btn btn-default" id="configButton"> <span class="hidden-xs">Config</span> <span class="visible-xs"><span class="glyphicon glyphicon-cog"></span></span> </a> <a href="#" onclick="resetZoom();" class="btn btn-default"> <span class="hidden-xs">Reset view</span> <span class="visible-xs"><span class="glyphicon glyphicon-screenshot"></span></span> </a> <a href="#" onclick="gotoDate();" class="btn btn-default" style="display: inline-block;" id="todayButton"> <span class="hidden-xs">Today</span> <span class="visible-xs"><span class="glyphicon glyphicon-arrow-up"></span></span> </a> <a href="#" onclick="gotoDate(dateNextFrom, dateNextTo);" class="btn btn-primary" style="display: inline-block;" id="nextButton"> <span class="hidden-xs">Next</span> <span class="visible-xs"><span class="glyphicon glyphicon-arrow-right"></span></span> </a> </div> </div> </div> <div class="collapse" id="configCollapse"><br/> <div class="well"> <div class="row"> <div class="col-xs-2 text-left"> <a href="#" onclick="showHideMarkers();" class="btn btn-default" id="show_markers"> <span class="hidden-xs">Show markers</span> <span class="visible-xs"><span class="glyphicon glyphicon-map-marker"></span></span> </a> </div> <div class="col-xs-2 text-left"> <a href="#" onclick="setLiveMap();" class="btn btn-default" id="livemap_on"> <span class="hidden-xs">Live map</span> <span class="visible-xs"><span class="glyphicon glyphicon-play-circle"></span></span> </a> </div> <div class="col-xs-8 text-right"> <form class="form-inline"><span class="hidden-xs">Accuracy: </span> <div class="input-group"> <input type="number" size="4" class="form-control" id="accuracy" value="{{accuracy}}"/> <span class="input-group-addon"><span class="hidden-xs">metres</span><span class="visible-xs">m</span></span> <span class="input-group-btn"><button type="button" class="btn btn-default" id="accuracySubmit">OK</button></span> </div> </form> </div> </div> <div class="row"> <div class="col-xs-12 text-left"> <div class="input-group"> <div class="input-group-addon"> <span class="hidden-xs">Tracker ID</span> <span class="visible-xs"><span class="glyphicon glyphicon-user"></span></span> </div> <select class="form-control" name="tracker_id" id="trackerID_selector"> <option value="all">all</option> </select> </div> </div> </div> </div> </div> </div> <div class="container"> <div id="mapid"></div> </div> <script type="text/javascript"> $(document).ready(function() { var default_trackerID = '{{default_tracker_id}}'; initUI('{{date_from}}', '{{date_to}}', {{accuracy}}, '{{tracker_id}}', '{{datepicker_language}}'); initMap(); }); </script> </body> </html>