Paul Wallace / CSE 170 Group Project

Compare View

switch
from
...
to
 
Commits (5)

Diff

Showing 6 changed files Inline Diff

.gitignore View file @ 5c8dd66
1
# Node build artifacts 2
node_modules 3
npm-debug.log 4
5 1
# Local development 6 2 # Node build artifacts
*.env 7
*.dev 8
.DS_Store 9
10
# Docker 11
Dockerfile 12
docker-compose.yml 13
14
15
16
17
18
19
index.js View file @ 5c8dd66
var express = require('express'); 1 1 var express = require('express');
2 var crime = require('./routes/crime');
3
2 4
var app = express(); 3 5 var app = express();
var app = require('/crime'); 4 6
5 7 app.set('port', (process.env.PORT || 5000));
app.set('port', (process.env.PORT || 5000)); 6 8
7 9 app.use(express.static(__dirname + '../public'));
app.use(express.static(__dirname + '/public')); 8 10
9 11 // views is directory for all template files
// views is directory for all template files 10 12 app.set('views', __dirname + '/views');
app.set('views', __dirname + '/views'); 11 13 app.set('view engine', 'ejs');
app.set('view engine', 'ejs'); 12 14
13 15 app.get('/', function(request, response) {
app.get('/', function(request, response) { 14 16 response.render('pages/index');
response.render('pages/index'); 15 17 });
}); 16 18
17 19 app.get('/landing', function(request, response) {
app.get('/landing', function(request, response) { 18 20 response.render('pages/landing');
response.render('pages/landing'); 19 21 });
}); 20 22
23 app.get('/api', crime.view);
public/stylesheets/main.css View file @ 5c8dd66
#alt-routes { 1 1 #alt-routes {
height: 75px; 2 2 height: 75px;
} 3 3 }
4 4
#map { 5 5 #map {
6 height: 600px;
height: 600px; 6 7 margin-bottom: 10px;
8 width: 100%;
margin-bottom: 10px; 7 9 }
width: 100%; 8 10
} 9 11 #map-top {
10 12 margin-bottom: 30px;
#map-top { 11 13 }
margin-bottom: 30px; 12 14
} 13 15 .img-responsive {
14 16 margin: 0 auto;
.img-responsive { 15 17 }
margin: 0 auto; 16 18
} 17 19 .status {
18 20 margin-top: 5px;
.status { 19 21 }
margin-top: 5px; 20 22
} 21 23 .text-field {
22 24 margin-top: 30px;
.text-field { 23 25 margin-bottom: 30px;
margin-top: 30px; 24 26 }
margin-bottom: 30px; 25 27
} 26 28 .center-this {
27 29 margin: 0 auto;
.center-this { 28 30 width: 100%;
margin: 0 auto; 29 31 }
views/pages/index.ejs View file @ 5c8dd66
<!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" id="origin" placeholder="Enter Current Location" onchange="saveFrom()">
</div> 23 23 </div>
<!-- Second text field and label above the text field for destination --> 24
<div class="form-group text-center"> 25 24 <!-- Second text field and label above the text field for destination -->
<label for="destination">To</label> 26 25 <div class="form-group text-center">
<input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()"> 27 26 <label for="destination">To</label>
</div> 28 27 <input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()">
<!-- First travel option button, walking 29 28 </div>
This contains a row that holds buttons of type button. Buttons are highlighted upon selection. 30
--> 31 29 <!-- First travel option button, walking
<div class="row"> 32 30 This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();"> 33 31 -->
<img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40"> 34 32 <div class="row">
</button> 35 33 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();">
36 34 <img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40">
<!-- Second travel button, driving --> 37 35 </button>
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();"> 38 36
<img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40"> 39 37 <!-- Second travel button, driving -->
</button> 40 38 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();">
41 39 <img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40">
<!-- Third travel button, bus --> 42 40 </button>
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();"> 43 41
<img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40"> 44 42 <!-- Third travel button, bus -->
</button> 45 43 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();">
</div> 46 44 <img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
47 45 </button>
<div class="text-center"> 48 46 </div>
47
<button type="submit" class="btn btn-primary btn-space">Go</button> 49 48 <div class="text-center">
</div> 50 49 <button type="submit" class="btn btn-primary btn-space">Go</button>
</form> 51
</div> 52 50 </div>
53
<!-- Google Map functionality. --> 54 51 </form>
<script> 55
function saveFrom() { 56 52 </div>
var fromInput = document.getElementById("origin").value; 57 53
54 <!-- Google Map functionality. -->
55 <script>
56 function saveFrom() {
57 var fromInput = document.getElementById("origin").value;
58 localStorage.setItem("from", fromInput);
59 }
60 function saveTo() {
61 var toInput = document.getElementById("dest").value;
62 localStorage.setItem("to", toInput);
63 }
64 function walk() {
65 localStorage.setItem("mode", "WALKING");
66 }
67 function drive() {
68 localStorage.setItem("mode", "DRIVING");
69 }
70 function bus() {
71 localStorage.setItem("mode", "TRANSIT");
72 }
73 </script>
74
localStorage.setItem("from", fromInput); 58 75 </body>
} 59 76 </html>
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
views/pages/landing.ejs View file @ 5c8dd66
<!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" id="from" name="fromText" 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" id="to" name="toText" 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 <!-- Div container for map. -->
<div id="map"></div> 49 49 <div id="map"></div>
50 50
<!-- Javascript for the map. --> 51 51 <!-- Javascript for the map. -->
<script> 52 52 <script>
53 function initMap() {
54 // Used by the Google Maps Direction API.
55 var directionsService = new google.maps.DirectionsService;
56 var directionsDisplay = new google.maps.DirectionsRenderer;
57 // Setting default map location.
58 var map = document.getElementById("map");
59 var options = {
60 center: new google.maps.LatLng(32.8804526, -117.2376329),
61 zoom: 17
62 }
63 map = new google.maps.Map(map, options);
64 directionsDisplay.setMap(map);
65
66 // Keeping the map center when the browser is resized.
67 function resizing() {
68 var center = map.getCenter();
69 google.maps.event.trigger(map, "resize");
70 map.setCenter(center);
71 }
72
73 google.maps.event.addDomListener(window, "resize", resizing);
74
75 // Showing route.
76 displayRoute(directionsService, directionsDisplay);
77 }
78
79 function displayRoute(directionsService, directionsDisplay) {
80 // Textfields that show from and to.
81 document.getElementsByName("fromText")[0].placeholder=localStorage.getItem("from");
82 document.getElementsByName("toText")[0].placeholder=localStorage.getItem("to");
83
84 var request = {
85 origin: localStorage.getItem("from"),
86 destination: localStorage.getItem("to"),
87 travelMode: localStorage.getItem("mode")
88 };
89
90 directionsService.route(request, function(response, status) {
91 if (status === "OK") {
92 directionsDisplay.setDirections(response);
93 }
94 else {
95 window.alert("Directions request failed due to " + status);
96 }
97 });
98 }
99 </script>
100
101 <!-- Calling google maps API using the function defined above. -->
102 <script async defer
103 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&callback=initMap">
104 </script>
function initMap() { 53 105
// Used by the Google Maps Direction API. 54 106 <!-- Buttons at the bottom of the map -->
var directionsService = new google.maps.DirectionsService; 55 107 <div class="container">
var directionsDisplay = new google.maps.DirectionsRenderer; 56 108 <div class="row">
// Setting default map location. 57 109 <!-- Status -->
var map = document.getElementById("map"); 58 110 <div class="col-xs-4">
var options = { 59 111 <!-- Title: Current Area -->
center: new google.maps.LatLng(32.8804526, -117.2376329), 60 112 <div>
zoom: 17 61 113 Current Area:
} 62 114 </div>
map = new google.maps.Map(map, options); 63 115 <!-- Icons + Status -->
directionsDisplay.setMap(map); 64 116 <div>
65 117 80% Safe
// Keeping the map center when the browser is resized. 66 118 </div>
function resizing() { 67 119 </div>
var center = map.getCenter(); 68 120 <!-- Emergency -->
google.maps.event.trigger(map, "resize"); 69 121 <div class="col-xs-4">
map.setCenter(center); 70 122 <button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>
} 71 123 </div>
72 124 <!-- Open Map -->
google.maps.event.addDomListener(window, "resize", resizing); 73 125 <div class="col-xs-4">
74 126 <button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>
// Showing route. 75 127 </div>
displayRoute(directionsService, directionsDisplay); 76 128 </div>
} 77 129 </div>
78 130
function displayRoute(directionsService, directionsDisplay) { 79 131 </div>
// Textfields that show from and to. 80 132
document.getElementsByName("fromText")[0].placeholder=localStorage.getItem("from"); 81 133
document.getElementsByName("toText")[0].placeholder=localStorage.getItem("to"); 82 134 <script>
83 135 function todo() {
var request = { 84 136 alert("This button is brought to you by the wonderful Wizard of Oz.");
origin: localStorage.getItem("from"), 85 137 }
destination: localStorage.getItem("to"), 86 138 </script>
travelMode: localStorage.getItem("mode") 87 139
}; 88 140 </body>
89 141 </html>
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
<!-- Buttons at the bottom of the map --> 106
<div class="container"> 107
<div class="row"> 108
<!-- Status --> 109
<div class="col-xs-4"> 110
<!-- Title: Current Area --> 111
<div> 112
Current Area: 113
</div> 114
<!-- Icons + Status --> 115
<div> 116
80% Safe 117
</div> 118
</div> 119
<!-- Emergency --> 120
<div class="col-xs-4"> 121
<button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button> 122
</div> 123
<!-- Open Map --> 124
<div class="col-xs-4"> 125
<button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button> 126
</div> 127
</div> 128
</div> 129
130
views/partials/header.ejs View file @ 5c8dd66
<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>