ban list

src/App.vue

@@ -90,6 +90,11 @@ export default {
   src: url('@/assets/fonts/tf2secondary.ttf');
 }
 
+@font-face {
+  font-family: "Material Icons";
+  src: url('@/assets/fonts/tf2secondary.ttf');
+}
+
 /*#app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/components/ActionDialogs/BanListDialog.vue

@@ -0,0 +1,100 @@
+<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>
+
+          <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>
+      </div>
+    </div>
+    <BanViewDialog ref="bld_bvd" />
+  </md-dialog>
+</template>
+
+<script>
+import axios from "axios";
+import Random from "@/api/Random";
+import BanViewDialog from "@/components/ActionDialogs/BanViewDialog.vue";
+
+export default {
+  name: "BanListDialog",
+  components: {BanViewDialog},
+  data: () => ({
+    show: false,
+    loading: false,
+    rowsPerPage: 5,
+    banlist: {
+      mdCount: 1,
+      mdPage: 1,
+      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;
+    },
+    clearList() {
+      this.banlist.mdCount = null;
+      this.banlist.mdPage = null;
+      this.banlist.mdData = []
+    },
+    update(page, limit) {
+      const offset = Math.abs((page-1) * limit);
+      this.loading = true;
+      axios.get(`api/web/banlist?limit=${Math.abs(limit)}&offset=${offset}` + Random.getRndWebAppend()).then(
+          (response) => {
+            if (response.status === 200) {
+              this.banlist.mdData = response.data['bans'];
+              this.banlist.mdCount = response.data['count'];
+              this.banlist.mdPage = page;
+            } else { console.log("cannot get ban list");}
+          }
+      ).catch(() => {}).finally(() => this.loading = false)
+    }
+  }
+}
+</script>
+
+<style>
+.md-table-pagination-next > .md-ripple > .md-button-content > .md-icon {
+  display: none;
+}
+
+.md-table-pagination-next > .md-ripple > .md-button-content::after {
+  content: ">";
+  font-family: tf2build !important;
+}
+
+.md-table-pagination-previous > .md-ripple > .md-button-content > .md-icon {
+  display: none;
+}
+
+.md-table-pagination-previous > .md-ripple > .md-button-content::after {
+  content: "<";
+  font-family: tf2build !important;
+}
+</style>

src/components/TabsMenuElements/RulesView/RulesView.vue

@@ -11,8 +11,8 @@
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
       <div class="md-layout-item md-size-60 md-small-size-100 md-alignment-bottom-center rounded-only backfill">
-        <h4 style="text-align: center">Правила на которые ты забьешь хуй</h4>
-        <h4 style="text-align: center">V V V</h4>
+        <h4 style="text-align: center; margin-bottom: 0%">Правила на которые ты забьешь хуй</h4>
+        <h5 v-on:click="$API.player.auth('steam')?$refs.rv_bld.showMe(true):null" :class="$API.player.auth('steam')?'clickable':''" style="text-align: center; margin: 0% 0%">Более {{$API.stats['ban_count']}} карликов решили на них забить!</h5>
         <hr>
         <div class="md-layout md-alignment-bottom-center">
           <div class="md-layout-item md-size-100 md-alignment-bottom-center">
@@ -23,17 +23,18 @@
         </div>
       </div>
     </div>
-
+    <BanListDialog ref="rv_bld"/>
   </md-tab>
 </template>
 
 <script>
 import CharacterImage from "@/components/Others/Images/CharacterImage.vue";
 import RuleCard from "@/components/TabsMenuElements/RulesView/Components/RuleCard.vue";
+import BanListDialog from "@/components/ActionDialogs/BanListDialog.vue";
 
 export default {
   name: 'RulesView',
-  components: {RuleCard,  CharacterImage},
+  components: {BanListDialog, RuleCard,  CharacterImage},
   data: () => ({
     rules: Object
   }),