You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.9 KiB
80 lines
2.9 KiB
<template>
|
|
<div>
|
|
<md-dialog :md-active.sync="show" @close="show=false" style="z-index: 10">
|
|
<l-map style="height: 450px; width: 700px; border-radius: 3px; border: 3px solid #f4722b" :zoom="zoom" :center="center">
|
|
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
|
|
<l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['player_count']>0)" :key="srv['name']" :lat-lng="srv['city_pos']">
|
|
<l-icon class-name="icom-map">{{srv['name']}}</l-icon>
|
|
<l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup>
|
|
</l-marker>
|
|
<l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['player_count'] === 0 && server['status'] === true)" :key="srv['name']" :lat-lng="srv['city_pos']">
|
|
<l-icon class-name="icom-map"><div class="headline">{{srv['name']}}</div></l-icon>
|
|
<l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup>
|
|
</l-marker>
|
|
<l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['status'] === false)" :key="srv['name']" :lat-lng="srv['city_pos']">
|
|
<l-icon class-name="icom-map">{{srv['name']}}</l-icon>
|
|
<l-popup><p class="p-map">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}</p></l-popup>
|
|
</l-marker>
|
|
</l-map>
|
|
<md-button class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
|
|
<ServerFullInfo :server-data="null" ref="wwm_ssd"/>
|
|
</md-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { latLng } from "leaflet";
|
|
import { LMap, LTileLayer, LMarker, LPopup, LIcon} from "vue2-leaflet";
|
|
import ServerFullInfo from "@/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue";
|
|
export default {
|
|
name: "WorldwideMap",
|
|
components: {
|
|
ServerFullInfo,
|
|
LMap,
|
|
LMarker,
|
|
LTileLayer,
|
|
LPopup,
|
|
LIcon
|
|
},
|
|
data: () => ({
|
|
show: false,
|
|
url: 'https:///tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
attribution:
|
|
'хохлы',
|
|
zoom: 3,
|
|
center: [57.91, 64.21],
|
|
markerLatLng: [51.504, -0.159]
|
|
}),
|
|
methods: {
|
|
latLng,
|
|
showMe(b) {
|
|
this.show = b;
|
|
},
|
|
human_name_impl(p, n) {
|
|
return `${p} ${this.$API.human_name_impl(p,n)}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.p-map {
|
|
color: black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icom-map {
|
|
border-radius: 5px;
|
|
border: 0px solid black;
|
|
background: #ffffff;
|
|
text-align: center;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
font-family: tf2secondary;
|
|
}
|
|
|
|
.leaflet-control-attribution {
|
|
display: none !important;
|
|
}
|
|
</style>
|