From 6140a57edf88439b4dee52688fff16a664c61c1c Mon Sep 17 00:00:00 2001
From: gsd <mamu@ebal.net>
Date: Tue, 16 Jan 2024 22:52:48 +0300
Subject: [PATCH] web socket servers v2

---
 src/api/GlobalApi.js                          | 17 +++++++----
 src/components/TabsMenu.vue                   |  7 ++++-
 .../SubComponents/ConnectButton.vue           |  1 +
 .../ServersView/Components/PlayersTable.vue   | 29 +++++++++++++++++++
 .../ServersView/Components/ServerFullInfo.vue | 16 ++++++----
 .../ServersView/ServersView.vue               |  2 +-
 6 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 src/components/TabsMenuElements/ServersView/Components/PlayersTable.vue

diff --git a/src/api/GlobalApi.js b/src/api/GlobalApi.js
index 51a3c8c..401d56a 100644
--- a/src/api/GlobalApi.js
+++ b/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;
diff --git a/src/components/TabsMenu.vue b/src/components/TabsMenu.vue
index cbe28a9..2023c58 100644
--- a/src/components/TabsMenu.vue
+++ b/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>
 
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
index 82472b4..1f56a68 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
+++ b/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";
     }
   }
diff --git a/src/components/TabsMenuElements/ServersView/Components/PlayersTable.vue b/src/components/TabsMenuElements/ServersView/Components/PlayersTable.vue
new file mode 100644
index 0000000..237bf88
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue b/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
index 16ad36b..abb2f14 100644
--- a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
+++ b/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-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
+            <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" 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
       }
   }
diff --git a/src/components/TabsMenuElements/ServersView/ServersView.vue b/src/components/TabsMenuElements/ServersView/ServersView.vue
index cba63f2..93ef2aa 100644
--- a/src/components/TabsMenuElements/ServersView/ServersView.vue
+++ b/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>