live map v2.4 css

src/components/ActionDialogs/PlayerMap.vue

@@ -4,34 +4,49 @@
       <div class="rounded-only">
         <l-map :crs="crs" v-if="map_exists && cfg_exists" style="height: 60em; width: 60em" :min-zoom="-2" :zoom="0" :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="bounds"/>
-          <l-marker v-for="player in Object.create(players).filter(p => clz_select.length===0||clz_select.indexOf(`${p.clz}`) !== -1).filter(p => team_select.length===0||team_select.indexOf(`${p.team}`) !== -1)" :key="player.id" :lat-lng="getRektPos(player.pos)">
+          <l-control style="background: #3e3e3e; border: 2px; border-radius: 5px; font-family: tf2secondary;">
+            <label style="font-family: tf2build; margin-left: 5%;">Сортировка</label>
+            <md-field v-if="map_exists && cfg_exists && !players_select.length>0">
+              <label style="margin-left: 5%">Класс</label>
+              <md-select multiple v-model="clz_select">
+                <md-option :value="1">Разведчик</md-option>
+                <md-option :value="2">Снайпер</md-option>
+                <md-option :value="3">Солдат</md-option>
+                <md-option :value="4">Подрывник</md-option>
+                <md-option :value="5">Медик</md-option>
+                <md-option :value="6">Пулеметчик</md-option>
+                <md-option :value="7">Пидорас</md-option>
+                <md-option :value="8">Шпион</md-option>
+                <md-option :value="9">Инженер</md-option>
+              </md-select>
+            </md-field>
+            <md-field v-if="map_exists && cfg_exists && !players_select.length>0">
+              <label style="margin-left: 5%">Команда</label>
+              <md-select multiple v-model="team_select">
+                <md-option :value="2">Красные</md-option>
+                <md-option :value="3">Синие</md-option>
+              </md-select>
+            </md-field>
+            <md-field v-if="(map_exists && cfg_exists) && !(team_select.length>0||clz_select.length>0)">
+              <label style="margin-left: 5%">Игрок</label>
+              <md-select multiple v-model="players_select">
+                <md-option v-for="player in players" :key="player.id" :value="player.id">{{player.name}}</md-option>
+              </md-select>
+            </md-field>
+          </l-control>
+          <l-marker
+              v-for="player in Object.create(players)
+                    .filter(p => clz_select.length===0||clz_select.indexOf(p.clz) !== -1)
+                    .filter(p => team_select.length===0||team_select.indexOf(p.team) !== -1)
+                    .filter(p => players_select.length===0||players_select.indexOf(p.id) !== -1)"
+              :key="player.id"
+              :lat-lng="getRektPos(player.pos)">
             <l-icon class-name="pm_icon" :icon-url="getClzEmblem(player.team, player.clz)"/>
             <l-popup><p class="p-map">{{player.name}}</p></l-popup>
           </l-marker>
         </l-map>
         <h4 v-else style="padding: 0% 1%; text-align: center">{{loading?'Загрузка карты...':`Вид карты ${map_name} отсутвует!`}}</h4>
         <md-button style="float: left; margin: 2.5% 1%" class="btn-gosty">{{players.length}} игроков</md-button>
-        <md-field style="float: left; width: 30%; margin-right: auto; margin-left: auto" v-if="map_exists && cfg_exists">
-          <label for="movies">Сортировка по классам</label>
-          <md-select multiple v-model="clz_select">
-            <md-option value="1">Разведчик</md-option>
-            <md-option value="2">Снайпер</md-option>
-            <md-option value="3">Солдат</md-option>
-            <md-option value="4">Подрывник</md-option>
-            <md-option value="5">Медик</md-option>
-            <md-option value="6">Пулеметчик</md-option>
-            <md-option value="7">Пидорас</md-option>
-            <md-option value="8">Шпион</md-option>
-            <md-option value="9">Инженер</md-option>
-          </md-select>
-        </md-field>
-        <md-field style="float: left; width: 30%; margin-right: auto; margin-left: auto" v-if="map_exists && cfg_exists">
-          <label for="movies">Сортировка по команде</label>
-          <md-select multiple v-model="team_select">
-            <md-option value="2">Красные</md-option>
-            <md-option value="3">Синие</md-option>
-          </md-select>
-        </md-field>
         <md-button style="float: right; margin: 2.5% 1%" class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
       </div>
     </md-dialog>
@@ -39,13 +54,13 @@
 </template>
 
 <script>
-import {LMap, LImageOverlay, LMarker, LIcon, LPopup} from "vue2-leaflet";
+import {LMap, LImageOverlay, LMarker, LIcon, LPopup, LControl} from "vue2-leaflet";
 import axios from "axios";
 import {toLatLng} from "leaflet/src/geo/LatLng";
 import {CRS} from "leaflet";
 export default {
   name: "PlayerMap",
-  components: {LMap, LImageOverlay, LMarker, LIcon, LPopup},
+  components: {LMap, LImageOverlay, LMarker, LIcon, LPopup, LControl},
   props: {
     players: {
       type: Array,
@@ -69,6 +84,7 @@ export default {
     cords: {},
     clz_select: [],
     team_select: [],
+    players_select: [],
   }),
   methods: {
     showMe(b) {