Use ESlint to format the Javascript and Vue files. (#365)

* Use ESlint to format the Javascript and Vue files.
Strongly recommended rules applied.

* Add google format package

Author: jetfuel

frontend/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: [
+    'google',
+    'plugin:vue/base',
+    'plugin:vue/essential',
+    'plugin:vue/strongly-recommended',
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    'vue/no-unused-vars': 'warn',
+    'max-len': ["warn", 120],
+  }
+}

frontend/package.json

@@ -49,6 +49,9 @@
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^4.0.0",
     "css-loader": "^0.28.0",
+    "eslint": "^4.19.1",
+    "eslint-config-google": "^0.9.1",
+    "eslint-plugin-vue": "^4.4.0",
     "express": "^4.16.2",
     "extract-text-webpack-plugin": "^2.1.0",
     "fecs": "1.5.2",

frontend/src/App.vue

@@ -1,35 +1,33 @@
 <template>
-    <div id="app">
-        <v-app>
-            <AppMenu :initialRoute="initialRoute">
-            </AppMenu>
-            <router-view></router-view>
-        </v-app>
-    </div>
+  <div id="app">
+    <v-app>
+      <AppMenu :initial-route="initialRoute"/>
+      <router-view/>
+    </v-app>
+  </div>
 </template>
 
 <script>
-import AppMenu from './common/component/AppMenu'
+import AppMenu from './common/component/AppMenu';
 
 export default {
     name: 'App',
     components: {
-		AppMenu
+		AppMenu,
     },
     data() {
         return {
-            initialRoute: "scalars"
-        }
+            initialRoute: 'scalars',
+        };
     },
     created() {
         if (location.hash && location.hash != '#/') {
             this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
-        }
-        else {
+        } else {
             location.hash = '#/scalars';
         }
-    }
-}
+    },
+};
 </script>
 
 <style lang="stylus">

frontend/src/audio/Audio.vue

@@ -1,29 +1,31 @@
 <template>
-    <div class="visual-dl-page-container">
-        <div class="visual-dl-page-left">
-            <ui-audio-container
-                :expand="true"
-                :config="filteredConfig"
-                :runsItems="runsItems"
-                :tagList="filteredTagsList"
-                :title="'Tags matching ' + config.groupNameReg"
-            ></ui-audio-container>
-            <ui-audio-container
-                v-for="item in groupedTags"
-                :key="item.group"
-                :config="filteredConfig"
-                :runsItems="runsItems"
-                :tagList="item.tags"
-                :title="item.group"
-            ></ui-audio-container>
-        </div>
-        <div class="visual-dl-page-right">
-            <div class="visual-dl-page-config-container">
-                <ui-config :runsItems="runsItems" :config="config"
-                ></ui-config>
-            </div>
-        </div>
+  <div class="visual-dl-page-container">
+    <div class="visual-dl-page-left">
+      <ui-audio-container
+        :expand="true"
+        :config="filteredConfig"
+        :runs-items="runsItems"
+        :tag-list="filteredTagsList"
+        :title="'Tags matching ' + config.groupNameReg"
+      />
+      <ui-audio-container
+        v-for="item in groupedTags"
+        :key="item.group"
+        :config="filteredConfig"
+        :runs-items="runsItems"
+        :tag-list="item.tags"
+        :title="item.group"
+      />
     </div>
+    <div class="visual-dl-page-right">
+      <div class="visual-dl-page-config-container">
+        <ui-config
+          :runs-items="runsItems"
+          :config="config"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -32,93 +34,92 @@ import {getPluginAudioTags, getRuns} from '../service';
 import {debounce, flatten, uniq, isArray} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
-import Config from './ui/Config'
+import Config from './ui/Config';
 import AudioPanelContainer from './ui/AudioPanelContainer';
 
 export default {
     name: 'Images',
     components: {
         'ui-config': Config,
-        'ui-audio-container': AudioPanelContainer
+        'ui-audio-container': AudioPanelContainer,
     },
-    data () {
+    data() {
         return {
             runsArray: [],
             tags: [],
             config: {
                 groupNameReg: '.*',
                 isActualImageSize: false,
                 runs: [],
-                running: true
+                running: true,
             },
-            filteredTagsList: []
-        }
+            filteredTagsList: [],
+        };
     },
     computed: {
         runsItems() {
             let runsArray = this.runsArray || [];
-            return runsArray.map(item => {
+            return runsArray.map((item) => {
                 return {
                     name: item,
-                    value: item
+                    value: item,
                 };
             });
         },
         tagsList() {
             let tags = this.tags;
 
             let runs = Object.keys(tags);
-            let tagsArray = runs.map(run => Object.keys(tags[run]));
+            let tagsArray = runs.map((run) => Object.keys(tags[run]));
             let allUniqTags = uniq(flatten(tagsArray));
 
             // get the data for every chart
-            return allUniqTags.map(tag => {
-                let tagList = runs.map(run => {
+            return allUniqTags.map((tag) => {
+                let tagList = runs.map((run) => {
                     return {
                         run,
-                        tag: tags[run][tag]
+                        tag: tags[run][tag],
                     };
-                }).filter(item => item.tag !== undefined);
+                }).filter((item) => item.tag !== undefined);
                 return {
                     tagList,
                     tag,
-                    group: tag.split('/')[0]
+                    group: tag.split('/')[0],
                 };
             });
         },
         groupedTags() {
             let tagsList = this.tagsList || [];
             // put data in group
             let groupData = {};
-            tagsList.forEach(item => {
+            tagsList.forEach((item) => {
                 let group = item.group;
                 if (groupData[group] === undefined) {
                     groupData[group] = [];
                     groupData[group].push(item);
-                }
-                else {
+                } else {
                     groupData[group].push(item);
                 }
             });
 
             // to array
             let groups = Object.keys(groupData);
-            return groups.map(group => {
+            return groups.map((group) => {
                 return {
                     group,
-                    tags: groupData[group]
+                    tags: groupData[group],
                 };
             });
         },
         filteredConfig() {
             let config = this.config || {};
             let filteredConfig = {};
-            Object.keys(config).forEach(key => {
+            Object.keys(config).forEach((key) => {
                 let val = config[key];
                 filteredConfig[key] = val;
             });
             return filteredConfig;
-        }
+        },
     },
     created() {
         getPluginAudioTags().then(({errno, data}) => {
@@ -139,25 +140,25 @@ export default {
     },
     watch: {
         'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList()
-        }
+            this.throttledFilterTagsList();
+        },
     },
-    methods:{
+    methods: {
         filterTagsList(groupNameReg) {
             if (!groupNameReg) {
                 this.filteredTagsList = [];
                 return;
             }
             let tagsList = this.tagsList || [];
             let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
+            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
         },
         throttledFilterTagsList: _.debounce(
             function() {
-                this.filterTagsList(this.config.groupNameReg)
+                this.filterTagsList(this.config.groupNameReg);
             }, 300
         ),
-    }
+    },
 };
 
 </script>

frontend/src/audio/index.js

@@ -5,5 +5,5 @@ import Audio from './Audio';
 router.add({
     target: '#content',
     rule: '/audio',
-    Component: Audio
+    Component: Audio,
 });