kopia lustrzana https://github.com/hholzgra/maposmatic/
450 wiersze
15 KiB
HTML
450 wiersze
15 KiB
HTML
{% extends "maposmatic/base.html" %}
|
|
|
|
{% comment %}
|
|
coding: utf-8
|
|
|
|
maposmatic, the web front-end of the MapOSMatic city map generation system
|
|
Copyright (C) 2012 David Decotigny
|
|
Copyright (C) 2012 Frédéric Lehobey
|
|
Copyright (C) 2012 Pierre Mauduit
|
|
Copyright (C) 2012 David Mentré
|
|
Copyright (C) 2012 Maxime Petazzoni
|
|
Copyright (C) 2012 Thomas Petazzoni
|
|
Copyright (C) 2012 Gaël Utard
|
|
Copyright (C) 2018 Hartmut Holzgraefe
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
{% endcomment %}
|
|
{% load i18n %}
|
|
{% load extratags %}
|
|
|
|
{% block body-class %}new{% endblock %}
|
|
{% block menu-new %}active{% endblock %}
|
|
|
|
{% block title %}{% trans "Create map" %}{% endblock %}
|
|
{% block extrajs %}
|
|
{% include "maposmatic/suggest.js" %}
|
|
{% include "maposmatic/wizard.js" %}
|
|
$('.multipleSelect').fastselect({
|
|
onItemSelect: function($item, itemModel) {
|
|
$("#overlay-preview").attr("src","/media/img/overlay/"+itemModel.value+".jpg");
|
|
}
|
|
});
|
|
{% if form.errors %}
|
|
$('#error-modal').modal('show')
|
|
{% endif%}
|
|
{% endblock %}
|
|
|
|
{% block extracss %}
|
|
.btn-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
font-size: 12px;
|
|
line-height: 1.428571429;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.fstElement { font-size: 1em; }
|
|
.fstToggleBtn { min-width: 16.5em; }
|
|
.fstMultipleMode { display: block; }
|
|
.fstMultipleMode .fstControls { width: 100%; }
|
|
{% endblock %}
|
|
|
|
{% block page %}
|
|
|
|
{% if form.errors %}
|
|
<div class="modal" tabindex="-1" role="dialog" id="error-modal">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Form Errors</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>{{field.label}} {{ error|escape }}</strong>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for error in form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>{{ error|escape }}</strong>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 id="submitmapform">{% trans "Generate your own map" %} <small><a href='{% url 'documentation_user_guide' %}#_creating_a_map_step_by_step' target='_blank'><i class='fa fa-question-circle'></i></a></small></h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-around">
|
|
<div class="col-lg-2">
|
|
<button type="button" class="btn btn-default" id="prevlink" onclick="nextPrev(-1)"><i class="fa fa-arrow-left"></i> {% trans "Back" %}</button>
|
|
</div>
|
|
<div class="stepwizard col-lg-6">
|
|
<div class="stepwizard-row setup-panel">
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-globe active"></i>
|
|
<p>{% trans "Map area" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-file"></i>
|
|
<p>{% trans "Layout" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-image"></i>
|
|
<p>{% trans "Style" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-bars"></i>
|
|
<p>{% trans "Overlays" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-file"></i>
|
|
<p>{% trans "Paper" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle fa fa-check"></i>
|
|
<p>{% trans "Submit" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2" style="align: right">
|
|
<button type="button" class="btn btn-success" id="nextlink" onclick="nextPrev(1)"><i class="fa fa-arrow-right"></i> {% trans "Next" %}</button>
|
|
<button id="formsubmit" type="button" class="btn btn-success" value="submit" onclick="$('#mainfrm').submit()">
|
|
{% trans "Generate »" %}<i class="fa fa-check-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="mainfrm" method="post" enctype="multipart/form-data" action="{% url "new" %}#submitmapform">
|
|
{{ form.mode }}
|
|
<div class="row" style="margin-top: 30px;" >
|
|
<div class="col-lg-12" >
|
|
|
|
<div class="tab" style="display: block" id="wizard-step-location">
|
|
|
|
<ul class="nav nav-tabs" id="locTabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="step-location-bbox-tab" data-toggle="tab" href="#step-location-bbox" role="tab" aria-controls="home" aria-selected="true">{% trans "Geographic area" %}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="step-location-admin-tab" data-toggle="tab" href="#step-location-admin" role="tab" aria-controls="admin" aria-selected="false">{% trans "City search" %}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="step-location-gpx-tab" data-toggle="tab" href="#step-location-gpx" role="tab" aria-controls="gpx" aria-selected="false">{% trans "GPX track" %}</a>
|
|
</li>
|
|
<li calss="nav-item">
|
|
<a class="nav-link" id="step-location-umap-tab" data-toggle="tab" href="#step-location-umap" role="tab" aria-controls="umap" aria-selected="false">{% trans "Umap data file" %}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="step-location-tabs">
|
|
<div class="tab-pane active" id="step-location-bbox" role="tabpanel">
|
|
{{ form.bbox }}
|
|
</div>
|
|
|
|
<div class="tab-pane" id="step-location-admin" role="tabpanel">
|
|
<div style="position: relative;">
|
|
{{ form.administrative_city }}
|
|
<i class="fa fa-repeat suggest-icon" id="loading-icon"></i>
|
|
<i class="fa fa-exclamation-triangle suggest-icon" id="error-icon"></i>
|
|
<ul id="suggest" class="dropdown-menu" role="menu"
|
|
aria-labelledby="id_administrative_city">
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
{{ form.administrative_osmid }}
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="step-location-gpx" role="tabpanel">
|
|
<div class="col-lg-12">
|
|
<br/>
|
|
<div class="alert alert-secondary">
|
|
{% blocktrans trimmed %}
|
|
Upload a GPX file here. The GPX track stored in this file,
|
|
and any named waypoints, will be drawn on top of the created map.
|
|
{% endblocktrans %}
|
|
</div>
|
|
<div class="alert alert-danger">
|
|
{% blocktrans trimmed %}
|
|
<b>Note:</b> The uploaded file will not be made available to anyone, the map created using this
|
|
file <b>will be publicly visible</b> though.<br/>Do <b>NOT</b> upload any data you don't want to be publicly
|
|
visible.
|
|
{% endblocktrans %}
|
|
</div>
|
|
<fieldset id="track-file">
|
|
<legend>{% trans "GPX track file" %}</legend>
|
|
{{ form.track }}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="step-location-umap" role="tabpanel">
|
|
<div class="col-lg-12">
|
|
<br/>
|
|
<div class="alert alert-secondary">
|
|
{% trans "Upload an <a href='https://umap.openstreetmap.fr/'>Umap</a> file here." %}
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Markers, lines and shapes that have been placed on that Umap will be
|
|
printed on top of the generated map.
|
|
{% endblocktrans %}
|
|
<p/>
|
|
</div>
|
|
<div class="alert alert-danger">
|
|
{% blocktrans trimmed %}
|
|
<b>Note:</b> The uploaded file will not be made available to anyone, the map created using this
|
|
file <b>will be publicly visible</b> though.<br/>Do <b>NOT</b> upload any data you don't want
|
|
to be publicly visible.
|
|
{% endblocktrans %}
|
|
</div>
|
|
<fieldset id="umap-file">
|
|
<legend>{% trans "Umap data file" %}</legend>
|
|
{{ form.umap }}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Geographic area selection" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Start by choosing the city or geographic area you want to
|
|
render. Suggestions will appear as you start typing. If you can't find the city
|
|
you want, or if you prefer to choose the exact area you want to render
|
|
yourself, select the <em>Geographic area</em> tab and use the mini-map to set
|
|
the limits of the rendered area.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-layout">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Layout" %}</legend>
|
|
{{ form.layout }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="layout-preview" align="right" src="/media/img/layout/{{request.session.new_layout}}.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map layout" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
The map layout determines how the map and the index are
|
|
rendered. The <em>Multi-page layout</em> produces a booklet very suitable for
|
|
printing and binding.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tab" id="wizard-step-stylesheet">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Stylesheet" %}</legend>
|
|
{{ form.stylesheet }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="style-preview" align="right" src="/media/img/style/{{request.session.new_stylesheet}}.jpg"/> {# TODO: need to pick first style from list here #}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map stylesheet" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
The map stylesheet determines the style and appearance of the map itself.
|
|
Note that the stylesheet also drives what details will be visible on the map.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-overlay">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Overlays" %}</legend>
|
|
{{ form.overlay }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="overlay-preview" align="right" src="/media/img/empty.png"/> {# TODO: select default here, too #}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map overlays" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Overlays render extra objects on top of the chosen base style.
|
|
Multiple overlays can be selected to add different kinds of additional information on top of the map.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-paper-size">
|
|
<div class="row" id="paper-selection">
|
|
<div class="col-lg-6">
|
|
<fieldset id="paper-size">
|
|
<legend>{% trans "Paper size" %}</legend>
|
|
{{ form.papersize }}
|
|
{{ form.paper_width_mm }}
|
|
{{ form.paper_height_mm }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<fieldset id="paper-orientation">
|
|
<legend>{% trans "Paper orientation" %}</legend>
|
|
{{ form.paperorientation }}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-error" id="paper-size-loading-error">
|
|
{% blocktrans %}An error occured while retrieving compatible paper sizes.{% endblocktrans %}
|
|
</div>
|
|
|
|
<div class="alert alert-info" id="paper-size-loading">
|
|
<i class="fa fa-repeat"></i>
|
|
{% blocktrans %}Calculating available paper formats for your map...{% endblocktrans %}
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Paper format and size" %}</h4>
|
|
<p>
|
|
{% blocktrans %}Select the desired format, size and orientation for your map.{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-lang-title">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<fieldset>
|
|
<legend>{% trans "Map title" %}</legend>
|
|
{{ form.maptitle }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<fieldset>
|
|
<legend>{% trans "Locale" %}</legend>
|
|
<div class="dropdown">
|
|
<button id="map_language_button" type="button" class="btn dropdown-toggle" data-toggle="dropdown">
|
|
{{ form.map_language.value }}
|
|
</button>
|
|
<input type="hidden" name="{{ form.map_language.name }}" id="{{ form.map_language.name }}"/>
|
|
<div id="maplang_choices" role="menu" class="dropdown-menu bg-light" style="height: 400px; overflow-y: auto;">
|
|
{% for choice in form.map_language.field.choices %}
|
|
<a class="dropdown-item" href="#" data-langcode="{{choice.0}}" onclick="$('#map_language_button').html($(this).html()); $('#{{ form.map_language.name }}').val('{{choice.0}}');">{{choice.1}} ({{choice.0|locale_base}})</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<br/>
|
|
<fieldset>
|
|
<legend>{% trans "Your Email address (for notifications, optional)" %}</legend>
|
|
{{ form.submittermail }}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-top: 30px;">
|
|
<div class="col-lg-12">
|
|
<fieldset id="summary">
|
|
<legend>{% trans "Summary" %}</legend>
|
|
<table class="table table-striped">
|
|
<tbody>
|
|
<tr><td>{% trans "Location:" %}</td><td id="summary-location"></td></tr>
|
|
<tr><td>{% trans "Layout:" %}</td><td id="summary-layout"></td></tr>
|
|
<tr><td>{% trans "Stylesheet:" %}</td><td id="summary-stylesheet"></td></tr>
|
|
<tr><td>{% trans "Overlay:" %}</td><td id="summary-overlay"></td></tr>
|
|
<tr><td>{% trans "Paper format:" %}</td><td id="summary-paper-size"></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Almost there!" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
You're almost ready to request to map rendering! Select the map language,
|
|
eventually adjust the title of your map, and you're good to go!
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{% endblock %}
|