Whole wraft of updates to the alert pages. Completed leaderboards, co…

…rrected logic preventing data pulls when alerts end, layout fixes, tooltips, update indicators etc. Closes #76. Closes #52
ps2alerts · Dec 11, 2020 · 2db8fb2 · 2db8fb2
1 parent 1c0051c
commit 2db8fb2
Show file tree

Hide file tree

Showing 25 changed files with 1,015 additions and 474 deletions.
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
@@ -70,12 +70,16 @@
   .content-spacing {
     @apply mb-4;
   }
+
+  .rounded-none {
+    border-radius: 0;
+  }
 }
 
 @layer utilities {
   /* Buttons */
   .btn {
-    @apply bg-red-800 font-bold rounded-md py-2 px-4 m-1 inline-block font-medium border-transparent;
+    @apply bg-red-800 font-bold rounded-md py-2 px-4 inline-block font-medium border-transparent;
     transition: background-color 0.25s ease-out;
 
     &:focus, &:active {
@@ -95,7 +99,6 @@
       }
     }
   }
-
   .btn-sm {
     @apply text-sm py-1 px-2 rounded;
   }
@@ -110,6 +113,20 @@
       @apply bg-gray-600;
     }
   }
+  .btn-group {
+    @apply inline-flex;
+    .btn {
+      @extend .rounded-none;
+
+      &:first-of-type {
+        @apply rounded-l;
+      }
+
+      &:last-of-type {
+        @apply rounded-r;
+      }
+    }
+  }
 
   .card {
     @extend .bg-tint;

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -1,5 +1,6 @@
 @import './colors.scss';
 @import './custom.scss';
+/*@import './vueify-overrides.scss';*/
 
 @tailwind base;
 @tailwind components;

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
diff --git a/assets/css/vueify-overrides.scss b/assets/css/vueify-overrides.scss
diff --git a/components/RTM/RealTimeAlert.vue b/components/RTM/RealTimeAlert.vue
@@ -13,9 +13,9 @@
         {{ remainingTimeText }}
       </div>
 
-      <div class="mr-2 col-start-12">
+      <div class="col-start-12">
         <NuxtLink
-          class="btn btn-sm"
+          class="btn btn-sm rounded-r mr-1"
           :to="{ name: 'alert-alert', params: { alert: instanceId } }"
         >
           <font-awesome-icon fixed-width :icon="['fas', 'link']" />

diff --git a/components/RTM/RealTimeMonitor.vue b/components/RTM/RealTimeMonitor.vue
@@ -12,21 +12,24 @@
     </div>
     <div v-show="actives.length > 0">
       <div class="flex justify-center">
-        <button
-          class="btn btn-sm rtm-btn"
-          :class="{ 'btn-active': mode === 'territory' }"
-          @click="updateMode('territory')"
-        >
-          <font-awesome-icon fixed-width :icon="['fas', 'flag']" />
-          Territory
-        </button>
-        <button
-          class="btn btn-sm rtm-btn"
-          :class="{ 'btn-active': mode === 'pops' }"
-          @click="updateMode('pops')"
-        >
-          <font-awesome-icon fixed-width :icon="['fas', 'user']" /> Population
-        </button>
+        <div class="btn-group mr-2">
+          <button
+            class="btn btn-sm rtm-btn"
+            :class="{ 'btn-active': mode === 'territory' }"
+            @click="updateMode('territory')"
+          >
+            <font-awesome-icon fixed-width :icon="['fas', 'flag']" />
+            Territory
+          </button>
+          <button
+            class="btn btn-sm rtm-btn"
+            :class="{ 'btn-active': mode === 'pops' }"
+            @click="updateMode('pops')"
+          >
+            <font-awesome-icon fixed-width :icon="['fas', 'user']" /> Population
+          </button>
+        </div>
+
         <button
           v-show="mode === 'pops' && showPopPercent"
           class="btn btn-sm rtm-btn"

diff --git a/components/alert/AlertCharacterMetrics.vue b/components/alert/AlertCharacterMetrics.vue
@@ -1,6 +1,20 @@
 <template>
   <div>
     <div class="tag section">Player Metrics</div>
+    <div v-if="alert.state === 1" class="absolute top-0 right-0 mr-2">
+      <v-tooltip left>
+        <template #activator="{ on, attrs }">
+          <v-progress-circular
+            :value="updateCountdownPercent"
+            :rotate="-90"
+            :size="14"
+            v-bind="attrs"
+            v-on="on"
+          ></v-progress-circular>
+        </template>
+        <span>Updates every {{ updateRate / 1000 }} secs</span>
+      </v-tooltip>
+    </div>
     <div v-if="!loaded" class="text-center">
       <h1>Loading...</h1>
     </div>
@@ -18,61 +32,38 @@
         </div>
       </div>
       <div class="col-span-12">
-        <div class="flex items-center py-2">
+        <div class="my-2">
           <input
             v-model="filter"
-            class="appearance-none bg-tint-light rounded border-none w-full text-white p-2 leading-tight focus:outline-none"
+            class="appearance-none bg-tint-light rounded border-none w-full text-white p-2 leading-tight"
             type="text"
             placeholder="[TAG] Player"
             aria-label="Player Name"
             @keydown="$event.stopImmediatePropagation()"
           />
         </div>
-
         <v-data-table
           class="datatable"
           dense
           show-expand
-          hide-default-footer
           item-key="character.id"
           :headers="headers"
           :items="data"
           :search="filter"
-          :dark="true"
           :item-class="tableItemClass"
-          :sort-by="['kills']"
-          :sort-desc="[true]"
-          :single-expand="true"
           :expanded.sync="expanded"
-          :items-per-page="itemsPerPage"
-          :page.sync="page"
-          :must-sort="true"
-          @page-count="pageCount = $event"
+          v-bind="leaderboardConfig"
         >
           <template #no-results>
             <div class="text-2xl text-white font-bold my-6">No results!</div>
           </template>
           <template #expanded-item="{ headers }">
-            <td :colspan="headers.length">More info about Foo</td>
+            <td :colspan="headers.length">
+              Detailed player specific metrics coming soon! This will include
+              per-player weapons metrics and vehicle usage.
+            </td>
           </template>
         </v-data-table>
-        <div class="text-center pt-2">
-          <v-pagination
-            v-model="page"
-            :length="pageCount"
-            :total-visible="7"
-            :dark="true"
-          ></v-pagination>
-          <v-text-field
-            :value="itemsPerPage"
-            :dark="true"
-            label="Items per page"
-            type="number"
-            min="1"
-            max="50"
-            @input="itemsPerPage = parseInt($event, 10)"
-          ></v-text-field>
-        </div>
       </div>
     </div>
   </div>
@@ -91,6 +82,7 @@ import {
 } from '@/constants/FactionBgClass'
 import { InstanceTerritoryControlResponseInterface } from '~/interfaces/InstanceTerritoryControlResponseInterface'
 import { AlertCharacterTableDataInterface } from '~/interfaces/AlertCharacterTableDataInterface'
+import { AlertLeaderboardConfig } from '~/constants/AlertLeaderboardConfig'
 
 export default Vue.extend({
   name: 'AlertCharacterMetrics',
@@ -103,6 +95,16 @@ export default Vue.extend({
   },
   data() {
     return {
+      error: null,
+      loaded: false,
+      updateRate: 10000,
+      updateCountdown: 10,
+      updateCountdownInterval: undefined as undefined | number,
+      interval: undefined as undefined | number,
+      data: {} as AlertCharacterTableDataInterface[],
+      outfitParticipants: {} as { [k: string]: string[] },
+      filter: '',
+      leaderboardConfig: AlertLeaderboardConfig,
       expanded: [],
       headers: [
         {
@@ -159,15 +161,6 @@ export default Vue.extend({
         },
         { text: '', value: 'data-table-expand' },
       ],
-      error: null,
-      loaded: false,
-      interval: undefined as undefined | number,
-      data: {} as AlertCharacterTableDataInterface[],
-      outfitParticipants: {} as { [k: string]: string[] },
-      filter: '',
-      page: 1,
-      pageCount: 0,
-      itemsPerPage: 20,
     }
   },
   computed: {
@@ -193,44 +186,68 @@ export default Vue.extend({
 
       return counts
     },
+    updateCountdownPercent(): number {
+      return (100 / (this.updateRate / 1000)) * this.updateCountdown
+    },
+  },
+  watch: {
+    'alert.state'() {
+      if (this.alert.state === Ps2alertsEventState.ENDED) {
+        this.clearTimers()
+        this.pull()
+      }
+    },
   },
   beforeDestroy() {
-    clearInterval(this.interval)
+    this.reset()
   },
   created() {
-    clearInterval(this.interval)
+    this.reset()
     this.init()
   },
   methods: {
+    reset() {
+      this.loaded = false
+      this.clearTimers()
+    },
+    clearTimers() {
+      clearInterval(this.interval)
+      clearInterval(this.updateCountdownInterval)
+    },
     init(): void {
       this.pull()
-      this.interval = window.setInterval(() => {
-        this.pull()
-      }, 10000)
+
+      if (this.alert.state === Ps2alertsEventState.STARTED) {
+        this.updateCountdownInterval = window.setInterval(() => {
+          return this.updateCountdown >= 0 ? this.updateCountdown-- : 0
+        }, 1000)
+
+        this.interval = window.setInterval(() => {
+          this.pull()
+        }, this.updateRate)
+      }
     },
     async pull(): Promise<void> {
-      console.log('AlertCharacterMetrics.pull', this.alert.instanceId)
       if (this.loaded && this.alert.state === Ps2alertsEventState.ENDED) {
         return
       }
 
+      console.log('AlertCharacterMetrics.pull', this.alert.instanceId)
+
       await new ApiRequest()
         .get<InstanceCharacterAggregateResponseInterface[]>(
           Endpoints.AGGREGATES_INSTANCE_CHARACTER.replace(
             '{instance}',
             this.alert.instanceId
               ? this.alert.instanceId.toString()
               : 'whatever'
-          ),
-          {
-            sortBy: 'kills',
-            order: 'desc',
-          }
+          )
         )
         .then((result) => {
           this.data = this.transformData(result)
 
           this.loaded = true
+          this.updateCountdown = this.updateRate / 1000
           this.$emit('players-loaded')
         })
         .catch((e) => {

diff --git a/components/alert/AlertDetails.vue b/components/alert/AlertDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-12 lg:col-span-6 card">
+  <div class="col-span-12 lg:col-span-6 ss:col-span-4 card">
     <div class="tag section">General Info</div>
     <div class="rounded">
       <table class="min-w-full divide-y divide-gray-500">