fix(console-and-getter): isolated Console into a customized function;…

… optimized getter

now using customized Console class in order to block debug and info messages under production
environment. also optimized getter so that it will now only transform the object once it completes
the network request.

fix #179

src/App.vue

@@ -253,6 +253,7 @@
   import RandomBackground from '@/components/RandomBackground'
   import AccountManager from '@/components/AccountManager'
   import NetworkStateIndicator from "@/components/widgets/NetworkStateIndicator";
+  import Console from "@/utils/Console";
 
 export default {
   name: 'App',
@@ -348,7 +349,7 @@ export default {
     },
     logRouteEvent (newValue) {
       if (newValue.name === "StatsByStage_SelectedBoth") {
-        console.log(this.$store.state.dataSource, newValue.params.stageId);
+        Console.log(this.$store.state.dataSource, newValue.params.stageId);
         this.$ga.event('result', 'fetch_' + this.$store.state.dataSource, newValue.params.stageId, 1)
       } else if (newValue.name === "StatsByItem_SelectedItem") {
         this.$ga.event('result', 'fetch_' + this.$store.state.dataSource, newValue.params.itemId, 1)

src/components/AccountManager.vue

@@ -182,6 +182,7 @@
 <script>
   import service from '@/utils/service'
   import Cookies from 'js-cookie'
+  import Console from "@/utils/Console";
 
   export default {
     name: "AccountManager",
@@ -224,7 +225,7 @@
             this.$store.commit("authLogin", this.auth.username);
             Cookies.set(this.cookies.key, this.auth.username, {expires: 7, path: "/"});
             this.$ga.event('account', 'login', 'login_success', 1)
-            console.log(Cookies);
+            Console.log(Cookies);
             this.snackbar = {
               enabled: true,
               color: "success",

src/components/RandomBackground.vue

@@ -70,14 +70,14 @@
           current = Math.floor(Math.random() * 70)
         }
         this.last = current;
-        // console.log(current)
+        // Console.log(current)
         if (this.webpSupport === null) {
           this.webpSupport = await this.testWebp();
         }
         return this.getImageUrl(current)
       },
       async updateBackgroundByRandom(ignoreUrl) {
-        // console.log("check at random", this.isSpecialUrl(this.$route), this.$route)
+        // Console.log("check at random", this.isSpecialUrl(this.$route), this.$route)
         let isSpecial = this.isSpecialUrl(this.$route);
         if (ignoreUrl || isSpecial === false) {
           this.updateBackgroundByUrl(await this.getRandomBackgroundUrl())
@@ -93,7 +93,7 @@
           .then((blob) => {
             let dataUrl = URL.createObjectURL(blob);
             background.style.backgroundImage = `url(${dataUrl})`;
-            // console.log(`created ${dataUrl} | revoking ${this.lastUrl}`)
+            // Console.log(`created ${dataUrl} | revoking ${this.lastUrl}`)
             !this.lastUrl && URL.revokeObjectURL(this.lastUrl);
             this.lastUrl = dataUrl
           })

src/components/widgets/NetworkStateIndicator.vue

@@ -3,6 +3,7 @@
     <v-dialog
       v-model="model"
       width="600"
+      origin="right bottom"
     >
       <v-card>
         <v-card-title
@@ -66,7 +67,7 @@
     </v-dialog>
     <v-fade-transition>
       <span
-        v-if="haveError"
+        v-if="haveError && !model"
         style="cursor: pointer"
         @click="model = true"
       >
@@ -81,6 +82,7 @@
         <v-icon
           v-else
           :size="16"
+          class="mr-1"
         >
           mdi-alert
         </v-icon>

src/locales/en.json

@@ -27,7 +27,7 @@
     "v1": "Visit Old Version"
   },
   "meta": {
-    "details": "View Details",
+    "details": "Details",
     "loading": "Fetching application data...",
     "footer": {
       "copyright": {

src/models/items.js

@@ -4,7 +4,41 @@ import commons from './_common'
 const items = new ObjectManager({
   name: 'items',
   api: '/items',
-  ttl: 1000 * 60 * 60 * 1, // 1 hours
+  transform: [
+    (object) => {
+      const META_MAP = {
+        CARD_EXP: {
+          name: "作战记录",
+          icon: "mdi-card-bulleted",
+          color: "light-blue"
+        },
+        MATERIAL: {
+          name: "材料",
+          icon: "mdi-cube-outline",
+          color: "lime"
+        },
+        FURN: {
+          name: "家具",
+          icon: "mdi-lamp",
+          color: "blue-grey"
+        },
+        ACTIVITY_ITEM: {
+          name: "活动道具",
+          icon: "mdi-treasure-chest",
+          color: "blue"
+        }
+      };
+
+      object.forEach(el => {
+        el.meta = META_MAP[el.itemType]
+      });
+
+      object.sort((a, b) => a.sortId - b.sortId)
+
+      return object
+    },
+  ],
+  ttl: 1000 * 60 * 60, // 1 hours
   ajaxHooks: commons.defaultAjaxHooks
 });
 

src/models/stages.js

@@ -4,6 +4,13 @@ import commons from './_common'
 const stages = new ObjectManager({
   name: 'stages',
   api: '/stages',
+  transform: [
+    (object) => {
+    object.forEach(el => {
+      el.dropsSet = [...el.normalDrop, ...el.extraDrop, ...el.specialDrop]
+    })
+    }
+  ],
   ttl: 1000 * 60 * 60 * 1, // 1 hours
   ajaxHooks: commons.defaultAjaxHooks
 });

src/models/zones.js

@@ -1,9 +1,33 @@
 import ObjectManager from '@/utils/objectManager'
 import commons from './_common'
+import formatter from "@/utils/timeFormatter";
+
+function getIcon (key) {
+  const ICON_MAP = {
+    "MAINLINE": "mdi-checkerboard",
+    "WEEKLY": "mdi-treasure-chest",
+    "ACTIVITY": "mdi-sack"
+  };
+  return ICON_MAP[key]
+}
 
 const zones = new ObjectManager({
   name: 'zones',
   api: '/zones',
+  transform: [
+    (object) => {
+      object.forEach((el) => {
+        el.icon = getIcon(el.type);
+
+        el.isActivity = el.type === "ACTIVITY";
+        if (el.isActivity) {
+          el.activityActiveTime = formatter.dates([el.openTime, el.closeTime]);
+
+          el.isOutdated = formatter.isOutdated(el.closeTime)
+        }
+      });
+    }
+  ],
   ttl: 1000 * 60 * 60 * 1, // 1 hours
   ajaxHooks: commons.defaultAjaxHooks
 });

src/utils/Console.js

@@ -0,0 +1,33 @@
+class Console {
+  static debug (...content) {
+    this._render("debug", ...content)
+  }
+  static info (...content) {
+    this._render("info", ...content)
+  }
+  static warn (...content) {
+    this._render("warn", ...content)
+  }
+  static error (...content) {
+    this._render("error", ...content)
+  }
+  static log (...content) {
+    this._render("log", ...content)
+  }
+  static _render (level, ...content) {
+    const PROD_IGNORE = ["debug", "info"]
+    if (process.env.NODE_ENV === "production" && !(level in PROD_IGNORE)) return false
+    const now = new Date()
+    const date = `${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}.${now.getMilliseconds()}`
+    let prefix = [`(${date})`]
+    if (!(level in console)) prefix.push(`[${level}]`)
+
+    if (console[level]) {
+      console[level](...prefix, ...content)
+    } else {
+      console.log(...prefix, ...content)
+    }
+  }
+}
+
+export default Console

src/utils/getters.js

@@ -13,41 +13,13 @@ Getters.item = {
     //   "itemType": "FURN",
     //   "spriteCoord": [0, 0]
     // };
-    return this.all(false).find(el => {
+    return this.all().find(el => {
       return el.itemId === itemId
     })
   },
-  all(sort = true) {
+  all() {
     if (!store.state.data.items) return [];
-    let r = store.state.data.items;
-    r.forEach(el => {
-      const meta = {
-        CARD_EXP: {
-          name: "作战记录",
-          icon: "mdi-card-bulleted",
-          color: "light-blue"
-        },
-        MATERIAL: {
-          name: "材料",
-          icon: "mdi-cube-outline",
-          color: "lime"
-        },
-        FURN: {
-          name: "家具",
-          icon: "mdi-lamp",
-          color: "blue-grey"
-        },
-        ACTIVITY_ITEM: {
-          name: "活动道具",
-          icon: "mdi-treasure-chest",
-          color: "blue"
-        }
-      };
-
-      el.meta = meta[el.itemType]
-    });
-    if (sort) r.sort((a, b) => a.sortId - b.sortId)
-    return r
+    return store.state.data.items
   }
 }
 Getters.limitations = {
@@ -59,45 +31,19 @@ Getters.limitations = {
 }
 Getters.statistics = {
   byItemId(itemId) {
-    let result = store.state.data[`${store.state.dataSource}Matrix`].matrix.filter(el => {
+    return store.state.data[`${store.state.dataSource}Matrix`].matrix.filter(el => {
       return el.itemId === itemId
-    });
-
-    result.forEach(el => {
-      let stage = Getters.stages.byStageId(el.stageId);
-
-      el.stage = stage;
-      el.zone = Getters.zones.byZoneId(el.stage.zoneId);
-
-      el.percentage = (el.quantity / el.times);
-      el.percentageText = `${(el.percentage * 100).toFixed(2)}%`;
-
-      el.apPPR = (stage.apCost / el.percentage).toFixed(2)
-    });
-    return result
+    })
   },
   byStageId(stageId) {
-    let result = store.state.data[`${store.state.dataSource}Matrix`].matrix.filter(el => {
+    return store.state.data[`${store.state.dataSource}Matrix`].matrix.filter(el => {
       return el.stageId === stageId
-    });
-    let stage = Getters.stages.byStageId(stageId);
-    result.forEach(el => {
-      el.item = Getters.item.byItemId(el.itemId);
-      el.percentage = (el.quantity / el.times);
-      el.percentageText = `${(el.percentage * 100).toFixed(2)}%`;
-
-      el.apPPR = (stage.apCost / el.percentage).toFixed(2)
-    });
-    return result
+    })
   }
 }
 Getters.stages = {
   all() {
-    let all = store.state.data.stages;
-    all.forEach(el => {
-      el.dropsSet = [...el.normalDrop, ...el.extraDrop, ...el.specialDrop]
-    });
-    return all
+    return store.state.data.stages
   },
   byStageId(stageId) {
     return this.all().find(el => {
@@ -111,14 +57,6 @@ Getters.stages = {
   }
 }
 Getters.zones = {
-  getIcon(zoneType) {
-    const ICON_MAP = {
-      "MAINLINE": "mdi-checkerboard",
-      "WEEKLY": "mdi-treasure-chest",
-      "ACTIVITY": "mdi-sack"
-    };
-    return ICON_MAP[zoneType]
-  },
   byZoneId(zoneId) {
     return this.all().find(el => {
       return el.zoneId === zoneId
@@ -132,17 +70,6 @@ Getters.zones = {
   all() {
     let zones = store.state.data.zones;
     if (!zones) return [];
-
-    zones.forEach((object) => {
-      object.icon = this.getIcon(object.type);
-
-      object.isActivity = object.type === "ACTIVITY";
-      if (object.isActivity) {
-        object.activityActiveTime = formatter.dates([object.openTime, object.closeTime]);
-
-        object.isOutdated = formatter.isOutdated(object.closeTime)
-      }
-    });
     return zones
   }
 }