Paul Wallace / CSE 170 Group Project

Commit 37a149e698da3cc7d31643c255d7fad28fd1ca68

Authored by Paul Wallace 8 years ago

Exists in master

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

Not sure what is happening

Showing 4 changed files Inline Diff

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

#alt-routes {	1	1	#alt-routes {
height: 75px;	2	2	height: 75px;
}	3	3	}
	4	4
#map {	5	5	#map {
		6	height: 600px;
margin-bottom: 10px;	6	7	margin-bottom: 10px;
		8	width: 100%;
}	7	9	}
	8	10
#map-top {	9	11	#map-top {
margin-bottom: 30px;	10	12	margin-bottom: 30px;
}	11	13	}
	12	14
.img-responsive {	13	15	.img-responsive {
margin: 0 auto;	14	16	margin: 0 auto;
}	15	17	}
	16	18
.status {	17	19	.status {
margin-top: 5px;	18	20	margin-top: 5px;
}	19	21	}
	20	22
.text-field {	21	23	.text-field {
margin-top: 30px;	22	24	margin-top: 30px;
margin-bottom: 30px;	23	25	margin-bottom: 30px;
}	24	26	}
	25	27
.center-this {	26	28	.center-this {
margin: 0 auto;	27	29	margin: 0 auto;

<!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" placeholder="Enter Current Location">	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	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" placeholder="Enter Destination">	27	27	<input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()">
</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">	33	33	<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();">
<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">	38	38	<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();">
<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="javascript:autofill();">	43	43	<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();">
<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">	47	48	<div class="text-center">
<button type="submit" class="btn btn-primary btn-space">Go</button>	48	49	<button type="submit" class="btn btn-primary btn-space">Go</button>
	49
</div>	50	50	</div>
</form>	51	51	</form>
	52
</div>	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

<!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" 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" 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
<!-- Google Maps -->	48	48	<!-- Div container for map. -->
<div class="container" id="map">	49	49	<div id="map"></div>
<!-- Placeholder -->	50	50
<img class="img-responsive" src="images/temp.png" alt="temp" width="800" height="600">	51	51	<!-- Javascript for the map. -->
</div>	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>
	53	105
<!-- Buttons at the bottom of the map -->	54	106	<!-- Buttons at the bottom of the map -->
<div class="container">	55	107	<div class="container">
<div class="row">	56	108	<div class="row">
<!-- Status -->	57	109	<!-- Status -->
<div class="col-xs-4">	58	110	<div class="col-xs-4">
<!-- Title: Current Area -->	59	111	<!-- Title: Current Area -->
<div>	60	112	<div>
Current Area:	61	113	Current Area:
</div>	62	114	</div>
<!-- Icons + Status -->	63	115	<!-- Icons + Status -->
<div>	64	116	<div>
80% Safe	65	117	80% Safe
</div>	66	118	</div>
</div>	67	119	</div>
<!-- Emergency -->	68	120	<!-- Emergency -->
<div class="col-xs-4">	69	121	<div class="col-xs-4">
<button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>	70	122	<button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>
</div>	71	123	</div>
<!-- Open Map -->	72	124	<!-- Open Map -->
<div class="col-xs-4">	73	125	<div class="col-xs-4">
<button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>	74	126	<button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>
</div>	75	127	</div>
</div>	76	128	</div>
</div>	77	129	</div>
	78	130
</div>	79	131	</div>
	80	132
	81	133
<script>	82	134	<script>
function todo() {	83	135	function todo() {
alert("This button is brought to you by the wonderful Wizard of Oz.");	84	136	alert("This button is brought to you by the wonderful Wizard of Oz.");
}	85	137	}
</script>	86	138	</script>

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