Browse Source

view messages dialog

master
gsd 1 year ago
parent
commit
d33d8cf98a
  1. 1
      src/App.vue
  2. 10
      src/api/GlobalApi.js
  3. 2
      src/components/ActionDialogs/BanListDialog.vue
  4. 3
      src/components/ActionDialogs/FindPlayer.vue
  5. 2
      src/components/ActionDialogs/GametimeDialog.vue
  6. 106
      src/components/ActionDialogs/MessagesDialog.vue
  7. 24
      src/components/Others/ServerSelect.vue
  8. 8
      src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue
  9. 7
      src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
  10. 4
      src/css/menus.css
  11. 16
      src/css/tables.css

1
src/App.vue

@ -53,6 +53,7 @@ import "@/css/rounded.css";
import "@/css/text.css"; import "@/css/text.css";
import "@/css/baseui.css"; import "@/css/baseui.css";
import "@/css/menus.css"; import "@/css/menus.css";
import "@/css/tables.css";
import TabsMenu from "@/components/TabsMenu.vue"; import TabsMenu from "@/components/TabsMenu.vue";
import LoaderPage from "@/components/Others/Loader/LoaderPage.vue"; import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";

10
src/api/GlobalApi.js

@ -54,6 +54,16 @@ export default class GlobalApi {
return "неизвестный"; return "неизвестный";
} }
getServers4Selector() {
let r = [];
for (const mode in this.stats['servers']) {
for (const srv in this.stats['servers'][mode]) {
r.push({"srv": this.stats['servers'][mode][srv]['key'], "name": this.stats['servers'][mode][srv]['name']})
}
}
return r;
}
async fillThis(value) { async fillThis(value) {
console.log(`[API] load: ${value}`); console.log(`[API] load: ${value}`);
this.load_stages.add(value); this.load_stages.add(value);

2
src/components/ActionDialogs/BanListDialog.vue

@ -4,7 +4,7 @@
<div class="md-layout md-alignment-bottom-center"> <div class="md-layout md-alignment-bottom-center">
<div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only"> <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
<h5 style="padding-left: 5%; padding-right: 5%">Быстрее иди играть чтоб оказаться тут!</h5> <h5 style="padding-left: 5%; padding-right: 5%">Быстрее иди играть чтоб оказаться тут!</h5>
<md-table v-model="banlist.mdData" md-card> <md-table v-model="banlist.mdData" md-card class="api-table">
<md-table-row class="clickable" slot="md-table-row" slot-scope="{ item }" v-on:click="$refs.bld_bvd.showMe(true, item)"> <md-table-row class="clickable" slot="md-table-row" slot-scope="{ item }" v-on:click="$refs.bld_bvd.showMe(true, item)">
<md-table-cell md-label="#Id" md-numeric>{{ item.id }}</md-table-cell> <md-table-cell md-label="#Id" md-numeric>{{ item.id }}</md-table-cell>
<md-table-cell md-label="Имя игрока">{{ item.player_name }}</md-table-cell> <md-table-cell md-label="Имя игрока">{{ item.player_name }}</md-table-cell>

3
src/components/ActionDialogs/FindPlayer.vue

@ -62,7 +62,8 @@ export default {
this.$refs.pv.getPlayer(); this.$refs.pv.getPlayer();
}) })
}, },
showFPD(){ showFPD(preset){
if (preset !== undefined) this.player_string = preset;
this.showFindPlayerDialog = true; this.showFindPlayerDialog = true;
}, },
closeFPD(){ closeFPD(){

2
src/components/ActionDialogs/GametimeDialog.vue

@ -3,7 +3,7 @@
<md-dialog :md-active.sync="show" @close="show=false"> <md-dialog :md-active.sync="show" @close="show=false">
<div class="md-layout md-alignment-bottom-center"> <div class="md-layout md-alignment-bottom-center">
<div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only"> <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
<md-table v-model="gametime.mdData" md-card> <md-table v-model="gametime.mdData" md-card class="api-table">
<md-table-row slot="md-table-row" slot-scope="{ item }"> <md-table-row slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="Никнейм">{{ item.player_name }}</md-table-cell> <md-table-cell md-label="Никнейм">{{ item.player_name }}</md-table-cell>
<md-table-cell md-label="Карта">{{ item.map }}</md-table-cell> <md-table-cell md-label="Карта">{{ item.map }}</md-table-cell>

106
src/components/ActionDialogs/MessagesDialog.vue

@ -0,0 +1,106 @@
<template>
<div>
<md-dialog :md-active.sync="show" @close="show=false">
<div class="md-layout md-alignment-bottom-center">
<div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
<md-table v-model="messages.mdData" md-card class="api-table">
<md-table-row slot="md-table-row" slot-scope="{ item }" v-on:click="steam64 !== null?'':$refs.md_fp.showFPD(item.account_name)" :class="steam64 !== null?'':'clickable'">
<md-table-cell md-label="Никнейм" v-if="steam64 === null">{{ item.account_name }}</md-table-cell>
<md-table-cell md-label="Время">{{ new Date(item.utime*1000).toLocaleString() }}</md-table-cell>
<md-table-cell md-label="Сервер">{{ $API.getHumanServerName(item.server_id) }}</md-table-cell>
<md-table-cell md-label="Сообщение">{{ item.message }}</md-table-cell>
</md-table-row>
<md-table-pagination ref="md_p"
:md-page-size="rowsPerPage"
:md-page-options="[5, 10, 15]"
:md-update="update"
:md-data.sync="messages"
:md-label="''"
:md-separator="'из'"
style="font-family: tf2build"/>
</md-table>
<div style="padding-right: 2.5%; padding-left: 2.5%">
<md-field style="margin: 0% 0%;" v-if="srv_setted===false">
<label style="font-family: tf2secondary">Выбрать сервер</label>
<md-select v-model="srv" :mdClass="'ssm'">
<md-option :value="''">Выбрать все</md-option>
<md-option v-for="srv in $API.getServers4Selector()" :key="srv['srv']" :value="srv['srv']">{{srv['name']}}</md-option>
</md-select>
</md-field>
<md-field style="margin: 0% 0%">
<label style="font-family: tf2secondary">Фильтр сообщений</label>
<md-input v-model="filter"></md-input>
</md-field>
</div>
<md-button style="float: left" class="btn-hand" v-on:click="update(1, rowsPerPage)">Искать</md-button>
<md-button style="float: right" class="btn-colored" v-on:click="showMe(false)">Закрыть</md-button>
</div>
</div>
</md-dialog>
<md-dialog :md-active.sync="loading">
<div class="md-layout md-alignment-bottom-center">
<div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
<h3 class="tf2rainbow" style="text-align: center; padding: 2% 5%">Загрузка</h3>
</div>
</div>
</md-dialog>
<FindPlayer ref="md_fp"/>
</div>
</template>
<script>
import axios from "axios";
import Random from "@/api/Random";
import FindPlayer from "@/components/ActionDialogs/FindPlayer.vue";
export default {
name: "MessagesDialog",
components: {FindPlayer},
data: () => ({
show: false,
loading: false,
rowsPerPage: 5,
filter: "",
steam64: null,
srv: null,
srv_setted: false,
messages: {
mdCount: 1,
mdPage: 1,
mdData: []
},
}),
methods: {
showMe(b, steam64, srv) {
if (steam64 !== undefined) this.steam64 = steam64;
if (srv !== undefined) {
this.srv_setted = true;
this.srv = srv;
}
if (b===true) this.update(1, this.rowsPerPage)
else this.show = b;
},
update(page, limit) {
if (this.loading === true) return;
console.log(page, limit, this.rowsPerPage);
const offset = Math.abs((page - 1) * limit);
this.loading = true;
axios.post(`api/profile/messages${this.steam64 !== null ? '/account' : ''}?${this.steam64 === null?'':`steam64=${this.steam64}&`}${this.srv===null?'':`srv=${this.srv}&`}limit=${Math.abs(limit)}&offset=${offset}` + Random.getRndWebAppend(), {"message":this.filter}).then(
(response) => {
if (response.status === 200) {
this.messages.mdData = response.data['result'];
this.messages.mdCount = response.data['count'];
this.messages.mdPage = page;
} else {
console.log("cannot get messages list");
}
this.show = true;
if (this.$refs.md_p !== undefined)
this.$refs.md_p.updatePage();
}
).catch((e) => {console.log(e)}).finally(() => this.loading = false)
}
}
}
</script>

24
src/components/Others/ServerSelect.vue

@ -0,0 +1,24 @@
<template>
<md-select v-model="selected">
<md-option :value="null">Выбрать все</md-option>
<md-option v-for="srv in servers" :key="srv['srv']" :value="srv['srv']">{{srv['name']}}</md-option>
</md-select>
</template>
<script>
export default {
name: "ServerSelect",
data: () => ({
servers: [],
selected: null
}),
beforeMount() {
this.servers = this.$API.getServers4Selector();
console.log(this.servers);
},
methods: {
getSelected() { return this.selected; }
}
}
</script>

8
src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue

@ -82,7 +82,7 @@
<ProfileViewer_Internal :steam64="player['steamids']['steam64']" ref="alt_ipv" id="alt_ipv"/> <ProfileViewer_Internal :steam64="player['steamids']['steam64']" ref="alt_ipv" id="alt_ipv"/>
</div> </div>
<div :class="`md-layout-item md-size-${f_size} md-small-size-100`"> <div :class="`md-layout-item md-size-${f_size} md-small-size-100`">
<div style="justify-content: right; display: flex; padding: 10% 0%"> <div style="justify-content: right; display: flex; padding-top: 10%">
<img :src="getAvatar()" style="border-radius: 15px;"> <img :src="getAvatar()" style="border-radius: 15px;">
</div> </div>
<p class="profile-text" style="text-align: right; cursor: pointer;" v-if="this.player['play_on'] !== null && 'ip' in this.player['play_on']" v-on:click="showIP()">IP : {{player_ip}}</p> <p class="profile-text" style="text-align: right; cursor: pointer;" v-if="this.player['play_on'] !== null && 'ip' in this.player['play_on']" v-on:click="showIP()">IP : {{player_ip}}</p>
@ -90,7 +90,9 @@
<p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'kills' in this.player['killfeed']">Убийств : {{this.player['killfeed']['kills']}}</p> <p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'kills' in this.player['killfeed']">Убийств : {{this.player['killfeed']['kills']}}</p>
<p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'assists' in this.player['killfeed']">Помощи : {{this.player['killfeed']['assists']}}</p> <p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'assists' in this.player['killfeed']">Помощи : {{this.player['killfeed']['assists']}}</p>
<p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'deads' in this.player['killfeed']">Смертей : {{this.player['killfeed']['deads']}}</p> <p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'deads' in this.player['killfeed']">Смертей : {{this.player['killfeed']['deads']}}</p>
<p class="profile-text" style="text-align: right" v-if="'messages' in this.player">Сообщений : {{this.player['messages']}}</p> <p class="profile-text" style="text-align: right" v-if="this.player['killfeed'] !== null && 'suicides' in this.player['killfeed']">Суицидов : {{this.player['killfeed']['suicides']}}</p>
<MessagesDialog ref="pc_md"/>
<p class="profile-text clickable" style="text-align: right" v-if="'messages' in this.player" v-on:click="$refs.pc_md.showMe(true, player['steamids']['steam64'])">Сообщений : {{this.player['messages']}}</p>
<p class="profile-text" style="text-align: right; cursor: pointer" v-on:click="loadingUserTime()">Наиграно : {{usertime.total}}</p> <p class="profile-text" style="text-align: right; cursor: pointer" v-on:click="loadingUserTime()">Наиграно : {{usertime.total}}</p>
<div style="justify-content: right; display: flex"> <div style="justify-content: right; display: flex">
<DiscordSvg :h="'10%'" :w="'40'" style="margin-left: 5%" v-if="this.player['attached_discords'].filter(v => v['active'] === 1).length>0" :url="`https://discord.com/channels/@me/${this.player['attached_discords'].filter(v => v['active'] === 1)[0]['discord_id']}`"/> <DiscordSvg :h="'10%'" :w="'40'" style="margin-left: 5%" v-if="this.player['attached_discords'].filter(v => v['active'] === 1).length>0" :url="`https://discord.com/channels/@me/${this.player['attached_discords'].filter(v => v['active'] === 1)[0]['discord_id']}`"/>
@ -111,10 +113,12 @@ import SnackLoader from "@/components/Others/Loader/SnackLoader.vue";
import Random from "@/api/Random"; import Random from "@/api/Random";
import BanViewDialog from "@/components/ActionDialogs/BanViewDialog.vue"; import BanViewDialog from "@/components/ActionDialogs/BanViewDialog.vue";
import GametimeDialog from "@/components/ActionDialogs/GametimeDialog.vue"; import GametimeDialog from "@/components/ActionDialogs/GametimeDialog.vue";
import MessagesDialog from "@/components/ActionDialogs/MessagesDialog.vue";
export default { export default {
name: "ProfileContainer", name: "ProfileContainer",
components: { components: {
MessagesDialog,
GametimeDialog, GametimeDialog,
BanViewDialog, BanViewDialog,
SnackLoader, ProfileViewer_Internal: () => import("@/components/Others/Loader/ProfileViewer.vue"), SteamSvg, DiscordSvg}, SnackLoader, ProfileViewer_Internal: () => import("@/components/Others/Loader/ProfileViewer.vue"), SteamSvg, DiscordSvg},

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

@ -11,10 +11,11 @@
</div> </div>
</div> </div>
<div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%"> <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 md-scrollbar" style="height: 610px; overflow-y: auto;"> <div class="md-layout-item md-size-50 server-info-rounded rounded-only md-small-size-100 md-scrollbar" style="height: 660px; overflow-y: auto;">
<img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px"> <img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
<div> <div>
<p class="p-server">{{serverData['description']}}</p> <p class="p-server">{{serverData['description']}}</p>
<p class="p-server clickable" v-if="this.$API.player.auth('steam') === true" v-on:click="$refs.sfi_md.showMe(true, undefined, serverData['key'])">Чат сервера</p>
<hr width="30%"> <hr width="30%">
</div> </div>
<div style="justify-content: center; display: flex; margin-top: 2.5%"> <div style="justify-content: center; display: flex; margin-top: 2.5%">
@ -52,6 +53,7 @@
</div> </div>
</div> </div>
</md-dialog> </md-dialog>
<MessagesDialog ref="sfi_md"/>
</div> </div>
</template> </template>
@ -59,10 +61,11 @@
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue"; import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue"; import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue";
import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue"; import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue";
import MessagesDialog from "@/components/ActionDialogs/MessagesDialog.vue";
export default { export default {
name: "ServerFullInfo", name: "ServerFullInfo",
components: {PlayerExtendedInfo, TerminalSvg, SteamSvg}, components: {MessagesDialog, PlayerExtendedInfo, TerminalSvg, SteamSvg},
props: { props: {
serverData: Object, serverData: Object,
}, },

4
src/css/menus.css

@ -6,4 +6,8 @@
.md-list-item-content { .md-list-item-content {
font-family: tf2secondary; font-family: tf2secondary;
color: #f5e5c1; color: #f5e5c1;
}
.ssm {
max-width: 250px !important;
} }

16
src/css/tables.css

@ -0,0 +1,16 @@
@media(width > 300px) {
}
@media(width > 600px) {
.api-table {
max-width: 600px; min-width: 600px
}
}
@media(width > 960px) {
.api-table {
max-width: 800px; min-width: 800px
}
}
Loading…
Cancel
Save