Add dayjs library (#276)

* Add dayjs

* Add leaderboard navigation

client/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "core-js": "3.16.4",
+    "dayjs": "^1.10.6",
     "intro.js": "4.2.2",
     "node-snackbar": "0.1.16",
     "qr-scanner": "1.3.0",

client/src/assets/scss/_style.scss

@@ -7,6 +7,11 @@ li {
   list-style-type: none;
 }
 
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
 .snackbar-container {
   z-index: 1;
   margin: 0;
@@ -93,8 +98,7 @@ li {
 }
 
 .ripple:hover::after {
-  background:
-    rgba(#fff, 0.2)
+  background: rgba(#fff, 0.2)
     radial-gradient(circle, transparent 1%, rgba(white, 0.1) 1%) center/15000%;
 }
 

client/src/components/UserLeaderboard.vue

@@ -1,12 +1,21 @@
 <template>
   <div>
     <h2 class="leaderboard__title">Leaderboard</h2>
-    <table class="leaderboard__table">
+    <div class="leaderboard__nav">
+      <h3 @click="togglePeriod">{{ week }} {{ month }} {{ year }}</h3>
+      <a class="nav--left" @click="nav(-1)">
+        <i class="fas fa-caret-left"></i>
+      </a>
+      <a :class="['nav--right', last ? 'disabled' : '']" @click="nav(1)">
+        <i class="fas fa-caret-right"></i>
+      </a>
+    </div>
+    <table v-if="leaderboard" class="leaderboard__table">
       <tr>
         <th>Rank</th>
         <th></th>
         <th>User</th>
-        <th align="right">Lvl</th>
+        <th align="right">Score</th>
       </tr>
       <router-link
         v-for="user in leaderboard"
@@ -24,22 +33,45 @@
             ></div>
           </td>
           <td>{{ user.name || user.username }}</td>
-          <td align="right">{{ user.lvl }}</td>
+          <td align="right">{{ user.score }}</td>
         </tr>
       </router-link>
     </table>
   </div>
 </template>
 
 <script>
+import Vue from "vue";
 import { mapState, mapMutations } from "vuex";
 import { EVENT_TYPE } from "@/constants";
 import { api } from "@/utils";
 import EventBus from "@/plugins/event-bus";
+import dayjs from "@/plugins/dayjs";
 
-export default {
+export default Vue.extend({
+  data() {
+    return {
+      date: dayjs().startOf("month"),
+      period: "month"
+    };
+  },
   computed: {
-    ...mapState("user", ["leaderboard"])
+    ...mapState("user", ["leaderboard"]),
+    week() {
+      if (this.period !== "week") return;
+      return "w " + this.date.week();
+    },
+    month() {
+      if (this.period !== "month") return;
+      return this.date.format("MMMM");
+    },
+    year() {
+      if (this.period !== "year" && dayjs().isSame(this.date, "year")) return;
+      return this.date.format("YYYY");
+    },
+    last() {
+      return this.date.add(1, this.period).isAfter(dayjs());
+    }
   },
   created() {
     this.fetchLeaderboard();
@@ -51,14 +83,54 @@ export default {
   methods: {
     ...mapMutations("user", ["setLeaderboard"]),
     async fetchLeaderboard() {
-      const leaderboard = await api.get("/api/leaderboard");
+      const from = this.date.format("YYYY-MM-DD");
+      const to = this.date.add(1, this.period).format("YYYY-MM-DD");
+
+      const leaderboard = await api.get(`/api/leaderboard/${from}/${to}`);
       if (!leaderboard.err) this.setLeaderboard(leaderboard.data);
+    },
+    nav(dir) {
+      this.setLeaderboard(null);
+      this.date = this.date.add(dir, this.period);
+      this.fetchLeaderboard();
+    },
+    togglePeriod() {
+      this.setLeaderboard(null);
+      this.period = { week: "month", month: "year", year: "week" }[this.period];
+      this.date = dayjs().startOf(this.period);
+      this.fetchLeaderboard();
     }
   }
-};
+});
 </script>
 
 <style lang="scss">
+.leaderboard__nav {
+  position: relative;
+
+  h3 {
+    display: inline-block;
+  }
+
+  a {
+    position: absolute;
+    top: 0;
+    background: $dark-brand-color;
+    padding: 0.2rem 1rem;
+    border-radius: 0.2rem;
+    &.nav--left {
+      left: 0;
+    }
+    &.nav--right {
+      right: 0;
+    }
+    &.disabled {
+      color: $grey-400;
+      background: $grey-800;
+    }
+  }
+}
+
 .leaderboard__table {
   min-width: 100%;
   max-width: 800px;

client/src/plugins/dayjs.ts

@@ -0,0 +1,7 @@
+import dayjs from "dayjs";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+dayjs.extend(weekOfYear);
+
+dayjs.Ls.en.weekStart = 1;
+
+export default dayjs;

client/src/store/store-user.ts

@@ -10,8 +10,7 @@ export default {
     coords: userCoords ? JSON.parse(userCoords) : null,
     isAuthenticated: false,
     status: "pending",
-    friends: [],
-    leaderboard: []
+    leaderboard: null
   }),
   mutations: {
     setAuth(state, payload) {