Skip to content

Commit 184edd5

Browse files
Ville MustonenVille Mustonen
Ville Mustonen
authored and
Ville Mustonen
committed
fixed bug when reloading page
1 parent 60e143b commit 184edd5

File tree

4 files changed

+66
-49
lines changed

4 files changed

+66
-49
lines changed

‎Frontend/src/js/index.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import './modals/signup.js';
77
import './modals/profile.js';
88
import './modals/login.js';
99
import './modals/tournament.js';
10-
11-
12-
10+
import './modals/history.js';
11+
import './modals/friends.js';
1312

1413
insert('.headerContainer', 'headerSVG.html');
1514
//insertModal('.tournament', 'tournamentModal.html', 'tournament', 'Tournament');
@@ -124,10 +123,10 @@ createModal('logout', 'Log out', `
124123
<button type="button" class="submit" onclick="confirmLogout()">Yes, Log out</button>
125124
</div>`);
126125

127-
insertModal('.about', 'aboutModal.html', 'about', 'About');
126+
createModal('Profile', 'Profile', '<div id="userProfile"></div>');
128127

129128
createModal('Friends', 'Friends', '<div id="Friends"> <h2 id="friendsList">Friend List</h2> <h2 id="pendingList"> Pending requests </h2> </div>');
130-
import './modals/friends.js';
131129

132-
createModal('Profile', 'Profile', '<div id="userProfile"></div>');
130+
createModal('History', 'History', '<div id="History"></div>');
133131

132+
insertModal('.about', 'aboutModal.html', 'about', 'About');

‎Frontend/src/js/modals/friends.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import {showMessage} from './messages.js';
22

33
document.addEventListener('DOMContentLoaded', function () {
4-
updateFriendsList();
4+
const friendsModal = document.getElementById('FriendsModal');
5+
friendsModal.addEventListener('show.bs.modal', updateFriendsList);
56
});
67

78
export function updateFriendsList() {

‎Frontend/src/js/modals/history.js

+52-40
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,54 @@
11
document.addEventListener('DOMContentLoaded', function () {
2-
const userData = JSON.parse(localStorage.getItem('userData'));
3-
if (!userData || !userData.id || !userData.token) {
4-
console.error('UserData is missing or incomplete');
5-
return;
6-
}
2+
const matchHistoryModal = document.getElementById('HistoryModal');
3+
matchHistoryModal.addEventListener('show.bs.modal', updateMatchHistory);
4+
});
75

8-
fetch(`/user/${userData.id}/game-history`, {
9-
method: 'GET',
10-
headers: {
11-
'Authorization': `Bearer ${userData.token}`
12-
}
13-
})
14-
.then(response => {
15-
if (!response.ok) {
16-
throw new Error('Network response was not ok');
17-
}
18-
return response.json();
19-
})
20-
.then(data => {
21-
const gameHistoryContainer = document.getElementById('gameHistory');
22-
if (!gameHistoryContainer) {
23-
console.error('GameHistory container not found');
24-
return;
25-
}
26-
let htmlContent = '<div class="container mt-4"><h2>Game History</h2>';
27-
data.forEach(game => {
28-
htmlContent += `
29-
<div class="game-record mb-3">
30-
<h3>${game.name}</h3>
31-
<p>Outcome: ${game.outcome}</p>
32-
<p>Date Played: ${new Date(game.datePlayed).toLocaleDateString()}</p>
33-
</div>
34-
`;
35-
});
36-
htmlContent += '</div>';
37-
gameHistoryContainer.innerHTML = htmlContent;
38-
})
39-
.catch(error => {
40-
console.error('Error fetching game history:', error);
41-
});
42-
});
6+
export function updateMatchHistory() {
7+
const userData = JSON.parse(localStorage.getItem('userData'));
8+
if (!userData || !userData.id || !userData.token) {
9+
console.error('UserData is missing or incomplete');
10+
return;
11+
}
12+
fetch(`/game-history/`, {
13+
method: 'GET',
14+
headers: {
15+
}
16+
})
17+
.then(response => {
18+
if (!response.ok) {
19+
return response.json().then(error => {
20+
throw new Error(error.detail || 'Network response was not ok');
21+
});
22+
}
23+
return response.json();
24+
})
25+
.then(data => {
26+
const gameHistoryContainer = document.getElementById('History');
27+
if (!gameHistoryContainer) {
28+
console.error('GameHistory container not found');
29+
return;
30+
}
31+
let htmlContent = '<div class="container mt-4"><h2>Game History</h2>';
32+
data.forEach(game => {
33+
if (game.player1_id === userData.id || game.player2_id === userData.id) {
34+
htmlContent += `
35+
<div class="game-record mb-3">
36+
<h3>Game: ${game.game_id}</h3>
37+
<p>${new Date(game.start_time).toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
38+
<p>${game.player1_username} - ${game.player2_username}</p>
39+
<p>Winner: ${game.winner_name}</p>
40+
</div>
41+
`;
42+
}
43+
});
44+
htmlContent += '</div>';
45+
gameHistoryContainer.innerHTML = htmlContent;
46+
})
47+
.catch(error => {
48+
console.error('Error fetching game history:', error.message);
49+
const gameHistoryContainer = document.getElementById('History');
50+
if (gameHistoryContainer) {
51+
gameHistoryContainer.innerHTML = `<p>Error fetching game history: ${error.message}</p>`;
52+
}
53+
});
54+
};

‎Frontend/src/js/modals/profile.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { updateFriendsList } from './friends.js';
22
import { showMessage } from './messages.js';
3+
import { updateMatchHistory } from './history.js';
34

45
document.addEventListener('DOMContentLoaded', function () {
5-
updateUserProfile();
6+
const userProfileModal = document.getElementById('ProfileModal');
7+
userProfileModal.addEventListener('show.bs.modal', updateUserProfile);
68
});
79

10+
811
export function updateUserProfile() {
912
// Check if the user is logged in
1013
const userData = JSON.parse(localStorage.getItem('userData'));
1114
console.log('UserData:', userData); // Debugging line
15+
console.log('UserData token:', userData.token); // Debugging line
1216
if (!userData || !userData.id || !userData.token) {
1317
console.error('UserData is missing or incomplete');
1418
return;
@@ -67,11 +71,13 @@ export function updateUserProfile() {
6771
<button type="submit" class="submit">Submit</button>
6872
</form>
6973
<button type="button" class="submit" data-bs-toggle="modal" data-bs-target="#FriendsModal">Friends</button>
74+
<button type="button" class="submit" data-bs-toggle="modal" data-bs-target="#HistoryModal">Match history</button>
7075
</div>
7176
`;
7277
userProfileContainer.innerHTML = htmlContent;
7378

7479
updateFriendsList(); // Ensure this function is not modifying the HTML in unexpected ways
80+
updateMatchHistory();
7581

7682
// Toggle email update form visibility
7783
document.getElementById('changeEmailButton').addEventListener('click', () => {
@@ -84,7 +90,6 @@ export function updateUserProfile() {
8490
}
8591
});
8692

87-
8893
// Handle email update
8994
document.getElementById('updateEmailForm').addEventListener('submit', (event) => {
9095
event.preventDefault();

0 commit comments

Comments
 (0)