analyse recommendations to get filter starting values

Author: supalarry

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

@@ -21,7 +21,7 @@
       </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>
+        <h1 class="text-2xl ml-2 leading-none mb-1">{{this.recommendation.age}}</h1>
       </div>
       <h1 class="text-lg">{{getDistance()}}km away</h1>
     </div>
@@ -37,6 +37,7 @@ export default {
     getPrimaryImage() {
       const userImages = this.recommendation.images;
       let imageForShowcase;
+      // console.log(this.recommendation);
       for (let i = 0; i < userImages.length; i += 1) {
         if (userImages[i].is_primary) {
           imageForShowcase = userImages[i].link;

frontend/src/components/app/recommendations/Recommendations.vue

@@ -7,26 +7,29 @@
         v-bind:position="'left'"
         v-bind:options="['Youngest', 'Oldest', 'Closest', 'Furthest', 'Most popular', 'Least popular', 'Most common interests', 'Least common interests']"
         v-on:sort="sort"></Sort>
-      <FilterSlider v-bind:name="'age'" v-on:filter="filter"></FilterSlider>
-      <FilterSlider v-bind:unit="'km'" v-bind:name="'distance'" v-on:filter="filter"></FilterSlider>
-      <FilterSlider v-bind:unit="'pts'" v-bind:name="'fame'" v-on:filter="filter"></FilterSlider>
+      <FilterSlider
+        v-bind:min="recommendationsAnalysis.age.min"
+        v-bind:max="recommendationsAnalysis.age.max"
+        v-bind:name="'age'"
+        v-on:filter="filter"></FilterSlider>
+      <FilterSlider
+        v-bind:min="recommendationsAnalysis.distance.min"
+        v-bind:max="recommendationsAnalysis.distance.max"
+        v-bind:unit="'km'"
+        v-bind:name="'distance'"
+        v-on:filter="filter"></FilterSlider>
+      <FilterSlider
+        v-bind:min="recommendationsAnalysis.popularity.min"
+        v-bind:max="recommendationsAnalysis.popularity.max"
+        v-bind:unit="'pts'"
+        v-bind:name="'fame'"
+        v-on:filter="filter"></FilterSlider>
       <MultipleFiltersDropdown
         v-bind:position="'right'"
-        v-bind:options="[
-          'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
-          'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
-          'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
-          'museum', 'dancing', 'surfing', 'karaoke', 'parties', 'diy',
-          'walking', 'cat lover', 'movies', 'gardening', 'trivia', 'working out',
-          'cooking', 'gamer', 'brunch', 'blogging', 'picknicking', 'athlete',
-          'dog lover', 'politics', 'environmentalism', 'instagram', 'spirituality',
-          'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
-          'astrology', 'board games', 'craft beer', 'coffee', 'writer',
-        ]"
+        v-bind:options="recommendationsAnalysis.uniqueInterests"
         v-bind:name="'interests'"
         v-on:filter="filter"></MultipleFiltersDropdown>
     </div>
-<!--    <div class="flex flex-wrap items-center justify-start">-->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
     <RecommendationCard
       v-for="(recommendation, index) in recommendations" :key="index"
@@ -43,6 +46,7 @@ import RecommendationCard from '@/components/app/recommendations/RecommendationC
 import MultipleFiltersDropdown from '@/components/shared/MultipleFiltersDropdown.vue';
 
 export default {
+  props: ['title', 'recommendations', 'recommendationsAnalysis'],
   components: {
     Sort,
     RecommendationCard,
@@ -57,6 +61,5 @@ export default {
       console.log('filter');
     },
   },
-  props: ['title', 'recommendations'],
 };
 </script>

frontend/src/components/shared/FilterSlider.vue

@@ -18,15 +18,15 @@ import noUiSlider from 'nouislider';
 import 'nouislider/distribute/nouislider.css';
 
 export default {
-  props: ['options', 'name', 'unit'],
+  props: ['options', 'name', 'unit', 'min', 'max'],
   data: () => ({
     closed: true,
     slider: {
-      startMin: 25,
-      startMax: 75,
-      min: 0,
-      max: 100,
-      start: 40,
+      startMin: null,
+      startMax: null,
+      min: null,
+      max: null,
+      start: null,
       step: 1,
     },
   }),
@@ -52,6 +52,11 @@ export default {
     },
   },
   mounted() {
+    this.slider.startMin = this.min;
+    this.slider.startMax = this.max;
+    this.slider.min = this.min;
+    this.slider.max = this.max;
+    this.slider.start = this.min;
     noUiSlider.create(this.$refs.slider, {
       start: [this.slider.startMin, this.slider.startMax],
       step: this.slider.step,

frontend/src/views/app/Browse.vue

@@ -4,13 +4,16 @@
     <NavBar v-bind:currentRoute="'Browse'"></NavBar>
     <section class="mx-auto">
       <Recommendations
+        v-if="recommendationsAnalysisDone"
         v-bind:title="'Potential matches'"
-        v-bind:recommendations="recommendations"></Recommendations>
+        v-bind:recommendations="recommendations"
+        v-bind:recommendationsAnalysis="recommendationsAnalysis"></Recommendations>
     </section>
   </div>
 </template>
 
 <script>
+/* eslint-disable max-len */
 import NavBar from '@/components/shared/NavBar.vue';
 import Recommendations from '@/components/app/recommendations/Recommendations.vue';
 
@@ -22,6 +25,22 @@ export default {
   },
   data: () => ({
     recommendations: [],
+    recommendationsAnalysis: {
+      age: {
+        min: null,
+        max: null,
+      },
+      distance: {
+        min: null,
+        max: null,
+      },
+      popularity: {
+        min: null,
+        max: null,
+      },
+      uniqueInterests: [],
+    },
+    recommendationsAnalysisDone: false,
   }),
   async created() {
     if (this.recommendationsFromSettingUp) {
@@ -30,6 +49,33 @@ export default {
       const recommendationsRequest = await this.$http.get('/recommendations');
       this.recommendations = recommendationsRequest.data.recommendations;
     }
+    for (let i = 0; i < this.recommendations.length; i += 1) {
+      if (this.recommendationsAnalysis.age.min === null || this.recommendations[i].age < this.recommendationsAnalysis.age.min) {
+        this.recommendationsAnalysis.age.min = this.recommendations[i].age;
+      }
+      if (this.recommendationsAnalysis.age.max === null || this.recommendations[i].age > this.recommendationsAnalysis.age.max) {
+        this.recommendationsAnalysis.age.max = this.recommendations[i].age;
+      }
+      if (this.recommendationsAnalysis.distance.min === null || Math.floor(this.recommendations[i].distance) < this.recommendationsAnalysis.distance.min) {
+        this.recommendationsAnalysis.distance.min = Math.floor(this.recommendations[i].distance);
+      }
+      if (this.recommendationsAnalysis.distance.max === null || Math.floor(this.recommendations[i].distance) > this.recommendationsAnalysis.distance.max) {
+        this.recommendationsAnalysis.distance.max = Math.floor(this.recommendations[i].distance);
+      }
+      if (this.recommendationsAnalysis.popularity.min === null || this.recommendations[i].heat_score < this.recommendationsAnalysis.popularity.min) {
+        this.recommendationsAnalysis.popularity.min = this.recommendations[i].heat_score;
+      }
+      if (this.recommendationsAnalysis.popularity.max === null || this.recommendations[i].heat_score > this.recommendationsAnalysis.popularity.max) {
+        this.recommendationsAnalysis.popularity.max = this.recommendations[i].heat_score;
+      }
+      const interests = this.recommendations[i].tags;
+      for (let j = 0; j < interests.length; j += 1) {
+        if (this.recommendationsAnalysis.uniqueInterests.indexOf(interests[j].name) === -1) {
+          this.recommendationsAnalysis.uniqueInterests.push(interests[j].name);
+        }
+      }
+    }
+    this.recommendationsAnalysisDone = true;
   },
 };