Merge pull request #244 from penguin-statistics/dev

v1.1.4 Release

.eslintrc

@@ -1,5 +1,8 @@
 {
   "root": true,
+  "globals": {
+    "GIT_COMMIT": true
+  },
   "env": {
     "node": true
   },

README.md

@@ -1,4 +1,4 @@
-<img src="https://penguin-stats.s3.ap-southeast-1.amazonaws.com/logos/penguin_stats_logo.png"
+<img src="https://penguin.upyun.galvincdn.com/logos/penguin_stats_logo.png"
      alt="Penguin Statistics - Logo"
      style="width: 64px" />
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -21,7 +21,7 @@
     "core-js": "^2.6.5",
     "dayjs": "^1.8.21",
     "js-cookie": "^2.2.1",
-    "plotly.js": "^1.49.2",
+    "secure-ls": "^1.2.6",
     "vue": "^2.6.10",
     "vue-analytics": "^5.22.1",
     "vue-i18n": "^8.0.0",
@@ -51,7 +51,8 @@
     "vue-cli-plugin-i18n": "^0.6.1",
     "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.4.3"
+    "vuetify-loader": "^1.4.3",
+    "webpack": "^4.42.0"
   },
   "postcss": {
     "plugins": {

public/index.html

@@ -14,7 +14,7 @@
   <meta name="msapplication-TileColor" content="#905f6b">
   <meta name="theme-color" content="#121212">
   <title>企鹅物流数据统计</title>
-  <link rel="preconnect" href="https://penguin-stats.s3.ap-southeast-1.amazonaws.com">
+  <link rel="preconnect" href="https://penguin.upyun.galvincdn.com">
   <style>#app, body, html {
     height: 100vh;
     margin: 0;
@@ -41,10 +41,10 @@
     display: block;
     position: relative;
     left: 50%;
-    top: 25%;
-    height: 152px;
-    width: 152px;
-    margin: -76px 0 0 -76px
+    top: 20%;
+    height: 100px;
+    width: 100px;
+    margin: -50px 0 0 -50px
   }
 
   .sk-chase {
@@ -353,7 +353,7 @@
     },
     data: {
       "en": {
-        "load_title--text": "Loading...",
+        "load_title--text": "Loading",
         "load_caption--text": "Initialization may take some time",
         "load_copyright--text": "Penguin Statistics"
       },
@@ -395,6 +395,7 @@
     console.error(e);
   }
 </script>
+<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="2aa1bf4c-8c34-4028-9e1c-ca1f6c330779";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
 <script>"serviceWorker" in navigator && window.addEventListener("load", function () {
   navigator.serviceWorker.register("/service-worker.js")
 });</script>

src/App.vue

@@ -4,7 +4,7 @@
     <v-navigation-drawer
       v-model="drawer"
       app
-      width="300"
+      width="calc(env(safe-area-inset-left) + 300px)"
     >
       <div 
         :class="{
@@ -13,6 +13,7 @@
           'darken-3': !appDark,
           'drawer-logo--two-line': $t('app.name_line2') !== ''
         }"
+        style="padding-left: calc(max(env(safe-area-inset-left), 32px))"
       >
         <v-img
           :src="require('@/assets/logo.png')"
@@ -33,6 +34,7 @@
       <v-list
         dense
         nav
+        style="padding-left: calc(max(env(safe-area-inset-left), 8px))"
       >
         <template
           v-for="route in routes"
@@ -171,6 +173,7 @@
       dark
       color="blue darken-3"
       style="min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top)"
+      class="x--safe-area toolbar--safe-area"
     >
       <v-app-bar-nav-icon
         @click.stop="drawer = !drawer"
@@ -188,16 +191,7 @@
             <v-img
               :src="randomizedLogo"
               class="randomizedLogo"
-            >
-              <template v-slot:placeholder>
-                <v-img
-                  :src="require('@/assets/logo.png')"
-                  aspect-ratio="1"
-                  height="32px"
-                  contain
-                />
-              </template>
-            </v-img>
+            />
           </v-avatar>
         </transition>
         <span class="title force-lang-font">
@@ -210,12 +204,14 @@
       <AccountManager />
     </v-app-bar>
     <RandomBackground />
-    <v-content style="padding-top: calc(env(safe-area-inset-top) + 56px) !important;">
+    <v-content
+      style="padding-top: calc(env(safe-area-inset-top) + 56px) !important;"
+    >
       <transition
         name="slide-fade"
         mode="out-in"
       >
-        <router-view />
+        <router-view class="x--safe-area" />
       </transition>
       <v-footer
         padless
@@ -305,9 +301,14 @@
             </v-card>
           </v-dialog>
 
-          <v-card-text class="white--text d-inline py-0">
+          <v-card-text class="white--text d-inline">
             <strong>Penguin Statistics</strong> — {{ new Date().getFullYear() }}
           </v-card-text>
+
+          <v-card-text class="white--text d-block pt-2 pb-0">
+            <strong>{{ version.VERSION }}</strong>&nbsp;
+            <span class="overline monospace">{{ version.GIT_COMMIT }}-{{ version.ENV }}</span>
+          </v-card-text>
         </v-card>
       </v-footer>
     </v-content>
@@ -336,7 +337,7 @@ export default {
   data () {
     return {
       routes: [],
-      randomizedLogo: "",
+      randomizedLogo: require("@/assets/logo.png"),
       localizations: [
         {
           id: 'zh',
@@ -376,18 +377,27 @@ export default {
     },
     languageFont () {
       return `lang-${this.$i18n.locale}`
+    },
+    version () {
+      return {
+        VERSION: config.version,
+        GIT_COMMIT: GIT_COMMIT.trim(),
+        ENV: process.env.NODE_ENV === 'production' ? "prod" : "dev"
+      }
     }
   },
   watch: {
     '$route': [
       'randomizeLogo',
-      'logRouteEvent'
+      'logRouteEvent',
+      'crispOpacityChanger'
     ],
     'dark': ['onDarkChange']
   },
   beforeMount() {
     this.routes = this.$router.options.routes.filter(el => !el.meta.hide);
-    this.$store.dispatch("data/fetch", false)
+    this.$store.dispatch("data/fetch", false);
+    this.crispOpacityChanger(this.$route)
   },
   created () {
     // this.randomizeLogo();
@@ -409,7 +419,60 @@ export default {
     if (typeof this.dark === "boolean") {
       this.$vuetify.theme.dark = this.dark
     }
-    Console.debug("(after init) dark status", this.dark, this.$vuetify.theme.dark)
+    Console.debug("(after init) dark status", this.dark, this.$vuetify.theme.dark);
+
+    // report current version
+    this.$ga.event(
+      'runtime',
+      'appInited',
+      'version',
+      config.version
+    );
+
+    // push crisp session
+    window.$crisp.push(["set", "session:data", [[
+      ["loggedIn", this.$store.getters["auth/loggedIn"]],
+      ["username", this.$store.getters["auth/username"]],
+      ["language", this.$store.getters["settings/language"]],
+      ["dark", this.$store.getters["settings/dark"]],
+    ]]])
+
+    window.$crisp.push(["on", "chat:initiated", function () {
+      // resolve safe-area
+      try {
+        document.querySelector("div.crisp-client > div#crisp-chatbox > div > a").style.setProperty("bottom", "calc(max(env(safe-area-inset-bottom), 14px))", "important");
+        document.querySelector("div.crisp-client > div#crisp-chatbox > div > a > span:nth-child(2)").style.setProperty("box-shadow", "0 0 5px rgba(0, 0, 0, .4)", "important")
+      } catch (e) {
+        Console.error("failed to change crisp chat box bottom: ", e)
+      }
+    }])
+    Console.debug("(after init) dark status", this.dark, this.$vuetify.theme.dark);
+
+    // report current version
+    this.$ga.event(
+      'runtime',
+      'appInited',
+      'version',
+      config.version
+    );
+
+    // push crisp session
+    window.$crisp.push(["set", "session:data", [[
+      ["loggedIn", this.$store.getters["auth/loggedIn"]],
+      ["username", this.$store.getters["auth/username"]],
+      ["language", this.$store.getters["settings/language"]],
+      ["dark", this.$store.getters["settings/dark"]],
+    ]]]);
+
+    window.$crisp.push(["on", "chat:initiated", function () {
+      // resolve safe-area
+      try {
+        document.querySelector("div.crisp-client > div#crisp-chatbox > div > a").style.setProperty("bottom", "calc(max(env(safe-area-inset-bottom), 14px))", "important");
+        document.querySelector("div.crisp-client > div#crisp-chatbox > div > a > span:nth-child(2)").style.setProperty("box-shadow", "0 0 5px rgba(0, 0, 0, .4)", "important")
+      } catch (e) {
+        Console.error("failed to change crisp chat box bottom: ", e)
+      }
+    }])
   },
   methods: {
     async refreshData () {
@@ -470,6 +533,17 @@ export default {
       } else if (newValue.name === "StatsByItem_Selected") {
         this.$ga.event('result', 'fetch_' + this.$store.getters['dataSource/source'], newValue.params.itemId, 1)
       }
+    },
+    crispOpacityChanger (newRoute) {
+      document.querySelector("div.crisp-client").style.setProperty("transition", "all 275ms cubic-bezier(0.165, 0.84, 0.44, 1)", "important");
+
+      if (newRoute.name === "home") {
+        document.querySelector("div.crisp-client").style.setProperty("opacity", 1, "important");
+        // document.querySelector("div.crisp-client").style.setProperty("transform", "translateY(0px)", "important")
+      } else {
+        document.querySelector("div.crisp-client").style.setProperty("opacity", 0, "important");
+        // document.querySelector("div.crisp-client").style.setProperty("transform", "translateY(32px)", "important")
+      }
     }
   }
 }
@@ -585,13 +659,13 @@ export default {
     padding-bottom: calc(max(env(safe-area-inset-bottom), 8px)) !important;
   }
 
-  .v-stepper__items, .v-stepper__wrapper {
-    overflow: initial !important;
-  }
+  /*.v-stepper__items, .v-stepper__wrapper {*/
+  /*  overflow: initial !important;*/
+  /*}*/
 
   .lang-ja .force-lang-font, .lang-ja {
     /*font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif !important;*/
-    font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif !important;
+    font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'Meiryo', 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif !important;
   }
   .lang-ko .force-lang-font, .lang-ko {
     font-family: 'Malgun Gothic', Gulim, 'Roboto', Tahoma, Arial, sans-serif !important
@@ -600,4 +674,19 @@ export default {
     font-family: Roboto, sans-serif!important
   }
 
+  .x--safe-area {
+    padding-left: calc(max(env(safe-area-inset-left), 12px)) !important;
+    padding-right: calc(max(env(safe-area-inset-right), 12px)) !important;
+  }
+
+  .toolbar--safe-area {
+    padding-left: calc(max(env(safe-area-inset-left), 16px)) !important;
+    padding-right: calc(max(env(safe-area-inset-right), 16px)) !important;
+  }
+
+  .toolbar--safe-area .v-toolbar__content {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
 </style>

src/assets/preloader_i18n.js

@@ -54,7 +54,7 @@ let _i18n = {
   },
   data: {
     "en": {
-      "load_title--text": "Loading...",
+      "load_title--text": "Loading",
       "load_caption--text": "Initialization may take some time",
       "load_copyright--text": "Penguin Statistics"
     },

src/components/global/GlobalSnackbar.vue

@@ -18,7 +18,7 @@
     },
     "en": {
       "network": {
-        "error": "Network error, please check your network and try again."
+        "error": "Network error, please check your internet connection and try again."
       },
       "clipboard": {
         "success": "Copied to clipboard",

src/components/global/ItemIcon.vue

@@ -90,7 +90,7 @@ export default {
 
 <style scoped>
 .item-icon--sprite {
-  background-image: url("https://penguin-stats.s3.ap-southeast-1.amazonaws.com/item_sprite.png");
+  background-image: url("https://penguin.upyun.galvincdn.com/item_sprite.png");
   background-repeat: no-repeat;
   height: 60px;
   width: 60px;

src/components/global/RandomBackground.vue

@@ -37,9 +37,11 @@
         // [key] is a special "stageId" to display a special "background image"
         // [value] represents a "background image url" on such route
         specialImageMap: {
-          "main_06-14": "https://penguin-stats.s3.ap-southeast-1.amazonaws.com/backgrounds/fn_0_1.png", // 6-16
-          "main_06-15": "https://penguin-stats.s3.ap-southeast-1.amazonaws.com/backgrounds/fn_0_0.png", // 6-17
-        }
+          "main_06-14": "https://penguin.upyun.galvincdn.com/backgrounds/fn_0_1.png", // 6-16
+          "main_06-15": "https://penguin.upyun.galvincdn.com/backgrounds/fn_0_0.png", // 6-17
+        },
+        imageRange: 104 + 1 // if x images use ${x + 1}, because Math.random() generates float in [0, 1) range, so we
+                           // need to +1 in order to get the last image also in range
       }
     },
     watch: {
@@ -58,7 +60,7 @@
     },
     methods: {
       getImageUrl (id) {
-        return `https://penguin-stats.s3.ap-southeast-1.amazonaws.com/backgrounds/${id}.${this.webpSupport ? 'webp' : 'optimized.png'}`
+        return `https://penguin.upyun.galvincdn.com/backgrounds/${id}.${this.webpSupport ? 'webp' : 'optimized.png'}`
       },
       setBlur (flag) {
         Console.info("setting blur to", flag)
@@ -77,7 +79,7 @@
         let current = this.last;
         // avoid change to the same background than the last one
         while (current === this.last) {
-          current = Math.floor(Math.random() * 70)
+          current = Math.floor(Math.random() * this.imageRange)
         }
         this.last = current;
         // Console.log(current)