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

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

@@ -6,94 +6,65 @@
import DisplayAUser from "../../pieces/DisplayAUser.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 set = {friendUsername: '', friendId: Number}
let user;
let allUsers;
let myFriends;
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() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() );
// userBeingViewed = user;
// console.log('user is ')
// console.log(user)
// console.log(user.username)
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)
fetchMyFriends();
fetchRequestsMade();
fetchRequestsReceived();
fetchAllUsers();
});
const displayAllUsers = async() => {
const fetchAllUsers = async() => {
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.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')
.then( x => x.json() );
// console.log('got all friends ' + allFriends)
// console.log('got all friends ')
// console.log({...allFriends})
};
// will this work?
// const displayRequestsMade = async() => {
let displayRequestsMade = async() => {
const fetchRequestsMade = async() => {
requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
.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;
@@ -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')
userBeingViewed = aUser;
usernameBeingViewed = aUsername;
// 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>
@@ -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 -->
<div class="top-grid">
<div class="all-users-sidebar">
<!-- <Tabs items={items} {activeItem} on:tabChange={tabChange}/> -->
<h3>All Users</h3>
{#if allUsers === undefined}
<div class="error">Failed to load all users</div>
{:else}
<!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users'; -->
<div class="sidebar-list">
<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...
is there something else i could use? -->
<!-- add a thing so it doesn't display the current user just all the other users -->
<!-- does this work? -->
<!-- {#each allUsers as aUser (aUser.username)} -->
{#each allUsers as aUser }
<!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> -->
<div class="a-user" on:click={() => viewAUser(aUser)}>{aUser.username}</div>
{#each allUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something?
i could use words but color them?
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>
{/each}
<Button on:click={displayAllUsers}>Get All Users</Button>
{/if}
<br>
<h3>Requests Made</h3>
{#if requestsMade === undefined}
<div class="error">Failed to load all requests made</div>
{:else}
{#each requestsMade as request }
<div>{request.receiverUsername}</div>
<br>
{:else if activeTabItem === 'My Friends' && myFriends !== undefined}
<h3>{activeTabItem}</h3>
{#each myFriends as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<div class="status sidebar-item">{aUser.status}</div>
{/each}
{:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
<h3>{activeTabItem}</h3>
{#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<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}
<Button on:click={displayRequestsMade}>Display Requests Made</Button>
{/if}
</div>
<div class="main-display">
<h1>Main Display</h1>
<!-- use an #await here too? -->
<!-- you can do better, like an on load sort of thing -->
<!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
<!-- {#if userBeingViewed} -->
{#if userBeingViewed !== undefined}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<!-- <DisplayAUser aUsername={sendUsername}/> -->
{#if usernameBeingViewed !== undefined}
<DisplayAUser aUsername={usernameBeingViewed}/>
<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}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
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
{/if} -->
<!-- {: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}
<!-- {#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} -->
<!-- <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>
@@ -278,12 +232,12 @@ could be a list of friends and if they're active but i can't see that yet
/* margin: 0; */
}
div.all-users-sidebar{
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
}
div.a-user{
div.sidebar-item{
/* yea i mean that seems fine... */
display: inline-block;
/* 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 */
/* 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;
font-weight: bold;
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;
}
div.placeholder{
color: darkgray;
text-align: center;
}
div.buttons-area{
text-align: center;
}
.error{
font-size: 0.8em;

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

@@ -2,17 +2,19 @@
import { createEventDispatcher } from "svelte";
export let items;
export let activeItem;
export let size = 'medium';
// big, medium, small
const dispatch = createEventDispatcher();
</script>
<!-- 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 -->
<ul>
{#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 -->
<div class:active={activeItem === item}>{item}</div>
</li>
@@ -21,8 +23,20 @@
</div>
<style>
.tabs{
/* .tabs{
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{
display: flex;
@@ -31,11 +45,28 @@
list-style-type: none;
}
li{
margin: 0 16px;
font-size: 18px;
/* margin: 0 16px; */
/* font-size: 18px; */
color: #555;
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{
color: #d91b42;
border-bottom: 2px solid #d91b42;