Skip to content

Commit 415d9d5

Browse files
stepbystepcodestepbystepcode
committed
profile page, delete friend
1 parent 11e0fc2 commit 415d9d5

File tree

7 files changed

+129
-11
lines changed

7 files changed

+129
-11
lines changed

‎src/css/app.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,6 @@ pre{
1111
.q-page-container{
1212
margin-top:0!important;
1313
}
14+
.swal2-container{
15+
z-index: 9999999
16+
}

‎src/layouts/ChatLayout.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<q-toolbar-title class="q-py-sm">
99
<div v-if="route.params.id">
10-
<q-avatar v-if="store.info&&route.path!=='/chat'"><img
10+
<q-avatar v-if="store.info&&route.path!=='/chat'&&route.params.id!==store.info.username" @click="router.push(`/profile/${route.params.id}`)"><img
1111
:src="store.avatar(store.info.friends.find(item => item.username === route.params.id).avatar)" alt="">
1212
</q-avatar>
1313
{{ route.params.id }}
@@ -41,7 +41,7 @@
4141
<div class="q-px-lg text-white text-h6 q-pb-md">{{ store.info.username }}</div>
4242
</div>
4343
<div class="column">
44-
<q-item clickable v-ripple>
44+
<q-item clickable v-ripple @click="router.push(`/profile/${store.info.username}`)">
4545
<q-item-section avatar>
4646
<q-icon name="account_circle" color="primary"></q-icon>
4747
</q-item-section>

‎src/pages/ChatPage.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
:avatar="store.avatar(item.sender === route.params.id ? yourAvatar : myAvatar)"
1313
:bg-color="`${item.sender == route.params.id ? 'white' : 'info'}`" :text="[item.content]"
1414
:stamp="item.time"
15+
:data-name="item.sender"
16+
@click="Profile"
1517
:sent="item.sender != route.params.id"/>
1618
</div>
1719
<div class="row fixed bg-white" :class="store.isMobile?'window-width':'half-width'" style="bottom:0">
@@ -57,6 +59,11 @@ const config = {
5759
// history.value = res.data
5860
// })
5961
// }
62+
const Profile = (e) => {
63+
if(e.srcElement.parentElement.parentElement.parentElement.dataset?.name){
64+
router.push(`/profile/${e.srcElement.parentElement.parentElement.parentElement.dataset?.name}`)
65+
}
66+
}
6067
onMounted(() => {
6168
// setInterval(update, 500);
6269
axios.post('http://8.130.48.157:8081/api/info', {

‎src/pages/ListPage.vue‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@
2727
import {ref} from 'vue'
2828
import {useRouter} from 'vue-router';
2929
import {useCheckStore} from 'stores/check';
30+
import axios from "axios";
3031
32+
import {useQuasar} from 'quasar';
33+
const $q = useQuasar()
3134
const store = useCheckStore();
3235
const selected = ref('');
3336
const handleHold = ({evt}) => {
@@ -49,11 +52,21 @@ const time = (time) => {
4952
}
5053
const router = useRouter();
5154
const list = ref();
52-
list.value = store.info.friends.sort((a, b) => {
53-
const timeA = store.order?.[a.username];
54-
const timeB = store.order?.[b.username];
55-
if (!timeA) return 1
56-
if (!timeB) return -1
57-
return new Date(timeB) - new Date(timeA)
58-
});
55+
const token = $q.localStorage.getItem('token');
56+
axios.post('http://8.130.48.157:8081/api/info', '', {
57+
headers: {
58+
'Authorization': `Bearer ${token}`,
59+
'Content-Type': 'application-json'
60+
}
61+
}
62+
).then((res) => {
63+
store.info.friends = res.data.message[store.info.username].friends;
64+
list.value = store.info.friends.sort((a, b) => {
65+
const timeA = store.order?.[a.username];
66+
const timeB = store.order?.[b.username];
67+
if (!timeA) return 1
68+
if (!timeB) return -1
69+
return new Date(timeB) - new Date(timeA)
70+
});
71+
})
5972
</script>

‎src/pages/ProfilePage.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<q-btn style="position: fixed;z-index: 100001;top: 0;left: 0" round flat @click="router.go(-1)"><q-icon color="white" name="arrow_back"></q-icon></q-btn>
3+
<q-btn style="position: fixed;z-index: 100001;top: 0;right: 0" round flat>
4+
<q-icon name="more_vert" color="white"></q-icon>
5+
<q-menu style="position: fixed;z-index: 100002;top: 0;">
6+
<q-list style="min-width: 100px">
7+
<q-item clickable v-close-popup @click="delFriend()">
8+
<q-item-section>Delete Friends</q-item-section>
9+
</q-item>
10+
</q-list>
11+
</q-menu>
12+
</q-btn>
13+
<div class="avatar">
14+
<div class="img-container">
15+
<img style="width: 100vw" :src="getAvatar()" alt="">
16+
</div>
17+
<div class="username text-h4">{{route.params.id}}</div>
18+
<q-separator/>
19+
</div>
20+
</template>
21+
<script setup>
22+
import {useQuasar} from 'quasar';
23+
const $q = useQuasar();
24+
import {useCheckStore} from 'stores/check';
25+
const store = useCheckStore();
26+
import {useRoute,useRouter} from 'vue-router';
27+
import Swal from "sweetalert2";
28+
import axios from "axios";
29+
const router = useRouter()
30+
const route = useRoute();
31+
const getAvatar=()=>{
32+
if(store.info.username===route.params.id){
33+
return store.avatar(store.info.avatar)
34+
}else
35+
return store.avatar(store.info.friends.find(item => item.username === route.params.id).avatar);
36+
}
37+
const token = $q.localStorage.getItem('token')
38+
const delFriend=()=>{
39+
Swal.fire({title:'Are you sure to delete this friend?',text:'You will not be able to recover this friend!',icon:'warning',showCancelButton:true,reverseButtons:true}).then((res)=>{
40+
if(res.isConfirmed) {
41+
axios.post(`http://8.130.48.157:8081/api/newfriends?operation=delete&username=${route.params.id}`,'',{headers:{Authorization:`Bearer ${token}`}}).then((res)=>{
42+
if(res.data.code===200){
43+
Swal.fire('Deleted!','Your friend has been deleted.','success').then(()=>{
44+
router.push('/chat')
45+
})
46+
}
47+
}).catch(()=>{
48+
Swal.fire('Oops...','Something went wrong!','error')
49+
})
50+
}
51+
})
52+
}
53+
</script>
54+
<style scoped lang="scss">
55+
.avatar{
56+
position: absolute;
57+
top:0;
58+
z-index: 100000;
59+
.img-container {
60+
position: relative;
61+
62+
img {
63+
display: block;
64+
}
65+
66+
&:before,
67+
&:after {
68+
content: '';
69+
position: absolute;
70+
left: 0;
71+
right: 0;
72+
height: 25%;
73+
}
74+
75+
&:before {
76+
top: 0;
77+
background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
78+
}
79+
80+
&:after {
81+
bottom: 0;
82+
background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
83+
}
84+
}
85+
.username{
86+
position: relative;
87+
top: -4rem;
88+
color:white;
89+
text-shadow: 3px 3px 2px rgba(127, 127, 127, 0.33);;
90+
padding: 0 1em;
91+
}
92+
}
93+
94+
</style>

‎src/router/routes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const routes: RouteRecordRaw[] = [
2121
children: [{ path: '/', component: () => import('pages/IndexPage.vue') },
2222
{ path: '/signup', component: () => import('pages/SignupPage.vue') },
2323
{ path: '/avatar', component: () => import('pages/AvatarPage.vue') },
24-
{ path: '/login', component: () => import('pages/LoginPage.vue') }],
24+
{ path: '/login', component: () => import('pages/LoginPage.vue') },
25+
{ path: '/profile/:id', component: () => import('pages/ProfilePage.vue') }],
2526
},
2627

2728
// Always leave this as last one,

‎src/stores/check.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const useCheckStore = defineStore('check', () => {
1616
}
1717
const update = () => {
1818
if (window.location.pathname !== '/login' && window.location.pathname !== '/signup')
19-
axios.post('http://127.0.0.1:8081/api/check?type=new', '', {
19+
axios.post('http://8.130.48.157:8081/api/check?type=new', '', {
2020

2121
headers: {
2222
Authorization: `Bearer ${LocalStorage.getItem('token')}`

0 commit comments

Comments
 (0)