From 7657f0de222da4a68d6bd3600f01ea66e156496b Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Tue, 24 Apr 2012 22:12:24 +0200 Subject: [PATCH] finished printing support (?) --- WebContent/printing/OSRM.Printing.js | 73 +++---- WebContent/printing/printing.css | 287 +++++++++++++-------------- WebContent/printing/printing.html | 8 +- 3 files changed, 170 insertions(+), 198 deletions(-) diff --git a/WebContent/printing/OSRM.Printing.js b/WebContent/printing/OSRM.Printing.js index 9def95301..b63f6638c 100644 --- a/WebContent/printing/OSRM.Printing.js +++ b/WebContent/printing/OSRM.Printing.js @@ -42,35 +42,20 @@ init: function() { show: function(response) { // create header var header = - '' + - -// '
' + -// '
' + -// '
' + OSRM.loc("GUI_START")+ ':
' + -// '
' + document.getElementById("gui-input-source").value + '
' + -// '
' + OSRM.loc("DISTANCE")+':
' + -// '
' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '
' + -// '
' + -// '
' + -// '
' + OSRM.loc("GUI_END")+ ':
' + -// '
' + document.getElementById("gui-input-target").value + '
' + -// '
' + OSRM.loc("DURATION")+':
' + -// '
' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '
' + -// '
' + -// '
' + + '' + '
' + '
' + - '
' + + '
' + '
' + '
' + - '
' + OSRM.loc("GUI_START")+ ':
' + - '
' + document.getElementById("gui-input-source").value + '
' + + '
' + OSRM.loc("GUI_START")+ ':
' + + '
' + document.getElementById("gui-input-source").value + '
' + '
' + '
' + - '
' + OSRM.loc("GUI_END")+ ':
' + - '
' + document.getElementById("gui-input-target").value + '
' + + '
' + OSRM.loc("GUI_END")+ ':
' + + '
' + document.getElementById("gui-input-target").value + '
' + '
' + '
' + '
' + @@ -78,12 +63,12 @@ show: function(response) { '
' + '
' + '
' + - '
' + OSRM.loc("DISTANCE")+':
' + - '
' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '
' + + '
' + OSRM.loc("DISTANCE")+':
' + + '
' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '
' + '
' + '
' + - '
' + OSRM.loc("DURATION")+':
' + - '
' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '
' + + '
' + OSRM.loc("DURATION")+':
' + + '
' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '
' + '
' + '
' + '
' + @@ -91,42 +76,42 @@ show: function(response) { '
' + '
' + - '
' + + '
' + ''; // create route description - var route_desc = ''; + var 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 += ''; + body += ''; - route_desc += ''; - route_desc += ''; - route_desc += ""; + body += ''; + body += ''; + body += ""; // build route description - route_desc += ''; + body += ''; 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 += ""; + body += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6])); + body += ""; - route_desc += ''; + body += ''; if( i != response.route_instructions.length-1 ) - route_desc += ''+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+''; - route_desc += ""; + body += ''+OSRM.Utils.metersToDistance(response.route_instructions[i][2])+''; + body += ""; - route_desc += ""; + body += ""; } - route_desc += ''; + body += ''; // put everything in DOM - OSRM.G.printwindow.document.getElementById('description').innerHTML = '' + header + route_desc + '
'; - OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '' + header + '
'; + OSRM.G.printwindow.document.getElementById('description').innerHTML = '' + header + body + '
'; + OSRM.G.printwindow.document.getElementById('overview-map-description').innerHTML = '' + header + '
'; // draw map var tile_server_id = OSRM.G.map.getActiveLayerId(); diff --git a/WebContent/printing/printing.css b/WebContent/printing/printing.css index 570dfdc68..c09d75ea1 100644 --- a/WebContent/printing/printing.css +++ b/WebContent/printing/printing.css @@ -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%; } \ No newline at end of file diff --git a/WebContent/printing/printing.html b/WebContent/printing/printing.html index 3db6a2ac7..9206de4fb 100644 --- a/WebContent/printing/printing.html +++ b/WebContent/printing/printing.html @@ -50,15 +50,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
-
Routenbeschreibung
-
+
Routenbeschreibung
+
-
Übersichtskarte
-
+
Übersichtskarte
+