routes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Kate Fayra">
<!-- <link rel="icon" href="../../favicon.ico">-->
<title>CSAir</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">CSAir</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Cities</a></li>
<li class="active"><a href="routes">Routes</a></li>
<li><a href="save.json">Export</a></li>
<li data-toggle="modal" data-target="#uploadModal"><a href="#">Import</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select City: <span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
{{ city_menu }}
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Routes queried: <button type="submit" class="btn btn-primary" onclick="window.location = '/routes?clear=routes'">Clear</button></h3>
</div>
<div class="panel-body">
{{route_log if route_log != None }}
</div>
</div>
</div>
<div class="col-md-8">
<img src="{{ map_url }}" alt="map" id="map_image" class="map-image" width=720 height=360>
<br><br>
<form class="form-inline" role="form">
<div class="input-group">
<div class="input-group-addon">Source</div>
<input type="text" class="form-control" id="Source" style="width:89px;">
</div>
<div class="input-group">
<div class="input-group-addon">Destination</div>
<input type="text" class="form-control" id="Destination" style="width:89px;">
</div>
<button type="button" class="btn btn-primary" onclick="shortestRoute()">Find Shortest Route</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal" onclick="addCopy()">Add Route</button>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#rmModal" onclick="rmCopy()">Remove Route</button>
</form>
<br>
<form class="form-inline" role="form">
<div class="input-group">
<div class="input-group-addon">Specify Route</div>
<input type="text" class="form-control" id="Route" placeholder="ABC-IJK-XYZ" style="width: 431px;">
</div>
<button type="button" class="btn btn-primary" onclick="lookupRoute()">Lookup Specified Route</button>
</form>
<br><br>
</div>
</div>
</div><!-- /.container -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Route statistics:</h3>
</div>
<div class="panel-body">
{{r_info if r_info != None }}
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Log:</h3>
</div>
<div class="panel-body">
{{log if log != None }}
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Import Data</h4>
</div>
<div class="modal-body">
Upload a .json file to merge with the current data.
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"><br /><br />
<input type="submit" value="Upload and merge">
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add route</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="input-group-addon">Source</div>
<input type="text" class="form-control" id="addModalSource" style="width:89px;">
</div>
<div class="input-group">
<div class="input-group-addon">Destination</div>
<input type="text" class="form-control" id="addModalDest" style="width:89px;">
</div>
<div class="input-group">
<div class="input-group-addon">Distance (km)</div>
<input type="text" class="form-control" id="addDistance" style="width:89px;">
</div>
<input type="checkbox" name="addDirection" id="addDirection">
<em>Add the route in both directions.</em>
<button type="button" class="btn btn-success" onclick="addRoute()">Add Route</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="rmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Remove route</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="input-group-addon">Source</div>
<input type="text" class="form-control" id="rmSource" style="width:89px;">
</div>
<div class="input-group">
<div class="input-group-addon">Destination</div>
<input type="text" class="form-control" id="rmDest" style="width:89px;">
</div>
<input type="checkbox" id="rmDirection">
<em>Remove the route in both directions.</em>
<button type="button" class="btn btn-warning" onclick="rmRoute()">Remove Route</button>
</div>
</div>
</div>
</div>
<script>
function shortestRoute() {
//console.log(document.getElementById("Source").value);
window.location = "/routes?source=" + document.getElementById("Source").value + "&dest=" + document.getElementById("Destination").value
}
function lookupRoute() {
console.log("Hello");
window.location = "/routes?route=" + document.getElementById("Route").value
}
function addCopy(){
document.getElementById("addModalSource").value = document.getElementById("Source").value
document.getElementById("addModalDest").value = document.getElementById("Destination").value
}
function rmCopy(){
document.getElementById("rmSource").value = document.getElementById("Source").value
document.getElementById("rmDest").value = document.getElementById("Destination").value
}
function addRoute() {
window.location = "/routes?source=" + document.getElementById("addModalSource").value
+ "&dest=" + document.getElementById("addModalDest").value
+ "&direction=" + document.getElementById("addDirection").checked
+ "&distance=" + document.getElementById("addDistance").value
+ "&add=y"
}
function rmRoute() {
window.location = "/routes?source=" + document.getElementById("rmSource").value
+ "&dest=" + document.getElementById("rmDest").value
+ "&direction=" + document.getElementById("rmDirection").checked
+ "&rm=y"
}
function removeRoute() {
window.location = "/routes?source=" + document.getElementById("Source").value + "&dest=" + document.getElementById("Destination").value + "&remove=y"
}
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
