browsing page

Author: supalarry

frontend/src/assets/recommendations/avatars/man1.png

@@ -0,0 +1,91 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div v-bind:class="{
+    'card': true,
+    'flex w-full': true,
+    'ml-1': true,
+    'flex-col': true,
+    'justify-end items-start': true,
+    'shadow-inner': true,
+    'recommendation-card': true,
+    'rounded-md': true,
+    'mb-2': true,
+    'ml-2': index % 2 === 0}"
+       v-bind:style="{
+      'background-repeat': 'no-repeat',
+      'background-position': 'center center',
+      'background-size' :'cover',
+      'background-image': 'url(' + getPrimaryImage() + ')'}">
+    <div class="p-8 text-white">
+      <div class="flex items-center">
+        <img v-if="this.recommendation.is_online" class="w-3 h-3" src="../../../assets/recommendations/online.png">
+        <img v-else class="w-3 h-3" src="../../../assets/recommendations/offline.png">
+        <h1 v-if="this.recommendation.is_online" class="text-lg ml-2 leading-none">online</h1>
+        <h1 v-else class="text-lg ml-2 leading-none">offline</h1>
+      </div>
+      <div class="flex items-end my-2">
+        <h1 class="text-4xl font-bold leading-none">{{this.recommendation.first_name}}</h1>
+        <h1 class="text-2xl ml-2 leading-none mb-1">24</h1>
+      </div>
+      <h1 class="text-lg">{{getDistance()}}km away</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-else-return */
+
+export default {
+  props: ['recommendation', 'index'],
+  methods: {
+    getPrimaryImage() {
+      const userImages = this.recommendation.images;
+      let imageForShowcase;
+      for (let i = 0; i < userImages.length; i += 1) {
+        if (userImages[i].is_primary) {
+          imageForShowcase = userImages[i].link;
+        } else if (!userImages[i].is_primary && !imageForShowcase) {
+          imageForShowcase = userImages[i].link;
+        }
+      }
+      console.log(imageForShowcase);
+      if (imageForShowcase) {
+        return imageForShowcase;
+      }
+      if (this.recommendation.gender === 'male') {
+        const number = Math.floor(Math.random() * 11);
+        if (number % 2 === 0) {
+          return '../../../assets/recommendations/avatars/man1.png';
+        }
+        return '../../../assets/recommendations/avatars/man2.png';
+      } else if (this.recommendation.gender === 'female') {
+        const number = Math.floor(Math.random() * 11);
+        if (number % 2 === 0) {
+          return '../../../assets/recommendations/avatars/woman1.png';
+        }
+        return '../../../assets/recommendations/avatars/woman2.png';
+      }
+      return '../../../assets/recommendations/avatars/other.png';
+    },
+    getDistance() {
+      return Math.floor(this.recommendation.distance);
+    },
+  },
+  created() {
+    console.log(this.index);
+  },
+};
+</script>
+
+<style scoped>
+.recommendation-card {
+  /*width: 24rem;*/
+  height: 32rem;
+  box-shadow: inset 0 -8rem 1rem rgba(0, 0, 0, 0.3);
+}
+@screen md {
+  .card {
+    width: 48%;
+  }
+}
+</style>

frontend/src/assets/recommendations/avatars/man2.png

@@ -0,0 +1,22 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <section>
+    <h1 class="text-5xl mb-4 text-center sm:text-left onboarding-sub-container-content-heading">{{title}}</h1>
+    <div class="flex flex-wrap items-center justify-start">
+    <RecommendationCard
+      v-for="(recommendation, index) in recommendations" :key="index"
+      v-bind:recommendation="recommendation" v-bind:index="index + 1"></RecommendationCard>
+    </div>
+  </section>
+</template>
+
+<script>
+import RecommendationCard from '@/components/app/recommendations/RecommendationCard.vue';
+
+export default {
+  components: {
+    RecommendationCard,
+  },
+  props: ['title', 'recommendations'],
+};
+</script>

frontend/src/assets/recommendations/avatars/other.png

@@ -1,13 +1,36 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
-    <h1>browse</h1>
+  <div class="mx-4 sm:mx-32">
+    <NavBar v-bind:currentRoute="'Browse'"></NavBar>
+    <section class="mx-auto">
+      <Recommendations
+        v-bind:title="'Potential matches'"
+        v-bind:recommendations="recommendations"></Recommendations>
+    </section>
   </div>
 </template>
 
 <script>
+import NavBar from '@/components/shared/NavBar.vue';
+import Recommendations from '@/components/app/recommendations/Recommendations.vue';
 
 export default {
+  props: ['recommendationsFromSettingUp'],
+  components: {
+    NavBar,
+    Recommendations,
+  },
+  data: () => ({
+    recommendations: [],
+  }),
+  async created() {
+    if (this.recommendationsFromSettingUp) {
+      this.recommendations = this.recommendationsFromSettingUp;
+    } else {
+      const recommendationsRequest = await this.$http.get('/recommendations');
+      this.recommendations = recommendationsRequest.data.recommendations;
+    }
+  },
 };
 
 </script>