Paul Wallace / CSE 170 Group Project

Compare View

switch
from
...
to
 
Commits (2)

Diff

Showing 6 changed files Inline Diff

public/stylesheets/main.css View file @ 3c57c89
#alt-routes { 1 1 #alt-routes {
height: 75px; 2 2 height: 75px;
} 3 3 }
4 4
#map { 5 5 #map {
height: 600px; 6
margin-bottom: 10px; 7 6 margin-bottom: 10px;
width: 100%; 8
} 9 7 }
10 8
#map-top { 11 9 #map-top {
margin-bottom: 30px; 12 10 margin-bottom: 30px;
} 13 11 }
14 12
.img-responsive { 15 13 .img-responsive {
margin: 0 auto; 16 14 margin: 0 auto;
} 17 15 }
18 16
.status { 19 17 .status {
margin-top: 5px; 20 18 margin-top: 5px;
} 21 19 }
22 20
.text-field { 23 21 .text-field {
margin-top: 30px; 24 22 margin-top: 30px;
margin-bottom: 30px; 25 23 margin-bottom: 30px;
} 26 24 }
27 25
.center-this { 28 26 .center-this {
margin: 0 auto; 29 27 margin: 0 auto;
routes/crime.js View file @ 3c57c89
File was created 1 var unirest = require('unirest');
2
3 exports.view = function(req, res){
4
5 unirest.get("https://yourmapper2.p.mashape.com/datasetlist?format=json&maxlat=40&maxlon=-70&minlat=30&minlon=-90&num=5&sort=location")
6 .header("X-Mashape-Key", "gj4g6D3zxKmshys7yyf9KNbuywOxp1ueazFjsn6n2fK4sccIGA")
7 .header("Accept", "application/json")
8 .end(function (result) {
9 // console.log(result.status, result.headers, result.body);
10
11 });
12
13
14
15 // These code snippets use an open-source library. http://unirest.io/nodejs
16 unirest.get("https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=38.08809&lon=-85.679626")
17 .header("X-Mashape-Key", "gj4g6D3zxKmshys7yyf9KNbuywOxp1ueazFjsn6n2fK4sccIGA")
18 .header("Accept", "application/json")
19 .end(function (result) {
20 res.render('pages/tempcrime', result);
21 });
22
23
24 };
var unirest = require('unirest'); 1
2
exports.view = function(req, res){ 3
4
unirest.get("https://yourmapper2.p.mashape.com/datasetlist?format=json&maxlat=40&maxlon=-70&minlat=30&minlon=-90&num=5&sort=location") 5
.header("X-Mashape-Key", "gj4g6D3zxKmshys7yyf9KNbuywOxp1ueazFjsn6n2fK4sccIGA") 6
.header("Accept", "application/json") 7
.end(function (result) { 8
// console.log(result.status, result.headers, result.body); 9
10
}); 11
12
13
14
// These code snippets use an open-source library. http://unirest.io/nodejs 15
unirest.get("https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=38.08809&lon=-85.679626") 16
views/pages/index.ejs View file @ 3c57c89
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html lang="en"> 2 2 <html lang="en">
<head> 3 3 <head>
<% include ../partials/header %> 4 4 <!-- <% include ../partials/header %> -->
</head> 5 5 </head>
6 6
<!-- Homepage --> 7 7 <!-- Homepage -->
8 8
<body> 9 9 <body>
<div class="container-fluid"> 10 10 <div class="container-fluid">
<div class="jumbotron text-center"> 11 11 <div class="jumbotron text-center">
<h1>Safe Routes</h1> 12 12 <h1>Safe Routes</h1>
<p>The best way to find the safest routes.</p> 13 13 <p>The best way to find the safest routes.</p>
</div> 14 14 </div>
15 15
<!--What are for and type for?--> 16 16 <!--What are for and type for?-->
<!-- current submit button takes you to the landing page --> 17 17 <!-- current submit button takes you to the landing page -->
<form action="/landing"> 18 18 <form action="/landing">
<!-- First text field and label above the text field for current location --> 19 19 <!-- First text field and label above the text field for current location -->
<div class="form-group text-center"> 20 20 <div class="form-group text-center">
<label for="currentLocation">From</label> 21 21 <label for="currentLocation">From</label>
<input type="currentLocation" class="form-control" id="origin" placeholder="Enter Current Location" onchange="saveFrom()"> 22 22 <input type="currentLocation" class="form-control" placeholder="Enter Current Location">
</div> 23 23 </div>
<!-- Second text field and label above the text field for destination --> 24 24 <!-- Second text field and label above the text field for destination -->
<div class="form-group text-center"> 25 25 <div class="form-group text-center">
<label for="destination">To</label> 26 26 <label for="destination">To</label>
<input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()"> 27 27 <input type="destination" class="form-control" placeholder="Enter Destination">
</div> 28 28 </div>
<!-- First travel option button, walking 29 29 <!-- First travel option button, walking
This contains a row that holds buttons of type button. Buttons are highlighted upon selection. 30 30 This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
--> 31 31 -->
<div class="row"> 32 32 <div class="row">
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();"> 33 33 <button type="button" class="btn-default img-thumbnail col-xs-4">
<img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40"> 34 34 <img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40">
</button> 35 35 </button>
36 36
<!-- Second travel button, driving --> 37 37 <!-- Second travel button, driving -->
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();"> 38 38 <button type="button" class="btn-default img-thumbnail col-xs-4">
<img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40"> 39 39 <img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40">
</button> 40 40 </button>
41 41
<!-- Third travel button, bus --> 42 42 <!-- Third travel button, bus -->
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();"> 43 43 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="javascript:autofill();">
<img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40"> 44 44 <img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
</button> 45 45 </button>
</div> 46 46 </div>
47
<div class="text-center"> 48 47 <div class="text-center">
<button type="submit" class="btn btn-primary btn-space">Go</button> 49 48 <button type="submit" class="btn btn-primary btn-space">Go</button>
49
</div> 50 50 </div>
</form> 51 51 </form>
</div> 52
53 52
<!-- Google Map functionality. --> 54 53 </div>
<script> 55
function saveFrom() { 56
var fromInput = document.getElementById("origin").value; 57
localStorage.setItem("from", fromInput); 58
} 59
function saveTo() { 60
var toInput = document.getElementById("dest").value; 61
localStorage.setItem("to", toInput); 62
} 63
function walk() { 64
localStorage.setItem("mode", "WALKING"); 65
} 66
function drive() { 67
localStorage.setItem("mode", "DRIVING"); 68
} 69
function bus() { 70
localStorage.setItem("mode", "TRANSIT"); 71
} 72
</script> 73
74 54
</body> 75 55 </body>
views/pages/landing.ejs View file @ 3c57c89
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html lang="en"> 2 2 <html lang="en">
<head> 3 3 <head>
<% include ../partials/header %> 4 4 <% include ../partials/header %>
</head> 5 5 </head>
6 6
7 7
<body> 8 8 <body>
<div class="container"> 9 9 <div class="container">
10 10
<!-- My LOCATION --> 11 11 <!-- My LOCATION -->
<div> 12 12 <div>
<input type="text" class="form-control text-field" id="from" name="fromText" placeholder="MY LOCATION"> 13 13 <input type="text" class="form-control text-field" placeholder="MY LOCATION">
</div> 14 14 </div>
<!-- Destination --> 15 15 <!-- Destination -->
<div> 16 16 <div>
<input type="text" class="form-control text-field" id="to" name="toText" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..."> 17 17 <input type="text" class="form-control text-field" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...">
</div> 18 18 </div>
19 19
<!-- Buttons and status information on top of the map. --> 20 20 <!-- Buttons and status information on top of the map. -->
<div class="container" id="map-top"> 21 21 <div class="container" id="map-top">
<div class="row"> 22 22 <div class="row">
<!-- Status --> 23 23 <!-- Status -->
<div class="col-xs-6"> 24 24 <div class="col-xs-6">
<!-- Title: Current Route --> 25 25 <!-- Title: Current Route -->
<div> 26 26 <div>
Current Route: 27 27 Current Route:
</div> 28 28 </div>
<!-- Icons + Status --> 29 29 <!-- Icons + Status -->
<div class="row status"> 30 30 <div class="row status">
<!-- Safety Rating --> 31 31 <!-- Safety Rating -->
<div class="col-xs-6"> 32 32 <div class="col-xs-6">
80% Safe 33 33 80% Safe
</div> 34 34 </div>
<!-- Travel Duration --> 35 35 <!-- Travel Duration -->
<div class="col-xs-6"> 36 36 <div class="col-xs-6">
10 Mins 37 37 10 Mins
</div> 38 38 </div>
</div> 39 39 </div>
</div> 40 40 </div>
<!-- Alt Routes --> 41 41 <!-- Alt Routes -->
<div class="col-xs-6"> 42 42 <div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" id="alt-routes" onclick="todo()">Alternate Routes</button> 43 43 <button type="button" class="btn btn-default btn-block" id="alt-routes" onclick="todo()">Alternate Routes</button>
</div> 44 44 </div>
</div> 45 45 </div>
</div> 46 46 </div>
47 47
<!-- Div container for map. --> 48 48 <!-- Google Maps -->
<div id="map"></div> 49 49 <div class="container" id="map">
50 50 <!-- Placeholder -->
<!-- Javascript for the map. --> 51 51 <img class="img-responsive" src="images/temp.png" alt="temp" width="800" height="600">
<script> 52 52 </div>
function initMap() { 53
// Used by the Google Maps Direction API. 54
var directionsService = new google.maps.DirectionsService; 55
var directionsDisplay = new google.maps.DirectionsRenderer; 56
// Setting default map location. 57
var map = document.getElementById("map"); 58
var options = { 59
center: new google.maps.LatLng(32.8804526, -117.2376329), 60
zoom: 17 61
} 62
map = new google.maps.Map(map, options); 63
directionsDisplay.setMap(map); 64
65
// Keeping the map center when the browser is resized. 66
function resizing() { 67
var center = map.getCenter(); 68
google.maps.event.trigger(map, "resize"); 69
map.setCenter(center); 70
} 71
72
google.maps.event.addDomListener(window, "resize", resizing); 73
74
// Showing route. 75
displayRoute(directionsService, directionsDisplay); 76
} 77
78
function displayRoute(directionsService, directionsDisplay) { 79
// Textfields that show from and to. 80
document.getElementsByName("fromText")[0].placeholder=localStorage.getItem("from"); 81
document.getElementsByName("toText")[0].placeholder=localStorage.getItem("to"); 82
83
var request = { 84
origin: localStorage.getItem("from"), 85
destination: localStorage.getItem("to"), 86
travelMode: localStorage.getItem("mode") 87
}; 88
89
directionsService.route(request, function(response, status) { 90
if (status === "OK") { 91
directionsDisplay.setDirections(response); 92
} 93
else { 94
window.alert("Directions request failed due to " + status); 95
} 96
}); 97
} 98
</script> 99
100
<!-- Calling google maps API using the function defined above. --> 101
<script async defer 102
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&callback=initMap"> 103
</script> 104
105 53
<!-- Buttons at the bottom of the map --> 106 54 <!-- Buttons at the bottom of the map -->
<div class="container"> 107 55 <div class="container">
<div class="row"> 108 56 <div class="row">
<!-- Status --> 109 57 <!-- Status -->
<div class="col-xs-4"> 110 58 <div class="col-xs-4">
<!-- Title: Current Area --> 111 59 <!-- Title: Current Area -->
<div> 112 60 <div>
Current Area: 113 61 Current Area:
</div> 114 62 </div>
<!-- Icons + Status --> 115 63 <!-- Icons + Status -->
<div> 116 64 <div>
80% Safe 117 65 80% Safe
</div> 118 66 </div>
</div> 119 67 </div>
<!-- Emergency --> 120 68 <!-- Emergency -->
<div class="col-xs-4"> 121 69 <div class="col-xs-4">
<button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button> 122 70 <button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>
</div> 123 71 </div>
<!-- Open Map --> 124 72 <!-- Open Map -->
<div class="col-xs-4"> 125 73 <div class="col-xs-4">
<button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button> 126 74 <button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>
</div> 127 75 </div>
</div> 128 76 </div>
</div> 129 77 </div>
130 78
views/pages/tempcrime.ejs View file @ 3c57c89
File was created 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <% include ../partials/header %>
5 </head>
6
7 <body>
8 <%= body %>
9 </body>
10
11 </html>
<!DOCTYPE html> 1
<html lang="en"> 2
<head> 3
<% include ../partials/header %> 4
</head> 5
6
<body> 7
<%= body %> 8
</body> 9
views/partials/header.ejs View file @ 3c57c89
<meta charset="utf-8"> 1 1 <meta charset="utf-8">
<!-- Ensure that Bootstrap is mobile friendly --> 2 2 <!-- Ensure that Bootstrap is mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1"> 3 3 <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS --> 4 4 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 5 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
6 6
<!-- Optional theme --> 7 7 <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 8 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
9 9
<!-- JQuery --> 10 10 <!-- JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 11 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
12 12
<!-- Latest compiled and minified JavaScript --> 13 13 <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 14 14 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>