adds leaderboard

src/pages/IsTree.vue

@@ -5,8 +5,9 @@
       <p>Help us validate other users' images.</p>
       <p>Current score: {{ profile.points }}</p>
       <q-carousel ref="carousel">
-        <q-carousel-slide v-for="isTree in isTreeList" :key="isTree.datetime" >
+        <q-carousel-slide v-for="isTree in isTreeList" :key="isTree['.key']" >
           <img class="slideImg" :src="isTree.s3url"/>
+          <p style="color:white">{{ isTree['.key'] }}</p>
         </q-carousel-slide>
       </q-carousel>
       <p>Viewing {{ currentSlideIndex + 1 }} out of {{ isTreeList.length }}</p>
@@ -56,7 +57,7 @@ export default {
   },
   computed: {
     isTreeList () {
-      return this.trees.filter(tree => tree.user_id !== this.userId)
+      return this.trees.filter(tree => tree.user_id !== this.userId).reverse()
     },
     profile: {
       get () {

src/pages/Leaderboard.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-page padding>
+    <div class="panel-body">
+      <h1>Top Scores</h1>
+      <div>
+        <div v-for="topUser in topUsers">
+          {{topUser.user_name}} : {{topUser.points}}
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+<script>
+import { db } from '../plugins/firebase'
+export default {
+  name: 'leaderboard',
+  firebase: {
+    leaders: db.ref('user_profiles').orderByChild('points').limitToLast(10)
+  },
+  computed: {
+     topUsers() {
+      // let topUsers = this.profiles.orderByChild('points').limitToLast(10)
+      // let topUsers = db.ref('user_profiles').sort(function (a, b) { return (a.points > b.points) ? 1 : ((b.points > a.points) ? -1 : 0) })
+      //topUsers = topUsers.slice(-3)
+      //return topUsers.reverse()
+      console.log(this.leaders)
+      return this.leaders.reverse()
+    }
+  }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+
+h1 {
+  font-size: 30px;
+  padding-top:20px;
+  padding-bottom: 0px;
+}
+
+</style>

src/pages/Profile.vue

@@ -119,7 +119,7 @@ export default {
       let newProfile = Object.assign({}, this.profile)
       newProfile.points = newProfile.points - this.spamToll
       this.$store.dispatch('setProfile', newProfile)
-      this.profilesRef.child(this.userId).update({points: newProfile.points})
+      this.$profilesRef.child(this.userId).update({points: newProfile.points})
         .then(this.removeFlagged())
     },
     photosFlaggedAlert () {

src/pages/tag.vue

@@ -180,7 +180,7 @@
       save (formData) {
         // upload data to the server
         let key
-        let imageUrl
+        let s3url
         this.currentStatus = STATUS_SAVING
 
         this.$treesRef.push(this.tree)
@@ -209,7 +209,7 @@
           })
           .then(downloadURL => {
             console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
-            return this.$treesRef.child(key).update({imageUrl: downloadURL})
+            return this.$treesRef.child(key).update({s3url: downloadURL})
           })
           .then(() => {
             //this.updateProfilePoints

src/router/routes.js

@@ -14,6 +14,8 @@ export default [
           requiresAuth: true }},
       { path: '/istree', component: () => import('pages/IsTree'),  meta: {
           requiresAuth: true }},
+      { path: '/leaderboard', component: () => import('pages/Leaderboard'),  meta: {
+          requiresAuth: true }},
       { path: '/profile', component: () => import('pages/Profile'),  meta: {
           requiresAuth: true }},
       { path: '/success', component: () => import('pages/Success'),  meta: {