This commit is contained in:
2022-01-29 09:06:19 +01:00
parent da75f16738
commit b71f517acf
2 changed files with 41 additions and 14 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "csgowtf", "name": "csgowtf",
"version": "0.29.1", "version": "0.29.2",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",

View File

@@ -1,15 +1,26 @@
<template> <template>
<div class="player-flash"> <div class="player-flash">
<h3 class="text-center mt-2">Flash-<span v-if="toggle === 'duration'">Duration</span><span v-if="toggle === 'total'">Count</span></h3> <h3 class="text-center mt-2">Flash</h3>
<div class="flexbreak"></div> <div class="flex-break"></div>
<div class="toggle-btn"> <div class="toggle-btn">
<span class="fs-6 text-muted" @click="toggleShow"> <div @click="toggleShow">
<span>Count: </span> <table class="table table-borderless text-muted">
<tr>
<td>
<span class="text-uppercase float-end" :class="toggle === 'duration' ? 'text-warning' : ''">Duration</span>
</td>
<td class="text-center">
<i id="toggle-off" class="fa fa-toggle-off show"></i> <i id="toggle-off" class="fa fa-toggle-off show"></i>
<i id="toggle-on" class="fa fa-toggle-on"></i> <i id="toggle-on" class="fa fa-toggle-on"></i>
</span> </td>
<td>
<span class="text-uppercase float-start" :class="toggle === 'total' ? 'text-warning' : ''">Count</span>
</td>
</tr>
</table>
</div> </div>
<div class="flexbreak"></div> </div>
<div class="flex-break"></div>
<div id="flash-chart-1"></div> <div id="flash-chart-1"></div>
<div id="flash-chart-2"></div> <div id="flash-chart-2"></div>
</div> </div>
@@ -21,7 +32,7 @@ import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/componen
import {BarChart} from 'echarts/charts'; import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers'; import {CanvasRenderer} from 'echarts/renderers';
import {onMounted, onUnmounted, ref, watch} from "vue"; import {onMounted, onUnmounted, ref, watch} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils"; import {checkStatEmpty, getPlayerArr} from "@/utils";
import {useStore} from "vuex"; import {useStore} from "vuex";
export default { export default {
@@ -176,7 +187,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 1rem; margin-bottom: 1rem;
.flexbreak { .flex-break {
flex-basis: 100%; flex-basis: 100%;
height: 0; height: 0;
} }
@@ -186,13 +197,29 @@ export default {
} }
.toggle-btn { .toggle-btn {
font-size: 1.4rem; margin: 0 auto;
margin: 1rem auto 0;
cursor: pointer; cursor: pointer;
table {
margin-top: 1rem;
td {
font-size: .8rem;
}
td:first-child,
td:last-child {
max-width: 80px;
width: 80px;
}
td:nth-child(2) {
max-width: 30px;
width: 30px;
}
}
.fa { .fa {
display: none; display: none;
margin-left: 5px;
&.show { &.show {
display: initial; display: initial;