rewrite api

src/App.vue

@@ -15,6 +15,8 @@ import MdCard from "vue-material/dist/components/MdCard";
 import MdDialog from "vue-material/dist/components/MdDialog";
 import MdDrawer from "vue-material/dist/components/MdDrawer";
 import MdButton from "vue-material/dist/components/MdButton";
+import MdProgress from "vue-material/dist/components/MdProgress";
+import MdSnackbar from "vue-material/dist/components/MdSnackbar";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
@@ -22,6 +24,8 @@ Vue.use(MdCard);
 Vue.use(MdDialog);
 Vue.use(MdDrawer);
 Vue.use(MdButton);
+Vue.use(MdProgress);
+Vue.use(MdSnackbar);
 
 import TabsMenu from "@/components/TabsMenu.vue";
 export default {
@@ -153,4 +157,20 @@ a {
   font-family: tf2secondary;
   text-transform: none;
 }
+
+.md-progress-bar {
+  background-color: rgba(253,136,70,0.5) !important;
+}
+
+.md-progress-bar-track {
+  color: black;
+}
+
+.md-progress-bar-fill {
+  color: black;
+}
+
+.md-progress-bar-buffer {
+  color: black;
+}
 </style>

src/api/AdminApi.js

@@ -1,23 +1,27 @@
 import axios from "axios";
 
-export default {
+export default class AdminApi {
-    name: 'AdminApi',
+    permition = {
-    data: () => ({
+        ban:false,
-        allowBan: false
+        mute:false,
-    }),
+        kick:false
-    checkAllowBan() {
+    }
-        return axios.options("/api/admin/ban")
+
+    async checkPermition(name) {
+        return axios.options(`/api/admin/${name}`)
                 .then(response => {
-                    return response.status === 200;
+                    if (response.status === 200) this.permition[name] = true;
                 })
                 .catch((err) => {
-                    return err.response.status === 200
+                    if (err.response.status === 200) this.permition[name] = true;
                 });
-    },
+    }
-    async serverPrefetch() {
+
-        this.checkAllowBan().then((r) => {
+    async load() {
-            console.log("[AdminApi] allow ban: " + r);
+        console.log(`[AdminAPI] request permissions`);
-            this.allowBan = true;
+        if (document.cookie.indexOf("steam64=") === -1) return;
-        })
+        await this.checkPermition('ban')
+        await this.checkPermition('mute')
+        await this.checkPermition('kick')
     }
 }

src/api/GlobalApi.js

@@ -0,0 +1,80 @@
+import axios from "axios";
+import AdminApi from "@/api/AdminApi";
+
+export default class GlobalApi {
+    stats = {
+        'statistic':null,
+        'servers': null,
+        'uniq': null
+    }
+    loading = false;
+
+    admin = new AdminApi()
+
+    constructor() {
+    }
+
+    async fillThis(value) {
+        console.log(`[API] load: ${value}`);
+        return await axios.get(`/api/stats?filter=${value}`)
+            .then(response => response.data)
+            .then(response => {
+                this.stats[value] = response[value];
+            })
+            .catch(err => {
+                console.log(`[API] cannot request ${value}, err: ${err}`);
+            })
+    }
+
+    async fillServers() {
+        console.log(`[API] load: servers`);
+        return axios.get("/api/stats?filter=servers")
+            .then(response => response.data['servers'])
+            .then(response => {
+                let srvs = {
+                    'w':[],
+                    "e":[],
+                    'n':[]
+                };
+                for (let srv in response) {
+                    if (response[srv]['status'] == false) srvs.n.push(response[srv]);
+                    else if (response[srv]['player_count'] > 0) srvs.w.push(response[srv]);
+                    else srvs.e.push(response[srv]);
+                }
+                this.stats['servers'] = srvs;
+            })
+            .catch(err => {
+                console.log(`[API] cannot request servers, err: ${err}`);
+            });
+    }
+
+    async load() {
+        this.loading = true;
+        await this.fillThis('statistic');
+        await this.fillThis('uniq');
+        await this.fillServers();
+        await this.admin.load();
+        this.loading = false;
+    }
+
+    getRandomBackground() {
+        const backgrounds = [
+            require('../assets/images/backgrounds/1.png'),
+            require('../assets/images/backgrounds/2.png'),
+            require('../assets/images/backgrounds/3.png'),
+            require('../assets/images/backgrounds/4.png')
+        ];
+        return backgrounds[Math.floor(Math.random() * backgrounds.length)];
+    }
+
+    getRules(){
+        return [
+            [{"name":"Читы", "about":"Бан навсегда сука", "image": require('@/assets/images/rules/cheats.jpg')},
+                {"name":"Реклама серверов", "about":"Кроме мге, бан навсегда сука", "image": require('@/assets/images/rules/ads.jpg')},
+                {"name":"Багоюз", "about":"Пиздец тебе, бан навсегда", "image": require('@/assets/images/rules/bug_use.jpg')}],
+            [{"name":"Абуз команды !mir", "about":"Блокировка дверей, открытие спавна и т.д", "image":require('@/assets/images/rules/abuse.jpg')},
+                {"name":"Абуз випки на сервере", "about":"Модеры сам решат как и за что", "image":require('@/assets/images/rules/abuse_vip.jpg')},
+                {"name":"Делай короче чё хочешь", "about":":troll_face:", "image":require('@/assets/images/rules/make_everyone.jpg')}]
+        ];
+    }
+}

src/components/Others/BackgroundImage.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import PublicMethods from "@/components/PublicMethods";
 export default {
   name: 'BackgroundImage',
   data: () => ({
@@ -21,7 +20,7 @@ export default {
         "z-index": -1,
         "width":"100%",
         "height":"100%",
-        "background-image": `url('${PublicMethods.getBackground()}')`,
+        "background-image": `url('${this.$API.getRandomBackground()}')`,
           "-webkit-filter": `blur(${this.blur_px}px)`,
         "-moz-filter": `blur(${this.blur_px}px)`,
         "-o-filter": `blur(${this.blur_px}px)`,

src/components/Others/SnackLoader.vue

@@ -0,0 +1,33 @@
+<template>
+  <md-snackbar :md-position="position" :md-active.sync="loading" md-persistent>
+    <p>{{s_text}}</p>
+  </md-snackbar>
+</template>
+
+<script>
+export default {
+  name: 'SnackLoader',
+  data: () => ({
+    loading: false
+  }),
+  props: {
+    position: {
+      type: String,
+      default: 'left'
+    },
+    s_text: {
+      type: String
+    }
+  },
+  methods: {
+    setLoading(b) {
+      this.loading = b;
+    }}
+}
+</script>
+
+<style>
+.md-snackbar {
+  background-color: #131213;
+}
+</style>

src/components/PublicMethods.js

@@ -1,81 +0,0 @@
-import axios from "axios";
-
-export default {
-    name: "PublicMethods",
-    methods: {},
-    getBackground(){
-        const backgrounds = [
-            require('../assets/images/backgrounds/1.png'),
-            require('../assets/images/backgrounds/2.png'),
-            require('../assets/images/backgrounds/3.png'),
-            require('../assets/images/backgrounds/4.png')
-        ];
-        return backgrounds[Math.floor(Math.random()*backgrounds.length)];
-    },
-    getApi(){
-        console.log("[PublicMethods] request api/stats");
-        return axios.get("/api/stats")
-            .then(response => response.data)
-            .then(response => {
-                console.log("[PublicMethods] success get api/stats");
-                console.log(response);
-                return response;
-            })
-            .catch(err => {
-                console.log(`[PublicMethods] cannot request api/stats, err: ${err}`);
-            })
-    },
-    getStatistics(){
-        console.log("[PublicMethods] request api/stats/statistics");
-        return axios.get("/api/stats?filter=statistic")
-            .then(response => response.data)
-            .then(response => {
-                return response;
-            })
-            .catch(err => {
-                console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
-            })
-    },
-    getServers(){
-        console.log("[PublicMethods] request api/stats/servers");
-        return axios.get("/api/stats?filter=servers")
-            .then(response => response.data['servers'])
-            .then(response => {
-                let srvs = {
-                    'w':[],
-                    "e":[],
-                    'n':[]
-                };
-                for (let srv in response) {
-                    if (response[srv]['status'] == false) srvs.n.push(response[srv]);
-                    else if (response[srv]['player_count'] > 0) srvs.w.push(response[srv]);
-                    else srvs.e.push(response[srv]);
-                }
-                return srvs;
-            })
-            .catch(err => {
-                console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
-            });
-    },
-    getUniq(){
-        console.log("[PublicMethods] request api/stats/uniq");
-        return axios.get("/api/stats?filter=uniq")
-            .then(response => response.data)
-            .then(response => {
-                return response;
-            })
-            .catch(err => {
-                console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
-            })
-    },
-    getRules(){
-        return [
-        [{"name":"Читы", "about":"Бан навсегда сука", "image": require('@/assets/images/rules/cheats.jpg')},
-        {"name":"Реклама серверов", "about":"Кроме мге, бан навсегда сука", "image": require('@/assets/images/rules/ads.jpg')},
-        {"name":"Багоюз", "about":"Пиздец тебе, бан навсегда", "image": require('@/assets/images/rules/bug_use.jpg')}],
-        [{"name":"Абуз команды !mir", "about":"Блокировка дверей, открытие спавна и т.д", "image":require('@/assets/images/rules/abuse.jpg')},
-        {"name":"Абуз випки на сервере", "about":"Модеры сам решат как и за что", "image":require('@/assets/images/rules/abuse_vip.jpg')},
-        {"name":"Делай короче чё хочешь", "about":":troll_face:", "image":require('@/assets/images/rules/make_everyone.jpg')}]
-        ];
-    }
-}

src/components/TabsMenu.vue

@@ -31,7 +31,10 @@ export default {
     components: {BackendStatus, MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView, BackgroundImage},
     data: () => ({
       current_tab: ""
-    })
+    }),
+  beforeCreate() {
+      console.log("wait data to render");
+  }
 }
 </script>
 

src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue

@@ -15,40 +15,27 @@
     </div>
     <div class="md-layout md-alignment-center-center" style="margin-top: -1%">
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{player_now}}</h4>
+        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_now}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size}`"/>
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{player_max}}</h4>
+        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_max}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size}`"/>
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{working_servers}}/{{total_servers}}</h4>
+        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.working_servers}}/{{this.$API.stats.statistic.total_servers}}</h4>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import PublicMethods from "@/components/PublicMethods";
 
 export default {
   name: 'CurrentPlayers',
   data: () => ({
-    player_now: -1,
-    player_max: -1,
-    working_servers: -1,
-    total_servers: -1,
     puff_size: 10,
     space_size: 5
-  }),
+  })
-  beforeCreate() {
-    PublicMethods.getStatistics().then(response => {
-      this.player_now = response['statistic'].player_now;
-      this.player_max = response['statistic'].player_max;
-      this.working_servers = response['statistic'].working_servers;
-      this.total_servers = response['statistic'].total_servers;
-    });
-  }
 }
 </script>

src/components/TabsMenuElements/RulesView/RulesView.vue

@@ -4,11 +4,11 @@
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
     </div>
     <div class="md-layout md-alignment-bottom-center">
-      <div class="md-layout-item md-size-40 md-alignment-bottom-center rounded-and-colored-without-bottom">
+      <div class="md-layout-item md-size-40 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
-        <h3 style="text-align: center; margin: 2% 0%">Правила (для сам маленьких)</h3>
+        <h3 style="text-align: center; margin: 2% 0%;">Правила (для сам маленьких)</h3>
       </div>
     </div>
-    <div class="md-layout md-alignment-bottom-center" style="padding-top: 1%">
+    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
       <div class="md-layout-item md-size-60 md-alignment-bottom-center rounded-only">
         <h4 style="text-align: center">Правила на которые ты забьешь хуй</h4>
         <h4 style="text-align: center">V V V</h4>
@@ -34,7 +34,6 @@
 <script>
 import CharacterImage from "@/components/Others/CharacterImage.vue";
 import RuleCard from "@/components/TabsMenuElements/RulesView/Components/RuleCard.vue";
-import PublicMethods from "@/components/PublicMethods";
 
 export default {
   name: 'RulesView',
@@ -43,7 +42,7 @@ export default {
     rules: Object
   }),
   beforeMount() {
-    this.rules = PublicMethods.getRules();
+    this.rules = this.$API.getRules();
   }
 }
 </script>

src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue

@@ -31,7 +31,7 @@
           <div style="justify-content: center; display: flex; margin-top: 0%">
             <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846">РЕПОРТ</md-button>
             <md-button v-if="showPlayerDialog && allowKick" class="md-raised" style="color: #131213; font-family: tf2build; background: darkcyan">кикнуть</md-button>
-            <md-button v-if="showPlayerDialog && allowBan" class="md-raised" style="color: #131213; font-family: tf2build; background: brown">забанить</md-button>
+            <md-button v-if="showPlayerDialog && this.$API.admin.permition.ban" class="md-raised" style="color: #131213; font-family: tf2build; background: brown">забанить</md-button>
             <md-button v-if="showPlayerDialog && allowMute" class="md-raised" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>
           </div>
         </div>
@@ -40,7 +40,6 @@
 </template>
 
 <script>
-import AdminApi from "@/api/AdminApi";
 export default {
   name: 'PlayerExtendedInfo',
   props: {
@@ -48,7 +47,6 @@ export default {
   },
   data: () => ({
     showPlayerDialog: false,
-    allowBan: AdminApi.data().allowBan,
     allowMute: false,
     allowKick: false
   }),

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -3,12 +3,12 @@
     <div class="md-layout md-alignment-bottom-center" style="margin-bottom: -1%; margin-top: 1%">
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
     </div>
-    <div class="md-layout md-alignment-bottom-center">
+    <div class="md-layout md-alignment-bottom-center" v-on:click="updateServers()">
-      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored-without-bottom">
+      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
         <h3 style="text-align: center; margin: 4% 0%">Список серверов</h3>
       </div>
     </div>
-    <div class="md-layout md-alignment-bottom-center" style="padding-top: 1%">
+    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
       <div class="md-layout-item md-size-50 md-alignment-bottom-center rounded-only">
         <h4 style="text-align: center">Для подключения к серверу нажми на него</h4>
         <hr>
@@ -20,21 +20,31 @@
         <ServerCard v-for="srv in servers['n']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
       </div>
     </div>
+    <SnackLoader ref="s_loader" s_text="Обновление списка серверов"/>
   </md-tab>
 </template>
 
 <script>
 import CharacterImage from "@/components/Others/CharacterImage.vue";
-import PublicMethods from "@/components/PublicMethods";
 import ServerCard from "@/components/TabsMenuElements/ServersView/Components/ServerCard.vue";
+import SnackLoader from "@/components/Others/SnackLoader.vue";
 export default {
   name: 'ServersView',
-  components: {ServerCard, CharacterImage},
+  components: {SnackLoader, ServerCard, CharacterImage},
   data:() => ({
     servers: {'w':[], 'n':[], 'e':[]}
   }),
-  async created() {
+  beforeMount() {
-    this.servers = await PublicMethods.getServers();
+    this.servers = this.$API.stats.servers;
+  },
+  methods: {
+    updateServers() {
+      this.$refs.s_loader.setLoading(true);
+      this.$API.fillServers().then(() => {
+        this.servers = this.$API.stats.servers;
+        this.$refs.s_loader.setLoading(false);
+      })
+    }
   }
 }
 </script>

src/main.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import GlobalApi from './api/GlobalApi'
 
 Vue.config.productionTip = false
-
+Vue.prototype.$API = new GlobalApi();
-new Vue({
+Vue.prototype.$API.load().then(() => {
-  render: h => h(App),
+  new Vue({
-}).$mount('#app')
+    render: h => h(App),
+  }).$mount('#app')
+});