gametime ui

src/api/PlayerApi.js

@@ -47,7 +47,7 @@ export default class PlayerApi {
             for (const map_name in gametime[srv]) {
                 total_on_server[0] += gametime[srv][map_name];
             }
-            t.push([api.getHumanServerName(srv), total_on_server[0]]);
+            t.push([api.getHumanServerName(srv), total_on_server[0], srv]);
         }
         return t;
     }

src/components/ActionDialogs/BanListDialog.vue

@@ -1,30 +1,39 @@
 <template>
-  <md-dialog :md-active.sync="show" @close="show=false">
-    <div class="md-layout md-alignment-bottom-center">
-      <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
-        <h5 style="padding-left: 5%; padding-right: 5%">Быстрее иди играть чтоб оказаться тут!</h5>
-        <md-table v-model="banlist.mdData" md-card>
-          <md-table-row class="clickable" slot="md-table-row" slot-scope="{ item }" v-on:click="$refs.bld_bvd.showMe(true, item)">
-            <md-table-cell md-label="#Id" md-numeric>{{ item.id }}</md-table-cell>
-            <md-table-cell md-label="Имя игрока">{{ item.player_name }}</md-table-cell>
-            <md-table-cell md-label="Длительность">{{ item.ban_length===0?'навсегда':`${item.ban_length} минут` }}</md-table-cell>
-            <md-table-cell md-label="Дата бана">{{ new Date(item.timestamp).toLocaleString() }}</md-table-cell>
-          </md-table-row>
+  <div>
+    <md-dialog :md-active.sync="show" @close="show=false">
+      <div class="md-layout md-alignment-bottom-center">
+        <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+          <h5 style="padding-left: 5%; padding-right: 5%">Быстрее иди играть чтоб оказаться тут!</h5>
+          <md-table v-model="banlist.mdData" md-card>
+            <md-table-row class="clickable" slot="md-table-row" slot-scope="{ item }" v-on:click="$refs.bld_bvd.showMe(true, item)">
+              <md-table-cell md-label="#Id" md-numeric>{{ item.id }}</md-table-cell>
+              <md-table-cell md-label="Имя игрока">{{ item.player_name }}</md-table-cell>
+              <md-table-cell md-label="Длительность">{{ item.ban_length===0?'навсегда':`${item.ban_length} минут` }}</md-table-cell>
+              <md-table-cell md-label="Дата бана">{{ new Date(item.timestamp).toLocaleString() }}</md-table-cell>
+            </md-table-row>
 
-          <md-table-pagination
-              :md-page-size="rowsPerPage"
-              :md-page-options="[5, 10, 15, 20]"
-              :md-update="update"
-              :md-data.sync="banlist"
-              :md-label="'Банов на страницу'"
-              :md-separator="'из'"
-          style="font-family: tf2build"/>
-        </md-table>
-        <md-button style="float: right" class="btn-colored" v-on:click="showMe(false)">Закрыть</md-button>
+            <md-table-pagination
+                :md-page-size="rowsPerPage"
+                :md-page-options="[5, 10, 15]"
+                :md-update="update"
+                :md-data.sync="banlist"
+                :md-label="'Банов на страницу'"
+                :md-separator="'из'"
+            style="font-family: tf2build"/>
+          </md-table>
+          <md-button style="float: right" class="btn-colored" v-on:click="showMe(false)">Закрыть</md-button>
+        </div>
       </div>
-    </div>
-    <BanViewDialog ref="bld_bvd" />
-  </md-dialog>
+      <BanViewDialog ref="bld_bvd" />
+    </md-dialog>
+    <md-dialog :md-active.sync="loading">
+      <div class="md-layout md-alignment-bottom-center">
+        <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+          <h3 class="pidoras" style="text-align: center; padding: 2% 5%">Загрузка</h3>
+        </div>
+      </div>
+    </md-dialog>
+  </div>
 </template>
 
 <script>
@@ -45,21 +54,19 @@ export default {
       mdData: []
     }
   }),
-  created() {
-    if (this.$API.player.auth("steam"))
-      this.update(1, this.rowsPerPage);
-  },
   methods: {
     heh() {
       document.getElementsByClassName("md-table-pagination-previous")[0].getElementsByTagName("i")[0].textContent = "<";
       document.getElementsByClassName("md-table-pagination-next")[0].getElementsByTagName("i")[0].textContent = ">";
     },
     showMe(b) {
-      this.show = b;
+      //this.clearList();
+      if (b===true) this.update(1, this.rowsPerPage);
+      else this.show = b;
     },
     clearList() {
-      this.banlist.mdCount = null;
-      this.banlist.mdPage = null;
+      this.banlist.mdCount = 1;
+      this.banlist.mdPage = 1;
       this.banlist.mdData = []
     },
     update(page, limit) {
@@ -72,6 +79,7 @@ export default {
               this.banlist.mdCount = response.data['count'];
               this.banlist.mdPage = page;
             } else { console.log("cannot get ban list");}
+            this.show = true;
           }
       ).catch(() => {}).finally(() => this.loading = false)
     }

src/components/ActionDialogs/GametimeDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <md-dialog :md-active.sync="show" @close="show=false">
+      <div class="md-layout md-alignment-bottom-center">
+        <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+          <md-table v-model="gametime.mdData" md-card>
+            <md-table-row slot="md-table-row" slot-scope="{ item }">
+              <md-table-cell md-label="Никнейм">{{ item.player_name }}</md-table-cell>
+              <md-table-cell md-label="Карта">{{ item.map }}</md-table-cell>
+              <md-table-cell md-label="Длительность">{{ $API.UNIX2FACTI_TIME(item.connect_duration) }}</md-table-cell>
+              <md-table-cell md-label="Отключился">{{ new Date(item.utime*1000).toLocaleString() }}</md-table-cell>
+              <md-table-cell md-label="Причина">{{ item.reason.substr(0, 30) }}</md-table-cell>
+            </md-table-row>
+
+            <md-table-pagination
+                :md-page-size="rowsPerPage"
+                :md-page-options="[5, 10, 15]"
+                :md-update="update"
+                :md-data.sync="gametime"
+                :md-label="'Время игры на сервере '+this.srv"
+                :md-separator="'из'"
+                style="font-family: tf2build"/>
+          </md-table>
+          <md-button style="float: right" class="btn-colored" v-on:click="showMe(false)">Закрыть</md-button>
+        </div>
+      </div>
+    </md-dialog>
+    <md-dialog :md-active.sync="loading">
+      <div class="md-layout md-alignment-bottom-center">
+        <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+          <h3 class="pidoras" style="text-align: center; padding: 2% 5%">Загрузка</h3>
+        </div>
+      </div>
+    </md-dialog>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import Random from "@/api/Random";
+
+export default {
+  name: "GametimeDialog",
+  data: () => ({
+    show: false,
+    loading: false,
+    rowsPerPage: 15,
+    gametime: {
+      mdCount: 1,
+      mdPage: 1,
+      mdData: []
+    },
+    steam64: null,
+    srv: null
+  }),
+  methods: {
+    showMe(b, steam64, srv) {
+      //this.clearList();
+      this.srv = srv;
+      this.steam64 = steam64;
+      if (b===true) this.update(1, this.rowsPerPage)
+      else this.show = b;
+    },
+    clearList() {
+      this.gametime.mdCount = 1;
+      this.gametime.mdPage = 1;
+      this.gametime.mdData = []
+    },
+    update(page, limit) {
+      console.log(page, limit, this.rowsPerPage);
+      const offset = Math.abs((page-1) * limit);
+      this.loading = true;
+      axios.get(`api/profile/gametime/web?srv=${this.srv}&steam64=${this.steam64}&limit=${Math.abs(limit)}&offset=${offset}` + Random.getRndWebAppend()).then(
+          (response) => {
+            if (response.status === 200) {
+              this.gametime.mdData = response.data['array'];
+              this.gametime.mdCount = response.data['total'];
+              this.gametime.mdPage = page;
+            } else { console.log("cannot get gametime list");}
+            this.show = true;
+          }
+      ).catch(() => {}).finally(() => this.loading = false)
+    }
+  }
+}
+</script>

src/components/Others/Loader/LoadingDialog.vue

@@ -0,0 +1,15 @@
+<template>
+  <md-dialog>
+    <div class="md-layout md-alignment-bottom-center">
+      <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+        <h3 style="text-align: center">Загрузка</h3>
+      </div>
+    </div>
+  </md-dialog>
+</template>
+
+<script>
+export default {
+  name: "LoadingDialog"
+}
+</script>

src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue

@@ -28,16 +28,17 @@
         <md-menu v-else md-direction="bottom-start" md-size="auto">
           <md-button class="md-raised btn-strange" md-menu-trigger>Статистика по картам</md-button>
           <md-menu-content>
-            <md-menu-item v-for="g in usertime.store" :key="g[0]+'g'">{{g[0]}} - {{timeFormat(g[1])}}</md-menu-item>
+            <md-menu-item v-for="g in usertime.store" :key="g[0]+'g'" v-on:click="$refs.pc_gd.showMe(true, player['steamids']['steam64'], g[2])">{{g[0]}} - {{timeFormat(g[1])}}</md-menu-item>
           </md-menu-content>
         </md-menu>
         <div style="padding: 1% 0%"/>
         <md-menu md-direction="bottom-start" md-size="auto">
           <md-button class="md-raised btn-strange" md-menu-trigger>Последние игры</md-button>
           <md-menu-content>
-            <md-menu-item v-for="l in getLastPlay()" :key="l[0]+'l'">{{l[0]}} - {{l[1]}}</md-menu-item>
+            <md-menu-item v-for="l in getLastPlay()" :key="l[0]+'l'" v-on:click="$refs.pc_gd.showMe(true, player['steamids']['steam64'], l[2])">{{l[0]}} - {{l[1]}}</md-menu-item>
           </md-menu-content>
         </md-menu>
+        <GametimeDialog ref="pc_gd"/>
         <div style="padding: 1% 0%"/>
         <!--DONATES-->
         <md-button v-on:click="loadingDonates()" v-if="donates.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{donates.loading?'Загрузка':'Покупки VIP'}}</md-button>
@@ -95,10 +96,12 @@ import axios from "axios";
 import SnackLoader from "@/components/Others/Loader/SnackLoader.vue";
 import Random from "@/api/Random";
 import BanViewDialog from "@/components/ActionDialogs/BanViewDialog.vue";
+import GametimeDialog from "@/components/ActionDialogs/GametimeDialog.vue";
 
 export default {
   name: "ProfileContainer",
   components: {
+    GametimeDialog,
     BanViewDialog,
     SnackLoader, ProfileViewer_Internal: () => import("@/components/Others/Loader/ProfileViewer.vue"), SteamSvg, DiscordSvg},
   props: {

src/css/baseui.css

@@ -1,3 +1,16 @@
 .backfill {
     background: #3e3e3e;
+}
+
+.pidoras {
+    background:
+            linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
+            0 0/100% 200%;
+    animation: pidoras_key 2s linear infinite;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+@keyframes pidoras_key {
+    to {background-position:0 -200%}
 }