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;
margin-bottom:10px;
}
.header-label
{
font-weight:normal;
padding:0px 5px 0px 0px;
}
.header-content
{
font-weight:normal;
@ -265,57 +270,57 @@ html, body {
/* style for information-box table (search results, driving directions) */
.results-table
.description
{
border-spacing:0px;
width:100%;
}
.results-odd
.description-body-odd
{
background-color: #FFFDE3;
}
.results-even
.description-body-even
{
background-color: #FFF9BB;
}
.result-counter
.description-body-counter
{
text-align:right;
vertical-align:top;
font-weight:bold;
padding:1px 5px 1px 5px;
}
.result-items
.description-body-items
{
text-align:left;
vertical-align: middle;
width:100%;
padding:1px;
}
.result-directions
.description-body-directions
{
text-align:left;
vertical-align: middle;
padding:1px 5px 1px 5px;
}
.result-direction
.description-body-direction
{
width:18px;
height:18px;
}
.result-distance
.description-body-distance
{
text-align:right;
vertical-align: middle;
padding:1px 1px 1px 5px;
}
.result-item
.description-body-item
{
cursor:pointer;
color:#000000
}
.result-item:hover
.description-body-item:hover
{
color:#ff0000
}
@ -497,3 +502,7 @@ html, body {
text-align:center;
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 += '<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>";
// build route description
body += '<td class="description-body-items">';
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
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 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>]';
// create route description
var route_desc = "";
route_desc += '<table class="results-table medium-font">';
var body = "";
body += '<table class="description medium-font">';
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>';
route_desc += '<td class="result-items">';
route_desc += '<div class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
body += '<td class="description-body-items">';
body += '<div class="description-body-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
// build route description
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]));
body += OSRM.loc(OSRM.RoutingDescription._getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"").replace(/%d/, OSRM.loc(response.route_instructions[i][6]));
route_desc += '</div>';
route_desc += "</td>";
body += '</div>';
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 += '</table>';
body += '</table>';
// create header
header =
'<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>';
// build 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);
// update DOM
document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = route_desc;
document.getElementById('information-box').innerHTML = body;
},
// simple description
showSimple: function(response) {
header =
'<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"></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>';
// build header
header = OSRM.RoutingDescription._buildHeader(OSRM.Utils.metersToDistance(response.route_summary.total_distance), OSRM.Utils.secondsToTime(response.route_summary.total_time), "", "");
// update DOM
document.getElementById('information-box-header').innerHTML = header;
@ -138,28 +113,68 @@ showSimple: function(response) {
// no description
showNA: function( display_text ) {
header =
'<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">' + "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>';
// build header
header = OSRM.RoutingDescription._buildHeader("N/A", "N/A", "", "");
// update DOM
document.getElementById('information-box-header').innerHTML = header;
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
getDrivingInstructionIcon: function(server_instruction_id) {
_getDrivingInstructionIcon: function(server_instruction_id) {
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)
local_icon_id += server_instruction_id;
@ -171,7 +186,7 @@ getDrivingInstructionIcon: function(server_instruction_id) {
},
// retrieve driving instructions from instruction ids
getDrivingInstruction: function(server_instruction_id) {
_getDrivingInstruction: function(server_instruction_id) {
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+)
local_instruction_id += server_instruction_id;