dockered
This commit is contained in:
AdrienLSH
234
django/frontend/static/js/views/ProfilePageView.js
Normal file
234
django/frontend/static/js/views/ProfilePageView.js
Normal file
@ -0,0 +1,234 @@
|
||||
import AbstractView from "./abstracts/AbstractView.js";
|
||||
import { client, lang } from "../index.js";
|
||||
|
||||
export default class extends AbstractView {
|
||||
constructor(params) {
|
||||
super(params, `${decodeURI(params.username)} - Profile`);
|
||||
this.username = decodeURI(params.username);
|
||||
}
|
||||
|
||||
setTitle() {
|
||||
document.title = this.titleKey;
|
||||
}
|
||||
|
||||
async postInit()
|
||||
{
|
||||
if (!this.profile)
|
||||
return 404;
|
||||
|
||||
const games = await this.profile.getGameHistory();
|
||||
|
||||
await this.fillHistory(games);
|
||||
await this.fillStatistics(games);
|
||||
|
||||
if (this.profile.id === client.me.id)
|
||||
return;
|
||||
|
||||
const addFriendButton = document.getElementById('addFriendButton'),
|
||||
removeFriendButton = document.getElementById('removeFriendButton'),
|
||||
blockButton = document.getElementById('blockButton'),
|
||||
unblockButton = document.getElementById('unblockButton');
|
||||
|
||||
this.loadFriendshipStatus();
|
||||
if (this.profile.isBlocked)
|
||||
unblockButton.classList.remove('d-none');
|
||||
else
|
||||
blockButton.classList.remove('d-none');
|
||||
|
||||
addFriendButton.onclick = _ => this.addFriend();
|
||||
removeFriendButton.onclick = _ => this.removeFriend();
|
||||
unblockButton.onclick = _ => this.unblockUser();
|
||||
blockButton.onclick = _ => this.blockUser();
|
||||
}
|
||||
|
||||
loadFriendshipStatus() {
|
||||
const addFriendButton = document.getElementById('addFriendButton'),
|
||||
removeFriendButton = document.getElementById('removeFriendButton'),
|
||||
statusIndicator = document.getElementById('statusIndicator');
|
||||
|
||||
if (this.profile.hasIncomingRequest) {
|
||||
removeFriendButton.classList.add('d-none');
|
||||
addFriendButton.classList.remove('d-none');
|
||||
addFriendButton.innerHTML = 'Accept Request';
|
||||
} else if (this.profile.hasOutgoingRequest) {
|
||||
addFriendButton.classList.add('d-none');
|
||||
removeFriendButton.classList.remove('d-none');
|
||||
removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
|
||||
removeFriendButton.innerHTML = 'Cancel Request';
|
||||
} else if (this.profile.isFriend) {
|
||||
addFriendButton.classList.add('d-none');
|
||||
removeFriendButton.classList.remove('d-none');
|
||||
removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
|
||||
removeFriendButton.innerHTML = 'Remove Friend';
|
||||
} else {
|
||||
addFriendButton.innerHTML = 'Add Friend';
|
||||
removeFriendButton.classList.add('d-none');
|
||||
addFriendButton.classList.remove('d-none');
|
||||
}
|
||||
|
||||
statusIndicator.classList.remove('bg-success', 'bg-danger');
|
||||
if (this.profile.online === true)
|
||||
statusIndicator.classList.add('bg-success');
|
||||
else if (this.profile.online === false)
|
||||
statusIndicator.classList.add('bg-danger');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {[Object]} games
|
||||
*/
|
||||
async fillStatistics(games)
|
||||
{
|
||||
let winrateDiv = document.getElementById("winrate");
|
||||
|
||||
let win = 0;
|
||||
let lose = 0;
|
||||
|
||||
games.forEach(game => {
|
||||
if (game.finished === false)
|
||||
return
|
||||
|
||||
if (client.me.id === game.winner.id)
|
||||
win++;
|
||||
else
|
||||
lose++;
|
||||
});
|
||||
|
||||
winrateDiv.innerText = `winrate: ${win + lose === 0 ? "🤓" : win / (win + lose)}`
|
||||
}
|
||||
|
||||
async fillHistory(games)
|
||||
{
|
||||
let game_list = document.getElementById("game-list");
|
||||
|
||||
games.forEach(game => {
|
||||
|
||||
let a = document.createElement("a");
|
||||
a.href = `/games/${game.game_type}/${game.id}`;
|
||||
a.setAttribute("data-link", true);
|
||||
|
||||
let game_item = document.createElement("div");
|
||||
game_item.className = "game-item";
|
||||
game_item.style.backgroundColor = "grey";
|
||||
if (game.started)
|
||||
game_item.style.backgroundColor = "yellow";
|
||||
if (game.finished)
|
||||
game_item.style.backgroundColor = this.profile.id === game.winner.id ? "green" : "red";
|
||||
|
||||
game.players.forEach(player => {
|
||||
let player_score = document.createElement("a");
|
||||
|
||||
player_score.href = `/profiles/${player.username}`;
|
||||
player_score.innerText = `${player.username}`;
|
||||
player_score.setAttribute("data-link", true);
|
||||
|
||||
game_item.appendChild(player_score);
|
||||
});
|
||||
|
||||
a.appendChild(game_item);
|
||||
game_list.appendChild(a);
|
||||
});
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
|
||||
this.profile = await client.profiles.getProfile(this.username);
|
||||
if (!this.profile)
|
||||
return '';
|
||||
|
||||
return /* HTML */ `
|
||||
<div>
|
||||
<div class='mb-3' id='profileInfo'>
|
||||
<h1>${this.username}<span id='statusIndicator' style='height:0.75em; width:0.75em' class='ms-2 rounded-circle border d-inline-block'></span></h1>
|
||||
<a href=${this.profile.avatar} target='_blank'>
|
||||
<img class='img-thumbnail' src=${this.profile.avatar} style='width:auto; max-height:20vh; min-height:10vh'>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<button class='btn btn-sm btn-success d-none' id='addFriendButton'>Add Friend</button>
|
||||
<button class='btn btn-sm btn-danger d-none' id='removeFriendButton'>Remove Friend</button>
|
||||
<button class='btn btn-sm btn-danger d-none' id='blockButton'>Block</button>
|
||||
<button class='btn btn-sm btn-secondary d-none' id='unblockButton'>Unblock</button>
|
||||
</div>
|
||||
<h1>Games</h1>
|
||||
<div>
|
||||
<h1 id='winrate'></h1>
|
||||
</div>
|
||||
<div>
|
||||
<link rel="stylesheet" href="/static/css/gameHistory.css">
|
||||
<div id="game-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async addFriend() {
|
||||
const removeFriendButton = document.getElementById('removeFriendButton');
|
||||
|
||||
const response = await client._post(`/api/profiles/friends/${this.profile.id}`);
|
||||
const body = await response.json();
|
||||
console.log(body);
|
||||
|
||||
if (response.ok) {
|
||||
removeFriendButton.classList.remove('d-none');
|
||||
document.getElementById('addFriendButton').classList.add('d-none');
|
||||
}
|
||||
if (response.status === 200) {
|
||||
removeFriendButton.innerHTML = 'Cancel Request';
|
||||
removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
|
||||
this.profile.hasOutgoingRequest = true;
|
||||
} else if (response.status === 201) {
|
||||
removeFriendButton.innerHTML = 'Remove Friend';
|
||||
removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
|
||||
this.profile.isFriend = true;
|
||||
this.profile.hasIncomingRequest = false;
|
||||
}
|
||||
}
|
||||
|
||||
async removeFriend() {
|
||||
const addFriendButton = document.getElementById('addFriendButton'),
|
||||
statusIndicator = document.getElementById('statusIndicator');
|
||||
|
||||
const response = await client._delete(`/api/profiles/friends/${this.profile.id}`);
|
||||
const body = await response.json();
|
||||
console.log(body);
|
||||
|
||||
if (response.ok) {
|
||||
addFriendButton.innerHTML = 'Add Friend';
|
||||
addFriendButton.classList.remove('d-none');
|
||||
statusIndicator.classList.remove('bg-danger', 'bg-success');
|
||||
document.getElementById('removeFriendButton').classList.add('d-none');
|
||||
}
|
||||
if (response.status === 200) {
|
||||
this.profile.hasOutgoingRequest = false;
|
||||
} else if (response.status === 201) {
|
||||
this.profile.isFriend = false;
|
||||
this.profile.online = null;
|
||||
}
|
||||
}
|
||||
|
||||
async blockUser() {
|
||||
const response = await client._post(`/api/profiles/block/${this.profile.id}`);
|
||||
const body = await response.json();
|
||||
console.log(body);
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById('blockButton').classList.add('d-none');
|
||||
document.getElementById('unblockButton').classList.remove('d-none');
|
||||
client.me.blockedUsers.push(this.profile);
|
||||
this.profile.isBlocked = true;
|
||||
}
|
||||
}
|
||||
|
||||
async unblockUser() {
|
||||
const response = await client._delete(`/api/profiles/block/${this.profile.id}`);
|
||||
const body = await response.json();
|
||||
console.log(body);
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById('unblockButton').classList.add('d-none');
|
||||
document.getElementById('blockButton').classList.remove('d-none');
|
||||
client.me.blockedUsers = client.me.blockedUsers.filter(profile => profile.id !== this.profile.id);
|
||||
this.profile.isBlocked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user