#489: Added ProfileDays

assets/css/tailwind.scss

@@ -157,6 +157,9 @@ body {
     background-color: rgba(100, 130, 140, 1);
   }
 }
+.bg-tint-solid {
+  background-color: #303a40;
+}
 .bg-vs {
   background-color: rgba(85, 60, 154, 0.5);
   transition: background-color 0.25s ease-out;

components/profiles/ProfileDaysFilter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="">
+    <div
+      class="md:btn-group justify-center grid grid-cols-3 md:flex bg-tint-solid p-2 rounded-md border-other"
+    >
+      <span class="mr-1" style="line-height: 30px"
+        >Last # days
+        <InfoTooltip
+          tooltip="Filter all of the below data by the last X number of days. This is useful for seeing how a player/outfit has been performing recently."
+        ></InfoTooltip
+      ></span>
+      <input
+        v-model="days"
+        class="w-16 appearance-none border border-solid border-transparent text-white py-1 px-2 leading-tight bg-tint-light rounded-sm focus:bg-gray-500 focus:outline-none focus:border-white mr-1"
+        type="number"
+        aria-label="Days"
+        placeholder="All"
+      />
+      <button
+        v-for="mode in dateModes"
+        :key="mode.days"
+        class="btn btn-sm mx-1 my-1 md:mx-0 md:my-0 col-span-1 rounded-none"
+        :class="{ 'btn-active': days === mode.days }"
+        @click="updateDays(mode.days)"
+      >
+        {{ mode.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'ProfileDaysFilter',
+  props: {},
+  data() {
+    return {
+      dateModes: [
+        { days: 7, text: '7' },
+        { days: 14, text: '14' },
+        { days: 30, text: '30' },
+        { days: 60, text: '60' },
+        { days: 90, text: '90' },
+        { days: 180, text: '180' },
+        { days: 365, text: '365' },
+        { days: null, text: 'All Time' },
+      ],
+      days: null as number | null,
+    }
+  },
+  methods: {
+    updateDays(days: number | null) {
+      this.days = days
+      this.$emit('updatedDaysFilter', days)
+    },
+  },
+})
+</script>

components/statistics/characters/Characters.vue

@@ -2,8 +2,7 @@
   <section class="mb-4">
     <h1 class="text-3xl text-center mb-2">Player Statistics</h1>
     <p class="text-center mb-4">
-      Shows the top 1000 Players for the selected criteria. You'll be able to
-      search for yourself in a future update.
+      Shows the top 1000 Players for the selected criteria.
     </p>
     <div v-if="loaded">
       <p v-if="filter.bracket !== 0" class="text-center mb-4">

components/statistics/outfits/Outfits.vue

@@ -2,8 +2,7 @@
   <section class="mb-4">
     <h1 class="text-3xl text-center mb-2">Outfit Statistics</h1>
     <p class="text-center mb-4">
-      Shows the top 1000 Outfits for the selected criteria. You'll be able to
-      search for your outfit in a future update.
+      Shows the top 1000 Outfits for the selected criteria.
     </p>
     <div v-if="loaded">
       <p v-if="filter.bracket !== 0" class="text-center mb-4">

pages/player/_player.vue

@@ -23,6 +23,12 @@
           />
         </div>
       </div>
+      <div
+        class="col-span-12 flex justify-center sticky z-50"
+        style="top: 0.5rem"
+      >
+        <ProfileDaysFilter></ProfileDaysFilter>
+      </div>
       <div class="col-span-12 card">
         <div class="tag section">Combat Stats</div>
         <ProfileCombatMetrics :statistics="statistics" :player="player" />
@@ -50,6 +56,7 @@ import factionTextClass from '~/filters/FactionTextClass'
 import ProfileAlertMetrics from '~/components/profiles/ProfileAlertMetrics.vue'
 import ProfileLogos from '~/components/profiles/ProfileLogos.vue'
 import ProfileCombatMetrics from '~/components/profiles/ProfileCombatMetrics.vue'
+import ProfileDaysFilter from '~/components/profiles/ProfileDaysFilter.vue'
 import {
   ProfileCommonMetricsInterface,
   ProfileMetricsInterface,
@@ -64,6 +71,7 @@ export default Vue.extend({
     ProfileAlertMetrics,
     ProfileLogos,
     ProfileCombatMetrics,
+    ProfileDaysFilter,
   },
   data() {
     return {
@@ -297,6 +305,7 @@ export default Vue.extend({
 
         let bracket = alert.instanceDetails?.bracket || Bracket.UNKNOWN
         if (isTotal) {
+          // @ts-ignore It's trying to assign a value of 0 which TS doesn't like, but it is a valid bracket, so bugger off TS no-one likes you.
           bracket = Bracket.TOTAL
         }