player info 1

src/App.vue

@@ -14,12 +14,14 @@ import MdIcon from "vue-material/dist/components/MdIcon";
 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";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
 Vue.use(MdCard);
 Vue.use(MdDialog);
 Vue.use(MdDrawer);
+Vue.use(MdButton);
 
 import TabsMenu from "@/components/TabsMenu.vue";
 export default {
@@ -102,6 +104,12 @@ a {
   background: #fd8846;
 }
 
+.rounded-and-colored-circle {
+  border-radius: 30px;
+  border: 2px solid black;
+  background: #fd8846;
+}
+
 .rounded-and-colored-without-bottom {
   border-radius: 10px;
   border-top: 2px solid black;

src/api/AdminApi.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export default {
+    name: 'AdminApi',
+    data: () => ({
+        allowBan: false
+    }),
+    checkAllowBan() {
+        return axios.options("/api/admin/ban")
+                .then(response => {
+                    return response.status === 200;
+                })
+                .catch((err) => {
+                    return err.response.status === 200
+                });
+    },
+    async serverPrefetch() {
+        this.checkAllowBan().then((r) => {
+            console.log("[AdminApi] allow ban: " + r);
+            this.allowBan = true;
+        })
+    }
+}

src/components/TabsMenuElements/ServersView/Components/CustomSvg/DownloadSvg.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg height="60%" version="1.1" viewBox="0 0 124 132" width="512px" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M99.1,113.7c2.6,0,4.7-2.1,4.7-4.7V79.9h11.2v29.8c0,8.4-6.8,15.2-15.2,15.2H18.5c-8.4,0-15.2-6.8-15.2-15.2V79.9h11.2V109  c0,2.6,2.1,4.7,4.7,4.7H99.1L99.1,113.7z M37.1,17.7h43.9V57h16.8L59.1,94.8L20.4,57h16.8V17.7L37.1,17.7z"/><rect class="st2" height="132" id="_x3C_Slice_x3E__100_" width="124"/></svg>
+</template>
+
+<script>
+export default {
+  name: "DownloadSvg"
+}
+</script>

src/components/TabsMenuElements/ServersView/Components/CustomSvg/SteamSvg.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+       width="512px" height="60%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="currentColor" d="M151.961,418.005c13.572,0,26.893-6.567,34.986-18.708c12.867-19.301,7.651-45.377-11.649-58.244l-33.037-22.022
+		c5.654-1.54,11.597-2.38,17.739-2.38c37.196,0,67.348,30.152,67.348,67.351s-30.153,67.349-67.349,67.349
+		c-36.202,0-65.722-28.564-67.274-64.387l35.977,23.984C135.863,415.721,143.955,418.005,151.961,418.005z M426.67,0
+		C473.607,0,512,38.406,512,85.344v341.314C512,473.626,473.607,512,426.67,512H85.344C38.406,512,0,473.625,0,426.659V325.145
+		l60.667,40.444c-5.826,31.587,3.469,65.415,27.899,89.845c39.452,39.452,103.415,39.452,142.868,0
+		c24.234-24.231,33.575-57.715,28.039-89.082L384,254.858v-0.001c23.123-3.319,45.408-13.872,63.197-31.661
+		c43.736-43.738,43.736-114.653,0-158.392c-43.74-43.739-114.654-43.739-158.393,0c-17.789,17.789-28.344,40.073-31.662,63.196l0,0
+		L154.796,283.115c-15.924,0.816-31.689,5.382-45.863,13.695L0,224.189V85.344C0,38.406,38.405,0,85.343,0H426.67z M448,144
+		c0-44.183-35.816-80-80-80s-80,35.817-80,80s35.816,80,80,80S448,188.183,448,144z M320,144c0-26.51,21.49-48,48-48s48,21.49,48,48
+		s-21.49,48-48,48S320,170.51,320,144z"/>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+    <g>
+</g>
+</svg>
+</template>
+
+<script>
+export default {
+  name: "SteamSvg"
+}
+</script>

src/components/TabsMenuElements/ServersView/Components/CustomSvg/TerminalSvg.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512px" height="60%" focusable="false" viewBox="0 0 12 12">
+    <path fill="currentColor" d="M11 1H1c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zM2.5 9.12a.62.62 0 01-.44-.18.628.628 0 010-.88L4.12 6 2.06 3.94c-.24-.24-.24-.64 0-.88s.64-.24.88 0L5.09 5.2c.44.44.44 1.15 0 1.59L2.94 8.94a.62.62 0 01-.44.18zm7-.12h-4c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h4c.28 0 .5.22.5.5s-.22.5-.5.5z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TerminalSvg'
+}
+</script>

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

@@ -0,0 +1,76 @@
+<template>
+    <md-dialog :md-active.sync="showPlayerDialog">
+      <div class="md-layout md-alignment-bottom-center"  style="z-index: 1">
+        <div class="md-layout-item md-size-5"/>
+        <div class="md-layout-item rounded-and-colored md-size-60" style="min-width: 35em">
+          <h3 style="text-align: center; margin: 2% 0%; max-height: 30em" class="h3-player">{{player['name']}}</h3>
+        </div>
+        <div class="md-layout-item rounded-and-colored-circle md-size-5" v-on:click="closePEI()" style="min-width: 3em">
+          <h3 style="text-align: center; margin: 25% 0%">X</h3>
+        </div>
+      </div>
+      <div class="md-layout md-alignment-bottom-center" style="margin-top: -3.5%;">
+        <div class="md-layout-item md-size-65 server-info-rounded" style="min-width: 40em">
+          <div style="margin-top: 5%; text-align: center">
+            <a :href="player['steam']['community_url']" target="_blank" class="a-player">Открыть профиль Steam</a>
+          </div>
+          <div style="justify-content: center; display: flex; margin-top: 0%">
+            <div style="max-width: 45%; float: left; margin-right: 5%">
+              <p class="p-player">Очки: {{player['score']}}</p>
+              <p class="p-player">Время игры: {{player['duration']}}</p>
+              <p class="p-player">Пинг: {{player['ping']}} мс</p>
+              <p class="p-player">Потери пакетов: {{player['loss']}}</p>
+            </div>
+            <div style="max-width: 45%; float: left;">
+              <p class="p-player">ID на сервере: {{player['id']}}</p>
+              <p class="p-player">Steam64: {{player['steam']['steam64']}}</p>
+              <p class="p-player">Steam3: {{player['steam']['steam3']}}</p>
+              <p class="p-player">Steam2: {{player['steam']['steam2']}}</p>
+            </div>
+          </div>
+          <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 && allowMute" class="md-raised" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>
+          </div>
+        </div>
+      </div>
+    </md-dialog>
+</template>
+
+<script>
+import AdminApi from "@/api/AdminApi";
+export default {
+  name: 'PlayerExtendedInfo',
+  props: {
+    player: Object
+  },
+  data: () => ({
+    showPlayerDialog: false,
+    allowBan: AdminApi.data().allowBan,
+    allowMute: false,
+    allowKick: false
+  }),
+  methods: {
+    closePEI() {
+      this.showPlayerDialog = false;
+    }
+  }
+}
+</script>
+
+<style>
+.a-player {
+  text-align: center; font-size: 2em; color: #131213;
+}
+
+.h3-player {
+  line-height: 1em;
+}
+
+.p-player {
+  color: #131213;
+  font-size: 1.2em;
+}
+</style>

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

@@ -1,16 +1,26 @@
 <template>
-  <tr>
+  <tr v-on:click="openPEI()">
     <td class="player-border-top server-table-padding" style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213;">{{player['name']}}</td>
     <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['score']}}</td>
     <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['duration']}}</td>
+    <PlayerExtendedInfo ref="pei" :player="player"/>
   </tr>
 </template>
 
 <script>
+import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue";
+
 export default {
   name: 'PlayerTableInfo',
+  components: {PlayerExtendedInfo},
   props: {
     player: Object
+  },
+  methods: {
+    openPEI(){
+      console.log("Open Player Extended Info");
+      this.$refs.pei.showPlayerDialog = true;
+    }
   }
 }
 </script>

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

@@ -40,7 +40,7 @@ export default {
   methods: {
     openServerFullInfo() {
       console.log("Open server full info");
-      if (this.serverData['status'] === true) this.$refs.ssd.openDialog();
+      if (this.serverData['status'] === true) this.$refs.ssd.openFIF();
       else alert("сервер мертв, нелезь на него");
     },
     imgIfStatus() {

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

@@ -1,10 +1,14 @@
 <template>
   <div>
-    <md-dialog :md-active.sync="showServerDialog">
+    <md-dialog :md-active.sync="showServerDialog" style="z-index: 10">
       <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
-        <div class="md-layout-item md-alignment-bottom-center rounded-and-colored md-size-60">
+        <div class="md-layout-item md-size-5"/>
+        <div class="md-layout-item rounded-and-colored md-size-60">
           <h3 style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
         </div>
+        <div class="md-layout-item rounded-and-colored-circle md-size-5" v-on:click="closeFIF()">
+          <h3 style="text-align: center; margin: 25% 0%">X</h3>
+        </div>
       </div>
       <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
         <div class="md-layout-item md-size-65 server-info-rounded">
@@ -15,12 +19,12 @@
           </div>
           <div style="justify-content: center; display: flex; margin-top: 2.5%">
             <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')">
-              <img :src="require('@/assets/images/logo/terminal.svg')" class="img-server">
+              <TerminalSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Подключиться</p>
               <p class="p-server-address">{{serverData['address']}}</p>
             </div>
             <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')">
-              <img :src="require('@/assets/images/logo/steam.svg')" class="img-server">
+              <SteamSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Workshop</p>
               <p class="p-server-address">by Пельмень</p>
             </div>
@@ -56,10 +60,12 @@
 
 <script>
 import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue";
+import SteamSvg from "@/components/TabsMenuElements/ServersView/Components/CustomSvg/SteamSvg.vue";
+import TerminalSvg from "@/components/TabsMenuElements/ServersView/Components/CustomSvg/TerminalSvg.vue";
 
 export default {
   name: "ServerFullInfo",
-  components: {PlayerTableInfo},
+  components: {TerminalSvg, SteamSvg, PlayerTableInfo},
   props: {
     serverData: Object,
   },
@@ -67,9 +73,12 @@ export default {
     showServerDialog: false
   }),
   methods: {
-    openDialog() {
+    openFIF() {
       this.showServerDialog = true;
     },
+    closeFIF() {
+      this.showServerDialog = false;
+    },
     onMove(select){
       switch (select) {
         case 'steam': return window.open(`steam://${this.serverData['address']}`, '_self').focus();
@@ -91,12 +100,15 @@ export default {
 }
 
 .img-server {
-  max-width: 50%; margin-left: auto; margin-right: auto; display: block; color: #131213;
+  max-width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  color: #131213;
 }
 
 .img-server:hover {
-  box-shadow: 0 0 10px #fd8846;
+  color: #fd8846;
-  color: red;
 }
 
 .server-table-padding {
@@ -140,5 +152,6 @@ table thead, table tbody tr {
 .md-dialog-container {
   max-height: 90%;
   max-width: 70%;
+  box-shadow: unset;
 }
 </style>