Skip to content

Commit a049953

Browse files
supalarrysupalarry
committed
view other people v1
1 parent b36d25a commit a049953

File tree

9 files changed

+229
-22
lines changed

9 files changed

+229
-22
lines changed

‎frontend/src/assets/gender.png‎

7.65 KB
Loading

‎frontend/src/assets/heart.png‎

4.54 KB
Loading

‎frontend/src/assets/location.png‎

6.06 KB
Loading

‎frontend/src/components/app/recommendations/RecommendationCard.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
<template>
22
<!-- eslint-disable max-len -->
33
<div
4-
v-bind:class="{
5-
'flex': true,
6-
'flex-col': true,
7-
'justify-end': true,
8-
'shadow-inner': true,
9-
'recommendation-card': true,
10-
'rounded-md': true}"
4+
v-on:click="viewUser(recommendation.id)"
5+
class="flex flex-col justify-end shadow-inner recommendation-card rounded-md cursor-pointer"
116
v-bind:style="{
127
'background-repeat': 'no-repeat',
138
'background-position': 'center center',
@@ -36,6 +31,9 @@
3631
export default {
3732
props: ['recommendation'],
3833
methods: {
34+
async viewUser(id) {
35+
await this.$router.push(`/users/${id}`);
36+
},
3937
getPrimaryImage() {
4038
const userImages = this.recommendation.images;
4139
let imageForShowcase;

‎frontend/src/components/app/users/User.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="sm:mx-16 lg:mx-32">
4+
<NavBar v-bind:currentRoute="'Browse'"></NavBar>
5+
<section class="mx-auto">
6+
<!-- <UserImages v-bind:images="user.images"></UserImages>-->
7+
<div v-on:click="goBack()" class="sort-button ml-auto rounded-md text-lg w-12 mr-4 mb-4">
8+
<h1 class="noSelect">←</h1>
9+
</div>
10+
<div v-if="user" class="md:flex md:items-start">
11+
<UserImages class="md:w-1/2 md:order-2 md:rounded-md"></UserImages>
12+
<UserProfile class="md:w-1/2 md:order-1" v-bind:user="user"></UserProfile>
13+
</div>
14+
</section>
15+
</div>
16+
</template>
17+
<script>
18+
import UserImages from '@/components/app/users/UserImages.vue';
19+
import UserProfile from '@/components/app/users/UserProfile.vue';
20+
import NavBar from '@/components/shared/NavBar.vue';
21+
22+
export default {
23+
components: {
24+
UserImages,
25+
UserProfile,
26+
NavBar,
27+
},
28+
data: () => ({
29+
user: null,
30+
}),
31+
methods: {
32+
goBack() {
33+
this.$router.go(-1);
34+
},
35+
},
36+
async beforeMount() {
37+
const userRequest = await this.$http.get(`/users/${this.$route.params.id}`);
38+
this.user = userRequest.data;
39+
console.log(this.user);
40+
},
41+
};
42+
</script>

‎frontend/src/components/app/users/UserImages.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<!-- eslint-disable max-len-->
3+
<!-- v-for="(image, index) in this.images" :key="image.id"-->
4+
<div
5+
class="relative image-height"
6+
v-bind:style="{
7+
'background-repeat': 'no-repeat',
8+
'background-position': 'center center',
9+
'background-size' :'cover',
10+
'background-image': 'url(' + getImage() + ')'}">
11+
<div v-if="imagesCount > 1" class="absolute flex w-full top-0 left-0 w-full z-10 px-8 pt-1">
12+
<div v-for="image in this.images" :key="image.id"
13+
v-on:click="setImage(image.id)"
14+
v-bind:class="{
15+
'flex-1':true,
16+
'mx-2': true,
17+
'h-2': true,
18+
'rounded-md': true,
19+
'bg-gray-200': true,
20+
'cursor-pointer': image.id !== currentImage,
21+
'bg-gray-400': image.id === currentImage}"></div>
22+
</div>
23+
<div v-bind:class="{
24+
'absolute': true,
25+
'top-0': true,
26+
'left-0': true,
27+
'w-1/2': true,
28+
'h-full': true,
29+
'cursor-pointer': this.currentImage > 0}" v-on:click="prevImage()"></div>
30+
<div v-bind:class="{
31+
'absolute': true,
32+
'top-0': true,
33+
'right-0': true,
34+
'w-1/2': true,
35+
'h-full': true,
36+
'cursor-pointer': this.currentImage < this.imagesCount - 1}" v-on:click="nextImage()"></div>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import imageMan from '@/assets/recommendations/avatars/man1.png';
42+
import imageWoman from '@/assets/recommendations/avatars/woman1.png';
43+
44+
export default {
45+
// props: ['images'],
46+
data: () => ({
47+
images: [{ url: imageMan, id: 0 }, { url: imageWoman, id: 1 }],
48+
currentImage: 0,
49+
imagesCount: 0,
50+
}),
51+
methods: {
52+
nextImage() {
53+
if (this.currentImage < this.imagesCount - 1) {
54+
this.currentImage += 1;
55+
}
56+
},
57+
prevImage() {
58+
if (this.currentImage > 0) {
59+
this.currentImage -= 1;
60+
}
61+
},
62+
setImage(index) {
63+
this.currentImage = index;
64+
},
65+
getImage() {
66+
return this.images[this.currentImage].url;
67+
},
68+
},
69+
beforeMount() {
70+
this.imagesCount = this.images.length;
71+
},
72+
};
73+
</script>
74+
75+
<style>
76+
.image-height {
77+
height: 25rem;
78+
}
79+
</style>

‎frontend/src/components/app/users/UserProfile.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<!-- eslint-disable -->
3+
<div class="profileContainer md:overflow-scroll">
4+
<div class="text-center text-wrap p-8 md:pt-0 border-b">
5+
<h1 class="text-gray-matcha text-3xl font-semibold">{{user.first_name}} {{user.last_name}}, {{user.age}}</h1>
6+
<div class="flex items-center text-left33">
7+
<img src="../../../assets/gender.png" class="w-4 h-4 mr-2">
8+
<h1 class="text-gray-matcha mt-4"><span class="capitalize">{{user.gender}}</span> looking for {{preferences()}}</h1>
9+
</div>
10+
<div class="flex items-center mt-2 text-left">
11+
<img src="../../../assets/location.png" class="w-4 h-4 mr-2">
12+
<h1 class="text-gray-matcha">42 km away</h1>
13+
</div>
14+
</div>
15+
<div class="text-center text-wrap p-8 border-b">
16+
<h1>{{user.bio}}</h1>
17+
<div class="flex flex-wrap justify-center mx-auto mt-6">
18+
<h1 v-for="(interest, index) in userInterests" :key="index"
19+
class="px-4 py-1 border rounded-xl mr-2 mt-2 text-gray-600">{{interest}}</h1>
20+
</div>
21+
</div>
22+
<div class="text-center text-wrap p-8 border-b">
23+
<h1>Last seen</h1>
24+
<h1>{{formattedLastSeenDate}}</h1>
25+
</div>
26+
<div class="text-center flex mx-auto p-8 border-b">
27+
<div class="w-8/12 border border-purple-matcha py-2 rounded-lg cursor-pointer">
28+
<img src="../../../assets/heart.png" class="mx-auto w-8 h-8">
29+
</div>
30+
<div class="w-4/12 border border-purple-matcha py-2 rounded-lg ml-4">
31+
<h1 class="mx-auto text-xl">{{user.heat_score}}</h1>
32+
</div>
33+
</div>
34+
<div class="text-center p-8 border-b cursor-pointer">
35+
<h1 class="uppercase mx-auto">Block user</h1>
36+
</div>
37+
<div class="text-center p-8 cursor-pointer">
38+
<h1 class="uppercase mx-auto">Report as fake</h1>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script>
44+
export default {
45+
props: ['user'],
46+
data: () => ({
47+
userInterests: [],
48+
}),
49+
methods: {
50+
preferences() {
51+
if (this.user.orientation === 'heterosexual' && this.user.gender === 'male') {
52+
return 'women';
53+
}
54+
if (this.user.orientation === 'heterosexual' && this.user.gender === 'female') {
55+
return 'men';
56+
}
57+
if (this.user.orientation === 'homosexual' && this.user.gender === 'male') {
58+
return 'men';
59+
}
60+
if (this.user.orientation === 'homosexual' && this.user.gender === 'female') {
61+
return 'women';
62+
}
63+
if (this.user.orientation === 'bisexual') {
64+
return 'men & women';
65+
}
66+
if (this.user.orientation === 'other') {
67+
return 'genders other than men & women';
68+
}
69+
return 'any gender';
70+
},
71+
},
72+
computed: {
73+
formattedLastSeenDate() {
74+
if (this.user.date_lastseen) {
75+
return this.user.date_lastseen.slice(0, -7);
76+
}
77+
return undefined;
78+
},
79+
},
80+
beforeMount() {
81+
const interests = this.user.tags;
82+
if (interests) {
83+
for (let j = 0; j < interests.length; j += 1) {
84+
this.userInterests.push(interests[j].name);
85+
}
86+
}
87+
},
88+
};
89+
</script>
90+
91+
<style scoped>
92+
@screen md {
93+
.profileContainer {
94+
height: 30rem;
95+
}
96+
}
97+
</style>

‎frontend/src/main.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import Vue from 'vue';
22
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';
3-
import * as Sentry from '@sentry/browser';
4-
import { Vue as VueIntegration } from '@sentry/integrations';
5-
import { Integrations } from '@sentry/tracing';
63
import http from './plugins/http';
74
import errorMessenger from './plugins/errorMessenger';
85
import App from './App.vue';
@@ -11,18 +8,6 @@ import store from './store';
118
import validPassword from './validators/validPassword';
129
import './assets/css/tailwind.css';
1310

14-
Sentry.init({
15-
dsn: 'https://fc31e918801742e2b1e691067496e257@o450203.ingest.sentry.io/5434440',
16-
integrations: [
17-
new VueIntegration({
18-
Vue,
19-
tracing: true,
20-
}),
21-
new Integrations.BrowserTracing(),
22-
],
23-
tracesSampleRate: 1,
24-
});
25-
2611
Vue.component('ValidationProvider', ValidationProvider);
2712
Vue.component('ValidationObserver', ValidationObserver);
2813
extend('validPassword', validPassword);

‎frontend/src/router/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Onboarding from '../views/app/Onboarding.vue';
1212
import Browse from '../views/app/Browse.vue';
1313
import Search from '../views/app/Search.vue';
1414
import Settings from '../views/app/Settings.vue';
15+
import User from '../components/app/users/User.vue';
1516
import store from '../store/index';
1617

1718
Vue.use(VueRouter);
@@ -114,6 +115,11 @@ const routes = [
114115
component: Settings,
115116
beforeEnter: notLoggedInRedirectLogin,
116117
},
118+
{
119+
path: '/users/:id',
120+
component: User,
121+
beforeEnter: notLoggedInRedirectLogin,
122+
},
117123
];
118124

119125
const router = new VueRouter({

0 commit comments

Comments
 (0)