/
findfriends.html
186 lines (146 loc) · 7.75 KB
/
findfriends.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
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Create the title-->
<title>GlobeTrotter</title>
<!-- Load firebase-->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
<!-- Link to CSS -->
<link rel="stylesheet" href="./CSS/intro.css">
</head>
<body onload="initDb()">
<!-- create a div for the map and menu -->
<div class="row" id="map_container" style="position:absolute; margin:-2vw">
<div class="col-xs-6" id="vertical-menu"style="top:10vw;left:-3vw">
<a href="profile.html"><img src="./CSS/Media/profile1.png" style="position:absolute;top:3vw;width:30px"></a>
<a href="basemap.html"><img src="./CSS/Media/marker.png" style="position:absolute;top:11.5vw;width:30px;"></a>
<a href="findfriends.html" class="active"><img src="./CSS/Media/bag.png"
style="position:absolute;top:20vw;width:30px;"></a>
</div>
<!-- A division to hold the profile form -->
<div class="col-lg-6" id="form" style="position:relative;width:80%; top:20vw">
<img src="./CSS/Media/bag.png" style="width:15vw;">
<h1>Your Rucksack</h1>
<p id="points"></p>
<p>Add friends in your rucksack </p>
<div id="createProfile">
<label for="yourCode">Your code: </label>
<input type="text" name="yourCode" id="yourCode">
<label for="addFriends">Add friends: </label>
<input type="text" name="addFriends" id="addFriends">
<button id=addFriendsbtn onclick="addfriends()">Add</button>
<p>Your friends:</p>
<!-- <p id="yourFriends"></p> -->
<div id="yourFriends"></div>
</div>
</div>
<script>
// a function to add friends to your network
function addfriends() {
//get the code added in the addfriends box
var friend = document.getElementById("addFriends").value;
//console.log(friend)
// make a reference to the users database
const users = firebase.database().ref('users');
// query the databse to get information of the friend added
users.orderByKey().equalTo(friend).on('child_added', (snapshot) => {
var info = snapshot.val();
//get the friend information
var username = info.username;
var points = info.points;
var avatar = info.avatar;
var lat = info.lat;
var lng = info.lng;
// only store the username and points, location and avatar in the friend database (to save storage)
var friendinfo = {
username: username,
points: points,
avatar: avatar,
lat: lat,
lng: lng
}
const userId = sessionStorage.uid
//make a reference to the friends section of the current users' profile
const friends = users.child(userId).child('friends');
// push the data into the database, set inline callback
friends.push(friendinfo, function (error) {
//if no error is returned to the callback, then it was loaded successfully
if (!error) {
console.log("successfully added friend!");
// otherwise pass the error to the console
} else {
console.error(error);
window.alert('Could not add friend, try again!')
}
});
});
};
//function to iniitalise the databse
function initDb() {
// Load Firebase configuration or Assessment 2 app
const firebaseConfig = {
apiKey: "AIzaSyBuduFOLQ40g1UNdo_1JHPnrT36pN8q6zc",
authDomain: "project-name-4a9df.firebaseapp.com",
databaseURL: "https://project-name-4a9df-default-rtdb.firebaseio.com",
projectId: "project-name-4a9df",
storageBucket: "project-name-4a9df.appspot.com",
messagingSenderId: "389888460979",
appId: "1:389888460979:web:c4df9d8b2685a2264c48c6",
measurementId: "G-LVVKK9S300"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth().currentUser;
const userId = sessionStorage.uid
document.getElementById('yourCode').value = userId;
var pois = firebase.database().ref('POIs');
// var creator = pois.orderByChild('properties/creator').equalTo(userId);
// Find all points equal to the selection
//var ratings = pois.child('properties/creator').child(userId)
// this doesnt qork!!!!
// var ratings_list = [];
// creator.on("child_added", (snapshot) => {
// var data = snapshot.val();
// var rating = String(data["properties"]["rating"]);
// //console.log(rating)
// //if there is a rating add it to the list
// if (rating !== "0"){
// ratings_list.push(rating)
// };
// });
// console.log(ratings_list);
// var lengthr = ratings_list.length;
// console.log(lengthr)
// make a reference to the 'users' database
const users = firebase.database().ref('users');
// query the database to get the information of the current user according to the userId
users.orderByKey().equalTo(userId).on('child_added', (snapshot) => {
//console.log(snapshot.val());
var info = snapshot.val();
var points = info["points"];
document.getElementById('points').innerHTML = "Your points: " + points + "pts."
var friends = info["friends"]
});
// find the friends within the users database
var friends = users.child(userId).child('friends');
// get the friends out of the database
friends.on('child_added', (snapshot) => {
var friendsinfo = snapshot.val();
var username = friendsinfo['username']
var points = friendsinfo['points']
//console.log(username,points)
//add all the friends to a div to show each one and their points
var para = document.createElement("P"); // Create a <p> element
para.innerText = username + ": " + points + "pts."; // Insert text
document.getElementById("yourFriends").appendChild(para);
});
};
</script>
</body>
</html>