Facti13.Frontend.VueMaterial/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

<template>
  <div>
    <md-dialog :md-active.sync="showServerDialog" style="z-index: 10">
      <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
        <div class="md-layout-item md-size-5"/>
        <div class="md-layout-item rounded-and-colored md-size-45 md-small-size-90">
          <h3 class="txt-innert" style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
        </div>
        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeFIF()">
          <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
        </div>
      </div>
      <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
        <div class="md-layout-item md-size-50 server-info-rounded rounded-only md-small-size-100">
          <img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
          <div>
            <p class="p-server">{{serverData['description']}}</p>
            <hr width="30%">
          </div>
          <div style="justify-content: center; display: flex; margin-top: 2.5%">
            <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')" class="clickable">
              <TerminalSvg class="img-server"/>
              <p class="p-server" style="margin-bottom: -5%">Подключиться</p>
              <p class="p-server-address">{{serverData['address']}}</p>
            </div>
            <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')" class="clickable">
              <SteamSvg 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')" class="clickable">
              <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>
            <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
            <hr width="30%">
            <md-table v-model="players" md-sort="score" md-sort-order="desc" md-card md-fixed-header @md-selected="openPlayer" md-height="150px">
              <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
                <md-table-cell style="font-family: tf2secondary" md-label="Имя" md-sort-by="name">{{ item.name }}</md-table-cell>
                <md-table-cell style="font-family: tf2secondary" md-label="Очки" md-sort-by="score">{{ item.score }}</md-table-cell>
                <md-table-cell style="font-family: tf2secondary" md-label="Наиграно" md-sort-by="duration">{{ item.duration }}</md-table-cell>
              </md-table-row>
            </md-table>
            <PlayerExtendedInfo ref="pei" :player="selected_player"/>
          </div>
        </div>
      </div>
    </md-dialog>
  </div>
</template>

<script>
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue";
import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue";

export default {
  name: "ServerFullInfo",
  components: {PlayerExtendedInfo, TerminalSvg, SteamSvg},
  props: {
    serverData: Object,
  },
  data: () => ({
    showServerDialog: false,
    expandPlayers: false,
    players: [{score:0, name:"", duration:""}],
    selected_player: null
  }),
  methods: {
    openFIF() {
      this.players = this.serverData['players'];
      this.showServerDialog = true;
    },
    closeFIF() {
      this.showServerDialog = false;
    },
    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();
      }
    },
    openPlayer(item) {
      this.selected_player = item;
      this.$refs.pei.showPlayerDialog = true;
    }
  }
}
</script>

<style>
.p-server {
  text-align: center; font-size: 2em;
}

.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 {
  color: #fd8846;
}

.server-table-padding {
  padding: 2% 0%;
}

.server-info-rounded {
  border-radius: 20px;
  border: 5px solid black;
}

.md-dialog-container {
  max-height: 100%;
  max-width: 100%;
  box-shadow: unset;
}

@media(width < 599px) {
  .sfi-current-player {
    font-size: 2em;
  }
}
</style>