add gamemode filter and multiselection
This commit is contained in:
@@ -3,3 +3,9 @@ indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
+10
-1
@@ -1,21 +1,30 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/standard',
|
||||
'@vue/typescript/recommended'
|
||||
],
|
||||
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'@typescript-eslint/indent': ['error', 2],
|
||||
camelcase: 0
|
||||
}
|
||||
},
|
||||
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/standard',
|
||||
'@vue/typescript/recommended'
|
||||
]
|
||||
}
|
||||
|
||||
Generated
-13463
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="gamemodeChart" ref="container">
|
||||
<LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
|
||||
<Doughnut :data="chart" :options="chartOptions" v-if="progress === 1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
|
||||
import dataLabel from 'chartjs-plugin-datalabels'
|
||||
import { Weapon, Filter, useKillStore } from '@/stores/kill'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import { defineComponent, PropType, Ref, unref } from 'vue'
|
||||
import gamemodes from '../stores/gamemodes.json'
|
||||
|
||||
import LoadingBar from './LoadingBar.vue'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
|
||||
|
||||
export default defineComponent({
|
||||
name: 'GamemodeChart',
|
||||
props: {
|
||||
filters: Object as PropType<Filter>,
|
||||
playerHighlighted: String
|
||||
},
|
||||
emits: ['highlightPlayer'],
|
||||
components: {
|
||||
Doughnut, LoadingBar
|
||||
},
|
||||
mounted () {
|
||||
this.refreshColors++
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
store: useKillStore(),
|
||||
refreshColors: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
progress () {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.gamemode
|
||||
const data = this.store.getList('gamemodes', filter)?.value
|
||||
if (!data) return this.store.fetch('gamemodes', filter).value.progress.value
|
||||
return data.progress.value
|
||||
},
|
||||
colors () {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this.refreshColors
|
||||
const colors = {} as { [key: string]: string }
|
||||
if (this.$refs.container) {
|
||||
const style = getComputedStyle(this.$refs.container as Element)
|
||||
colors.fg = style.getPropertyValue('--foreground')
|
||||
colors.bg = style.getPropertyValue('--bg-color')
|
||||
colors.orange = style.getPropertyValue('--orange')
|
||||
colors.cyan = style.getPropertyValue('--cyan')
|
||||
colors.yellow = style.getPropertyValue('--yellow')
|
||||
colors.green = style.getPropertyValue('--green')
|
||||
colors.purple = style.getPropertyValue('--purple')
|
||||
colors.red = style.getPropertyValue('--red')
|
||||
colors.pink = style.getPropertyValue('--pink')
|
||||
colors.currentLine = style.getPropertyValue('--current-line')
|
||||
} else {
|
||||
colors.fg = '#ffffff'
|
||||
}
|
||||
return colors
|
||||
},
|
||||
chart (): ChartData<'doughnut', number[]> {
|
||||
const colors = [
|
||||
'cyan',
|
||||
'green',
|
||||
'orange',
|
||||
'pink',
|
||||
'purple',
|
||||
'red',
|
||||
'yellow'
|
||||
]
|
||||
const chartData: ChartData<'doughnut', number[]> = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Weapons',
|
||||
borderColor: () => this.colors.fg,
|
||||
backgroundColor: (context) => {
|
||||
return this.colors[
|
||||
colors[(context.dataIndex * 3) % colors.length]
|
||||
]
|
||||
},
|
||||
data: [] as number[]
|
||||
}
|
||||
]
|
||||
}
|
||||
if (!this.sortedList) {
|
||||
return chartData
|
||||
}
|
||||
chartData.datasets[0].data = this.sortedList.map((e) => {
|
||||
if (!this.values) {
|
||||
return 0
|
||||
}
|
||||
return this.values[e].value.kills
|
||||
})
|
||||
return chartData
|
||||
},
|
||||
chartOptions (): ChartOptions<'doughnut'> {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this.$props.playerHighlighted
|
||||
const options: ChartOptions<'doughnut'> = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
animation: { duration: 500 },
|
||||
layout: { autoPadding: false },
|
||||
plugins: {
|
||||
datalabels: {
|
||||
formatter: (value, context) => {
|
||||
const weaponId = this.sortedList[context.dataIndex]
|
||||
// if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
|
||||
return (gamemodes as { [key: string]: string })[weaponId] || weaponId
|
||||
},
|
||||
backgroundColor: (context) => {
|
||||
return context.dataset.backgroundColor(context, options)
|
||||
},
|
||||
borderColor: this.colors.fg,
|
||||
borderRadius: 25,
|
||||
borderWidth: 2,
|
||||
color: this.colors.bg,
|
||||
display: (context) => {
|
||||
return context.dataIndex === context.dataset.data.length - 1
|
||||
? true
|
||||
: 'auto'
|
||||
},
|
||||
padding: 6
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (ctx: any) => {
|
||||
let label: string
|
||||
if (!this.sortedList) {
|
||||
label = ctx.dataset.labels[ctx.dataIndex]
|
||||
} else {
|
||||
label = this.sortedList[ctx.dataIndex]
|
||||
}
|
||||
label += ' (' + this.values[label].value.kills + ' kills)'
|
||||
return label
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return options
|
||||
},
|
||||
values (): { [key: string]: Ref<Weapon> } {
|
||||
const filter = new Filter({ ...this.filters, player: this.playerHighlighted })
|
||||
delete filter.gamemode
|
||||
const data = this.store.getList('gamemodes', filter)?.value.data
|
||||
if (!data) return this.store.fetch('gamemodes', filter).value.data
|
||||
return data
|
||||
},
|
||||
sortedList (): string[] {
|
||||
if (!this.values) return []
|
||||
const weapons = Object.keys(this.values).filter(e => unref(this.values[e]).kills > 0)
|
||||
weapons.sort((a, b) => {
|
||||
if (Number(this.values[a].value.kills) < Number(unref(this.values[b]).kills)) {
|
||||
return -1
|
||||
}
|
||||
if (Number(this.values[a].value.kills) > Number(unref(this.values[b]).kills)) {
|
||||
return 1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
return weapons
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.weaponChart {
|
||||
width: calc(min(50vw, 50vh) - 3em);
|
||||
height: calc(min(50vw, 50vh) - 3em);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 922px) {
|
||||
canvas {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -66,11 +66,11 @@ export default defineComponent({
|
||||
} else if (mustScrollDown) {
|
||||
this.vIndex = Math.min(scrollIndex, this.list.length - this.toLoad)
|
||||
}
|
||||
if (mustScrollDown || mustScrollUp) {
|
||||
const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
|
||||
// if (mustScrollDown || mustScrollUp) {
|
||||
// const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
|
||||
// console.log(this.toLoad)
|
||||
// console.log((this.list.length * this.$props.rowHeight) - (this.vIndex * this.$props.rowHeight) - (this.visibleCount * this.$props.rowHeight))
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ import dataLabel from 'chartjs-plugin-datalabels'
|
||||
import { useKillStore, Player, Filter } from '@/stores/kill'
|
||||
|
||||
import { Scatter } from 'vue-chartjs'
|
||||
import { defineComponent, PropType, Ref, toRaw, triggerRef, unref } from 'vue'
|
||||
import { defineComponent, PropType, toRaw, unref } from 'vue'
|
||||
import { ChartEvent } from 'chart.js/dist/core/core.plugins'
|
||||
import { _DeepPartialObject } from 'chart.js/dist/types/utils'
|
||||
|
||||
@@ -55,7 +55,7 @@ export default defineComponent({
|
||||
if (this.filters) {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.player
|
||||
return this.store.getList('players', filter)?.value.progress
|
||||
return this.store.getList('players', filter)?.value.progress.value
|
||||
}
|
||||
return 0
|
||||
},
|
||||
|
||||
@@ -32,7 +32,6 @@ import { defineComponent, PropType, Ref, isRef } from 'vue'
|
||||
import { useKillStore, Player, Filter } from '@/stores/kill'
|
||||
import VirtualList from './List/VirtualList.vue'
|
||||
import LoadingBar from './LoadingBar.vue'
|
||||
import { cloneProxy } from 'vue-chartjs/dist/utils'
|
||||
|
||||
export default defineComponent({
|
||||
components: { VirtualList, LoadingBar },
|
||||
@@ -51,14 +50,13 @@ export default defineComponent({
|
||||
progress () {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.player
|
||||
return this.store.getList('players', filter)?.value.progress
|
||||
return this.store.getList('players', filter)?.value.progress.value
|
||||
},
|
||||
players (): { [key: string]: Ref<Player> } {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.player
|
||||
const data = this.store.getList('players', filter)?.value.data
|
||||
if (!data) return this.store.fetch('players', filter).value.data
|
||||
console.log(isRef(data), isRef(Object.values(data)[0]))
|
||||
return data
|
||||
},
|
||||
playerList (): (Ref<Player> & { id: string })[] {
|
||||
@@ -149,7 +147,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.playerTable {
|
||||
grid-area: list;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
|
||||
import dataLabel from 'chartjs-plugin-datalabels'
|
||||
import { Weapon, Filter, useKillStore } from '@/stores/kill'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
@@ -41,8 +41,8 @@ export default defineComponent({
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.weapon
|
||||
const data = this.store.getList('weapons', filter)?.value
|
||||
if (!data) return this.store.fetch('weapons', filter).value.progress
|
||||
return data.progress
|
||||
if (!data) return this.store.fetch('weapons', filter).value.progress.value
|
||||
return data.progress.value
|
||||
},
|
||||
colors () {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
@@ -65,7 +65,7 @@ export default defineComponent({
|
||||
}
|
||||
return colors
|
||||
},
|
||||
chart () {
|
||||
chart (): ChartData<'doughnut', number[]> {
|
||||
const colors = [
|
||||
'cyan',
|
||||
'green',
|
||||
@@ -75,13 +75,12 @@ export default defineComponent({
|
||||
'red',
|
||||
'yellow'
|
||||
]
|
||||
const chartData = {
|
||||
const chartData: ChartData<'doughnut', number[]> = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Weapons',
|
||||
labels: this.sortedWeaponList || ([] as string[]),
|
||||
borderColor: () => this.colors.fg,
|
||||
backgroundColor: (context: any) => {
|
||||
backgroundColor: (context) => {
|
||||
return this.colors[
|
||||
colors[(context.dataIndex * 3) % colors.length]
|
||||
]
|
||||
@@ -101,30 +100,30 @@ export default defineComponent({
|
||||
})
|
||||
return chartData
|
||||
},
|
||||
chartOptions () {
|
||||
chartOptions (): ChartOptions<'doughnut'> {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this.$props.playerHighlighted
|
||||
const options = {
|
||||
const options: ChartOptions<'doughnut'> = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
animation: { duration: 500 },
|
||||
layout: { autoPadding: false },
|
||||
plugins: {
|
||||
datalabels: {
|
||||
formatter: (value: any, context: any) => {
|
||||
formatter: (value, context) => {
|
||||
const weaponId = this.sortedWeaponList[context.dataIndex]
|
||||
// if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
|
||||
return (weapons as { [key: string]: string })[weaponId] || weaponId
|
||||
},
|
||||
backgroundColor: (context: any) => {
|
||||
return context.dataset.backgroundColor(context)
|
||||
backgroundColor: (context) => {
|
||||
return context.dataset.backgroundColor(context, options)
|
||||
},
|
||||
borderColor: this.colors.fg,
|
||||
borderRadius: 25,
|
||||
borderWidth: 2,
|
||||
color: this.colors.bg,
|
||||
display: (context: any) => {
|
||||
return context.dataIndex === context.dataset.labels.length - 1
|
||||
display: (context) => {
|
||||
return context.dataIndex === context.dataset.data.length - 1
|
||||
? true
|
||||
: 'auto'
|
||||
},
|
||||
@@ -153,7 +152,6 @@ export default defineComponent({
|
||||
delete filter.weapon
|
||||
const data = this.store.getList('weapons', filter)?.value.data
|
||||
if (!data) return this.store.fetch('weapons', filter).value.data
|
||||
console.log(filter.toURLSearchParams().toString(), filter)
|
||||
return data
|
||||
},
|
||||
sortedWeaponList (): string[] {
|
||||
|
||||
+2
-2
@@ -52,8 +52,8 @@ socket.onmessage = function (e) {
|
||||
}
|
||||
|
||||
function registerWebSocketKill (data : websocketData) {
|
||||
const { player: _, ...filterWithoutPlayer } = store.$state.currentFilter
|
||||
const filter = new Filter(filterWithoutPlayer)
|
||||
const filter = new Filter(store.$state.currentFilter)
|
||||
delete filter.player
|
||||
const list = unref(store.getList('players', filter))
|
||||
if (!list) return
|
||||
if (!(!filter.server || filter.server.includes(data.servername))) return
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"private_match": "Private Match",
|
||||
"aitdm": "Attrition",
|
||||
"at": "Bounty Hunt",
|
||||
"coliseum": "Coliseum",
|
||||
"cp": "Amped Hardpoint",
|
||||
"ctf": "Capture the Flag",
|
||||
"fw": "Frontier War",
|
||||
"lts": "Last Titan Standing",
|
||||
"mfd": "Marked For Death",
|
||||
"ps": "Pilots vs. Pilots",
|
||||
"solo": "Campaign",
|
||||
"tdm": "Skirmish",
|
||||
"ttdm": "Titan Brawl",
|
||||
"sns": "Stick and Stones",
|
||||
"gg": "GunGame",
|
||||
"fd": "Frontier Defense",
|
||||
"ffa": "Free For All"
|
||||
}
|
||||
+11
-8
@@ -1,5 +1,5 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { Ref, ref, shallowRef, triggerRef, unref, isRef } from 'vue'
|
||||
import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
|
||||
|
||||
export class Filter {
|
||||
constructor (filt?:{server?:string[], player?: string, weapon?: string[], host?: string[], map?: string[], gamemode?: string[]}) {
|
||||
@@ -53,7 +53,10 @@ function fetchWithLoading (url: string, progress: (percentage: number) => void)
|
||||
return new Response(
|
||||
new ReadableStream({
|
||||
start (controller) {
|
||||
const reader = response.body!.getReader()
|
||||
if (response.body === null) {
|
||||
throw new Error('response.body is null')
|
||||
}
|
||||
const reader = response.body.getReader()
|
||||
|
||||
read()
|
||||
function read () {
|
||||
@@ -109,7 +112,7 @@ export interface Server extends Kill {
|
||||
|
||||
export interface KillData<T extends Kill> {
|
||||
data: { [key: string]: Ref<T> };
|
||||
progress?: number;
|
||||
progress: Ref<number>;
|
||||
}
|
||||
|
||||
export interface NSServer {
|
||||
@@ -173,7 +176,7 @@ export const useKillStore = defineStore('kill', {
|
||||
fetch <T extends StateProperty> (type:T, filter?:Filter): Ref<KillData<StateType<T>>> {
|
||||
let entry = this.getList(type, filter)
|
||||
if (entry === undefined) {
|
||||
entry = shallowRef<KillData<StateType<T>>>({ data: {} })
|
||||
entry = shallowRef<KillData<StateType<T>>>({ data: {}, progress: ref(0) })
|
||||
unref(this.$state.killData[type as keyof typeof this.$state.killData] as Map<string, Ref<KillData<StateType<T>>>>).set(filter?.toURLSearchParams().toString() ?? '', entry)
|
||||
// console.log(isRef(entry), this.$state.killData)
|
||||
}
|
||||
@@ -181,9 +184,9 @@ export const useKillStore = defineStore('kill', {
|
||||
`https://tone.sleepycat.date/v2/client/${type}?` +
|
||||
filter?.toURLSearchParams() ?? '',
|
||||
(progress) => {
|
||||
if (entry && progress !== 1) {
|
||||
unref(entry).progress = progress
|
||||
triggerRef(entry)
|
||||
if (entry && progress !== 1 && unref(entry).progress.value !== 1) {
|
||||
unref(entry).progress.value = progress
|
||||
triggerRef(unref(entry).progress)
|
||||
}
|
||||
}
|
||||
).then(async (response) => {
|
||||
@@ -194,7 +197,7 @@ export const useKillStore = defineStore('kill', {
|
||||
ref(e[1]) as Ref<StateType<T>>
|
||||
])
|
||||
)
|
||||
unref(entry).progress = 1
|
||||
unref(entry).progress.value = 1
|
||||
|
||||
triggerRef(entry)
|
||||
}
|
||||
|
||||
+75
-26
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div id="filters">
|
||||
<span class="multiselect-wrapper">
|
||||
|
||||
<!-- group-values="servers"
|
||||
group-label="id"
|
||||
label="name"
|
||||
:group-select="true"
|
||||
:options="groupedServers" -->
|
||||
<VueMultiselect
|
||||
selectLabel=""
|
||||
deselectLabel="remove"
|
||||
@@ -21,6 +27,7 @@
|
||||
deselectLabel="remove"
|
||||
placeholder="Select gamemode"
|
||||
v-model="model.gamemode"
|
||||
:custom-label="((e: any) => gamemodeLocale[e] || e)"
|
||||
:options="sortedGamemodeList"
|
||||
:allow-empty="true"
|
||||
:close-on-select="false"
|
||||
@@ -43,7 +50,7 @@
|
||||
</VueMultiselect>
|
||||
<button @click="model.weapon = undefined" :disabled="!model.weapon">X</button>
|
||||
</span>
|
||||
|
||||
<button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
|
||||
<span class="multiselect-wrapper">
|
||||
<VueMultiselect
|
||||
:options-limit="20"
|
||||
@@ -57,7 +64,6 @@
|
||||
></VueMultiselect>
|
||||
<button @click="playerHighlighted = undefined" :disabled="!playerHighlighted">X</button>
|
||||
</span>
|
||||
<button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
|
||||
</div>
|
||||
|
||||
<div id="playerView">
|
||||
@@ -79,6 +85,10 @@
|
||||
:playerHighlighted="playerHighlighted?.id"
|
||||
>
|
||||
</WeaponChart>
|
||||
<GamemodeChart
|
||||
:filters="{ player: playerHighlighted?.id, ...filters }"
|
||||
:playerHighlighted="playerHighlighted?.id"
|
||||
></GamemodeChart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -87,24 +97,31 @@ import { Player, Weapon, Server, Kill, useKillStore, Filter } from '@/stores/kil
|
||||
import PlayerList from '@/components/PlayerList.vue'
|
||||
import PlayerChart from '@/components/PlayerChart.vue'
|
||||
import WeaponChart from '@/components/WeaponChart.vue'
|
||||
import GamemodeChart from '@/components/GamemodeChart.vue'
|
||||
import { Ref, defineComponent, unref } from 'vue'
|
||||
import VueMultiselect from 'vue-multiselect'
|
||||
import 'vue-multiselect/dist/vue-multiselect.css'
|
||||
import weapons from '../stores/weapons.json'
|
||||
import gamemodes from '../stores/gamemodes.json'
|
||||
import router from '@/router'
|
||||
|
||||
function filterOutNull<T> (value:T | null):value is T {
|
||||
return value !== null
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PlayerView',
|
||||
components: {
|
||||
VueMultiselect,
|
||||
PlayerList,
|
||||
PlayerChart,
|
||||
WeaponChart
|
||||
WeaponChart,
|
||||
GamemodeChart
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
model: { server: undefined, weapon: undefined } as unknown as {
|
||||
model: { } as unknown as {
|
||||
weapon: string[] | undefined;
|
||||
server: string[] | undefined;
|
||||
gamemode: string[] | undefined;
|
||||
@@ -112,7 +129,8 @@ export default defineComponent({
|
||||
filters: new Filter(),
|
||||
store: useKillStore(),
|
||||
playerHighlighted: undefined as (Player & { id: string }) | undefined,
|
||||
weaponLocale: weapons as { [key: string]: string }
|
||||
weaponLocale: weapons as { [key: string]: string },
|
||||
gamemodeLocale: gamemodes as { [key: string]: string }
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
@@ -128,10 +146,8 @@ export default defineComponent({
|
||||
},
|
||||
computed: {
|
||||
servers (): { [key: string]: Ref<Server> } {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.server
|
||||
const data = this.store.getList('servers', filter)?.value.data
|
||||
if (!data) return unref(this.store.fetch('servers', filter)).data
|
||||
const data = this.store.getList('servers')?.value.data
|
||||
if (!data) return unref(this.store.fetch('servers')).data
|
||||
return data
|
||||
},
|
||||
groupedServers () {
|
||||
@@ -149,11 +165,11 @@ export default defineComponent({
|
||||
return hosts
|
||||
},
|
||||
weapons (): { [key: string]: Ref<Weapon> } {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.weapon
|
||||
delete filter.player
|
||||
const data = this.store.getList('weapons', filter)?.value.data
|
||||
if (!data) return this.store.fetch('weapons', filter).value.data
|
||||
// const filter = new Filter(this.filters)
|
||||
// delete filter.weapon
|
||||
// delete filter.player
|
||||
const data = this.store.getList('weapons')?.value.data
|
||||
if (!data) return this.store.fetch('weapons').value.data
|
||||
return data
|
||||
},
|
||||
players (): { [key: string]: Ref<Player> } {
|
||||
@@ -164,11 +180,11 @@ export default defineComponent({
|
||||
return data
|
||||
},
|
||||
gamemodes (): { [key: string]: Ref<Kill> } {
|
||||
const filter = new Filter(this.filters)
|
||||
delete filter.gamemode
|
||||
delete filter.player
|
||||
const data = this.store.getList('gamemodes', filter)?.value.data
|
||||
if (!data) return this.store.fetch('gamemodes', filter).value.data
|
||||
// const filter = new Filter(this.filters)
|
||||
// delete filter.gamemode
|
||||
// delete filter.player
|
||||
const data = this.store.getList('gamemodes')?.value.data
|
||||
if (!data) return this.store.fetch('gamemodes').value.data
|
||||
return data
|
||||
},
|
||||
sortedWeaponList (): string[] {
|
||||
@@ -204,6 +220,14 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
model: {
|
||||
handler () {
|
||||
if (this.model.gamemode?.length === 0) this.model.gamemode = undefined
|
||||
if (this.model.server?.length === 0) this.model.server = undefined
|
||||
if (this.model.weapon?.length === 0) this.model.weapon = undefined
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
players () {
|
||||
const player = this.$route.query.player?.toString()
|
||||
if (player && this.playerHighlighted?.id !== player) {
|
||||
@@ -255,22 +279,24 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
if (this.filters.weapon !== this.$route.query.weapon) {
|
||||
this.model.weapon = [this.$route.query.weapon].flat().filter(e => e ?? false).map(e => e!.toString())
|
||||
if (this.$route.query.weapon) this.model.weapon = [this.$route.query.weapon].flat().filter(filterOutNull).map(e => e.toString())
|
||||
else this.model.weapon = undefined
|
||||
}
|
||||
if (this.filters.server !== this.$route.query.server) {
|
||||
if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(e => e ?? false).map(e => e!.toString())
|
||||
if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(filterOutNull).map(e => e.toString())
|
||||
else this.model.server = undefined
|
||||
}
|
||||
if (this.filters.gamemode !== this.$route.query.gamemode) {
|
||||
if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
|
||||
if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(filterOutNull).map(e => e.toString())
|
||||
else this.model.gamemode = undefined
|
||||
}
|
||||
this.applyFilters()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.multiselect {
|
||||
margin: 0 0.5em 1em 0.5em;
|
||||
}
|
||||
@@ -290,9 +316,9 @@ export default defineComponent({
|
||||
display: grid;
|
||||
overflow: auto;
|
||||
grid-template-areas:
|
||||
"list chart"
|
||||
"list info";
|
||||
grid-template-columns: 50% 50%;
|
||||
"list chart chart"
|
||||
"list info1 info2";
|
||||
grid-template-columns: 50% 25% 25%;
|
||||
grid-template-rows: 50% 50%;
|
||||
}
|
||||
|
||||
@@ -319,11 +345,34 @@ export default defineComponent({
|
||||
|
||||
.playerChart {
|
||||
display: none;
|
||||
grid-area: "chart";
|
||||
}
|
||||
|
||||
.weaponChart {
|
||||
display: none;
|
||||
grid-area: 'info1';
|
||||
}
|
||||
.gamemodeChart{
|
||||
display:none;
|
||||
grid-area: 'info2';
|
||||
}
|
||||
.playerTable{
|
||||
grid-area: 'list';
|
||||
}
|
||||
}
|
||||
|
||||
.playerChart {
|
||||
grid-area: chart;
|
||||
}
|
||||
|
||||
.weaponChart {
|
||||
grid-area: info1;
|
||||
}
|
||||
.gamemodeChart{
|
||||
grid-area: info2;
|
||||
}
|
||||
.playerTable{
|
||||
grid-area: list;
|
||||
}
|
||||
|
||||
#filters {
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"noImplicitAny": false,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
Reference in New Issue
Block a user