128 lines
2.9 KiB
Vue
128 lines
2.9 KiB
Vue
<template>
|
|
<div class="metrics" v-if="metrics">
|
|
<div class="metric" v-for="metric in metrics" :key="metric.name">
|
|
<div class="metric-header">
|
|
<Icon class="metric-icon" :icon="getIcons(metric.name)" />
|
|
<div class="metric-info">
|
|
<p class="metric-name">{{ metric.description.replace(server.id, "").replace(server.name, "").replace(":", "") }}</p>
|
|
<p class="metric-id">{{ metric.name }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="metric-value" v-if="metric.name.includes('Seconds')">{{ getReadableDuration(metric.value) }}</p>
|
|
<p v-else class="metric-value">{{ metric.value }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p class="second">Aucune statistique enregistrée !</p>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { IORequest } from '@/utils/IORequest';
|
|
import Events from '@/utils/Events';
|
|
import { ref } from 'vue';
|
|
import { useUserStore } from '@/stores/userStore';
|
|
import { getReadableDuration } from '@/utils/TimeConverter';
|
|
|
|
function getIcons(name) {
|
|
if(name.includes("Commands")) return "fa-solid fa-terminal";
|
|
if(name.includes("Music")) return "fa-solid fa-music";
|
|
if(name.includes("Seconds")) return "fa-solid fa-clock";
|
|
return "fa-solid fa-chart-bar";
|
|
}
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const metrics = ref(null);
|
|
|
|
const props = defineProps({
|
|
server: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
Events.on("GUILD_JOINED", () => {
|
|
if(!(userStore.userInfo.identity.isAdmin || userStore.userInfo.identity.isMod || userStore.userInfo.identity.id == props.server.owner)) return;
|
|
IORequest("/MOD/STATS", (data) => {
|
|
metrics.value = data;
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.second {
|
|
color: var(--text-secondary);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.metric {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: var(--tertiary);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.metrics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
overflow-y: auto;
|
|
max-height: 30vh;
|
|
}
|
|
|
|
.metric-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.metric-info p {
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
.metric {
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
.metric-name {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.metric-name {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.metric-id {
|
|
color: var(--text-secondary);
|
|
font-size: 0.7em;
|
|
word-break: break-all;;
|
|
}
|
|
|
|
.metric-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.metric-value {
|
|
background-color: var(--secondary);
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.metric-icon {
|
|
background-color: var(--secondary);
|
|
padding: 20px;
|
|
border-radius: 100%;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style> |