web socket servers v2

src/api/GlobalApi.js

@@ -46,14 +46,21 @@ export default class GlobalApi {
     servers_ws_first_payload = true;
 
     constructor() {
-        this.servers_ws = new WebSocket("wss://tf2.pblr-nyk.pro/ws/servers")
-        this.servers_ws.onopen = () => {console.log("[WS] Websocket servers connected")};
-        this.servers_ws.onmessage = (e) => {
-            this.update_server(JSON.parse(e.data)["servers"], false);
-        };
         document.title = "Факты 13";
     }
 
+    create_server_websocket() {
+        if (this.servers_ws === null) {
+            this.servers_ws = new WebSocket("wss://tf2.pblr-nyk.pro/ws/servers")
+            this.servers_ws.onopen = () => {
+                console.log("[WS] Websocket servers connected")
+            };
+            this.servers_ws.onmessage = (e) => {
+                this.update_server(JSON.parse(e.data)["servers"], false);
+            };
+        }
+    }
+
     human_name_impl(player_count, naming){
         let number = Math.abs(player_count) % 100;
         let number_post = number % 10;

src/components/TabsMenu.vue

@@ -34,7 +34,12 @@ export default {
     components: {MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView, BackgroundImage},
     data: () => ({
       current_tab: ""
-    })
+    }),
+    methods: {
+      changeTab(current) {
+        console.log(current);
+      }
+    }
 }
 </script>
 

src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue

@@ -22,6 +22,7 @@ export default {
   name: 'ConnectButton',
   methods: {
     moveToServer() {
+      this.$API.create_server_websocket();
       this.$API.current_window = "serversView";
     }
   }

src/components/TabsMenuElements/ServersView/Components/PlayersTable.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <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="sec">{{ item.duration }}</md-table-cell>
+        <md-tooltip class="tooltip" md-direction="top">Нажми чтоб узнать поподробнее про {{item.name}}</md-tooltip>
+      </md-table-row>
+    </md-table>
+    <PlayerExtendedInfo ref="pei" :player="selected_player"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PlayersTable",
+  props: {
+    players: {
+      type: Object,
+      default: Object.create({
+        "name":"",
+        "score":0,
+        "duration":0
+      })
+    }
+  }
+}
+</script>

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -51,15 +51,15 @@
           <div v-else>
             <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 :value="serverData.players" md-sort="score" md-sort-order="desc" md-card md-fixed-header md-height="150px">
-              <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
+              <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single" v-on:click="openPlayer(item.id)">
                 <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="sec">{{ item.duration }}</md-table-cell>
                 <md-tooltip class="tooltip" md-direction="top">Нажми чтоб узнать поподробнее про {{item.name}}</md-tooltip>
               </md-table-row>
             </md-table>
-            <PlayerExtendedInfo ref="pei" :player="selected_player"/>
+            <PlayerExtendedInfo ref="pei" :player="selected_player!==null&&serverData.players.filter(p => p.id === selected_player).length>0?serverData.players.filter(p => p.id === selected_player)[0]:null"/>
           </div>
           <p class="p-server" style="text-align: center; margin: 2.5% 0;">Обновлен: {{(new Date(serverData['last_update']*1000)).toLocaleString()}}</p>
         </div>
@@ -83,13 +83,16 @@ export default {
   name: "ServerFullInfo",
   components: {ServerStatsDialog, KillDeadTop, MessagesDialog, PlayerExtendedInfo, TerminalSvg, SteamSvg},
   props: {
-    serverData: Object,
+    serverData: {
+      type: Object,
+      default: Object.create({"players":[]})
+    },
   },
   data: () => ({
     showServerDialog: false,
     expandPlayers: false,
     players: [{score:0, name:"", duration:"", sec:0}],
-    selected_player: null,
+    selected_player: -1,
     serverInfo: null
   }),
   methods: {
@@ -110,6 +113,7 @@ export default {
       }
     },
     openPlayer(item) {
+      //console.log("Open Player Extended Info", item);
       this.selected_player = item;
       this.$refs.pei.showPlayerDialog = true;
     }
@@ -124,7 +128,7 @@ export default {
         'address':'',
         'workshop':'',
         'player_count':'',
-        'players':0,
+        'players':[],
         'max_player':0
       }
   }

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -1,5 +1,5 @@
 <template>
-  <md-tab id="serversView" md-label="Серверы">
+  <md-tab id="serversView" md-label="Серверы" v-on:click="$API.create_server_websocket()">
     <div class="md-layout md-alignment-bottom-center md-small-hide" style="margin-bottom: -1%; margin-top: 1%">
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
     </div>