Paul Wallace / CSE 170 Group Project

Compare View

switch
from
...
to
 
Commits (5)

Diff

Showing 6 changed files Side-by-side Diff

.gitignore View file @ 5c8dd66
1   -# Logs
2   -logs
3   -*.log
4   -npm-debug.log*
5 1  
6   -# Runtime data
7   -pids
8   -*.pid
9   -*.seed
10   -*.pid.lock
11   -
12   -# Directory for instrumented libs generated by jscoverage/JSCover
13   -lib-cov
14   -
15   -# Coverage directory used by tools like istanbul
16   -coverage
17   -
18   -# nyc test coverage
19   -.nyc_output
20   -
21   -#mac
22   -.DS_Store
23   -
24   -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
25   -.grunt
26   -
27   -# node-waf configuration
28   -.lock-wscript
29   -
30   -# Compiled binary addons (http://nodejs.org/api/addons.html)
31   -build/Release
32   -
33   -# Dependency directories
  2 +# Node build artifacts
34 3 node_modules
35   -jspm_packages
  4 +npm-debug.log
36 5  
37   -# Optional npm cache directory
38   -.npm
39   -
40   -# Optional eslint cache
41   -.eslintcache
42   -
43   -# Optional REPL history
44   -.node_repl_history
  6 +# Local development
  7 +*.env
  8 +*.dev
  9 +.DS_Store
45 10  
46   -# Output of 'npm pack'
47   -*.tgz
48 11 \ No newline at end of file
  12 +# Docker
  13 +Dockerfile
  14 +docker-compose.yml
index.js View file @ 5c8dd66
1 1 var express = require('express');
  2 +var crime = require('./routes/crime');
  3 +
2 4  
3 5 var app = express();
4 6  
5 7 app.set('port', (process.env.PORT || 5000));
6 8  
7   -app.use(express.static(__dirname + '/public'));
  9 +app.use(express.static(__dirname + '../public'));
8 10  
9 11 // views is directory for all template files
10 12 app.set('views', __dirname + '/views');
... ... @@ -18,8 +20,9 @@ app.get('/landing', function(request, response) {
18 20 response.render('pages/landing');
19 21 });
20 22  
  23 +app.get('/api', crime.view);
  24 +
21 25 app.listen(app.get('port'), function() {
22 26 console.log('Node app is running on port', app.get('port'));
23 27 });
24 28  
25   -
public/stylesheets/main.css View file @ 5c8dd66
... ... @@ -3,7 +3,9 @@
3 3 }
4 4  
5 5 #map {
  6 + height: 600px;
6 7 margin-bottom: 10px;
  8 + width: 100%;
7 9 }
8 10  
9 11 #map-top {
views/pages/index.ejs View file @ 5c8dd66
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 3 <head>
4   - <!-- <% include ../partials/header %> -->
  4 + <% include ../partials/header %>
5 5 </head>
6 6  
7 7 <!-- Homepage -->
... ... @@ -19,41 +19,58 @@
19 19 <!-- First text field and label above the text field for current location -->
20 20 <div class="form-group text-center">
21 21 <label for="currentLocation">From</label>
22   - <input type="currentLocation" class="form-control" placeholder="Enter Current Location">
  22 + <input type="currentLocation" class="form-control" id="origin" placeholder="Enter Current Location" onchange="saveFrom()">
23 23 </div>
24   -
25 24 <!-- Second text field and label above the text field for destination -->
26 25 <div class="form-group text-center">
27 26 <label for="destination">To</label>
28   - <input type="destination" class="form-control" placeholder="Enter Destination">
  27 + <input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()">
29 28 </div>
30   -
31 29 <!-- First travel option button, walking
32 30 This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
33 31 -->
34 32 <div class="row">
35   - <button type="button" class="btn-default img-thumbnail col-xs-4">
  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">
37 35 </button>
38 36  
39 37 <!-- Second travel button, driving -->
40   - <button type="button" class="btn-default img-thumbnail col-xs-4">
  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">
42 40 </button>
43 41  
44 42 <!-- Third travel button, bus -->
45   - <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="javascript:autofill();">
  43 + <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();">
46 44 <img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
47 45 </button>
48 46 </div>
  47 +
49 48 <div class="text-center">
50 49 <button type="submit" class="btn btn-primary btn-space">Go</button>
51   -
52 50 </div>
53   -
54 51 </form>
55   -
56 52 </div>
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 +
58 75 </body>
59 76 </html>
60 77 \ No newline at end of file
views/pages/landing.ejs View file @ 5c8dd66
... ... @@ -10,11 +10,11 @@
10 10  
11 11 <!-- My LOCATION -->
12 12 <div>
13   - <input type="text" class="form-control text-field" placeholder="MY LOCATION">
  13 + <input type="text" class="form-control text-field" id="from" name="fromText" placeholder="MY LOCATION">
14 14 </div>
15 15 <!-- Destination -->
16 16 <div>
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...">
  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...">
18 18 </div>
19 19  
20 20 <!-- Buttons and status information on top of the map. -->
... ... @@ -45,11 +45,63 @@
45 45 </div>
46 46 </div>
47 47  
48   - <!-- Google Maps -->
49   - <div class="container" id="map">
50   - <!-- Placeholder -->
51   - <img class="img-responsive" src="images/temp.png" alt="temp" width="800" height="600">
52   - </div>
  48 + <!-- Div container for map. -->
  49 + <div id="map"></div>
  50 +
  51 + <!-- Javascript for the map. -->
  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>
53 105  
54 106 <!-- Buttons at the bottom of the map -->
55 107 <div class="container">
views/partials/header.ejs View file @ 5c8dd66
... ... @@ -7,8 +7,8 @@
7 7 <!-- Optional theme -->
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  
10   - <!-- JQuery
11   - <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
  10 + <!-- JQuery -->
  11 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
12 12  
13 13 <!-- Latest compiled and minified JavaScript -->
14 14 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>