live map v2.1

src/components/ActionDialogs/PlayerMap.vue

@@ -1,15 +1,18 @@
 <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="-1" :zoom="-1" :center="[cords[map_name].y, cords[map_name].x]">
+      <div class="rounded-only">
-        <l-image-overlay :url="`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`" :bounds="[[0,0], [2160, 3840]]"/>
+        <l-map :crs="crs" v-if="map_exists && cfg_exists" style="height: 800px; width: 800px" :min-zoom="-1" :zoom="0" :center="[cords[map_name].y, cords[map_name].x]">
-        <l-marker v-for="player in players" :key="player.id" :lat-lng="getRektPos(player.pos)">
+          <l-image-overlay :url="`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`" :bounds="bounds"/>
-          <l-icon class-name="pm_icon" :icon-url="getClzEmblem(player.team, player.clz)"/>
+          <l-marker v-for="player in players" :key="player.id" :lat-lng="getRektPos(player.pos)">
-          <l-popup><p>{{player.name}}</p></l-popup>
+            <l-icon class-name="pm_icon" :icon-url="getClzEmblem(player.team, player.clz)"/>
-        </l-marker>
+            <l-popup><p class="p-map">{{player.name}}</p></l-popup>
-      </l-map>
+          </l-marker>
-      <h4 v-else>Вид карты {{map_name}} отсутвует!</h4>
+        </l-map>
-      <md-button class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
+        <h4 v-else style="padding: 0% 1%; text-align: center">{{loading?'Загрузка карты...':`Вид карты ${map_name} отсутвует!`}}</h4>
+        <md-button style="float: left" class="btn-gosty">{{players.length}} игроков</md-button>
+        <md-button style="float: right" class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
+      </div>
     </md-dialog>
   </div>
 </template>
@@ -17,8 +20,8 @@
 <script>
 import {LMap, LImageOverlay, LMarker, LIcon, LPopup} from "vue2-leaflet";
 import axios from "axios";
-import {Simple} from "leaflet/src/geo/crs/CRS.Simple";
 import {toLatLng} from "leaflet/src/geo/LatLng";
+import {CRS} from "leaflet";
 export default {
   name: "PlayerMap",
   components: {LMap, LImageOverlay, LMarker, LIcon, LPopup},
@@ -35,31 +38,30 @@ export default {
   data: () => ({
     show: false,
     map_exists: false,
-    cords: {
+    cfg_exists: false,
-      "dacha_putina":{
+    loading: true,
-        "x":2620,
+    bounds: [
-        "y":1427,
+      [0,0],
-        "hu":5
+      [2160, 3840]
-      },
+    ],
-      "zavod_stoilo_night":{
+    crs: CRS.Simple,
-        "x":1920,
+    cords: {}
-        "y":1050,
-        "hu":4
-      }
-    }
   }),
   methods: {
-    Simple() {
-      return Simple
-    },
     showMe(b) {
       this.show = b;
-      this.prepare();
+      if (b === true)
+        this.prepare();
     },
     prepare() {
+      this.loading = true;
       axios.head(`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`)
-          .then(response => this.map_exists = response.status === 200)
+          .then(() => {this.map_exists = true; console.log(`[PM] Map ${this.map_name} exists`)})
-          .catch(() => this.map_exists = false)
+          .catch(() => console.log(`[PM] Map ${this.map_name} not found!`))
+          .finally(() => this.loading = false)
+      axios.get(`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.cfg`)
+          .then(response => {this.cfg_exists = true; this.cords[this.map_name] = response.data; console.log(`[PM] Map ${this.map_name} cfg found`)})
+          .catch(() => console.log(`[PM] Not found cfg 4 map: ${this.map_name}`))
     },
     getRektPos(pos) {
       //console.log(" ");
@@ -87,7 +89,7 @@ export default {
       const t = this.calcTeam(team);
       const c = this.calcClass(clz);
       if (t === null || c == null) {
-        return null;
+        return require("@/assets/emblems/unknown/Unk_emblem_UNK.png");
       }
       return require(`@/assets/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`);
     },
@@ -124,5 +126,11 @@ export default {
   width: 24px !important;
   height: 24px !important;
   margin: 0 !important;
+  border-radius: 1px;
+  border: 0px solid black;
+}
+
+.leaflet-container {
+  background: black !important;
 }
 </style>