ad40459be7
It's the same action and that the profile is uploaded is an implementation detail. Apply will also be used for proper profile URL parameters.
861 lines
45 KiB
HTML
861 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
|
<title data-i18n="title">BRouter web client</title>
|
|
|
|
<!-- inject:css -->
|
|
<link rel="stylesheet" href="dist/brouter-web.css" />
|
|
<!-- endinject -->
|
|
</head>
|
|
<body class="flexcolumn">
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#collapsingNavbar"
|
|
aria-controls="collapsingNavbar"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="fa fa-bars"></span>
|
|
</button>
|
|
<a class="navbar-brand order-md-last" href="#" data-toggle="modal" data-target="#about"
|
|
>BRouter-Web <sup class="version">0.10.3</sup></a
|
|
>
|
|
<div class="collapse navbar-collapse" id="collapsingNavbar">
|
|
<div class="navbar-nav">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<select class="selectpicker show-tick" data-width="250px" id="profile-alternative" multiple>
|
|
<optgroup label="Profile" data-max-options="1" data-icon="fa-bicycle" id="profile">
|
|
<option data-i18n="navbar.profile.custom">Custom </option>
|
|
</optgroup>
|
|
<optgroup
|
|
label="Alternative"
|
|
data-max-options="1"
|
|
data-icon="fa-random"
|
|
id="alternative"
|
|
>
|
|
<option data-i18n="navbar.alternative.original" value="0" selected
|
|
>Original
|
|
</option>
|
|
<option data-i18n="navbar.alternative.first" value="1">1st alternative </option>
|
|
<option data-i18n="navbar.alternative.second" value="2">2nd alternative </option>
|
|
<option data-i18n="navbar.alternative.third" value="3">3rd alternative </option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<div class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
data-toggle="modal"
|
|
data-target="#export"
|
|
id="exportButton"
|
|
href="#"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span>
|
|
<span data-i18n="navbar.export">Export</span>
|
|
</a>
|
|
</div>
|
|
<div class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
href=""
|
|
data-toggle="dropdown"
|
|
href="#"
|
|
role="button"
|
|
id="navbarLoadDropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span>
|
|
<span data-i18n="navbar.load.title">Load</span>
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarLoadDropdown">
|
|
<div id="navbarLoadTracksContainer">
|
|
<a class="dropdown-item" data-i18n="navbar.load.tracks" href="#" id="navbarLoadTracks"
|
|
>Tracks</a
|
|
>
|
|
</div>
|
|
<a
|
|
class="dropdown-item"
|
|
data-i18n="navbar.load.nogos"
|
|
data-toggle="modal"
|
|
data-target="#loadNogos"
|
|
href="#"
|
|
>No-go areas</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="modal" data-target="#about"
|
|
><span class="fa fa-lg fa-info-circle" aria-hidden="true"></span
|
|
><span data-i18n="navbar.about">About</span></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Credits modal window -->
|
|
<div
|
|
class="modal fade"
|
|
id="credits"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="Credits window"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" data-i18n="credits">Credits</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<dl>
|
|
<dt data-i18n="credits.brouter">BRouter</dt>
|
|
<dd data-i18n="[html]credits.brouter-license">
|
|
<a target="_blank" href="https://brouter.de/brouter">BRouter</a>
|
|
© Arndt Brenschede
|
|
</dd>
|
|
<dt data-i18n="credits.map-data">Map data</dt>
|
|
<dd data-i18n="[html]credits.openstreetmap">
|
|
©
|
|
<a target="_blank" href="https://www.openstreetmap.org/copyright"
|
|
>OpenStreetMap contributors</a
|
|
>
|
|
under
|
|
<a target="_blank" href="https://opendatacommons.org/licenses/odbl/">ODbL</a>
|
|
</dd>
|
|
<dd data-i18n="[html]credits.nominatim">
|
|
Search by
|
|
<a href="https://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Nominatim</a>
|
|
</dd>
|
|
</dl>
|
|
<h5 data-i18n="credits.map-tiles">Map tiles</h5>
|
|
<dl id="credits-maps"></dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layers modal window -->
|
|
<div
|
|
class="modal fade"
|
|
id="custom_layers"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="Layers window"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" data-i18n="layers.customize">
|
|
Customize layers
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input
|
|
class="form-control"
|
|
type="text"
|
|
id="layer_name"
|
|
spellcheck="true"
|
|
wrap="off"
|
|
data-i18n="[placeholder]layers.placeholder-layer-name"
|
|
placeholder="Custom layer name. (ex: OpenStreetMap)"
|
|
/>
|
|
<input
|
|
class="form-control"
|
|
type="text"
|
|
id="layer_url"
|
|
spellcheck="false"
|
|
wrap="off"
|
|
data-i18n="[placeholder]layers.placeholder-layer-url"
|
|
placeholder="Custom layer URL. (ex: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png)"
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
id="custom_layers_add_base"
|
|
class="btn btn-success"
|
|
data-i18n="layers.add-base"
|
|
>
|
|
Add base layer
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="custom_layers_add_overlay"
|
|
class="btn btn-success"
|
|
data-i18n="layers.add-overlay"
|
|
>
|
|
Add overlay
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="custom_layers_remove"
|
|
class="btn btn-danger"
|
|
data-i18n="layers.remove-selection"
|
|
>
|
|
Remove selection
|
|
</button>
|
|
<table id="custom_layers_table"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About modal window -->
|
|
<div
|
|
class="modal fade"
|
|
id="about"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="About window"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" data-i18n="about.title">
|
|
About
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p data-i18n="[html]about.description">
|
|
Online service of the BRouter routing engine. For the offline Android app and more
|
|
information see
|
|
<a href="https://brouter.de/" target="_blank">brouter.de</a>.
|
|
</p>
|
|
<p><i data-i18n="about.contact">Contact:</i><br /></p>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="https://groups.google.com/group/osm-android-bikerouting" target="_blank"
|
|
><span data-i18n="about.support">General discussions/questions, support</span></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://webchat.oftc.net/?channels=#brouter" target="_blank"
|
|
><span data-i18n="about.chat">Chat with users and developers</span></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<span data-i18n="about.bug-reports">Bug reports and feature requests:</span>
|
|
<ul>
|
|
<li>
|
|
<a href="https://github.com/abrensch/brouter/issues" target="_blank">
|
|
<span data-i18n="about.bug-reports-back"
|
|
>server/backend, routing engine, Android app, profiles, brouter.de
|
|
site</span
|
|
>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/nrenner/brouter-web/issues" target="_blank">
|
|
<span data-i18n="about.bug-reports-front">web client/frontend.</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
<i data-i18n="about.data">Data:</i>
|
|
</p>
|
|
|
|
<div data-i18n="[html]about.data-description">
|
|
This is based on
|
|
<a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>. It is usually
|
|
updated once a week when a new Planet file is available, see dates of
|
|
<a href="https://brouter.de/brouter/segments4/" target="_blank">data files</a>.
|
|
</div>
|
|
<p data-i18n="[html]about.details">
|
|
<i><a href="https://brouter.de/privacypolicy.html" target="_blank">Privacy Policy</a></i
|
|
>,
|
|
<i
|
|
><a href="https://github.com/nrenner/brouter-web#credits-and-licenses" target="_blank"
|
|
>Credits</a
|
|
></i
|
|
>,
|
|
<i
|
|
><a
|
|
href="https://github.com/nrenner/brouter-web/blob/master/CHANGELOG.md"
|
|
target="_blank"
|
|
>Changelog</a
|
|
></i
|
|
>
|
|
and
|
|
<i><a href="https://github.com/nrenner/brouter-web#readme" target="_blank">more info</a></i>
|
|
on the client.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load nogos modal window -->
|
|
<div
|
|
class="modal fade"
|
|
id="loadNogos"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="Load nogos window"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" data-i18n="loadNogos.title">
|
|
Load no-go areas
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="nogoError" class="invalid-feedback" style="display: none;"></p>
|
|
<form>
|
|
<fieldset>
|
|
<legend data-i18n="loadNogos.source">
|
|
Source
|
|
</legend>
|
|
<p>
|
|
<label for="nogoURL" data-i18n="loadNogos.url">URL: </label>
|
|
<input type="text" name="nogoURL" id="nogoURL" /><br />
|
|
or<br />
|
|
<label for="nogoFile" data-i18n="loadNogos.file">File (.geojson): </label>
|
|
<input type="file" accept=".geojson" name="nogoFile" id="nogoFile" />
|
|
</p>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend data-i18n="loadNogos.defaultProperties">
|
|
Default properties
|
|
</legend>
|
|
<p>
|
|
<label for="nogoWeight" data-i18n="loadNogos.nogoWeight"
|
|
>No-go weight (-1 means impassable):
|
|
</label>
|
|
<input type="number" name="nogoWeight" id="nogoWeight" value="-1" min="-1" />
|
|
</p>
|
|
<p>
|
|
<label for="nogoRadius" data-i18n="loadNogos.nogoRadius"
|
|
>No-go radius for points (in meters):
|
|
</label>
|
|
<input type="number" name="nogoRadius" id="nogoRadius" value="20" min="0" />
|
|
</p>
|
|
<p>
|
|
<label for="nogoBuffer" data-i18n="loadNogos.nogoBuffer"
|
|
>Buffer no-go areas (in meters):
|
|
</label>
|
|
<input type="number" name="nogoBuffer" id="nogoBuffer" value="0" min="0" />
|
|
</p>
|
|
</fieldset>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-i18n="[value]modal.close"
|
|
data-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-i18n="[value]loadNogos.load"
|
|
id="submitNogos"
|
|
>
|
|
Load
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export modal window -->
|
|
<div
|
|
class="modal fade"
|
|
id="export"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="Export route window"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" data-i18n="export.title">
|
|
Export route
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="export">
|
|
<div class="form-group row">
|
|
<label class="col-form-label col-sm-2" data-i18n="export.trackname">Name</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="trackname" />
|
|
<span id="trackname-message" class="validation-warning"></span>
|
|
</div>
|
|
</div>
|
|
<fieldset id="export-format" class="form-group">
|
|
<div class="row">
|
|
<legend class="col-form-label col-sm-2" data-i18n="export.format">
|
|
Format
|
|
</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input
|
|
class="form-check-input"
|
|
id="format-gpx"
|
|
type="radio"
|
|
name="format"
|
|
value="gpx"
|
|
checked
|
|
/>
|
|
<span data-i18n="export.format_gpx">GPX</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label" for="format-kml">
|
|
<input
|
|
class="form-check-input"
|
|
id="format-kml"
|
|
type="radio"
|
|
name="format"
|
|
value="kml"
|
|
/>
|
|
<span data-i18n="export.format_kml">KML</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label" for="format-geojson">
|
|
<input
|
|
class="form-check-input"
|
|
id="format-geojson"
|
|
type="radio"
|
|
name="format"
|
|
value="geojson"
|
|
/>
|
|
<span data-i18n="export.format_geojson">GeoJSON</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label" for="format-csv">
|
|
<input
|
|
class="form-check-input"
|
|
id="format-csv"
|
|
type="radio"
|
|
name="format"
|
|
value="csv"
|
|
/>
|
|
<span data-i18n="export.format_csv">CSV</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="export-includes" class="form-group">
|
|
<div class="row">
|
|
<legend class="col-form-label col-sm-2" data-i18n="export.include">
|
|
Include
|
|
</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input
|
|
class="form-check-input"
|
|
id="include-waypoints"
|
|
type="checkbox"
|
|
name="include-waypoints"
|
|
/>
|
|
<span data-i18n="export.include_waypoints">Waypoints</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-i18n="modal.close"
|
|
data-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-i18n="export.title"
|
|
id="submitExport"
|
|
>
|
|
Export route
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content" class="flexcolumn flexgrow">
|
|
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
|
|
<ul role="tablist">
|
|
<li>
|
|
<a href="#tab_layers_control" role="tab" data-i18n="[title]sidebar.layers.title" title="Layers">
|
|
<!--
|
|
https://github.com/feathericons/feather/blob/0dc2bf5c9d01759e47485d9498aefc02cac1d845/icons/layers.svg
|
|
MIT License: https://github.com/feathericons/feather/blob/master/LICENSE
|
|
modifications: line gap -0.5, stroke-width +0.2
|
|
-->
|
|
<svg
|
|
class="fa"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polygon style="fill: currentColor" points="12 2 2 7 12 12 22 7 12 2"></polygon>
|
|
<polyline points="2 11.5 12 16.5 22 11.5"></polyline>
|
|
<polyline points="2 16 12 21 22 16"></polyline>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li hidden>
|
|
<a href="#tab_itinerary" role="tab" data-i18n="[title]sidebar.itinerary.title" title="Itinerary"
|
|
><i class="fa fa-map-signs"></i
|
|
></a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#tab_profile"
|
|
role="tab"
|
|
data-i18n="[title]sidebar.customize-profile.title"
|
|
title="Customize profile"
|
|
><i class="fa fa-wrench"></i
|
|
></a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab_data" role="tab" data-i18n="[title]sidebar.data.title" title="Data"
|
|
><i class="fa fa-table"></i
|
|
></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-flex-row flexgrow">
|
|
<div id="map" class="leaflet-sidebar-map">
|
|
<div id="message"></div>
|
|
</div>
|
|
|
|
<div id="sidebar" class="leaflet-sidebar collapsed">
|
|
<div class="leaflet-sidebar-content">
|
|
<div class="leaflet-sidebar-pane" id="tab_layers_control">
|
|
<h1 class="leaflet-sidebar-header">
|
|
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
|
|
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
|
|
><span data-i18n="sidebar.layers.title">Layers</span>
|
|
</h1>
|
|
<div id="layers-control-wrapper"></div>
|
|
<div class="leaflet-control-layers-separator"></div>
|
|
<div>
|
|
<label
|
|
id="leaflet-control-layers-overlays-opacity-slider"
|
|
data-i18n="sidebar.layers.overlay-opacity"
|
|
>Overlay transparency</label
|
|
>
|
|
</div>
|
|
<div class="leaflet-control-layers-separator"></div>
|
|
<div id="layers-button-group">
|
|
<div hidden id="tree-button-group">
|
|
<button
|
|
type="button"
|
|
id="expand_tree_button"
|
|
class="btn btn-light btn-sm"
|
|
data-i18n="[title]sidebar.layers.expand"
|
|
title="Expand all"
|
|
>
|
|
<span class="fa fa-plus-square-o"></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="collapse_tree_button"
|
|
class="btn btn-light btn-sm"
|
|
data-i18n="[title]sidebar.layers.collapse"
|
|
title="Collapse all"
|
|
>
|
|
<span class="fa fa-minus-square-o"></span>
|
|
</button>
|
|
</div>
|
|
<!-- empty dummy to keep following buttons right-aligned when previous hidden -->
|
|
<div></div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
id="optional_layers_button"
|
|
class="btn btn-light btn-sm"
|
|
data-i18n="[title]sidebar.layers.optional"
|
|
title="Add or remove optional layers"
|
|
>
|
|
<span class="fa fa-cogs"></span>
|
|
<span data-i18n="sidebar.layers.optional-layers">More</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="custom_layers_button"
|
|
class="btn btn-light btn-sm"
|
|
data-i18n="[title]sidebar.layers.customize"
|
|
title="Add or remove custom layers"
|
|
>
|
|
<span class="fa fa-plus-square"></span>
|
|
<span data-i18n="sidebar.layers.custom-layers">Custom layers</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div hidden id="optional-layers-tree"></div>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-pane" id="tab_profile">
|
|
<h1 class="leaflet-sidebar-header">
|
|
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
|
|
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
|
|
><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
|
|
</h1>
|
|
<form class="flexcolumn flexgrow">
|
|
<ul class="nav nav-tabs" id="profileEditorTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link active"
|
|
id="params-tab"
|
|
data-toggle="tab"
|
|
href="#profile_params_container"
|
|
role="tab"
|
|
aria-controls="profile_params_container"
|
|
aria-selected="true"
|
|
data-i18n="sidebar.profile.options"
|
|
>Options</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
id="profile-editor-tab"
|
|
data-toggle="tab"
|
|
href="#profile_editor"
|
|
role="tab"
|
|
aria-controls="profile_editor"
|
|
aria-selected="false"
|
|
data-i18n="sidebar.profile.profile"
|
|
>Profile</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
|
|
<div
|
|
id="profile_params_container"
|
|
class="tab-pane show active"
|
|
role="tabpanel"
|
|
aria-labelledby="params-tab"
|
|
>
|
|
<div id="profile_params"></div>
|
|
<div class="form-group" id="profile_buttons">
|
|
<button id="save" type="button" class="btn btn-primary btn-sm">
|
|
<span class="fa fa-cloud-upload"></span>
|
|
<span data-i18n="sidebar.profile.apply">Apply</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="profile_editor"
|
|
class="flexcolumn flexgrow tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="profile-editor-tab"
|
|
>
|
|
<textarea
|
|
class="form-control flexgrow"
|
|
id="profile_upload"
|
|
spellcheck="false"
|
|
wrap="off"
|
|
data-i18n="[placeholder]sidebar.profile.placeholder"
|
|
placeholder="Write your custom profile here."
|
|
></textarea>
|
|
<div id="profile_message"></div>
|
|
<div class="form-group" id="profile_buttons">
|
|
<button id="upload" type="button" class="btn btn-primary btn-sm">
|
|
<span class="fa fa-cloud-upload"></span>
|
|
<span data-i18n="sidebar.profile.apply">Apply</span>
|
|
</button>
|
|
<button id="clear" type="button" class="btn btn-secondary btn-sm">
|
|
<span class="fa fa-eraser"></span>
|
|
<span data-i18n="sidebar.profile.clear">Clear</span>
|
|
</button>
|
|
<a
|
|
href="https://brouter.de/brouter/costfunctions.html"
|
|
target="_blank"
|
|
class="btn btn-info btn-sm pull-right"
|
|
><span class="fa fa-question"></span>
|
|
<span data-i18n="sidebar.profile.help">Help</span></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-pane" id="tab_data">
|
|
<h1 class="leaflet-sidebar-header">
|
|
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
|
|
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
|
|
><span data-i18n="sidebar.data.title">Data</span>
|
|
</h1>
|
|
<table id="datatable" class="mini cell-border hover stripe"></table>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-pane" id="tab_itinerary">
|
|
<h1 class="leaflet-sidebar-header">
|
|
<span data-i18n="sidebar.itinerary.title">Itinerary</span
|
|
><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
|
|
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span>
|
|
</h1>
|
|
<div id="itinerary" class="flexcolumn flexgrow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="collapse" id="elevation-chart"></div>
|
|
|
|
<footer>
|
|
<div class="flexrow">
|
|
<ul id="stats">
|
|
<li>
|
|
<div class="text-muted small d-none d-sm-block" data-i18n="footer.distance">
|
|
Distance
|
|
</div>
|
|
<p class="stats-label">
|
|
<span id="distance">-</span>
|
|
<abbr data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" title="kilometers"
|
|
>km</abbr
|
|
>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<div class="text-muted small d-none d-sm-block" data-i18n="footer.travel-time">
|
|
Travel time
|
|
</div>
|
|
<p class="stats-label">
|
|
<span id="totaltime">-</span>
|
|
<abbr data-i18n="[title]footer.hours;footer.hours-abbrev" title="hours">h</abbr>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<div class="text-muted small d-none d-sm-block">
|
|
<span data-i18n="footer.total-energy">Total Energy</span>
|
|
|
|
|
<span data-i18n="footer.energy-per-100km">Energy per 100 km</span>
|
|
</div>
|
|
<p class="stats-label">
|
|
<span id="totalenergy">-</span>
|
|
<abbr
|
|
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
|
|
title="kilowatt hours"
|
|
>kWh</abbr
|
|
>
|
|
| <span id="meanenergy">-</span>
|
|
<abbr
|
|
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
|
|
title="kilowatt hours"
|
|
>kWh</abbr
|
|
>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<div class="text-muted small d-none d-sm-block">
|
|
<span data-i18n="footer.ascend">Ascend</span> |
|
|
<span data-i18n="footer.plain-ascend">Plain ascend</span>
|
|
</div>
|
|
<p class="stats-label">
|
|
<span id="ascend">-</span>
|
|
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr>
|
|
| <span id="plainascend">-</span>
|
|
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<div class="text-muted small d-none d-sm-block">
|
|
<span data-i18n="footer.cost">Cost</span> |
|
|
<span data-i18n="footer.mean-cost-factor">Mean cost factor</span>
|
|
</div>
|
|
<p class="stats-label">
|
|
<span id="cost">-</span> |
|
|
<span id="meancostfactor">-</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
|
|
<button
|
|
class="btn btn-outline-secondary btn-sm"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#elevation-chart"
|
|
aria-controls="elevation-chart"
|
|
id="elevation-btn"
|
|
aria-expanded="false"
|
|
aria-label="Toggle elevation chart"
|
|
>
|
|
<span class="fa fa-area-chart"></span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// global package prefix for BRouter web application
|
|
BR = {};
|
|
|
|
console.log(
|
|
'\r\n###\r\n### BRouter-Web\r\n###\r\n### Please note that the routing API used here is not public!\r\n###\r\n'
|
|
);
|
|
</script>
|
|
|
|
<!-- <script src="dist/url-search-params.js"></script> -->
|
|
<script src="config.js"></script>
|
|
<script src="keys.js"></script>
|
|
<script src="dist/layers.js"></script>
|
|
<script src="dist/layersConf.js"></script>
|
|
|
|
<!-- "gulp inject" for debugging -->
|
|
<!-- inject:js -->
|
|
<script src="dist/brouter-web.js"></script>
|
|
<!-- endinject -->
|
|
</body>
|
|
</html>
|