Paul Wallace / CSE 170 Group Project

Commit 37a149e698da3cc7d31643c255d7fad28fd1ca68

Authored by Paul Wallace 2016-11-03 10:00:17 -0700

Exists in master

Merge branch 'master' of git.ucsd.edu:prwallac/cse-170-group-project

Not sure what is happening

Showing 4 changed files Side-by-side Diff

public/stylesheets/main.css
views/pages/index.ejs
views/pages/landing.ejs
views/partials/header.ejs

...	...	@@ -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 {

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 -->
8	8
9	9
10	10
11	11
12	12
13	13
14	14
15	15
...	...	@@ -19,38 +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	24	<!-- Second text field and label above the text field for destination -->
25	25	<div class="form-group text-center">
26	26	<label for="destination">To</label>
27		- <input type="destination" class="form-control" placeholder="Enter Destination">
	27	+ <input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()">
28	28	</div>
29	29	<!-- First travel option button, walking
30	30	This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
31	31	-->
32	32	<div class="row">
33		- <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();">
34	34	<img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40">
35	35	</button>
36	36
37	37	<!-- Second travel button, driving -->
38		- <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();">
39	39	<img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40">
40	40	</button>
41	41
42	42	<!-- Third travel button, bus -->
43		- <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();">
44	44	<img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
45	45	</button>
46	46	</div>
	47	+
47	48	<div class="text-center">
48	49	<button type="submit" class="btn btn-primary btn-space">Go</button>
49		-
50	50	</div>
51	51	</form>
52		-
53	52	</div>
	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>
54	74
55	75	</body>
56	76	</html>

...	...	@@ -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">

...	...	@@ -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>