Version 1.0.0 - Finalisation de Account et de GuildHeader

2025-08-06 23:07:34 +02:00
parent 93379b0042
commit 4ab23f7c52
48 changed files with 1949 additions and 175 deletions
--- a/src/components/Widget/Guild/Settings/GuildStats.vue
+++ b/src/components/Widget/Guild/Settings/GuildStats.vue
@@ -0,0 +1,128 @@
+<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>