131 lines
3.1 KiB
Vue
131 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, provide, onMounted } from 'vue'
|
|
import { useLoading } from 'vue-loading-overlay'
|
|
import { ModalsContainer, useModal } from 'vue-final-modal'
|
|
import { checkUser, checkBots, checkUserGuilds } from '@/utils/discord'
|
|
|
|
import AvatarModal from './components/AvatarModal.vue'
|
|
|
|
import type { Ref } from 'vue'
|
|
import type { APIUser, APIGuild } from 'discord-api-types/v10'
|
|
|
|
|
|
// État de l'utilisateur, des bots et de leur avatar
|
|
const user: Ref<APIUser | null> = ref(null)
|
|
const bots: Ref<APIUser[] | null> = ref([])
|
|
const guilds: Ref<APIGuild[] | null> = ref([])
|
|
const avatar = ref('/question-square-48.png')
|
|
const ready = ref(false)
|
|
|
|
provide('user', user) // Fournit l'utilisateur aux composants enfants
|
|
provide('bots', bots) // Fournit les bots aux composants enfants
|
|
provide('guilds', guilds) // Fournit les guilds aux composants enfants
|
|
provide('ready', ready) // Fournit l'état de préparation aux composants enfants
|
|
|
|
// Affiche un écran de chargement
|
|
const $loading = useLoading({ color: '#eee', opacity: 0 })
|
|
|
|
// Modèle du popup de l'avatar
|
|
const { open } = useModal({ component: AvatarModal })
|
|
|
|
// Cycle de vie
|
|
onMounted(async () => {
|
|
const loader = $loading.show()
|
|
user.value = await checkUser() // Vérifie l'authentification lors du montage du composant
|
|
|
|
if (user.value) {
|
|
avatar.value = `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48`
|
|
bots.value = await checkBots() // Vérifie les bots
|
|
guilds.value = await checkUserGuilds() // Vérifie les guilds de l'utilisateur
|
|
}
|
|
|
|
ready.value = true
|
|
loader.hide()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet'>
|
|
|
|
<header>
|
|
<h1 class="vc" style="font-family: Roboto Condensed">MainFrame</h1>
|
|
<div class="vl"></div>
|
|
<nav class="vc">
|
|
<router-link to="/">Index</router-link>
|
|
<p>|</p>
|
|
<router-link to="/discord/dashboard">Discord</router-link>
|
|
<img class="rounded" @click="() => open()" :src=avatar>
|
|
</nav>
|
|
</header>
|
|
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
|
|
<ModalsContainer />
|
|
</template>
|
|
|
|
<style scoped>
|
|
header {
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
height: 60px;
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
header * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
nav {
|
|
position: relative;
|
|
right: 20px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
nav * {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
left: 0;
|
|
width: 197px;
|
|
}
|
|
|
|
router-link {
|
|
font-size: 100px;
|
|
}
|
|
|
|
.router-link-active {
|
|
border-left: 0px;
|
|
border-bottom: 2px solid hsla(160, 100%, 37%, 1);
|
|
}
|
|
|
|
.vc {
|
|
position: absolute;
|
|
margin: 0;
|
|
top: 50%;
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.vl {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 200px;
|
|
height: 100%;
|
|
margin-left: -3px;
|
|
border-left: 6px solid rgb(0, 255, 140);
|
|
}
|
|
</style>
|