starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profiles: online status and friend rework

Browse Source
This commit is contained in:
AdrienLSH
2024-05-07 19:53:28 +02:00
parent c2aafe9a42
commit 17bcee764b
9 changed files with 111 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/static/js/api/Client.js
View File

@ -4,8 +4,8 @@ import { Profiles } from "./Profiles.js";
import { Channels } from './chat/Channels.js';
import { MyProfile } from "./MyProfile.js";
import { Tourmanents } from "./tournament/Tournaments.js";
import Notice from "./notice/Notice.js";
import { Channel } from "./chat/Channel.js";
import Notice from "./Notice.js";
import LanguageManager from './LanguageManager.js';
function getCookie(name)

30
frontend/static/js/api/MyProfile.js
View File

@ -15,26 +15,26 @@ class MyProfile extends Profile
* @type {[Profile]}
*/
this.blockedUsers = [];
/**
* @type {[Profile]}
*/
this.friendList = [];
/**
* @type {[Profile]}
*/
this.incomingFriendRequests = [];
/**
* @type {[Profile]}
*/
this.outgoingFriendRequests = [];
// /**
// * @type {[Profile]}
// */
// this.friendList = [];
// /**
// * @type {[Profile]}
// */
// this.incomingFriendRequests = [];
// /**
// * @type {[Profile]}
// */
// this.outgoingFriendRequests = [];
}
async init() {
await super.init();
await this.getBlockedUsers();
await this.getFriends();
await this.getIncomingFriendRequests()
await this.getOutgoingFriendRequests()
// await this.getFriends();
// await this.getIncomingFriendRequests()
// await this.getOutgoingFriendRequests()
}
async getBlockedUsers() {

34
frontend/static/js/api/notice/Notice.js → frontend/static/js/api/Notice.js
View File

@ -1,8 +1,7 @@
import {Client} from '../Client.js';
import {createNotification} from '../../utils/noticeUtils.js'
import { client, lastView } from '../../index.js';
import { Profile } from '../Profile.js';
import ProfilePageView from '../../views/ProfilePageView.js';
import {Client} from './Client.js';
import {createNotification} from '../utils/noticeUtils.js'
import { lastView } from '../index.js';
import ProfilePageView from '../views/ProfilePageView.js';
export default class Notice {
@ -23,6 +22,7 @@ export default class Notice {
this._socket.onclose = _ => this._socket = undefined;
this._socket.onmessage = message => {
const data = JSON.parse(message.data);
console.log(data)
if (data.type === 'friend_request') {
this.friend_request(data.author);
@ -32,6 +32,10 @@ export default class Notice {
this.friend_removed(data.friend);
} else if (data.type === 'friend_request_canceled') {
this.friend_request_canceled(data.author);
} else if (data.type === 'online') {
this.online(data.user)
} else if (data.type === 'offline') {
this.offline(data.user)
}
};
}
@ -43,8 +47,22 @@ export default class Notice {
}
}
_setOnlineStatus(user, status) {
if (lastView instanceof ProfilePageView && lastView.profile.id === user.id) {
lastView.profile.online = status;
lastView.loadFriendshipStatus();
}
}
online(user) {
this._setOnlineStatus(user, true)
}
offline(user) {
this._setOnlineStatus(user, false)
}
friend_request(author) {
client.me.incomingFriendRequests.push(new Profile(author.username, author.id, author.avatar));
createNotification('Friend Request', `<strong>${author.username}</strong> sent you a friend request.`);
if (lastView instanceof ProfilePageView && lastView.profile.id === author.id) {
lastView.profile.hasIncomingRequest = true;
@ -53,7 +71,6 @@ export default class Notice {
}
new_friend(friend) {
client.me.friendList.push(new Profile(friend.username, friend.id, friend.avatar));
createNotification('New Friend', `<strong>${friend.username}</strong> accepted your friend request.`);
if (lastView instanceof ProfilePageView && lastView.profile.id === friend.id) {
lastView.profile.isFriend = true;
@ -64,15 +81,14 @@ export default class Notice {
}
friend_removed(exFriend) {
client.me.friendList = client.me.friendList.filter(friend => friend.id !== exFriend.id);
if (lastView instanceof ProfilePageView && lastView.profile.id === exFriend.id) {
lastView.profile.isFriend = false;
lastView.profile.online = null;
lastView.loadFriendshipStatus();
}
}
friend_request_canceled(author) {
client.me.incomingFriendRequests = client.me.incomingFriendRequests.filter(user => user.id !== author.id);
if (lastView instanceof ProfilePageView && lastView.profile.id === author.id) {
lastView.profile.hasIncomingRequest = false;
lastView.loadFriendshipStatus();

16
frontend/static/js/api/Profile.js
View File

@ -59,19 +59,19 @@ export class Profile extends AExchangeable
if (response.status !== 200)
return response.status;
let response_data = await response.json();
this.id = response_data.id;
this.username = response_data.username;
this.avatar = response_data.avatar;
this.online = response_data.online
const responseData = await response.json();
this.id = responseData.id;
this.username = responseData.username;
this.avatar = responseData.avatar;
this.online = responseData.online
if (!this.client.me || this.client.me.id === this.id)
return;
this.hasIncomingRequest = responseData.has_incoming_request;
this.hasOutgoingRequest = responseData.has_outgoing_request;
this.isFriend = responseData.is_friend;
this.isBlocked = this.client.me._isBlocked(this);
this.hasIncomingRequest = this.client.me._hasIncomingRequestFrom(this);
this.hasOutgoingRequest = this.client.me._hasOutgoingRequestTo(this);
this.isFriend = this.client.me._isFriend(this);
}
/**

23
frontend/static/js/views/ProfilePageView.js
View File

@ -38,7 +38,8 @@ export default class extends AbstractView {
loadFriendshipStatus() {
const addFriendButton = document.getElementById('addFriendButton'),
removeFriendButton = document.getElementById('removeFriendButton');
removeFriendButton = document.getElementById('removeFriendButton'),
statusIndicator = document.getElementById('statusIndicator');
if (this.profile.hasIncomingRequest) {
removeFriendButton.classList.add('d-none');
@ -59,6 +60,12 @@ export default class extends AbstractView {
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');
}
async getHtml() {
@ -70,7 +77,7 @@ export default class extends AbstractView {
return `
<div>
<div class='mb-3' id='profileInfo'>
<h1>${this.username}</h1>
<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>
@ -99,20 +106,18 @@ export default class extends AbstractView {
if (response.status === 200) {
removeFriendButton.innerHTML = 'Cancel Request';
removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
client.me.outgoingFriendRequests.push(this.profile);
this.profile.hasOutgoingRequest = true;
} else if (response.status === 201) {
removeFriendButton.innerHTML = 'Remove Friend';
removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
this.profile.friend = true;
this.profile.isFriend = true;
this.profile.hasIncomingRequest = false;
client.me.incomingFriendRequests = client.me.incomingFriendRequests.filter(profile => profile.id !== this.profile.id);
client.me.friendList.push(this.profile);
}
}
async removeFriend() {
const addFriendButton = document.getElementById('addFriendButton');
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();
@ -121,14 +126,14 @@ export default class extends AbstractView {
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;
client.me.outgoingFriendRequests = client.me.outgoingFriendRequests.filter(profile => profile.id !== this.profile.id);
} else if (response.status === 201) {
this.profile.isFriend = false;
client.me.friendList = client.me.friendList.filter(friend => friend.id !== this.profile.id);
this.profile.online = null;
}
}