119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<template>
|
|
<SocketEnvironment>
|
|
<div class="container">
|
|
<Box>
|
|
<Button @click="router.push('/servers')">Choisir un serveur</Button>
|
|
<Button @click="router.push('/terms')">Terms</Button>
|
|
<Button @click="router.push('/privacy')">Privacy</Button>
|
|
<Button @click="globalStore.toogleTheme()">Changer le thème</Button>
|
|
<p>{{ guildId }}</p>
|
|
</Box>
|
|
<UserAction/>
|
|
</div>
|
|
</SocketEnvironment>
|
|
</template>
|
|
<script setup>
|
|
import Box from '@/components/UI/Box.vue';
|
|
import Button from '@/components/UI/Button.vue';
|
|
import SocketEnvironment from '@/utils/SocketEnvironment.vue';
|
|
import UserAction from '@/components/Features/UserAction.vue';
|
|
import { watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useGlobalStore } from '@/stores/globalStore';
|
|
import { useUserStore } from '@/stores/userStore';
|
|
import { IOListener, IORequest } from '@/utils/IORequest';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
guildId: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const guildId = props.guildId;
|
|
if (!guildId) {
|
|
globalStore.setLastGuild(null);
|
|
router.push('/servers');
|
|
}
|
|
|
|
const globalStore = useGlobalStore();
|
|
const userStore = useUserStore();
|
|
const router = useRouter();
|
|
const alreadyLoaded = ref(false);
|
|
|
|
watch(() => globalStore.isLoading, (value, oldValue) => {
|
|
if(!value && oldValue != value) {
|
|
loadInteface();
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
if(globalStore.lastGuild && !globalStore.isLoading) {
|
|
loadInteface();
|
|
}
|
|
});
|
|
|
|
watch(() => userStore.userInfo, (newValue, oldValue) => {
|
|
if(userStore.userInfo) {
|
|
checkGuildAvailability();
|
|
}
|
|
}, { immediate: true });
|
|
|
|
function loadInteface() {
|
|
if(alreadyLoaded.value) return;
|
|
console.log("Loading interface")
|
|
console.log("Guild ID:", guildId);
|
|
checkGuildAvailability();
|
|
|
|
IORequest("/USERS/LIST", (data) => {
|
|
console.log("User list received:", data);
|
|
})
|
|
|
|
alreadyLoaded.value = true;
|
|
}
|
|
|
|
function checkGuildAvailability() {
|
|
console.log("Checking guild availability for ID:", guildId);
|
|
if(userStore.userInfo.guilds.filter(guild => guild.id === guildId).length === 0) {
|
|
globalStore.setLastGuild(null);
|
|
console.warn("Guild not found, redirecting to servers list.");
|
|
router.push('/servers');
|
|
} else {
|
|
globalStore.setLastGuild(guildId);
|
|
IORequest("/GUILD/JOIN", (response) => {
|
|
if(response === true) {
|
|
console.log("Successfully joined guild:", guildId);
|
|
} else {
|
|
console.error("Failed to join guild:", response);
|
|
globalStore.setLastGuild(null);
|
|
router.push('/servers');
|
|
}
|
|
}, guildId);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style scoped>
|
|
.container {
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
padding: 20px;;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
</style> |