/
index.html
228 lines (193 loc) · 9.6 KB
/
index.html
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html>
<head>
<title>Gil Eats</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/Dropbox-sdk.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="js/utils.js"></script>
<script src="js/flatpickr.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/flatpickr.min.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Page Header -->
<header class="page-header">
<div class="container">
<nav>
<span style="position:absolute; margin-left:500px" class="code">
<span class="code" id="username" contenteditable="true" onkeyup="saveEdits()">Gil</span>
Eats</span>
<a href="https://vsoch.github.io/gileats"><img src="img/gil.png" class="logo" /></a>
</nav>
</div>
</header>
<!-- Map with places - everyone always sees this!-->
<div id="gmap" class="contact-map"></div>
<div class="container main">
<!-- Show the Add Eats button if not authenticated -->
<div id="pre-auth-section" style="display:none;">
<a href="" id="authlink" class="button">Add Eats</a>
<span class="info">This will allow upload to your Dropbox, but it won't render on the map unless you change the code... this is Gil's Eats!</span>
</div>
</div>
<!-- User sees this section after authentication, to add a new place -->
<div id="authed-section" style="display:none;">
<div class="form">
<form class="register-form rating-form" onSubmit="return uploadFiles()">
<!-- Restaurant and location search-->
<input id="address-input" class="controls" type="text" placeholder="Enter a location">
<input type="hidden" placeholder="location" id="location"/>
<input class="flatpickr" id="date" data-date-format="m-d-Y"/>
<!--Interactive Stars!-->
<fieldset class="form-group">
<legend class="form-legend">Rating:</legend>
<div class="form-item">
<input id="rating-5" name="rating" type="radio" value="5" />
<label for="rating-5" data-value="5">
<span class="rating-star">
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
</span>
<span class="ir">5</span>
</label>
<input id="rating-4" name="rating" type="radio" value="4" />
<label for="rating-4" data-value="4">
<span class="rating-star">
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
</span>
<span class="ir">4</span>
</label>
<input id="rating-3" name="rating" type="radio" value="3" />
<label for="rating-3" data-value="3">
<span class="rating-star">
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
</span>
<span class="ir">3</span>
</label>
<input id="rating-2" name="rating" type="radio" value="2" />
<label for="rating-2" data-value="2">
<span class="rating-star">
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
</span>
<span class="ir">2</span>
</label>
<input id="rating-1" name="rating" type="radio" value="1" />
<label for="rating-1" data-value="1">
<span class="rating-star">
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
</span>
<span class="ir">1</span>
</label>
</div>
</fieldset>
<input type="textarea" placeholder="review" id="review"/>
<input type="hidden" id="access-token" placeholder="Access token" />
<input type="hidden" id="url" placeholder="url for database" />
<input type="file" id="file-upload" placeholder="picture"/>
<button type="submit">nomnom</button>
<!-- A place to show the status of the upload -->
<h2 id="results"></h2>
</form>
</div>
</div>
<!-- Google maps API, note that we include Places library -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDhmVSj7xyJsbfI6CmG4AwSa8AKiA7_VaY&libraries=places"></script>
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/eats.js"></script>
<script>
// Not supported for mobile yet!
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
document.location = "mobile.html"
}
/* Register a service worker for caching files*/
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
// Allow the user to change the name of the page
function saveEdits() {
var editElem = document.getElementById("username");
var username = editElem.innerHTML.replaceAll('<br>','');
localStorage.userEdits = username;
editElem.innerHTML = username;
}
el = document.getElementById("username");
el.addEventListener("contentchange", saveEdits, false);
// If the name is in storage, retrieve it
if ('userEdits' in localStorage){
document.getElementById("username").innerHTML = localStorage.userEdits;
}
// Function to get a cookie by its name
function getCookieToken(cookiename) {
cookiename = cookiename || 'gileats';
var value = "; " + document.cookie;
var parts = value.split("; " + cookiename + "=");
if (parts.length == 2) {
return decodeURIComponent(parts.pop().split(";").shift());
} else {
return "";
}
}
// Parses the url and gets the access token if it is in the urls hash
function getAccessToken() {
// If we do, the user has authenticated but it's not set yet as a cookie
var access_token = utils.parseQueryString(window.location.hash).access_token;
// Set the token in the browser
document.cookie = "gileats=" + access_token;
return access_token;
}
// If the user was just redirected from authenticating, the urls hash will
// contain the access token.
function isAuthenticated() {
return !!getAccessToken();
}
// This example keeps both the authenticate and non-authenticated setions
// in the DOM and uses this function to show/hide the correct section.
function showPageSection(elementId) {
document.getElementById(elementId).style.display = 'block';
}
if (isAuthenticated()) {
// Fill in the date field
document.getElementById("date").flatpickr();
var d = new Date()
var date = d.getMonth() + '-' + d.getDate() +'-' + d.getFullYear();
document.getElementById('date').value = date;
showPageSection('authed-section');
// Set the hidden field to be the authentication token
var access_token = getAccessToken();
document.getElementById('access-token').value = access_token;
// Create an instance of Dropbox with the access token
var dbx = new Dropbox({ accessToken: access_token });
// Check to make sure db is created, but don't overwrite
createDB(access_token);
update_map();
/* NOT AUTHENTICATED */
} else {
showPageSection('pre-auth-section');
/* If testing locally you can use the Dropbox provided example client it,
var CLIENT_ID = '42zjexze6mfpf7x';
and the associated URL must be:
var authUrl = dbx.getAuthenticationUrl('http://localhost:8080/auth'); */
var CLIENT_ID = 'uxss1dt1pndweb8';
var dbx = new Dropbox({ clientId: CLIENT_ID });
var authUrl = dbx.getAuthenticationUrl('https://vsoch.github.io/gileats');
document.getElementById('authlink').href = authUrl;
}
</script>
<!-- Image gallery -->
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
</body>
</html>