|
|
@ -1,33 +1,65 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div> |
|
|
<div> |
|
|
<md-dialog :md-active.sync="showServerDialog"> |
|
|
<md-dialog :md-active.sync="showServerDialog"> |
|
|
<md-dialog-title>Preferences</md-dialog-title> |
|
|
<div class="md-layout md-alignment-bottom-center" style="z-index: 1"> |
|
|
|
|
|
<div class="md-layout-item md-alignment-bottom-center rounded-and-colored md-size-60"> |
|
|
<md-tabs md-dynamic-height> |
|
|
<h3 style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3> |
|
|
<md-tab md-label="General"> |
|
|
</div> |
|
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p> |
|
|
</div> |
|
|
</md-tab> |
|
|
<div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%"> |
|
|
|
|
|
<div class="md-layout-item md-size-65 server-info-rounded"> |
|
|
<md-tab md-label="Activity"> |
|
|
<img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px"> |
|
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p> |
|
|
<div> |
|
|
</md-tab> |
|
|
<p class="p-server">{{serverData['description']}}</p> |
|
|
|
|
|
<hr width="30%"> |
|
|
<md-tab md-label="Account"> |
|
|
</div> |
|
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p> |
|
|
<div style="justify-content: center; display: flex; margin-top: 2.5%"> |
|
|
</md-tab> |
|
|
<div style="max-width: 40%; float: left;" v-on:click="onMove('steam')"> |
|
|
</md-tabs> |
|
|
<img :src="require('@/assets/images/logo/terminal.svg')" class="img-server"> |
|
|
|
|
|
<p class="p-server" style="margin-bottom: -5%">Подключиться</p> |
|
|
<md-dialog-actions> |
|
|
<p class="p-server-address">{{serverData['address']}}</p> |
|
|
<md-button class="md-primary" @click="showServerDialog = false">Close</md-button> |
|
|
</div> |
|
|
<md-button class="md-primary" @click="showServerDialog = false">Save</md-button> |
|
|
<div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')"> |
|
|
</md-dialog-actions> |
|
|
<img :src="require('@/assets/images/logo/steam.svg')" class="img-server"> |
|
|
|
|
|
<p class="p-server" style="margin-bottom: -5%">Workshop</p> |
|
|
|
|
|
<p class="p-server-address">by Пельмень</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style="max-width: 40%; float: left;" v-else v-on:click="onMove('fastdl')"> |
|
|
|
|
|
<img :src="require('@/assets/images/logo/download.svg')" class="img-server"> |
|
|
|
|
|
<p class="p-server" style="margin-bottom: -5%">FastDL</p> |
|
|
|
|
|
<p class="p-server-address">by Добродей</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<hr width="30%"> |
|
|
|
|
|
<h3 v-if="serverData['player_count'] < 1" style="text-align: center; line-height: 1em">На сервере пусто, заходи с друзьями...</h3> |
|
|
|
|
|
<div v-else> |
|
|
|
|
|
<h3 style="text-align: center">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3> |
|
|
|
|
|
<hr width="30%"> |
|
|
|
|
|
<table style="margin-left: auto; margin-right: auto; height: 20em; padding-left: 10%; padding-right: 10%; padding-bottom: 5%"> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Имя</th> |
|
|
|
|
|
<th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Очки</th> |
|
|
|
|
|
<th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Время игры</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<PlayerTableInfo v-for="player_data in serverData['players']" :key="player_data['name']" :player="player_data"/> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</md-dialog> |
|
|
</md-dialog> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: "ServerFullInfo", |
|
|
name: "ServerFullInfo", |
|
|
|
|
|
components: {PlayerTableInfo}, |
|
|
props: { |
|
|
props: { |
|
|
serverData: Object, |
|
|
serverData: Object, |
|
|
}, |
|
|
}, |
|
|
@ -37,7 +69,71 @@ export default { |
|
|
methods: { |
|
|
methods: { |
|
|
openDialog() { |
|
|
openDialog() { |
|
|
this.showServerDialog = true; |
|
|
this.showServerDialog = true; |
|
|
|
|
|
}, |
|
|
|
|
|
onMove(select){ |
|
|
|
|
|
switch (select) { |
|
|
|
|
|
case 'steam': return window.open(`steam://${this.serverData['address']}`, '_self').focus(); |
|
|
|
|
|
case 'workshop': return window.open(this.serverData['workshop'], '_blank').focus(); |
|
|
|
|
|
case 'fastdl': return window.open(`https://tf2.pblr-nyk.pro/tf/maps/${this.serverData['map']}.bsp.bz2`, '_blank').focus(); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
.p-server { |
|
|
|
|
|
text-align: center; font-size: 2em; color: #131213 |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.p-server-address { |
|
|
|
|
|
text-align: center; font-size: 1.5em; color: gray; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.img-server { |
|
|
|
|
|
max-width: 50%; margin-left: auto; margin-right: auto; display: block; color: #131213; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.img-server:hover { |
|
|
|
|
|
box-shadow: 0 0 10px #fd8846; |
|
|
|
|
|
color: red; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.server-table-padding { |
|
|
|
|
|
padding: 2% 0%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
table { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-flow: column; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
table thead { |
|
|
|
|
|
/* head takes the height it requires, |
|
|
|
|
|
and it's not scaled when table is resized */ |
|
|
|
|
|
flex: 0 0 auto; |
|
|
|
|
|
width: calc(100% - 0.9em); |
|
|
|
|
|
} |
|
|
|
|
|
table tbody { |
|
|
|
|
|
/* body takes all the remaining available space */ |
|
|
|
|
|
flex: 1 1 auto; |
|
|
|
|
|
display: block; |
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
table tbody tr { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
table thead, table tbody tr { |
|
|
|
|
|
display: table; |
|
|
|
|
|
table-layout: fixed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.server-info-rounded { |
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
|
border: 5px solid black; |
|
|
|
|
|
background: #fdfdfe; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
gsd
2 years ago
