Parking-Lot-Map/index.html at master · JamesLogan-III/Parking-Lot-Map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<title>IPM Garage Map and Info</title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/png" href="images/favicon.ico">
		<link rel="shortcut icon" href="images/favicon.ico">
		<meta name="author" content="James Logan for International Parking Management">
	</head>
	<body>
		<header>
			<nav class="navbar navbar-inverse navbar-fixed-top navcont" role="navigation">
				<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<img src="images/logo.png" class="img-responsive" alt="International Parking Management"/>
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search-container">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
				</div>
			</nav>
		</header>
		<article>
			<div data-bind="html: details"></div>
			<div id="map"></div>
			<div id="search-container" class="collapse navbar-collapse">
				<div id="search-nav" class="nav navbar-nav">
					<input data-bind="value: searchFilter, valueUpdate: 'afterkeydown'" placeholder="Filter Lots" autocomplete="on" id="searchFilter" />
					<div id="scroller">
						<div>
							<div data-bind="template: { name: 'lot' , foreach: filterLots, as: 'lot' }"></div>
							<script type="text/html" id="lot">
								<div data-bind="visible: visible">
								<a href="#" data-bind="attr: {id: id}, click: $parent.showLot.bind($data)">
									<strong data-bind="text: lot.name"></strong>
								</a>
								</div>
							</script>
						</div>
					</div>
				</div>
			</div>
		</article>
		<div class="container clearfix">
			<div class="row clearfix">
				<h3 data-bind="visible: currentLot().camerasList().length > 0">Nearby Traffic Cameras</h3>
					<div data-bind="template: { name: 'camera' , foreach: currentLot().camerasList, as: 'camera' }"></div>
						<script type="text/html" id="camera">
							<div class="col-lg-3 col-xs-12 cameraBox">
								<div class="center">
									<h4 class="bulletLabel h4" data-bind="text: camera.cameraLabel"></h4>
									<img class="cameraImage img-responsive" data-bind="attr: {src: camera.imageURL}"/>
								</div>
							</div>
						</script>
			</div>
			<div class="row clearfix" data-bind="visible: currentLot().hasNoCams">
				<hr>
				<h3>There are no Traffic cameras within 500 Meters of the
					<span data-bind="text: currentLot().name()"></span> lot.
				</h3>
			</div>
			<div class="row clearfix" data-bind="visible: currentLot().dataError()">
				<h3>Error Getting traffic camera data, Please check your Internet connection
					<span data-bind="text: currentLot().name()"></span>.
				</h3>
			</div>
		</div>
		<footer>
			<p>International Parking Management | 505 5th Avenue South, Suite P1 Seattle, WA 98104 | P: 206.254.0811 | E: <a href="mailto:Info@IPMSeattle.com">Info@IPMSeattle.com</a></p>
		</footer>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script>(window.jQuery || document.write('<script src="js/lib/jquery-2.1.1.min.js">\x3C/script>'))</script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
		<script>(window.ko || document.write('<script src="js/lib/knockout-3.4.0.js">\x3C/script>'))</script>

		<script src="js/lots.js"></script>
		<script src="js/app.js"></script>
		<script>
			function googleError() {
				alert("Error loading Google Maps, please check your internet connection.");
			}
		</script>
		<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTva_fKidJdfJRqgbkx6M4Isx4rm6L-KQ&v=3.20&callback=appInit" onerror="googleError()"></script>
	</body>
</html>