ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change data loading to centralized store

Browse Source
This commit is contained in:
legonzaur
2023-03-23 13:00:57 +01:00
parent eaa773b7ec
commit 5e8bdd7d4b
5 changed files with 168 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerChart.vue
+24 -15
View File
@@ -14,6 +14,8 @@ import {
Legend
} from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation'
import { Store, useStore } from 'vuex'
import { Player, Weapon } from '@/store/index'
import { Scatter } from 'vue-chartjs'
import { defineComponent } from 'vue'
@@ -23,7 +25,7 @@ ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annota
export default defineComponent({
name: 'PlayerChart',
props: {
players: Object
filters: Object
},
components: {
Scatter
@@ -37,15 +39,24 @@ export default defineComponent({
labels: [] as string[],
borderColor: '#f87979',
backgroundColor: '#f87979',
pointRadius: [1],
pointStyle: ['dot'],
data: [] as {x:number, y:number}[]
}
]
}
if (!this.$props.players) {
if (!this.players) {
return chartData
}
chartData.datasets[0].labels = Object.keys(this.$props.players)
chartData.datasets[0].data = Object.values(this.$props.players).map((e:any) => ({ x: e.deaths, y: e.kills }))
chartData.datasets[0].labels = this.playerIdList
chartData.datasets[0].data = this.playerIdList.map(e => {
if (!this.players) {
return { x: 0, y: 0 }
}
return { x: this.players[e].deaths, y: this.players[e].kills }
})
chartData.datasets[0].pointRadius = [1].fill(1, 0, chartData.datasets[0].labels.length)
chartData.datasets[0].pointStyle = ['dot'].fill('dot', 0, chartData.datasets[0].labels.length)
return chartData
},
chartOptions () {
@@ -56,10 +67,10 @@ export default defineComponent({
callbacks: {
label: (ctx:any) => {
let label:string
if (!this.$props.players) {
if (!this.players) {
label = ctx.dataset.labels[ctx.dataIndex]
} else {
label = this.$props.players[ctx.dataset.labels[ctx.dataIndex]].username
label = this.players[ctx.dataset.labels[ctx.dataIndex]].username
}
label += ' (' + ctx.parsed.y + ' kills ' + ctx.parsed.x + ' deaths)'
return label
@@ -69,11 +80,11 @@ export default defineComponent({
annotation: {}
}
}
if (!this.$props.players) {
if (!this.players) {
return options
}
const maxX = Math.max(...Object.values(this.$props.players).map(e => e.deaths))
const maxY = Math.max(...Object.values(this.$props.players).map(e => e.kills))
const maxX = Math.max(...Object.values(this.players).map(e => e.deaths))
const maxY = Math.max(...Object.values(this.players).map(e => e.kills))
let endX, endY
if (maxY > maxX) {
endX = maxX
@@ -97,16 +108,14 @@ export default defineComponent({
}
}
return options
}
},
/* watch: {
players: function (newval: any, oldval: any): void {
players ():{[key:string]:Player} { return this.store.getters.getPlayerList(this.filters) },
playerIdList ():string[] { return Object.keys(this.players) }
}
}, */
},
data () {
return {
store: useStore()
}
}
})
src/components/PlayerList.vue
+24 -13
View File
@@ -9,7 +9,7 @@
<span v-on:click="sortPlayerList('avg_kill_distance')">average kill distance</span>
</div>
<div class="player" v-for="playerId in playerIdList" v-bind:key="playerId">
<span>{{ $props.players[playerId].username }}</span>
<span>{{ players[playerId].username }}</span>
<span>{{ players[playerId].kills }}</span>
<span>{{ players[playerId].deaths }}</span>
<span>{{ Math.round(players[playerId].kills / players[playerId].deaths * 100) / 100 }}</span>
@@ -21,27 +21,37 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { Player } from '@/store/index'
import { useStore } from 'vuex'
export default defineComponent({
props: {
players: Object
filters: Object
},
data () {
return {
sortingData: { direction: -1, argument: '' },
playerIdList: [] as string[]
sortingData: { direction: -1, argument: '' as keyof Player | 'k/d' },
playerIdList: [] as string[],
store: useStore()
}
},
computed: {
players ():{[key:string]:Player} { return this.store.getters.getPlayerList(this.filters) }
},
watch: {
players: function (newval: any, oldval: any): void {
players: {
handler (newval:{[key:string]:Player}): void {
if (!newval) return
this.playerIdList = []
this.sortingData.direction *= -1
this.playerIdList = Object.keys(newval)
this.sortPlayerList(this.sortingData.argument)
},
immediate: true
}
},
methods: {
sortPlayerList (arg: string) {
sortPlayerList (arg: ((keyof Player) | 'k/d')) {
if (arg === this.sortingData.argument) {
this.sortingData.direction *= -1
} else {
@@ -51,15 +61,17 @@ export default defineComponent({
}
this.sortingData.argument = arg
this.playerIdList.sort((a:any, b:any) => {
if (!this.$props.players) {
this.playerIdList.sort((a:string, b:string) => {
if (!this.players) {
return 0
}
let varA = this.$props.players[a][arg]
let varB = this.$props.players[b][arg]
let varA, varB
if (arg === 'k/d') {
varA = this.$props.players[a].kills / this.$props.players[a].deaths
varB = this.$props.players[b].kills / this.$props.players[b].deaths
varA = this.players[a].kills / this.players[a].deaths
varB = this.players[b].kills / this.players[b].deaths
} else {
varA = this.players[a][arg]
varB = this.players[b][arg]
}
if (varA < varB) {
@@ -68,7 +80,6 @@ export default defineComponent({
if (varA > varB) {
return 1 * this.sortingData.direction
}
// names must be equal
return 0
})
}
src/main.ts
+4
View File
@@ -4,3 +4,7 @@ import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
store.dispatch('fetchServers', {})
store.dispatch('fetchPlayers', {})
store.dispatch('fetchWeapons', {})
src/store/index.ts
+74 -9
View File
@@ -2,34 +2,99 @@
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
interface Player {
export interface Player {
deaths: number;
username: string;
maxKillDistance: number;
avgKillDistance: number;
// eslint-disable-next-line camelcase
max_kill_distance: number;
// eslint-disable-next-line camelcase
avg_kill_distance: number;
kills: number;
}
export interface Weapon {
// eslint-disable-next-line camelcase
max_kill_distance: number;
// eslint-disable-next-line camelcase
avg_kill_distance: number;
kills: number;
}
export interface Server{
name:string;
id:number;
description:string
}
// define your typings for the store state
export interface State {
players: Player[];
servers: Server[]
players: { [key: string]: { [key: string]: Player } };
weapons: { [key: string]:{ [key: string]: Weapon }};
}
// define injection key
// eslint-disable-next-line symbol-description
export const key: InjectionKey<Store<State>> = Symbol()
export default createStore({
export default createStore<State>({
state: {
servers: [],
players: {},
weapons: {}
},
getters: {
getPlayerList (weapon, server) {
console.log('e')
getPlayerList: (state) => ({ server, weapon }: { server?: number, weapon?: string }) => {
return state.players[(server || '') + (weapon || '')]
},
getWeaponList: (state) => ({ server, player }: { server?: number, player?: string }) => {
return state.weapons[(server || '') + (player || '')]
}
},
mutations: {
setPlayers (state, data: { data: { [key: string]: Player }, filters: { weapon: string, server: number } }) {
state.players[(data.filters.server || '') + (data.filters.weapon || '')] = data.data
},
setWeapons (state, data:{data: {[key:string]:Weapon}, filters:{server:string, player:string}}) {
state.weapons[(data.filters.server || '') + (data.filters.player || '')] = data.data
},
setServers (state, data) {
state.servers = data
}
},
actions: {
async fetchPlayers (context, { weapon, server }) {
const searchParams: Record<string, string> = {}
if (weapon?.toString()) { searchParams.weapon = weapon }
if (server?.toString()) { searchParams.server = server }
const response = await fetch(
'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
)
const data = await response.json()
Object.keys(data).forEach(e => {
data[e].kills = Number(data[e].kills)
data[e].deaths = Number(data[e].deaths)
data[e].max_kill_distance = Number(data[e].max_kill_distance)
data[e].avg_kill_distance = Number(data[e].avg_kill_distance)
})
context.commit('setPlayers', { data, filters: { weapon, server } })
},
async fetchWeapons (context, { player, server }) {
const searchParams: Record<string, string> = {}
if (player?.toString()) { searchParams.player = player }
if (server?.toString()) { searchParams.server = server }
const response = await fetch(
'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
)
const data = await response.json()
context.commit('setWeapons', { data, filters: { player, server } })
},
async fetchServers (context) {
const response = await fetch(
'https://tone.sleepycat.date/v1/client/servers'
)
const data = await response.json()
context.commit('setServers', data)
}
},
mutations: {},
actions: {},
modules: {}
})
src/views/PlayerView.vue
+36 -58
View File
@@ -1,82 +1,60 @@
<template>
<select v-model="filters.server" v-on:change="fetchPlayers(filters)">
<select v-on:change="changeFilter({ server: ($event.target as HTMLInputElement).value })">
<option></option>
<option v-for="(serverData, serverId) in servers" v-bind:key="serverId" :value="serverId">{{ serverData.name }}</option>
<option v-for="(serverData) in servers" v-bind:key="serverData.id" :value="serverData.id">{{ serverData.name }}
</option>
</select>
<select v-model="filters.weapon" v-on:change="fetchPlayers(filters)">
<select v-on:change="changeFilter({ weapon: ($event.target as HTMLInputElement).value })">
<option></option>
<option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
</select>
<div class="playersData">
<PlayerList :players="players"></PlayerList>
<PlayerChart :players="players"></PlayerChart>
<PlayerList :filters="filters"></PlayerList>
<PlayerChart :filters="filters"></PlayerChart>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { Store, useStore } from 'vuex'
import { Player, Weapon, Server } from '@/store/index'
import PlayerList from '@/components/PlayerList.vue'
import PlayerChart from '@/components/PlayerChart.vue'
import { defineComponent } from 'vue'
@Options({
export default defineComponent({
name: 'PlayerView',
components: {
PlayerList, PlayerChart
}
})
export default class PlayerView extends Vue {
players: any = {}
weapons: any = {}
servers: any = {}
filters: any = {}
created () {
this.fetchPlayers({})
this.fetchWeapons({})
this.fetchServers()
}
async fetchWeapons ({ server }: { server?: string }) {
const searchParams: Record<string, string> = {}
if (server) { searchParams.server = server }
const response = await fetch(
'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
)
const data = await response.json()
this.weapons = data
}
async fetchServers () {
const response = await fetch(
'https://tone.sleepycat.date/v1/client/servers'
)
const data = await response.json()
this.servers = data
console.log(this.servers)
}
},
data () {
return { a: 1 }
return {
filters: {},
store: useStore()
} as { filters: { weapon?: string, server?: string }, store: Store<any> }
},
computed: {
servers (): Server[] { return this.store.state.servers },
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) },
weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) }
},
methods: {
async changeFilter ({ weapon, server }: { weapon?: string, server?: string }) {
const filters = JSON.parse(JSON.stringify(this.filters))
if (weapon !== undefined) filters.weapon = weapon
if (server !== undefined) filters.server = server
if (weapon === '') delete filters.weapon
if (server === '') delete filters.server
const promises = []
if (!this.store.getters.getPlayerList(filters)) promises.push(this.store.dispatch('fetchPlayers', filters))
if (!this.store.getters.getWeaponList(filters)) promises.push(this.store.dispatch('fetchWeapons', filters))
await Promise.all(promises)
// Delay the update of filters propery after we fetch the data to the API as changing it will cause subcomponents to reload before data is fetched
this.filters = filters
}
async fetchPlayers ({ weapon, server }: { weapon?: string, server?: string }) {
const searchParams: Record<string, string> = {}
if (weapon?.toString()) { searchParams.weapon = weapon }
if (server?.toString()) { searchParams.server = server }
console.log(server, weapon)
console.log('https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams))
const response = await fetch(
'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
)
const data = await response.json()
Object.keys(data).forEach(e => {
data[e].kills = Number(data[e].kills)
data[e].deaths = Number(data[e].deaths)
data[e].max_kill_distance = Number(data[e].max_kill_distance)
data[e].avg_kill_distance = Number(data[e].avg_kill_distance)
})
this.players = data
}
}
})
</script>
<style scoped>