city.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 class="active"><a href="/">Cities</a></li>
<li><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">
{% if code %}
<h3 class="panel-title">{{ code }} info:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" onclick="editCopy()">Edit</button>
<button type="button" class="btn btn-warning" onclick="window.location.href='/?rm={{ code }}'">Remove</button>
{% if country == "US" or country == "USA" %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#wxModal">Weather</button>
{% endif %}
</h3>
{% else %}
<h3 class="panel-title">City info:</h3>
{% endif %}
</div>
<div class="panel-body">
{{c_info if c_info != None }}
</div>
</div>
</div>
<div class="col-md-8">
<img src="{{ map_url }}" alt="Map unable to be displayed since one or more city codes are invalid." id="map_image" class="map-image" width=720 height=360>
<!--<div class="panel-heading">
</div>-->
<!--<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>-->
<!--<div class="panel panel-default">
<div class="panel-heading">
Options
</div>
</div>-->
<br><br>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal" onclick="noEdit()">Add City</button>
<!--<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Add Route</button>-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#hubModal">Hubs</button>
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Continents</button>-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contModal">Continents</button>
<br><br>
</div>
</div>
</div><!-- /.container -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">CSAir statistics:</h3>
</div>
<div class="panel-body">
{{s_info if s_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="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">Add City</h4>
</div>
<div class="modal-body">
<form role="form" action="add_city" method="post">
<div class="form-group">
<input type="text" class="form-control" name="cityCode" id="cityCode" placeholder="City code">
</div>
<div class="form-group">
<button type="button" class="btn btn-success" onclick="addAPI()">Add from API</button>
<p class="help-block">Will add the city from Wunderground's API.</p>
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityName" id="cityName" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityCountry" id="cityCountry" placeholder="Country">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityContinent" id="cityContinent" placeholder="Continent">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityTimezone" id="cityTimezone" placeholder="Timezone">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityLatitude" id="cityLatitude" placeholder="Latitude">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityLongitude" id="cityLongitude" placeholder="Longitude">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityPop" id="cityPop" placeholder="Population">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cityRegion" id="cityRegion" placeholder="Region">
</div>
<!-- Form POST not add_city_post.py -->
<!--<button type="submit" class="btn btn-success">Submit</button>-->
<button type="button" class="btn btn-success" onclick="addCity()">Submit</button>
</form>
</div>
</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="hubModal" 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">Hub cities</h4>
</div>
<div class="modal-body">
{{hubs if hubs != None }}
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="contModal" 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">Cities categorized by continents</h4>
</div>
<div class="modal-body">
{{conts if conts != None }}
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="wxModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 1000px">
<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">Weather for {{code if code != None}}</h4>
</div>
<div class="modal-body">
<iframe src="{{WX_url if WX_url != None }}" style="height: 700px" frameborder="0" width="99.6%" height="250"></iframe>
</div>
</div>
</div>
</div>
<script>
var edit = false
var old_code = "{{code}}"
function addAPI() {
window.location = "/add_city?api=true&cityCode=" + document.getElementById("cityCode").value
+ "&edit=" + edit
+ "&old_code=" + old_code
}
function addCity() {
window.location = "/add_city?" + "cityCode=" + document.getElementById("cityCode").value
+ "&cityName=" + document.getElementById("cityName").value
+ "&cityCountry=" + document.getElementById("cityCountry").value
+ "&cityContinent=" + document.getElementById("cityContinent").value
+ "&cityTimezone=" + document.getElementById("cityTimezone").value
+ "&cityLatitude=" + document.getElementById("cityLatitude").value
+ "&cityLongitude=" + document.getElementById("cityLongitude").value
+ "&cityPop=" + document.getElementById("cityPop").value
+ "&cityRegion=" + document.getElementById("cityRegion").value
+ "&edit=" + edit
+ "&old_code=" + old_code
}
function editCopy() {
document.getElementById("cityCode").value = "{{code}}"
document.getElementById("cityName").value = "{{name}}"
document.getElementById("cityCountry").value = "{{country}}"
document.getElementById("cityContinent").value= "{{continent}}"
document.getElementById("cityTimezone").value = "{{timezone}}"
document.getElementById("cityLatitude").value = "{{latitude}}"
document.getElementById("cityLongitude").value = "{{longitude}}"
document.getElementById("cityPop").value = "{{pop}}"
document.getElementById("cityRegion").value = "{{region}}"
edit = true
}
function noEdit(){
edit = false
}
</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>
