finished printing support (?)
This commit is contained in:
DennisSchiefer
parent
7cdeeb0723
commit
7657f0de22
@ -42,35 +42,20 @@ init: function() {
|
||||
show: function(response) {
|
||||
// create header
|
||||
var header =
|
||||
'<thead class="header-group"><tr><td colspan="3">' +
|
||||
|
||||
// '<div class="full">' +
|
||||
// '<div class="row">' +
|
||||
// '<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_START")+ ': </div>' +
|
||||
// '<div class="left header-content" style="width:100%;font-weight:bold;">' + document.getElementById("gui-input-source").value + '</div>' +
|
||||
// '<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("DISTANCE")+': </div>' +
|
||||
// '<div class="left header-content" style="font-weight:bold;">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
|
||||
// '</div>' +
|
||||
// '<div class="row">' +
|
||||
// '<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_END")+ ': </div>' +
|
||||
// '<div class="left header-content" style="width:100%;font-weight:bold;">' + document.getElementById("gui-input-target").value + '</div>' +
|
||||
// '<div class="left header-content" style="padding:0px 5px 0px 0x;">' + OSRM.loc("DURATION")+': </div>' +
|
||||
// '<div class="left header-content" style="font-weight:bold;">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
|
||||
// '</div>' +
|
||||
// '</div>' +
|
||||
'<thead class="description-header"><tr><td colspan="3">' +
|
||||
|
||||
'<div class="full">' +
|
||||
'<div class="row">' +
|
||||
|
||||
'<div class="left" style="width:100%">' +
|
||||
'<div class="left stretch">' +
|
||||
'<div class="full">' +
|
||||
'<div class="row">' +
|
||||
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_START")+ ': </div>' +
|
||||
'<div class="left header-content" style="width:100%;font-weight:bold;">' + document.getElementById("gui-input-source").value + '</div>' +
|
||||
'<div class="left description-header-label">' + OSRM.loc("GUI_START")+ ': </div>' +
|
||||
'<div class="left description-header-content stretch">' + document.getElementById("gui-input-source").value + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="row">' +
|
||||
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_END")+ ': </div>' +
|
||||
'<div class="left header-content" style="font-weight:bold;">' + document.getElementById("gui-input-target").value + '</div>' +
|
||||
'<div class="left description-header-label">' + OSRM.loc("GUI_END")+ ': </div>' +
|
||||
'<div class="left description-header-content stretch">' + document.getElementById("gui-input-target").value + '</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
@ -78,12 +63,12 @@ show: function(response) {
|
||||
'<div class="left">' +
|
||||
'<div class="full">' +
|
||||
'<div class="row">' +
|
||||
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("DISTANCE")+': </div>' +
|
||||
'<div class="left header-content" style="font-weight:bold;">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
|
||||
'<div class="left description-header-label">' + OSRM.loc("DISTANCE")+': </div>' +
|
||||
'<div class="left description-header-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="row">' +
|
||||
'<div class="left header-content" style="padding:0px 5px 0px 0x;">' + OSRM.loc("DURATION")+': </div>' +
|
||||
'<div class="left header-content" style="font-weight:bold;">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
|
||||
'<div class="left description-header-label">' + OSRM.loc("DURATION")+': </div>' +
|
||||
'<div class="left description-header-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
@ -91,42 +76,42 @@ show: function(response) {
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="quad" />' +
|
||||
'<div class="quad"></div>' +
|
||||
'</td></tr></thead>';
|
||||
|
||||
// create route description
|
||||
var route_desc = '<tbody style="row-group">';
|
||||
var body = '<tbody class="description-body">';
|
||||
for(var i=0; i < response.route_instructions.length; i++){
|
||||
//odd or even ?
|
||||
var rowstyle='results-odd';
|
||||
if(i%2==0) { rowstyle='results-even'; }
|
||||
var rowstyle='description-body-odd';
|
||||
if(i%2==0) { rowstyle='description-body-even'; }
|
||||
|
||||
route_desc += '<tr class="'+rowstyle+'">';
|
||||
body += '<tr class="'+rowstyle+'">';
|
||||
|
||||
route_desc += '<td class="result-directions">';
|
||||
route_desc += '<img class="result-direction" src="../'+OSRM.RoutingDescription.getDrivingInstructionIcon(response.route_instructions[i][0])+'" alt="" />';
|
||||
route_desc += "</td>";
|
||||
body += '<td class="description-body-directions">';
|
||||
body += '<img class="description-body-direction" src="../'+OSRM.RoutingDescription.getDrivingInstructionIcon(response.route_instructions[i][0])+'" alt="" />';
|
||||
body += "</td>";
|
||||
|
||||
// build route description
|
||||
route_desc += '<td class="result-items">';
|
||||
body += '<td class="description-body-items">';
|
||||
if( response.route_instructions[i][1] != "" )
|
||||
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]).replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
|
||||
body += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]).replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
|
||||
else
|
||||
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
|
||||
route_desc += "</td>";
|
||||
body += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
|
||||
body += "</td>";
|
||||
|
||||
route_desc += '<td class="result-distance">';
|
||||
body += '<td class="description-body-distance">';
|
||||
if( i != response.route_instructions.length-1 )
|
||||
route_desc += '<b>'+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+'</b>';
|
||||
route_desc += "</td>";
|
||||
body += '<b>'+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+'</b>';
|
||||
body += "</td>";
|
||||
|
||||
route_desc += "</tr>";
|
||||
body += "</tr>";
|
||||
}
|
||||
route_desc += '</tbody>';
|
||||
body += '</tbody>';
|
||||
|
||||
// put everything in DOM
|
||||
OSRM.G.printwindow.document.getElementById('description').innerHTML = '<table class="results-table medium-font">' + header + route_desc + '</table>';
|
||||
OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '<table class="results-table medium-font">' + header + '</table>';
|
||||
OSRM.G.printwindow.document.getElementById('description').innerHTML = '<table class="description medium-font">' + header + body + '</table>';
|
||||
OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '<table class="description medium-font">' + header + '</table>';
|
||||
|
||||
// draw map
|
||||
var tile_server_id = OSRM.G.map.getActiveLayerId();
|
||||
|
||||
@ -24,100 +24,6 @@ body
|
||||
}
|
||||
|
||||
|
||||
/* route description box */
|
||||
#description
|
||||
{
|
||||
width:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
/* route description box */
|
||||
#overview-map-description
|
||||
{
|
||||
width:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
/* route map box */
|
||||
#overview-map
|
||||
{
|
||||
width:500px;
|
||||
height:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
/* styles for information-box-header */
|
||||
div.header-title
|
||||
{
|
||||
font-weight:bold;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.header-content
|
||||
{
|
||||
font-weight:normal;
|
||||
}
|
||||
.result-link
|
||||
{
|
||||
color:#0000ff;
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
.result-link:hover
|
||||
{
|
||||
color:#ff0000;
|
||||
}
|
||||
|
||||
|
||||
/* style for information-box table (search results, driving directions) */
|
||||
.results-table
|
||||
{
|
||||
border-spacing:0px;
|
||||
width:100%;
|
||||
}
|
||||
.results-odd
|
||||
{
|
||||
background-color: #FFFDE3;
|
||||
}
|
||||
.results-even
|
||||
{
|
||||
background-color: #FFF9BB;
|
||||
}
|
||||
.result-items
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
width:100%;
|
||||
padding:1px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.result-directions
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
padding:1px 5px 1px 5px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.result-direction
|
||||
{
|
||||
height:36px;
|
||||
width:36px;
|
||||
}
|
||||
.result-distance
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align: middle;
|
||||
padding:1px 1px 1px 5px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.no-results
|
||||
{
|
||||
text-align:center;
|
||||
margin:28px;
|
||||
}
|
||||
|
||||
|
||||
/* header area */
|
||||
#printing-header
|
||||
{
|
||||
@ -136,6 +42,93 @@ div.header-title
|
||||
}
|
||||
|
||||
|
||||
/* content area */
|
||||
div.label
|
||||
{
|
||||
font-weight:bold;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.box
|
||||
{
|
||||
width:500px;
|
||||
margin:5px;
|
||||
}
|
||||
#overview-map
|
||||
{
|
||||
width:500px;
|
||||
height:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
/* description content */
|
||||
.description
|
||||
{
|
||||
border-spacing:0px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* styles for description header */
|
||||
.description-header
|
||||
{
|
||||
display:table-header-group;
|
||||
}
|
||||
.description-header-label
|
||||
{
|
||||
padding:0px 5px 0px 0px;
|
||||
}
|
||||
.description-header-content
|
||||
{
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
/* styles for description body */
|
||||
.description-body
|
||||
{
|
||||
display:table-row-group;
|
||||
}
|
||||
.description-body-odd
|
||||
{
|
||||
background-color: #FFFDE3;
|
||||
}
|
||||
.description-body-even
|
||||
{
|
||||
background-color: #FFF9BB;
|
||||
}
|
||||
.description-body-items
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
width:100%;
|
||||
padding:1px;
|
||||
}
|
||||
.description-body-directions
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
padding:1px 5px 1px 5px;
|
||||
}
|
||||
.description-body-direction
|
||||
{
|
||||
height:36px;
|
||||
width:36px;
|
||||
}
|
||||
.description-body-distance
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align: middle;
|
||||
padding:1px 1px 1px 5px;
|
||||
}
|
||||
@media print {
|
||||
.description-body-even > td,
|
||||
.description-body-odd > td
|
||||
{
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* utility styles */
|
||||
.quad
|
||||
{
|
||||
@ -154,6 +147,54 @@ div.header-title
|
||||
}
|
||||
|
||||
|
||||
/* fonts */
|
||||
@media print {
|
||||
.base-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.base-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* iconic buttons */
|
||||
.iconic-button
|
||||
{
|
||||
@ -178,56 +219,6 @@ div.header-title
|
||||
}
|
||||
|
||||
|
||||
/* fonts */
|
||||
@media print {
|
||||
|
||||
.base-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.base-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* table */
|
||||
.full
|
||||
{
|
||||
@ -256,11 +247,7 @@ div.header-title
|
||||
text-align:center;
|
||||
vertical-align:top;
|
||||
}
|
||||
.header-group
|
||||
.stretch
|
||||
{
|
||||
display:table-header-group;
|
||||
}
|
||||
.row-group
|
||||
{
|
||||
display:table-row-group;
|
||||
width:100%;
|
||||
}
|
||||
@ -50,15 +50,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
</div>
|
||||
|
||||
<!--description-->
|
||||
<div id="description-label" class="header-title">Routenbeschreibung</div>
|
||||
<div id="description"></div>
|
||||
<div id="description-label" class="label">Routenbeschreibung</div>
|
||||
<div id="description" class="box"></div>
|
||||
|
||||
<!--map-->
|
||||
<div class="pagebreak"></div>
|
||||
<div class="quad noprint"></div>
|
||||
<div class="quad noprint"></div>
|
||||
<div id="overview-map-label" class="header-title">Übersichtskarte</div>
|
||||
<div id="overview-map-description" class="results-table medium-font"></div>
|
||||
<div id="overview-map-label" class="label">Übersichtskarte</div>
|
||||
<div id="overview-map-description" class="box"></div>
|
||||
<div id="overview-map"></div>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user