Merge pull request #375 from penguin-statistics/dev

Release v3.3.1
penguin-statistics · Jul 25, 2020 · d2cf53d · d2cf53d
2 parents 5ac87d2 + 9f2c2c6
commit d2cf53d
Show file tree

Hide file tree

Showing 40 changed files with 725 additions and 211 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "private": true,
   "author": "Penguin Statistics Contributors <contributors@penguin-stats.io> (https://github.com/orgs/penguin-statistics/people)",
   "scripts": {
@@ -22,6 +22,7 @@
     "@sentry/integrations": "^5.6.1",
     "animejs": "^3.1.0",
     "clipboard-polyfill": "^2.8.6",
+    "comma-number": "^2.0.1",
     "core-js": "^3.6.5",
     "dayjs": "1.8.27",
     "extract-domain": "^2.2.1",

diff --git a/src/components/advancedQuery/selectors/QuerySelectorItem.vue b/src/components/advancedQuery/selectors/QuerySelectorItem.vue
@@ -3,17 +3,18 @@
     v-model="dialog"
     max-width="590px"
   >
-    <template v-slot:activator="{ on }">
+    <template v-slot:activator="{ on, attrs }">
       <div class="d-flex flex-row align-center justify-center mt-1">
         <v-tooltip
           content-class="transparent"
           right
           nudge-right="-16"
           transition="slide-x-transition"
         >
-          <template v-slot:activator="{ on }">
+          <template v-slot:activator="{ on, attrs }">
             <v-icon
               class="mr-2"
+              v-bind="attrs"
               v-on="on"
             >
               mdi-treasure-chest
@@ -35,6 +36,7 @@
           class="flex-grow-1"
           large
           :disabled="disabled"
+          v-bind="attrs"
           v-on="on"
         >
           <template v-if="value.length">

diff --git a/src/components/advancedQuery/selectors/QuerySelectorStage.vue b/src/components/advancedQuery/selectors/QuerySelectorStage.vue
@@ -3,19 +3,20 @@
     v-model="dialog"
     max-width="650px"
   >
-    <template v-slot:activator="{ on }">
+    <template v-slot:activator="{ on, attrs }">
       <div class="d-flex flex-row align-center justify-center mt-3">
         <v-tooltip
           content-class="transparent"
           right
           nudge-right="-16"
           transition="slide-x-transition"
         >
-          <template v-slot:activator="{ on }">
+          <template v-slot:activator="{ on, attrs }">
             <v-expand-x-transition>
               <v-icon
                 v-if="value"
                 class="mr-2"
+                v-bind="attrs"
                 v-on="on"
               >
                 mdi-cube
@@ -38,6 +39,7 @@
           class="flex-grow-1"
           large
           :disabled="disabled"
+          v-bind="attrs"
           v-on="on"
         >
           <span

diff --git a/src/components/advancedQuery/selectors/QuerySelectorTimeRange.vue b/src/components/advancedQuery/selectors/QuerySelectorTimeRange.vue
@@ -8,7 +8,7 @@
     max-width="700px"
     max-height="600px"
   >
-    <template v-slot:activator="{ on }">
+    <template v-slot:activator="{ on, attrs }">
       <v-text-field
         :value="formattedDate"
         :label="`${$t('query.selector.timeRange.title')} (*${$t('validator.required')})`"
@@ -17,6 +17,7 @@
         filled
         hide-details
         class="mb-1"
+        v-bind="attrs"
         v-on="on"
       />
     </template>

diff --git a/src/components/drawer/SettingsDialog.vue b/src/components/drawer/SettingsDialog.vue
@@ -3,12 +3,13 @@
     v-model="active"
     max-width="400px"
   >
-    <template v-slot:activator="{ on }">
+    <template v-slot:activator="{ on, attrs }">
       <v-btn
         ripple
         text
         outlined
         class="flex-grow-1"
+        v-bind="attrs"
         v-on="on"
       >
         <v-icon left>

diff --git a/src/components/global/Item.vue b/src/components/global/Item.vue
@@ -7,8 +7,11 @@
 
     bottom
   >
-    <template v-slot:activator="{ on }">
-      <span v-on="on">
+    <template v-slot:activator="{ on, attrs }">
+      <span
+        v-bind="attrs"
+        v-on="on"
+      >
         <ItemIcon
           :item="item"
           :ratio="ratio"

diff --git a/src/components/global/TooltipBtn.vue b/src/components/global/TooltipBtn.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-tooltip
+    bottom
+    :open-delay="0"
+    transition="slide-y-transition"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        v-bind="{...$attrs, ...attrs}"
+        :style="{'top': top}"
+        v-on="{...$listeners, ...on}"
+      >
+        <slot />
+      </v-btn>
+    </template>
+    <span>
+      {{ tip }}
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+  export default {
+    name: "TooltipBtn",
+    props: {
+      tip: {
+        type: String,
+        default () {
+          return ""
+        }
+      },
+      top: {
+        type: String,
+        default () {
+          return ""
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/planner/PlannerResult.vue b/src/components/planner/PlannerResult.vue
@@ -38,7 +38,7 @@
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="monospace">
-                {{ parseTimes(result.gold.toLocaleString()) }}
+                {{ parseTimes(result.gold) || thousandSeparator }}
               </v-list-item-title>
               <v-list-item-subtitle>
                 {{ $t('planner.calculation.lmb') }}
@@ -332,6 +332,7 @@
 
 <script>
   import Item from "@/components/global/Item";
+  import formatter from "@/utils/formatter";
   export default {
     name: "PlannerResult",
     components: {Item},
@@ -378,10 +379,10 @@
         })
       },
       parseTimes (num) {
-        return Math.ceil(parseFloat(num)).toLocaleString()
+        return formatter.thousandSeparator(Math.ceil(parseFloat(num)))
       },
       parseAmount (num) {
-        return parseFloat(num).toLocaleString()
+        return formatter.thousandSeparator(parseFloat(num))
       }
     },
   }

diff --git a/src/components/stats/Charts.vue b/src/components/stats/Charts.vue
@@ -4,10 +4,11 @@
     transition="scale-transition"
     max-width="850px"
   >
-    <template v-slot:activator="{ on }">
+    <template v-slot:activator="{ on, attrs }">
       <slot />
       <div
         class="sparkline cursor-pointer"
+        v-bind="attrs"
         v-on="on"
       >
         <v-sparkline

diff --git a/src/components/stats/SiteStatsOverview.vue b/src/components/stats/SiteStatsOverview.vue
@@ -14,7 +14,7 @@
         ref="totalReportsNum"
         class="monospace"
       >
-        {{ totalReports === null ? "---" : totalReports.toLocaleString() }}
+        {{ totalReports === null ? "---" : totalReports | thousandSeparator }}
       </span>
     </v-card-title>
     <v-card-subtitle class="d-flex">
@@ -36,6 +36,7 @@
   import BackdropCard from "@/components/global/BackdropCard";
   import statsManager from "@/models/managers/stats";
   import anime from "animejs";
+  import formatter from "@/utils/formatter";
   export default {
     name: "SiteStatsOverview",
     components: {BackdropCard},
@@ -68,7 +69,7 @@
           easing: 'easeOutQuint',
           delay: 1500,
           complete: function () {
-            self.$refs["totalReportsNum"].innerText = newValue.toLocaleString();
+            self.$refs["totalReportsNum"].innerText = formatter.thousandSeparator(newValue)
           }
         })
       }

diff --git a/src/components/stats/SiteStatsStage.vue b/src/components/stats/SiteStatsStage.vue
@@ -48,7 +48,16 @@
         </v-row>
       </template>
       <template v-slot:item.stage.apCost="{ item }">
-        <span :class="`yellow--text ${dark ? '' : 'text--darken-3'}`">
+        <span
+          v-if="invalidApCost(item.stage.apCost)"
+          class="grey--text"
+        >
+          --
+        </span>
+        <span
+          v-else
+          :class="dark ? 'orange--text text--lighten-1' : 'deep-orange--text text--darken-3 font-weight-bold'"
+        >
           {{ item.stage.apCost }}
         </span>
       </template>
@@ -133,6 +142,10 @@
             stageId
           }
         });
+      },
+
+      invalidApCost (apCost) {
+        return apCost === 99 || apCost === null
       }
     },
   }

diff --git a/src/components/toolbar/AccountManager.vue b/src/components/toolbar/AccountManager.vue
@@ -89,7 +89,6 @@
         </v-card-title>
         <v-card-text>
           <v-alert
-            prominent
             type="info"
             border="left"
             class="mt-2 mb-6"
@@ -101,12 +100,38 @@
             :label="`${$t('userId')} *`"
             :error-messages="error"
             required
+            clearable
             outlined
             :hide-details="error === ''"
 
             @keyup.enter.native="login"
             @input="emitError"
-          />
+          >
+            <template v-slot:append-outer>
+              <v-dialog
+                v-model="historyDialog"
+                max-width="450px"
+              >
+                <template v-slot:activator="{ on, attrs }">
+                  <TooltipBtn
+                    v-bind="attrs"
+                    icon
+                    top="-8px"
+                    :tip="$t('auth.forgot.activator')"
+                    v-on="on"
+                  >
+                    <v-icon>
+                      mdi-help-circle
+                    </v-icon>
+                  </TooltipBtn>
+                </template>
+                <ForgotAccount
+                  v-if="historyDialog"
+                  @loggedIn="loggedIn"
+                />
+              </v-dialog>
+            </template>
+          </v-text-field>
         </v-card-text>
         <v-card-actions class="mx-4 mb-2">
           <v-btn
@@ -192,10 +217,13 @@
   import Cookies from 'js-cookie'
   import Console from "@/utils/Console";
   import Subheader from "@/components/global/Subheader";
+  import ForgotAccount from "@/components/toolbar/ForgotAccount";
+  import TooltipBtn from "@/components/global/TooltipBtn";
+  import config from "@/config"
 
   export default {
     name: "AccountManager",
-    components: {Subheader},
+    components: {TooltipBtn, ForgotAccount, Subheader},
     data() {
       return {
         auth: {
@@ -210,9 +238,7 @@
           color: "",
           text: ""
         },
-        cookies: {
-          key: "userID"
-        },
+        historyDialog: false,
         error: ""
       }
     },
@@ -221,28 +247,30 @@
         return !!("ontouchstart" in window) || window.navigator.maxTouchPoints > 0;
       }
     },
-    mounted () {
-      const userId = Cookies.get(this.cookies.key);
-      if (userId !== this.$store.getters['auth/username']) {
-        this.$store.commit("auth/login", userId);
-      }
+    created () {
+      const userId = Cookies.get(config.authorization.userId.cookieKey);
+      if (userId) this.$store.dispatch("auth/login", {userId, prompted: false});
     },
     methods: {
+      loggedIn() {
+        this.snackbar = {
+          enabled: true,
+          color: "success",
+          text: this.$t('success')
+        };
+        this.auth.dialog = false
+        this.$ga.event('account', 'login', 'login_success', 1);
+        this.$emit('afterLogin');
+      },
       login() {
         this.auth.loading = true;
-        service.post("/users", this.auth.username, {headers: {'Content-Type': 'text/plain'}})
+        const authorizingUserId = this.auth.username
+        service.post("/users", authorizingUserId, {headers: {'Content-Type': 'text/plain'}})
           .then(() => {
-            this.$store.commit("auth/login", this.auth.username);
-            Cookies.set(this.cookies.key, this.auth.username, {expires: 7, path: "/"});
-            this.$ga.event('account', 'login', 'login_success', 1);
-            this.snackbar = {
-              enabled: true,
-              color: "success",
-              text: this.$t('success')
-            };
-            this.$emit('afterLogin');
-            this.auth.dialog = false
-            this.$store.dispatch("data/refreshPersonalMatrix");
+            this.$store.dispatch("auth/login", {
+              userId: authorizingUserId
+            });
+            this.loggedIn()
           })
           .catch((err) => {
             Console.info("AccountManager", "auth failed", err)
@@ -257,8 +285,8 @@
           })
       },
       logout() {
-        Cookies.remove(this.cookies.key);
-        this.$store.commit("auth/logout");
+        Cookies.remove(config.authorization.userId.cookieKey);
+        this.$store.dispatch("auth/logout");
         this.snackbar = {
           enabled: true,
           color: "success",