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

so i implemented user blocking but something about the flow in the frontend is broken now, will investigate

Browse Source
This commit is contained in:
Me
2022-12-23 19:49:25 +01:00
parent beeaf1fb27
commit 139da075da
3 changed files with 169 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,18 +62,15 @@ export class FriendshipController {
@Patch('myfriends/:relationshipId/accept') @Patch('myfriends/:relationshipId/accept')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
updateAccept(@Param('relationshipId') relationshipId: string, @Req() req) updateAccept(@Param('relationshipId') relationshipId: string, @Req() req) {
{
const user : User = req.user; const user : User = req.user;
console.log('accepting a friendship BBBBBBBBBBBBBBBBBBBBBBB')
return this.friendshipService.acceptFriendship(relationshipId, user); return this.friendshipService.acceptFriendship(relationshipId, user);
} }
@Patch('myfriends/:relationshipId/decline') @Patch('myfriends/:relationshipId/decline')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
updateDecline(@Param('relationshipId') relationshipId: string, @Req() req) updateDecline(@Param('relationshipId') relationshipId: string, @Req() req) {
{
const user : User = req.user; const user : User = req.user;
return this.friendshipService.declineFriendship(relationshipId, user); return this.friendshipService.declineFriendship(relationshipId, user);
} }
@@ -81,8 +78,7 @@ export class FriendshipController {
@Patch('myfriends/:relationshipId/block') @Patch('myfriends/:relationshipId/block')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
updateBlock(@Param('relationshipId') relationshipId: string, @Req() req) updateBlock(@Param('relationshipId') relationshipId: string, @Req() req) {
{
const user : User = req.user; const user : User = req.user;
return this.friendshipService.blockFriendship(relationshipId, user); return this.friendshipService.blockFriendship(relationshipId, user);
} }

7
srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts
View File

@@ -71,7 +71,6 @@ export class FriendshipService {
return friendship; return friendship;
} }
// ERIC: test this
async findAllFriends(username: string) { async findAllFriends(username: string) {
const friendship = await this.friendshipRepository const friendship = await this.friendshipRepository
.createQueryBuilder('friendship') .createQueryBuilder('friendship')
@@ -80,8 +79,8 @@ export class FriendshipService {
.orWhere('friendship.senderUsername = :requester', { requester: username }) .orWhere('friendship.senderUsername = :requester', { requester: username })
.andWhere('friendship.status = :status', { status: FriendshipStatus.ACCEPTED }) .andWhere('friendship.status = :status', { status: FriendshipStatus.ACCEPTED })
.getMany(); .getMany();
for (const friend of friendship) // for (const friend of friendship)
console.log("FRIENDSHIP : " + friend.status); // console.log("FRIENDSHIP : " + friend.status);
return friendship; return friendship;
} }
@@ -204,7 +203,7 @@ export class FriendshipService {
} }
async blockFriendship(relationshipId: string, user: User) { async blockFriendship(relationshipId: string, user: User) {
const relation = await this.friendshipRepository.find({where: {id: +relationshipId }, relations: ['sender', 'receiver']} ); let relation = await this.friendshipRepository.find({where: {id: +relationshipId }, relations: ['sender', 'receiver']} );
if (!relation[0]) if (!relation[0])
throw new HttpException(`The requested relationship not found.`, HttpStatus.NOT_FOUND); throw new HttpException(`The requested relationship not found.`, HttpStatus.NOT_FOUND);
if (relation[0].sender.id === user.id) { if (relation[0].sender.id === user.id) {

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

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal"; // WTF is this? import { binding_callbacks, empty } from "svelte/internal"; // WTF is this?
import App from "../../App.svelte"; import App from "../../App.svelte";
import Button from "../../pieces/Button.svelte"; import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte"; import DisplayAUser from "../../pieces/DisplayAUser.svelte";
@@ -14,12 +14,12 @@
let allUsers; let allUsers;
let myFriends; let myFriends;
let requestsMade, requestsRecieved; let requestsMade, requestsRecieved;
let blockedUsers;
let usernameBeingViewed; let usernameBeingViewed;
let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status
let friendshipFetch; // like a generic var for any friendship fetch actions that might happen
/**** Layout variables ****/ /**** Layout variables ****/
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests'] let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
let activeTabItem: string = 'All Users'; let activeTabItem: string = 'All Users';
@@ -34,42 +34,25 @@
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() );
fetchAll();
// ok this shit works!
// const interval = setInterval(() => {
// fetchAll();
// }, 1000);
// return () => clearInterval(interval);
});
const fetchAll = async() => {
// no need to await i think it can load in the background
fetchAllUsers();
fetchMyFriends(); fetchMyFriends();
fetchRequestsMade(); fetchRequestsMade();
fetchRequestsReceived(); fetchRequestsReceived();
fetchAllUsers(); fetchBlockedUsers();
}
});
/* TMP for Testing */
let cherifFetch;
const fetchCherif = async() => {
cherifFetch = await fetch('http://transcendance:8080/api/v2/network/myfriends/chbadad')
.then( x => x.json() );
console.log('Cherif Fetched ')
console.log({...cherifFetch})
};
let ericFetch;
const fetchEric = async() => {
ericFetch = await fetch('http://transcendance:8080/api/v2/network/myfriends/erlazo')
.then( x => x.json() );
console.log('Eric Fetched ')
console.log({...ericFetch})
};
let tmpTest;
const testBack = async(relationshipId) => {
console.log('test back request')
tmpTest = undefined;
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/test
tmpTest = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/test`)
.then( x => x.json());
};
/* End of Tests */
/***** Fetch basic things *****/
const fetchAllUsers = 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() );
@@ -98,95 +81,128 @@
console.log({...requestsRecieved}) console.log({...requestsRecieved})
}; };
let sentFriendRequest; const fetchBlockedUsers = async() => {
const sendFriendRequest = async(potentialFriendUsername) => { blockedUsers = await fetch('http://transcendance:8080/api/v2/network/blocked')
set.friendUsername = ''; .then( x => x.json() );
errors.friendRequest = ''; console.log('got blocked users, is it empty?')
let valid = false; console.log({...blockedUsers})
if (potentialFriendUsername === user.username) { console.log(Object.keys(blockedUsers))
errors.friendRequest = "You can't friend yourself."
valid = false;
} else {
set.friendUsername = potentialFriendUsername;
valid = true;
}
if (valid) {
sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": set.friendUsername,
"status": "R"
})
})
.then( x => x.json())
areWeFriends(usernameBeingViewed);
}
}; };
/**** END OF MAIN FETCH ****/
const areWeFriends = async(aUsername) => { const fetchFriendshipFull = async(aUsername) => {
console.log("Are We Friends?")
friendshipStatusFull = undefined;
friendshipStatusFull = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${aUsername}`) friendshipStatusFull = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${aUsername}`)
.then( x => x.json()); .then( x => x.json());
console.log({...friendshipStatusFull}) };
const sendFriendRequest = async(aUsername) => {
const resp = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": aUsername,
"status": "R"
})
})
.then( x => x.json())
}; };
const viewAUser = async(aUsername) => { const viewAUser = async(aUsername) => {
console.log('Profile Friend updating userBeingViewed') console.log('Profile Friend updating userBeingViewed')
usernameBeingViewed = aUsername; usernameBeingViewed = aUsername;
friendshipStatusFull = undefined; // friendshipStatusFull = undefined;
// id, date, senderUsername, reveiverUsername, status // id, date, senderUsername, reveiverUsername, status
friendshipStatusFull = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${aUsername}`) await fetchFriendshipFull(aUsername);
.then( x => x.json());
console.log('Friendship Status Full') console.log('Friendship Status Full')
console.log({...friendshipStatusFull}) console.log({...friendshipStatusFull})
}; };
const acceptFriendRequest = async(relationshipId) => { const acceptFriendRequest = async(relationshipId) => {
console.log('accept friend request') console.log('accept friend request')
friendshipFetch = undefined;
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/accept // PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/accept
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/accept`, { const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/accept`, {
method: "PATCH"}) method: "PATCH"})
.then( x => x.json()); .then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now... // maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('accepted friend request, now response') console.log('accepted friend request, now response')
console.log({...friendshipFetch}) console.log({...resp})
await areWeFriends(usernameBeingViewed); await fetchFriendshipFull(usernameBeingViewed);
// will this make it reload? C'est un peu bourain... do i even need it?
activeTabItem = activeTabItem;
}; };
const declineFriendRequest = async(relationshipId) => { const declineFriendRequest = async(relationshipId) => {
console.log('decline friend request') console.log('decline friend request')
friendshipFetch = undefined;
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/decline // PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/decline
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/decline`, { const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/decline`, {
method: "PATCH"}) method: "PATCH"})
.then( x => x.json()); .then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now... // maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('declined friend request, now response') console.log('declined friend request, now response')
console.log({...friendshipFetch}) console.log({...resp})
await areWeFriends(usernameBeingViewed); await fetchFriendshipFull(usernameBeingViewed);
}; };
const unfriend = async(relationshipId) => { const unfriend = async(relationshipId) => {
console.log('Unfriend') console.log('Unfriend')
friendshipFetch = undefined; const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}`, {
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}`, {
method: "DELETE"}) method: "DELETE"})
.then( x => x.json()); .then( x => x.json());
await areWeFriends(usernameBeingViewed);
// friendshipStatusFull = undefined;
// OR
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0)
friendshipStatusFull = undefined;
// will this make it reload? C'est un peu bourain... do i even need it?
activeTabItem = activeTabItem;
}; };
const blockANonFriendUser = async(aUsername) => {
console.log('Block someone username')
console.log({...aUsername})
const blockAUser = async(friendshipId) => { const blockResp = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": aUsername,
"status": "B"
})
})
.then( x => x.json())
await fetchBlockedUsers();
await fetchAllUsers();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
activeTabItem = activeTabItem;
};
const blockAFriend = async(relationshipId) => {
const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/block`, {method: "PATCH"})
.then( x => x.json() );
console.log('blocked a user response')
console.log({...resp})
await fetchBlockedUsers();
await fetchAllUsers();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
activeTabItem = activeTabItem;
};
const unblockAUser = async(relationshipId) => {
// it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
await unfriend(relationshipId);
}; };
const switchTab = async(e) => { const switchTab = async(e) => {
@@ -197,10 +213,13 @@
await fetchMyFriends(); await fetchMyFriends();
} else if (activeTabItem === 'Friend Requests') { } else if (activeTabItem === 'Friend Requests') {
await fetchRequestsReceived(); await fetchRequestsReceived();
} else if (activeTabItem === 'Blocked Users') {
await fetchBlockedUsers();
console.log('blocked users: ')
console.log({...blockedUsers})
} }
}; };
</script> </script>
@@ -210,6 +229,7 @@
<!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests'] <!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users'; --> let activeTabItem: string = 'All Users'; -->
<!-- maybe add numbers at the botton? like for how many of each there are? -->
<div class="sidebar-list"> <div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/> <Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
@@ -219,20 +239,24 @@
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 -->
{#if Object.keys(allUsers).length === 0}
<div class="tip">You are alone on this platform...</div>
{/if}
<!-- 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}
<!-- {#if aUser.username !== user.username} --> <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<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 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 sidebar-item">{aUser.status}</div>
<div class="status sidebar-item">{aUser.status}</div> <br>
<br>
<!-- {/if} -->
{/each} {/each}
{:else if activeTabItem === 'My Friends' && myFriends !== undefined} {:else if activeTabItem === 'My Friends' && myFriends !== undefined}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
{#if Object.keys(myFriends).length === 0}
<div class="tip">You don't have any Friends... Yet!</div>
{/if}
{#each myFriends as aUser} {#each myFriends as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div> <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<div class="status sidebar-item">{aUser.status}</div> <div class="status sidebar-item">{aUser.status}</div>
@@ -240,10 +264,23 @@
{/each} {/each}
{:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined} {:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
{#if Object.keys(requestsRecieved).length === 0}
<div class="tip">You don't have any Friend Requests</div>
{/if}
{#each requestsRecieved as aUser} {#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div> <div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</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 --> <br>
{/each}
{:else if activeTabItem === 'Blocked Users' && blockedUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- seems a little excessive... maybe a lighter way of doing this? doesn't seem like it, i hate it but at least only happens sometimes.default... -->
{#if Object.keys(blockedUsers).length === 0}
<div class="tip">You have not Blocked any Users</div>
{/if}
{#each blockedUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
<br> <br>
{/each} {/each}
{/if} {/if}
@@ -251,50 +288,41 @@
<div class="main-display"> <div class="main-display">
<!-- use an #await here too? -->
<!-- you can do better, like an on load sort of thing -->
<!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
<!-- {#if userBeingViewed} -->
{#if usernameBeingViewed !== undefined} {#if usernameBeingViewed !== undefined}
<DisplayAUser aUsername={usernameBeingViewed}/> <DisplayAUser aUsername={usernameBeingViewed}/>
<div class="buttons-area"> <div class="buttons-area">
<!-- so far not dealing with Blocked people --> {#if friendshipStatusFull && friendshipStatusFull.id}
{#if usernameBeingViewed !== user.username} {#if friendshipStatusFull.status === 'R'}
<!-- uhhhg why can't it be simple... --> {#if friendshipStatusFull.senderUsername === user.username}
<!-- {#if friendshipStatusFull === undefined} --> <div class="tile">Friend Request Sent</div>
{#if friendshipStatusFull && friendshipStatusFull.id} {:else}
{#if friendshipStatusFull.status === 'R'} <!-- <Button type="secondary" on:click={() => acceptFriendRequest(usernameBeingViewed)}>Unfriend</Button> -->
{#if friendshipStatusFull.senderUsername === user.username} <Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
<div class="tile">Friend Request Sent</div> <Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>Decline Friend Request</Button>
{:else} {/if}
<!-- <Button type="secondary" on:click={() => acceptFriendRequest(usernameBeingViewed)}>Unfriend</Button> --> <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
<Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button> {:else if friendshipStatusFull.status === 'A'}
<Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>Decline Friend Request</Button> <div class="tile">You are Friends</div>
{/if} <Button on:click={() => unfriend(friendshipStatusFull.id)}>Unfriend</Button>
{:else if friendshipStatusFull.status === 'A'} <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
<div class="tile">You are Friends</div> {:else if friendshipStatusFull.status === 'D'}
<Button on:click={() => unfriend(friendshipStatusFull.id)}>Unfriend</Button> {#if friendshipStatusFull.senderUsername === user.username}
{:else if friendshipStatusFull.status === 'D'} <div class="tile">Your friend request was declined, hang in there bud.</div>
{#if friendshipStatusFull.senderUsername === user.username} {:else}
<div class="tile">Your friend request was denied, hang in there bud.</div> <div class="tile">You declined the friend request, but you could still change your mind</div>
{:else} <Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
<div class="tile">You declined the friend request but you could still change your mind</div> {/if}
<Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>acceptFriendRequest</Button> <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
{/if} {:else if friendshipStatusFull.status === 'B'}
{#if friendshipStatusFull.senderUsername === user.username}
<Button on:click={() => unblockAUser(friendshipStatusFull.id)}>Unblock User</Button>
{/if} {/if}
{:else}
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
{/if} {/if}
{:else}
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
<Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
{/if} {/if}
<!-- {#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?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
</div> </div>
{:else} {:else}
<div class="placeholder"> <div class="placeholder">
@@ -303,29 +331,6 @@
</div> </div>
{/if} {/if}
<!-- {#await userBeingViewed}
<p>... waiting</p>
{:then}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
{:catch}
<p>No user to view yet</p>
{/await} -->
<!-- {#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?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
<Button on:click={() => testBack(1)}>Test Friendship Back</Button>
<Button on:click={fetchCherif}>Fetch Cherif</Button>
<Button on:click={fetchEric}>Fetch Eric</Button>
</div> </div>
</div> </div>
@@ -376,6 +381,13 @@
text-align: center; text-align: center;
} }
div.tip{
color: darkgray;
font-size: 0.8em;
font-weight: bold;
}
.error{ .error{
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;