heat score slider

Author: supalarry

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

@@ -5,7 +5,7 @@
       <h1 class="text-gray-matcha text-3xl font-semibold mb-6">{{user.first_name}}, {{user.age}}</h1>
       <div v-if="!user.is_online" class="flex items-center mt-2 text-left">
         <img class="w-3 h-3 mr-2" src="../../../assets/recommendations/offline.png">
-        <h1 class="text-gray-600">Last seen {{formattedLastSeenDate}}</h1>
+        <h1 class="text-gray-600">Last seen {{user.last_seen}}</h1>
       </div>
       <div v-else class="flex items-center mt-2 text-left">
         <img class="w-3 h-3 mr-2" src="../../../assets/recommendations/online.png">
@@ -27,7 +27,15 @@
         class="px-4 py-1 border rounded-xl mr-2 mt-2 text-gray-600 text-sm">{{interest}}</h1>
       </div>
     </div>
-    <div class="text-center flex mx-auto p-8 border-b">
+    <div class="text-center px-8 pt-8 pb-2">
+      <h1 id="sliderScoreHeader">Heat score</h1>
+    </div>
+    <div id="sliderScoreContainer" class="text-center w-full heatScore relative h-6">
+      <div id="sliderScore" class="absolute top-0 flex items-center justify-center h-12 w-auto rounded-b-lg">
+        <h1 class="text-white-matcha px-2">{{user.heat_score}}</h1>
+      </div>
+    </div>
+    <div class="text-center flex mx-auto p-8 mt-4 border-b">
       <div class="w-full border border-purple-matcha py-2 rounded-lg cursor-pointer">
         <img src="../../../assets/heart.png" class="mx-auto w-8 h-8">
       </div>
@@ -70,15 +78,13 @@ export default {
       return 'any gender';
     },
   },
-  computed: {
-    formattedLastSeenDate() {
-      if (this.user.date_lastseen) {
-        return this.user.date_lastseen.slice(0, -7);
-      }
-      return undefined;
-    },
-  },
-  beforeMount() {
+  async beforeMount() {
+    const sliderRangesRequest = await this.$http.get('/search/values');
+    const maxScore = sliderRangesRequest.data.search_minmax.max_score;
+    const sliderScore = document.getElementById('sliderScore');
+    const sliderScoreWidth = `${sliderScore.getBoundingClientRect().width}px`;
+    const marginLeft = `${(this.user.heat_score / maxScore) * 100}%`;
+    sliderScore.style.marginLeft = `calc(${marginLeft} - ${sliderScoreWidth})`;
     const interests = this.user.tags;
     if (interests) {
       for (let j = 0; j < interests.length; j += 1) {
@@ -95,4 +101,17 @@ export default {
     height: 75vh;
   }
 }
+
+.heatScore {
+  background-image: linear-gradient(to right, #fae6ff, #cc00ff);
+}
+
+#sliderScore {
+  background: #660066;
+}
+
+#sliderScoreHeader {
+  color: #660066;
+}
+
 </style>