42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned up ProfileFriends page, but i need some input about the backend, might need to change some things

Browse Source
This commit is contained in:
Me
2022-12-13 07:06:08 +01:00
parent 913a81ef0a
commit 44074af237
3 changed files with 131 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts
View File

@@ -17,6 +17,10 @@ export class FriendshipController {
return this.friendshipService.findAllFriends(user.id); return this.friendshipService.findAllFriends(user.id);
} }
// the username may change but the relationship id will not so we need to grab the relationship id from the username
// ie did that username send a friendship thing, and if so what are the ids
// GET http://transcendance:8080/api/v2/network/myfriends/relationshipId // GET http://transcendance:8080/api/v2/network/myfriends/relationshipId
@Get('myfriend/:relationshipId') @Get('myfriend/:relationshipId')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)

220
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -6,94 +6,65 @@
import DisplayAUser from "../../pieces/DisplayAUser.svelte"; import DisplayAUser from "../../pieces/DisplayAUser.svelte";
import Tabs from "../../pieces/Tabs.svelte"; import Tabs from "../../pieces/Tabs.svelte";
// Ok so i need to test all the paths Cherif has made but a major one doesn't work yet...
// in the mean time, i need to make some other stuff look nice
// what do i want?
/*
Ideas
- a list of all users and if they're active
could be a list of friends and if they're active but i can't see that yet
- I click on a thing and it lets me see all the users and i get a button that lets me add them
- would that be like a serachable list of all users?
- am i skipping optimization? i mean for now yes, but like
*/
let errors = {friendRequest: '',}; let errors = {friendRequest: '',};
let set = {friendUsername: '', friendId: Number}
let user; let user;
let allUsers; let allUsers;
let myFriends; let myFriends;
let requestsMade, requestsRecieved; let requestsMade, requestsRecieved;
let userBeingViewed; let usernameBeingViewed;
/**** Layout variables ****/
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users';
onMount( async() => { onMount( async() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what // yea no idea what
// i mean do i fetch user? i will for now // i mean do i fetch user? i will for now
user = await fetch('http://transcendance:8080/api/v2/user') user = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() ); .then( (x) => x.json() );
// userBeingViewed = user; fetchMyFriends();
// console.log('user is ') fetchRequestsMade();
// console.log(user) fetchRequestsReceived();
// console.log(user.username) fetchAllUsers();
myFriends = await fetch("http://transcendance:8080/api/v2/network/myfriends")
.then( (x) => x.json() );
// console.log('my friends')
// console.log(myFriends)
requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
.then( x => x.json() );
// console.log('Requests pending ');
// console.log(requestsMade);
requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received')
.then( x => x.json() );
// console.log('Requests received ');
// console.log(requestsRecieved);
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.then( x => x.json() );
// console.log('got all users ' + allUsers)
}); });
const displayAllUsers = async() => { const fetchAllUsers = async() => {
allUsers = await fetch('http://transcendance:8080/api/v2/user/all') allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.then( x => x.json() ); .then( x => x.json() );
console.log('got all users ' + allUsers) console.log('got all users ')
console.log({...allUsers})
}; };
const displayAllFriends = async() => { const fetchMyFriends = async() => {
myFriends = await fetch('http://transcendance:8080/api/v2/network/myfriends') myFriends = await fetch('http://transcendance:8080/api/v2/network/myfriends')
.then( x => x.json() ); .then( x => x.json() );
// console.log('got all friends ' + allFriends) // console.log('got all friends ')
// console.log({...allFriends})
}; };
// will this work? const fetchRequestsMade = async() => {
// const displayRequestsMade = async() => {
let displayRequestsMade = async() => {
requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending') requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
.then( x => x.json() ); .then( x => x.json() );
console.log('got requests made ' + requestsMade) console.log('got requests made ')
console.log({...requestsMade})
};
const fetchRequestsReceived = async() => {
requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received')
.then( x => x.json() );
console.log('got requests received ')
console.log({...requestsRecieved})
}; };
let sentFriendRequest; let sentFriendRequest;
@@ -122,9 +93,9 @@ could be a list of friends and if they're active but i can't see that yet
} }
}; };
const viewAUser = async(aUser) => { const viewAUser = async(aUsername) => {
console.log('Profile Friend updating userBeingViewed') console.log('Profile Friend updating userBeingViewed')
userBeingViewed = aUser; usernameBeingViewed = aUsername;
// sendUsername = userBeingViewed.username; // sendUsername = userBeingViewed.username;
@@ -139,6 +110,17 @@ could be a list of friends and if they're active but i can't see that yet
}; };
const switchTab = async(e) => {
activeTabItem = e.detail;
if (activeTabItem === 'All Users') {
await fetchAllUsers();
} else if (activeTabItem === 'My Friends') {
await fetchMyFriends();
} else if (activeTabItem === 'Friend Requests') {
await fetchRequestsReceived();
}
};
</script> </script>
@@ -146,59 +128,60 @@ could be a list of friends and if they're active but i can't see that yet
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid"> <div class="top-grid">
<div class="all-users-sidebar"> <!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
<!-- <Tabs items={items} {activeItem} on:tabChange={tabChange}/> --> let activeTabItem: string = 'All Users'; -->
<h3>All Users</h3>
{#if allUsers === undefined}
<div class="error">Failed to load all users</div> <div class="sidebar-list">
{:else} <Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- problem, i can't use user.id since Cherif doesn't want to expost that to the front... <!-- problem, i can't use user.id since Cherif doesn't want to expost that to the front...
is there something else i could use? --> is there something else i could use? -->
<!-- add a thing so it doesn't display the current user just all the other users --> <!-- add a thing so it doesn't display the current user just all the other users -->
<!-- does this work? --> <!-- does this work? -->
<!-- {#each allUsers as aUser (aUser.username)} --> <!-- {#each allUsers as aUser (aUser.username)} -->
{#each allUsers as aUser } {#each allUsers as aUser}
<!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> --> <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<div class="a-user" on:click={() => viewAUser(aUser)}>{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something? <!-- i could make an indicator component? like green for connected or something?
i could use words but color them? i could use words but color them?
i could make it so if they're in a game --> i could make it so if they're in a game -->
<div class="status a-user">{aUser.status}</div> <div class="status sidebar-item">{aUser.status}</div>
<br> <br>
{/each} {/each}
<Button on:click={displayAllUsers}>Get All Users</Button> {:else if activeTabItem === 'My Friends' && myFriends !== undefined}
{/if} <h3>{activeTabItem}</h3>
{#each myFriends as aUser}
<br> <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<h3>Requests Made</h3> <div class="status sidebar-item">{aUser.status}</div>
{#if requestsMade === undefined} {/each}
<div class="error">Failed to load all requests made</div> {:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
{:else} <h3>{activeTabItem}</h3>
{#each requestsMade as request } {#each requestsRecieved as aUser}
<div>{request.receiverUsername}</div> <div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<br> <div class="status sidebar-item">{aUser.status}</div>
<!-- yea not sure if status makes sense here, it's not the user's status it's the friendrequest status -->
{/each} {/each}
<Button on:click={displayRequestsMade}>Display Requests Made</Button>
{/if} {/if}
</div> </div>
<div class="main-display"> <div class="main-display">
<h1>Main Display</h1>
<!-- use an #await here too? --> <!-- use an #await here too? -->
<!-- you can do better, like an on load sort of thing --> <!-- you can do better, like an on load sort of thing -->
<!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} --> <!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
<!-- {#if userBeingViewed} --> <!-- {#if userBeingViewed} -->
{#if userBeingViewed !== undefined} {#if usernameBeingViewed !== undefined}
<div>{userBeingViewed.username}</div> <DisplayAUser aUsername={usernameBeingViewed}/>
<DisplayAUser aUsername={userBeingViewed.username}/>
<!-- <DisplayAUser aUsername={sendUsername}/> --> <div class="buttons-area">
<!-- Add Friend -->
<!-- not the current user, not blocked, not request already sent or received, basically no friendshipID -->
{#if usernameBeingViewed !== user.username}
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
{/if}
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
<!-- {#if user not blocked} <!-- {#if user not blocked}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button> <Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
does it have to be friendship IDs? can't i just use username? does it have to be friendship IDs? can't i just use username?
@@ -206,6 +189,12 @@ could be a list of friends and if they're active but i can't see that yet
but if i'm using friendshi ID i need a good way of getting them but if i'm using friendshi ID i need a good way of getting them
{/if} --> {/if} -->
<!-- {:else if userBeingViewed !== undefined} --> <!-- {:else if userBeingViewed !== undefined} -->
</div>
{:else}
<div class="placeholder">
<h1>Click on a user!</h1>
<h4>You'll see them displayed here</h4>
</div>
{/if} {/if}
<!-- {#await userBeingViewed} <!-- {#await userBeingViewed}
@@ -228,41 +217,6 @@ could be a list of friends and if they're active but i can't see that yet
<!-- {:else if userBeingViewed !== undefined} --> <!-- {:else if userBeingViewed !== undefined} -->
<!-- <Button on:click={displayAllUsers}>Get All Users</Button>
{#if allUsers !== undefined}
{#each allUsers as user}
<div>{user.username}</div>
{/each}
{/if}
<br> -->
<!-- <Button on:click={displayMyFriends}>Get All My Friends</Button>
{#if myFriends !== undefined}
<div>{myFriends}</div>
{#each myFriends as friend}
<div>{friend}{friend.username}</div>
{/each}
{/if} -->
<!-- <br> <br> -->
<!-- here i want to list all the requests you and have an accept and a decline button -->
<!-- {#each requestsRecieved as request} -->
<!-- <br> <br> -->
<!-- I want to list all the requests made by this user -->
<!-- <Button on:click={displayRequestsMade}>Display Requests Made</Button>
{#if requestsMade !== undefined}
{#each requestsMade as requestMade}
<div>{requestMade}</div>
{/each}
{/if} -->
</div> </div>
</div> </div>
@@ -278,12 +232,12 @@ could be a list of friends and if they're active but i can't see that yet
/* margin: 0; */ /* margin: 0; */
} }
div.all-users-sidebar{ div.sidebar-list{
grid-column: 1 / span 2; grid-column: 1 / span 2;
background: white; background: white;
} }
div.a-user{ div.sidebar-item{
/* yea i mean that seems fine... */ /* yea i mean that seems fine... */
display: inline-block; display: inline-block;
/* somehting about the buttons too, smaller ? */ /* somehting about the buttons too, smaller ? */
@@ -294,7 +248,7 @@ could be a list of friends and if they're active but i can't see that yet
} }
/* selector attributes to get only divs with .a-user */ /* selector attributes to get only divs with .a-user */
/* you gotta be careful with Svelte cuz it tacks classes on to the end of basically all elems! */ /* you gotta be careful with Svelte cuz it tacks classes on to the end of basically all elems! */
div[class^="a-user"]:hover{ div[class^="sidebar-item"]:hover{
text-decoration: underline; text-decoration: underline;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
@@ -304,6 +258,14 @@ could be a list of friends and if they're active but i can't see that yet
grid-column: 3 / span 10; grid-column: 3 / span 10;
} }
div.placeholder{
color: darkgray;
text-align: center;
}
div.buttons-area{
text-align: center;
}
.error{ .error{
font-size: 0.8em; font-size: 0.8em;

41
srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
View File

@@ -2,17 +2,19 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
export let items; export let items;
export let activeItem; export let activeItem;
export let size = 'medium';
// big, medium, small
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="tabs"> <div class="tabs" class:size={size}>
<!-- creates a list, can be done other ways --> <!-- creates a list, can be done other ways -->
<ul> <ul>
{#each items as item} {#each items as item}
<li on:click={() => dispatch('tabChange', item)}> <li class={size} on:click={() => dispatch('tabChange', item)}>
<!-- the class active is attributed if the condition is met --> <!-- the class active is attributed if the condition is met -->
<div class:active={activeItem === item}>{item}</div> <div class:active={activeItem === item}>{item}</div>
</li> </li>
@@ -21,8 +23,20 @@
</div> </div>
<style> <style>
.tabs{ /* .tabs{
margin-bottom: 40px; margin-bottom: 40px;
} */
.tab.big{
margin-bottom: 50px;
/* guessing at size */
}
.tab.medium{
margin-bottom: 40px;
/* the OG size */
}
.tab.small{
margin-bottom: 10px;
/* need it small */
} }
ul{ ul{
display: flex; display: flex;
@@ -31,11 +45,28 @@
list-style-type: none; list-style-type: none;
} }
li{ li{
margin: 0 16px; /* margin: 0 16px; */
font-size: 18px; /* font-size: 18px; */
color: #555; color: #555;
cursor: pointer; cursor: pointer;
} }
li.big{
margin: 0 20px;
font-size: 22px;
/* guessing at size */
}
li.medium{
margin: 0 16px;
font-size: 18px;
/* the OG size */
}
li.small{
margin: 8px;
font-size: 10px;
/* need it small */
}
.active{ .active{
color: #d91b42; color: #d91b42;
border-bottom: 2px solid #d91b42; border-bottom: 2px solid #d91b42;