-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
296 lines (276 loc) · 12 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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html>
<head>
<link rel="style sheet" type="text/css" href="searchbar.css" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Loogle</title>
<style>
body,
#map {
position: absolute;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-database.js"></script>
<!--><script src="script.js"></script><!-->
<div id="map"></div>
<script>
let map;
let lat;
let long;
let lati;
let longi;
let autocomplete;
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function httpGetAsync(theUrl, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
};
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
async function ensureLocation() {
getLocation();
if (lat != undefined && long != undefined) {
initMap();
} else {
await sleep(2000);
ensureLocation();
}
}
function showPosition(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
}
console.log(lat);
function makeInfoBox(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement("div");
controlUI.style.boxShadow =
"rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
controlUI.style.backgroundColor = "#02210c";
controlUI.style.border = "2px solid #001f09";
controlUI.style.borderRadius = "2px";
controlUI.style.marginBottom = "22px";
controlUI.style.marginTop = "60px";
controlUI.style.textAlign = "center";
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement("div");
controlText.style.color = "rgb(255,255,255)";
controlText.style.fontFamily = "courier new";
controlText.style.fontSize = "100%";
controlText.style.padding = "6px";
controlText.textContent =
"Welcome to Loogle! Here to help you go, when you're on the go! ";
let link = document.createElement("a");
link.setAttribute(
"href",
"https://project-week-yelp-for-toilets.glitch.me/review/index.html"
);
link.textContent = "Write a review here!"
link.style.color="rgb(255,255,25)";
controlText.appendChild(link);
controlUI.appendChild(controlText);
}
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("locationSearch"),
{ types: ["geocode"] }
);
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", geoCode);
}
function geoCode() {
let place = autocomplete.getPlace();
let address = `${place.address_components[0].long_name} ${place.address_components[1].long_name}, ${place.address_components[2].long_name}, ${place.address_components[4].long_name}`;
let theUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=AIzaSyBJfHI9Hjcc0MMDU280eGZ7CqR32m61n0k`;
console.log(place);
console.log(address);
httpGetAsync(theUrl, getLatLong);
}
function getLatLong(object) {
let addressObject = JSON.parse(object);
lati = addressObject["results"][0]["geometry"]["location"].lat;
longi = addressObject["results"][0]["geometry"]["location"].lng;
map.panTo({ lat: lati, lng: longi });
console.log(
`LAT: ${addressObject["results"][0]["geometry"]["location"].lat} Long: ${addressObject["results"][0]["geometry"]["location"].lng} `
);
}
function initMap() {
initAutocomplete();
var options = {
zoom: 16,
center: { lat: lat, lng: long }
};
// new map
map = new google.maps.Map(document.getElementById("map"), options);
var infoBoxDiv = document.createElement("div");
makeInfoBox(infoBoxDiv, map);
infoBoxDiv.style.top = "60px";
map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);
/*
// new marker
var marker = new google.maps.Marker({
position: { lat: 44.933877, lng: -93.319144 },
map: map,
icon:
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
});
var infoWindow = new google.maps.InfoWindow({
content: "<h1> Mitra's house</h1>"
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
*/
// addMarker(
// {
// coords: { lat: 44.9778, lng: -93.265 },
// iconImage:
// "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
// content: "<h1> mitras house</h1>"
// },
// map
// );
var firebaseConfig = {
apiKey: "AIzaSyDNgAV2NfQdOXLQNhMWFOk13yCxwaqRzso",
authDomain: "maptoilet-f8347.firebaseapp.com",
databaseURL: "https://maptoilet-f8347.firebaseio.com",
projectId: "maptoilet-f8347",
storageBucket: "maptoilet-f8347.appspot.com",
messagingSenderId: "474262007484",
appId: "1:474262007484:web:7b0e2ca850f538ded62ab9",
measurementId: "G-BXB4K9FG4N"
};
firebase.initializeApp(firebaseConfig);
var marker = firebase.database().ref();
marker.on("value", function(snapshot) {
let snap = snapshot.val();
console.log(snap);
for (let object in snap) {
// TODO(imageRatings): Define a string variable that will contain the rating HTML.
// let ratingHtml = snap[object].val + '/5';
let ratingHtml = '';
for(let i = 1; i < 6; i++){
if(i <= Math.floor(snap[object].val)){
ratingHtml += '<img src="https://cdn.glitch.com/44cd3a50-6e4b-4146-9fa2-b263cfc369cc%2F415-4156515_free-star-png-free-star-transparent-images-transparent.png?v=1596211051653" width="10px" height="10px">';
}else{
ratingHtml += '<img src="https://cdn.glitch.com/44cd3a50-6e4b-4146-9fa2-b263cfc369cc%2Fdownload.png?v=1596161258677" width="10px" height="10px">';
}
}
// TODO(imageRatings): Get a whole number rating (by rounding)
// TODO(imageRatings): Loop 5 times to add img tags to ratingHtml
// if the loop count is <= the rating, concatenate the yellow star onto the rating string variable
// ratingHtml += '<img src="..." width="10px" height="10px">'
// otherwise, concatenate the gray star
// ratingHtml should look like:
// <img src="...yellowStar" width="10px" height="10px"><img src="...yellowStar" width="10px" height="10px"><img src="...grayStar" width="10px" height="10px"><img src="...grayStar" width="10px" height="10px"><img src="...grayStar" width="10px" height="10px">
addMarker(
{
coords: { lat: snap[object].lat, lng: snap[object].lng },
icon: {
url: "https://cdn.glitch.com/44cd3a50-6e4b-4146-9fa2-b263cfc369cc%2Ftoilet%20gold.png?v=1596212233632",
scaledSize: new google.maps.Size(30, 50)
},
content: `<h1> ${
snap[object].name
}</h1><img width="100px" src="${
snap[object].image
}"><ul><li>Rating: ${ratingHtml}</li><li>Sink: ${
snap[object].sink == true ? "Yes" : "No"
}</li><li>Hand Sanitizer: ${
snap[object].sanitizer == true ? "Yes" : "No"
}</li><li>Soap: ${
snap[object].soap == true ? "Yes" : "No"
}</li><li>Toilet : ${
snap[object].toilet == true ? "Yes" : "No"
}</li><li>Cleanliness Score: ${
snap[object].clean
}/5</li><li>Odor: ${
snap[object].smell
}/5</li></ul> <p>User Comments: "${snap[object].review}"</p>`
},
map
);
console.log(snap[object].lat);
}
});
// add marker function
}
</script>
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJfHI9Hjcc0MMDU280eGZ7CqR32m61n0k&libraries=places&callback=ensureLocation"
></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSideBar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>
<form
action="https://project-week-yelp-for-toilets.glitch.me/review/index.html"
>
<button class="reviewbutton">
LEAVE A REVIEW
</button>
</form>
</li>
<li>FIND MY THRONE<input type="text" id="locationSearch" /></li>
</ul>
<div class="thanku">
Thanks for using Loogle, go crazy potty animal!<br />
<br />
with love, <br />
Mitra, Ebuka, and Bisman <3
</div>
<div class="logo">
<img
src="https://cdn.glitch.com/44cd3a50-6e4b-4146-9fa2-b263cfc369cc%2Fthumbnails%2Floogle%20v1.png?1596159181681"
/img>
</div>
</div>
</body>
</html>
</html>