report view

src/components/Others/Loader/ProfileViewer.vue

@@ -4,6 +4,11 @@
       <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
         <h1 v-if="loading">Загрузка</h1>
         <ProfileContainer v-else :player="player"/>
+        <hr width="100%">
+        <md-button v-if="!loading && this.$API.admin.permition.kick" class="md-raised" style="color: #131213; font-family: tf2build; background: darkcyan">кикнуть</md-button>
+        <md-button v-if="!loading && this.$API.admin.permition.ban" class="md-raised" style="color: #131213; font-family: tf2build; background: brown">забанить</md-button>
+        <md-button v-if="!loading && this.$API.admin.permition.mute" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>
+        <md-button v-if="!loading" v-on:click="showProfileDialog=false" style="background-color: #fd8846; font-family: tf2build;color: black; float: right">Закрыть</md-button>
       </div>
     </div>
   </md-dialog>

src/components/Others/ReportView.vue

@@ -0,0 +1,54 @@
+<template>
+  <md-dialog :md-active.sync="showReportDialog" @close="showReportDialog=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-field style="padding-left: 5%; padding-right: 5%;" :class="hasFeedback">
+          <label style="padding-left: 5%; padding-right: 5%">{{'Причина тряски?'}}</label>
+          <md-input v-model="reason" minlength="32"></md-input>
+          <span class="md-error" style="padding-left: 5%; padding-right: 5%">{{feedback}}</span>
+        </md-field>
+        <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: brown" v-on:click="sendReport()">Пожаловаться</md-button>
+        <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #a1a52a" v-on:click="showReportDialog=false">Передумал</md-button>
+      </div>
+    </div>
+  </md-dialog>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  name: "ReportView",
+  props: {
+    steam64:String
+  },
+  data: () => ({
+    showReportDialog: false,
+    loading: false,
+    reason: "",
+    feedback: ""
+  }),
+  methods: {
+    sendReport() {
+      this.loading = true;
+      this.rsp = "Загрузка...";
+      axios.post(`api/profile/current/report?steam64=${this.steam64}&text=${this.reason}`).then(
+          (response => {
+            if (response.data > 0) this.showRV(false);
+            else if (response.data < 0) this.feedback = `Не так быстро, подожди ${response.data*-1} секунд`;
+            else this.feedback = "Увы, данный игрок уже ливнул с сервера";
+          })).catch(() => this.feedback = "Ошибка отправки")
+          .finally(()=>this.loading = false)
+    },
+    showRV(b) {
+      this.showReportDialog = b;
+    }
+  },
+  computed: {
+    hasFeedback () {
+      return {
+        'md-invalid': this.feedback.length > 0
+      }
+    }
+  },
+}
+</script>

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

@@ -76,7 +76,6 @@
         </div>
       </div>
       <br>
-      <hr width="50%">
     </div>
   </div>
 </template>

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

@@ -5,7 +5,7 @@
         <div class="md-layout-item rounded-and-colored md-size-60 md-small-size-90">
           <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">
+        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closePEI()" style="min-width: 3em">
           <h3 style="text-align: center; margin: 25% 0%">X</h3>
         </div>
       </div>
@@ -29,7 +29,7 @@
             </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 class="md-raised" v-if="showPlayerDialog && this.$API.player.success_auth" style="color: #131213; font-family: tf2build; background: #fd8846" v-on:click="$refs.rv.showRV(true)">Репорт</md-button>
             <md-button v-if="showPlayerDialog && this.$API.admin.permition.kick" class="md-raised" style="color: #131213; font-family: tf2build; background: darkcyan">кикнуть</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 && this.$API.admin.permition.mute" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>
@@ -38,15 +38,17 @@
         </div>
       </div>
       <ProfileViewer ref="pv" :steam64="player['steam']['steam64']"/>
+      <ReportView ref="rv" :steam64="player['steam']['steam64']"/>
     </md-dialog>
 </template>
 
 <script>
 import ProfileViewer from "@/components/Others/Loader/ProfileViewer.vue";
+import ReportView from "@/components/Others/ReportView.vue";
 
 export default {
   name: 'PlayerExtendedInfo',
-  components: {ProfileViewer},
+  components: {ReportView, ProfileViewer},
   props: {
     player: Object
   },