Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

finished printing support (?)

Browse Source
This commit is contained in:
DennisSchiefer 2012-04-24 22:12:24 +02:00
parent 7cdeeb0723
commit 7657f0de22
3 changed files with 170 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
WebContent/printing/OSRM.Printing.js
View File

@ -42,35 +42,20 @@ init: function() {
show: function(response) { show: function(response) {
// create header // create header
var header = var header =
'<thead class="header-group"><tr><td colspan="3">' + '<thead class="description-header"><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>' +
'<div class="full">' + '<div class="full">' +
'<div class="row">' + '<div class="row">' +
'<div class="left" style="width:100%">' + '<div class="left stretch">' +
'<div class="full">' + '<div class="full">' +
'<div class="row">' + '<div class="row">' +
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_START")+ ': </div>' + '<div class="left description-header-label">' + 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-content stretch">' + document.getElementById("gui-input-source").value + '</div>' +
'</div>' + '</div>' +
'<div class="row">' + '<div class="row">' +
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("GUI_END")+ ': </div>' + '<div class="left description-header-label">' + 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-content stretch">' + document.getElementById("gui-input-target").value + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
@ -78,12 +63,12 @@ show: function(response) {
'<div class="left">' + '<div class="left">' +
'<div class="full">' + '<div class="full">' +
'<div class="row">' + '<div class="row">' +
'<div class="left header-content" style="padding:0px 5px 0px 0px;">' + OSRM.loc("DISTANCE")+': </div>' + '<div class="left description-header-label">' + 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-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'</div>' + '</div>' +
'<div class="row">' + '<div class="row">' +
'<div class="left header-content" style="padding:0px 5px 0px 0x;">' + OSRM.loc("DURATION")+': </div>' + '<div class="left description-header-label">' + 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-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
@ -91,42 +76,42 @@ show: function(response) {
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="quad" />' + '<div class="quad"></div>' +
'</td></tr></thead>'; '</td></tr></thead>';
// create route description // 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++){ for(var i=0; i < response.route_instructions.length; i++){
//odd or even ? //odd or even ?
var rowstyle='results-odd'; var rowstyle='description-body-odd';
if(i%2==0) { rowstyle='results-even'; } if(i%2==0) { rowstyle='description-body-even'; }
route_desc += '<tr class="'+rowstyle+'">'; body += '<tr class="'+rowstyle+'">';
route_desc += '<td class="result-directions">'; body += '<td class="description-body-directions">';
route_desc += '<img class="result-direction" src="../'+OSRM.RoutingDescription.getDrivingInstructionIcon(response.route_instructions[i][0])+'" alt="" />'; body += '<img class="description-body-direction" src="../'+OSRM.RoutingDescription.getDrivingInstructionIcon(response.route_instructions[i][0])+'" alt="" />';
route_desc += "</td>"; body += "</td>";
// build route description // build route description
route_desc += '<td class="result-items">'; body += '<td class="description-body-items">';
if( response.route_instructions[i][1] != "" ) 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 else
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6])); body += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
route_desc += "</td>"; body += "</td>";
route_desc += '<td class="result-distance">'; body += '<td class="description-body-distance">';
if( i != response.route_instructions.length-1 ) if( i != response.route_instructions.length-1 )
route_desc += '<b>'+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+'</b>'; body += '<b>'+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+'</b>';
route_desc += "</td>"; body += "</td>";
route_desc += "</tr>"; body += "</tr>";
} }
route_desc += '</tbody>'; body += '</tbody>';
// put everything in DOM // 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('description').innerHTML = '<table class="description medium-font">' + header + body + '</table>';
OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '<table class="results-table medium-font">' + header + '</table>'; OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '<table class="description medium-font">' + header + '</table>';
// draw map // draw map
var tile_server_id = OSRM.G.map.getActiveLayerId(); var tile_server_id = OSRM.G.map.getActiveLayerId();

287
WebContent/printing/printing.css
View File

@ -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 */ /* header area */
#printing-header #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 */ /* utility styles */
.quad .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 buttons */
.iconic-button .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 */ /* table */
.full .full
{ {
@ -256,11 +247,7 @@ div.header-title
text-align:center; text-align:center;
vertical-align:top; vertical-align:top;
} }
.header-group .stretch
{ {
display:table-header-group; width:100%;
}
.row-group
{
display:table-row-group;
} }

8
WebContent/printing/printing.html
View File

@ -50,15 +50,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
</div> </div>
<!--description--> <!--description-->
<div id="description-label" class="header-title">Routenbeschreibung</div> <div id="description-label" class="label">Routenbeschreibung</div>
<div id="description"></div> <div id="description" class="box"></div>
<!--map--> <!--map-->
<div class="pagebreak"></div> <div class="pagebreak"></div>
<div class="quad noprint"></div> <div class="quad noprint"></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-label" class="label">Übersichtskarte</div>
<div id="overview-map-description" class="results-table medium-font"></div> <div id="overview-map-description" class="box"></div>
<div id="overview-map"></div> <div id="overview-map"></div>
</body> </body>