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

changed header area for normal routes

Browse Source
This commit is contained in:
shiin 2012-04-24 23:23:27 +02:00
parent 04298b73f3
commit 0068d4062d
3 changed files with 103 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
WebContent/main.css
View File

@ -248,6 +248,11 @@ html, body {
font-weight:bold; font-weight:bold;
margin-bottom:10px; margin-bottom:10px;
} }
.header-label
{
font-weight:normal;
padding:0px 5px 0px 0px;
}
.header-content .header-content
{ {
font-weight:normal; font-weight:normal;
@ -265,57 +270,57 @@ html, body {
/* style for information-box table (search results, driving directions) */ /* style for information-box table (search results, driving directions) */
.results-table .description
{ {
border-spacing:0px; border-spacing:0px;
width:100%; width:100%;
} }
.results-odd .description-body-odd
{ {
background-color: #FFFDE3; background-color: #FFFDE3;
} }
.results-even .description-body-even
{ {
background-color: #FFF9BB; background-color: #FFF9BB;
} }
.result-counter .description-body-counter
{ {
text-align:right; text-align:right;
vertical-align:top; vertical-align:top;
font-weight:bold; font-weight:bold;
padding:1px 5px 1px 5px; padding:1px 5px 1px 5px;
} }
.result-items .description-body-items
{ {
text-align:left; text-align:left;
vertical-align: middle; vertical-align: middle;
width:100%; width:100%;
padding:1px; padding:1px;
} }
.result-directions .description-body-directions
{ {
text-align:left; text-align:left;
vertical-align: middle; vertical-align: middle;
padding:1px 5px 1px 5px; padding:1px 5px 1px 5px;
} }
.result-direction .description-body-direction
{ {
width:18px; width:18px;
height:18px; height:18px;
} }
.result-distance .description-body-distance
{ {
text-align:right; text-align:right;
vertical-align: middle; vertical-align: middle;
padding:1px 1px 1px 5px; padding:1px 1px 1px 5px;
} }
.result-item .description-body-item
{ {
cursor:pointer; cursor:pointer;
color:#000000 color:#000000
} }
.result-item:hover .description-body-item:hover
{ {
color:#ff0000 color:#ff0000
} }
@ -497,3 +502,7 @@ html, body {
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
} }
.stretch
{
width:100%;
}

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

@ -89,15 +89,15 @@ show: function(response) {
body += '<tr class="'+rowstyle+'">'; body += '<tr class="'+rowstyle+'">';
body += '<td class="description-body-directions">'; body += '<td class="description-body-directions">';
body += '<img class="description-body-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="" />';
body += "</td>"; body += "</td>";
// build route description // build route description
body += '<td class="description-body-items">'; body += '<td class="description-body-items">';
if( response.route_instructions[i][1] != "" ) if( response.route_instructions[i][1] != "" )
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])); 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
body += 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]));
body += "</td>"; body += "</td>";
body += '<td class="description-body-distance">'; body += '<td class="description-body-distance">';

145
WebContent/routing/OSRM.RoutingDescription.js
View File

@ -58,78 +58,53 @@ show: function(response) {
var gpx_link = '[<a class="result-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]'; var gpx_link = '[<a class="result-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]';
// create route description // create route description
var route_desc = ""; var body = "";
route_desc += '<table class="results-table medium-font">';
body += '<table class="description medium-font">';
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>';
route_desc += '<td class="result-items">'; body += '<td class="description-body-items">';
route_desc += '<div class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">'; body += '<div class="description-body-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
// build route description // build route description
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 += '</div>'; body += '</div>';
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 += '</table>'; body += '</table>';
// create header // build header
header = header = OSRM.RoutingDescription._buildHeader(OSRM.Utils.metersToDistance(response.route_summary.total_distance), OSRM.Utils.secondsToTime(response.route_summary.total_time), route_link, gpx_link);
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="left header-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'<div class="right header-content" id="route-link">' + route_link + '</div>' +
'</div>' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'<div class="right header-content">' + gpx_link + '</div>' +
'</div>' +
'</div>';
// update DOM // update DOM
document.getElementById('information-box-header').innerHTML = header; document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = route_desc; document.getElementById('information-box').innerHTML = body;
}, },
// simple description // simple description
showSimple: function(response) { showSimple: function(response) {
header = // build header
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' + header = OSRM.RoutingDescription._buildHeader(OSRM.Utils.metersToDistance(response.route_summary.total_distance), OSRM.Utils.secondsToTime(response.route_summary.total_time), "", "");
'<div class="full">' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="left header-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'<div class="right header-content" id="route-link"></div>' +
'</div>' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'<div class="right header-content"></div>' +
'</div>' +
'</div>';
// update DOM // update DOM
document.getElementById('information-box-header').innerHTML = header; document.getElementById('information-box-header').innerHTML = header;
@ -138,28 +113,68 @@ showSimple: function(response) {
// no description // no description
showNA: function( display_text ) { showNA: function( display_text ) {
header = // build header
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' + header = OSRM.RoutingDescription._buildHeader("N/A", "N/A", "", "");
'<div class="full">' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="left header-content">' + "N/A" + '</div>' +
'<div class="right header-content" id="route-link"></div>' +
'</div>' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content">' + "N/A" + '</div>' +
'<div class="right header-content"></div>' +
'</div>' +
'</div>';
// update DOM // update DOM
document.getElementById('information-box-header').innerHTML = header; document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+display_text+"</div>"; document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+display_text+"</div>";
}, },
// build header
_buildHeader: function(distance, duration, route_link, gpx_link) {
var temp =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' +
'<div class="row">' +
'<div class="left">' +
'<div class="full">' +
'<div class="row">' +
'<div class="left header-label">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="left header-content stretch">' + distance + '</div>' +
'</div>' +
'<div class="row">' +
'<div class="left header-label">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content stretch">' + duration + '</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="left">' +
'<div class="full">' +
'<div class="row">' +
'<div class="right header-content" id="route-link">' + route_link + '</div>' +
'</div>' +
'<div class="row">' +
'<div class="right header-content">' + gpx_link + '</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
// '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
// '<div class="full">' +
// '<div class="row">' +
// '<div class="left header-label">' + OSRM.loc("DISTANCE")+":" + '</div>' +
// '<div class="left header-content">' + distance + '</div>' +
// '<div class="right header-content" id="route-link">' + route_link + '</div>' +
// '</div>' +
// '<div class="row">' +
// '<div class="left header-label">' + OSRM.loc("DURATION")+":" + '</div>' +
// '<div class="left header-content">' + duration + '</div>' +
// '<div class="right header-content">' + gpx_link + '</div>' +
// '</div>' +
// '</div>';
return temp;
},
// retrieve driving instruction icon from instruction id // retrieve driving instruction icon from instruction id
getDrivingInstructionIcon: function(server_instruction_id) { _getDrivingInstructionIcon: function(server_instruction_id) {
var local_icon_id = "direction_"; var local_icon_id = "direction_";
server_instruction_id = server_instruction_id.replace(/^11-\d{1,}$/,"11"); // dumb check, if there is a roundabout (all have the same icon) server_instruction_id = server_instruction_id.replace(/^11-\d{1,}$/,"11"); // dumb check, if there is a roundabout (all have the same icon)
local_icon_id += server_instruction_id; local_icon_id += server_instruction_id;
@ -171,7 +186,7 @@ getDrivingInstructionIcon: function(server_instruction_id) {
}, },
// retrieve driving instructions from instruction ids // retrieve driving instructions from instruction ids
getDrivingInstruction: function(server_instruction_id) { _getDrivingInstruction: function(server_instruction_id) {
var local_instruction_id = "DIRECTION_"; var local_instruction_id = "DIRECTION_";
server_instruction_id = server_instruction_id.replace(/^11-\d{2,}$/,"11-x"); // dumb check, if there are 10+ exits on a roundabout (say the same for exit 10+) server_instruction_id = server_instruction_id.replace(/^11-\d{2,}$/,"11-x"); // dumb check, if there are 10+ exits on a roundabout (say the same for exit 10+)
local_instruction_id += server_instruction_id; local_instruction_id += server_instruction_id;