Add auto-router + mod checking

Author: AlinaNova21

package.json

@@ -1,15 +1,16 @@
 {
   "name": "screepsmod-admin-utils-ui",
   "version": "0.1.1",
-  "main": "index.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "2npm": "publish"
   },
+  "main": "index.js",
   "dependencies": {
-    "express": "^4.14.0"
+    "express": "^4.14.0",
+    "vue-router-layout": "^0.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",
@@ -34,6 +35,8 @@
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
+    "vue-auto-routing": "^0.4.0",
+    "vue-cli-plugin-auto-routing": "^0.3.3",
     "vue-cli-plugin-axios": "^0.0.4",
     "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-router": "^3.1.5",

src/App.vue

@@ -1,48 +1,5 @@
 <template>
-  <v-app app dark>
-    <v-navigation-drawer
-      clipped
-      fixed
-      app
-      :value="drawer"
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar
-      clipped-left
-      fixed
-      app
-    >
-      <v-app-bar-nav-icon @click="drawer = !drawer" />
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-    </v-app-bar>
-    <v-content>
-      <v-container fill-height class="ma-2">
-        <router-view />
-      </v-container>
-    </v-content>
-    <v-footer
-      app
-    >
-      <span>&copy; 2019</span>
-    </v-footer>
-  </v-app>
+  <router-view />
 </template>
 
 <script>

src/layouts/default.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-app app dark>
+   <v-navigation-drawer
+      clipped
+      app
+      v-model="drawer"
+    >
+      <v-list>
+        <v-list-item
+          v-for="(item, i) in activeMenu"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-item-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.title" />
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <v-app-bar
+      clipped-left
+      fixed
+      app
+    >
+      <v-app-bar-nav-icon @click="drawer = !drawer" />
+      <v-toolbar-title v-text="title" />
+      <v-spacer />
+    </v-app-bar>
+    <v-content>
+      <v-container fill-height class="ma-2">
+        <router-view />
+      </v-container>
+    </v-content>
+    <v-footer
+      app
+    >
+      <span>&copy; 2019</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data () {
+    return {
+      mini: true,
+      menu: [
+        {
+          icon: 'mdi-home',
+          title: 'Dashboard',
+          to: '/'
+        },
+        {
+          icon: 'mdi-format-list-numbered',
+          title: 'Leaderboards',
+          to: '/leaderboards'
+        },
+        {
+          icon: 'mdi-textbox-password',
+          title: 'Change Password',
+          to: '/change-password',
+          mod: 'screepsmod-auth'
+        }
+      ],
+      drawer: false,
+      title: 'Screeps Server Dashboard'
+    }
+  },
+  computed: {
+    ...mapState(['mods']),
+    activeMenu () {
+      return this.menu.filter(m => !m.mod || this.mods.includes(m.mod))
+    }
+  }
+}
+</script>

src/views/ChangePassword.vue renamed to src/pages/change-password.vue

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import routes from 'vue-auto-routing'
+import { createRouterLayout } from 'vue-router-layout'
+
+Vue.use(Router)
+
+const RouterLayout = createRouterLayout(layout => {
+  return import('@/layouts/' + layout + '.vue')
+})
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      component: RouterLayout,
+      children: routes
+    }
+  ]
+})

src/views/Home.vue renamed to src/pages/index.vue

@@ -6,14 +6,15 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
-    config: {},
-    mods: [],
+    mods: [
+      'screepsmod-mongo',
+      'screepsmod-auth',
+      'screepsmod-admin-utils',
+      'screepsmod-map-tool'
+    ],
     stats: {}
   },
   mutations: {
-    SET_CONFIG (state, config) {
-      state.config = config
-    },
     SET_MODS (state, mods) {
       state.mods = mods
     },
@@ -26,13 +27,9 @@ const store = new Vuex.Store({
       const { data } = await axios.get('/stats')
       commit('SET_STATS', data)
     },
-    async getConfig ({ commit }) {
-      const { data } = await axios.get('/api/config')
-      commit('SET_CONFIG', data)
-    },
-    async getAvailableMods ({ commit }) {
-      const { data: { objects } } = await axios.get('http://registry.npmjs.org/-/v1/search?text=screepsmod')
-      commit('SET_MODS', objects.map(o => o.package))
+    async fetchMods ({ commit }) {
+      const { data } = await axios.get('/api/mods')
+      commit('SET_MODS', data)
     }
   },
   modules: {
@@ -41,5 +38,7 @@ const store = new Vuex.Store({
 
 export default store
 
+store.dispatch('fetchMods')
+
 setInterval(() => store.dispatch('fetchStats'), 5000)
 setTimeout(() => store.dispatch('fetchStats'), 100)