live map v1

src/components/ActionDialogs/PlayerMap.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <md-dialog :md-active.sync="show" @close="show=false">
+      <l-map :crs="Simple()" v-if="map_exists" style="height: 800px; width: 800px" :min-zoom="-3" :set-zoom="-1" :center="[cords[map_name].y, cords[map_name].x]">
+        <l-image-overlay :url="`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`" :bounds="[[0,0], [2160, 3840]]"/>
+        <l-marker v-for="player in players" :key="player.id" :lat-lng="getRektPos(player.pos)">
+          <l-icon class-name="icom-map">{{player.name}}</l-icon>
+        </l-marker>
+      </l-map>
+      <h4 v-else>Вид карты {{map_name}} отсутвует!</h4>
+    </md-dialog>
+  </div>
+</template>
+
+<script>
+import { LMap, LImageOverlay, LMarker, LIcon } from "vue2-leaflet";
+import axios from "axios";
+import {Simple} from "leaflet/src/geo/crs/CRS.Simple";
+export default {
+  name: "PlayerMap",
+  components: {LMap, LImageOverlay, LMarker, LIcon},
+  props: {
+    players: {
+      type: Array,
+      default: Object.create([])
+    },
+    map_name: {
+      type: String,
+      default: null
+    }
+  },
+  data: () => ({
+    show: false,
+    map_exists: false,
+    cords: {
+      "dacha_putina":{
+        "x":2620,
+        "y":1427,
+        "hu":5
+      }
+    }
+  }),
+  methods: {
+    Simple() {
+      return Simple
+    },
+    showMe(b) {
+      this.show = b;
+      this.prepare();
+    },
+    prepare() {
+      axios.head(`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`)
+          .then(response => this.map_exists = response.status === 200)
+          .catch(() => this.map_exists = false)
+    },
+    getRektPos(pos) {
+      console.log(" ");
+      console.log(pos[0], pos[1]);
+      console.log(pos[0] / this.cords[this.map_name].hu, pos[1] / this.cords[this.map_name].hu);
+      var player_x = this.cords[this.map_name].x + (pos[0] / this.cords[this.map_name].hu);
+      var player_y = this.cords[this.map_name].y + (pos[1] / this.cords[this.map_name].hu);
+      console.log(player_x, player_y);
+      return [player_y, player_x];
+    }
+  }
+}
+</script>

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

@@ -26,6 +26,8 @@
             </div>
             <div v-else style="text-align: center; font-size: 0.5em !important;">
               <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_ssd.showMe(true, serverData)">Статистика сервера</p>
+              <p class="p-server" style="display: inline"> | </p>
+              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_pm.showMe(true)">Позиция игроков</p>
             </div>
             <hr width="30%">
           </div>
@@ -68,6 +70,7 @@
     <MessagesDialog ref="sfi_md"/>
     <KillDeadTop ref="sfi_kdt"/>
     <ServerStatsDialog ref="sfi_ssd" :docker="serverData.dockerStats" :uniq="serverData.uniq"/>
+    <PlayerMap ref="sfi_pm" :players="serverData.players" :map_name="serverData.map.replace('workshop/', '').split('.ugc')[0]"/>
   </div>
 </template>
 
@@ -78,10 +81,11 @@ import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Compon
 import MessagesDialog from "@/components/ActionDialogs/Tables/MessagesDialog.vue";
 import KillDeadTop from "@/components/ActionDialogs/Tables/KillDeadTop.vue";
 import ServerStatsDialog from "@/components/ActionDialogs/ServerStatsDialog.vue";
+import PlayerMap from "@/components/ActionDialogs/PlayerMap.vue";
 
 export default {
   name: "ServerFullInfo",
-  components: {ServerStatsDialog, KillDeadTop, MessagesDialog, PlayerExtendedInfo, TerminalSvg, SteamSvg},
+  components: {PlayerMap, ServerStatsDialog, KillDeadTop, MessagesDialog, PlayerExtendedInfo, TerminalSvg, SteamSvg},
   props: {
     serverData: {
       type: Object,