🔨 Add home page
This commit is contained in:
parent
bc21ee54f2
commit
7145bd9fa2
@ -59,7 +59,7 @@ const router = useRouter();
|
|||||||
const mutualGuildsStore = useMutualGuildsStore();
|
const mutualGuildsStore = useMutualGuildsStore();
|
||||||
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
|
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
let inviteLink = await getInviteLink();
|
const inviteLink = await getInviteLink();
|
||||||
inviteLinkStore.inviteLink = inviteLink.link;
|
inviteLinkStore.inviteLink = inviteLink.link;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>{{ props.descriptor.name }}</v-card-title>
|
<v-card-title>{{ props.descriptor.name }}</v-card-title>
|
||||||
<v-card-content class="pt-1">
|
<v-card-text class="pt-1">
|
||||||
<v-container class="pt-0">
|
<v-container class="pt-0">
|
||||||
<v-row v-if="props.descriptor.mainField">
|
<v-row v-if="props.descriptor.mainField">
|
||||||
<v-col>
|
<v-col>
|
||||||
@ -33,7 +33,7 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
</template>
|
</template>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-card-content>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
||||||
import { useSettingStore } from "@/stores/setting";
|
import { useSettingStore } from "@/stores/setting";
|
||||||
import { computed } from "@vue/reactivity";
|
import { computed } from "vue";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
defineProps<{ fieldDescription: FieldDescriptor }>();
|
defineProps<{ fieldDescription: FieldDescriptor }>();
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
||||||
import { useSettingStore } from "@/stores/setting";
|
import { useSettingStore } from "@/stores/setting";
|
||||||
import { computed } from "@vue/reactivity";
|
import { computed } from "vue";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
fieldDescription: FieldDescriptor;
|
fieldDescription: FieldDescriptor;
|
||||||
@ -54,6 +54,7 @@ const items = computed(() => {
|
|||||||
if (props.fieldDescription.type == "ROLE") {
|
if (props.fieldDescription.type == "ROLE") {
|
||||||
return roles;
|
return roles;
|
||||||
}
|
}
|
||||||
|
return undefined;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -159,8 +159,13 @@
|
|||||||
v-bind="props"
|
v-bind="props"
|
||||||
></v-btn>
|
></v-btn>
|
||||||
</template>
|
</template>
|
||||||
<v-card min-width="300" class="rounded-lg">
|
<v-card
|
||||||
<v-card-content>
|
min-width="300"
|
||||||
|
class="rounded-lg"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<v-card-text>
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-form @submit.prevent="add">
|
<v-form @submit.prevent="add">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
@ -170,6 +175,7 @@
|
|||||||
label="Url"
|
label="Url"
|
||||||
hide-details="auto"
|
hide-details="auto"
|
||||||
color="primary"
|
color="primary"
|
||||||
|
class="text-primary"
|
||||||
autofocus
|
autofocus
|
||||||
:loading="urlLoading"
|
:loading="urlLoading"
|
||||||
:disabled="urlLoading"
|
:disabled="urlLoading"
|
||||||
@ -187,7 +193,7 @@
|
|||||||
</v-text-field>
|
</v-text-field>
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-card-content>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
@ -9,6 +9,7 @@ const darkTheme = {
|
|||||||
dark: true,
|
dark: true,
|
||||||
colors: {
|
colors: {
|
||||||
primary: "#FFC107",
|
primary: "#FFC107",
|
||||||
|
secondary: "#BDBDBD",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,25 +1,199 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-row v-if="!userStore.isLoggedIn">
|
<v-row v-if="!userStore.isLoggedIn">
|
||||||
<v-col>
|
<v-col cols="12" md="6">
|
||||||
<v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
|
<v-row justify="center">
|
||||||
Login
|
<v-col cols="12" md="8" lg="6">
|
||||||
</v-btn>
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-badge
|
||||||
|
location="bottom end"
|
||||||
|
color="success"
|
||||||
|
bordered
|
||||||
|
offset-x="10"
|
||||||
|
offset-y="10"
|
||||||
|
>
|
||||||
|
<v-avatar size="100">
|
||||||
|
<v-img src="/icon.png" max-height="30vh" />
|
||||||
|
</v-avatar>
|
||||||
|
</v-badge>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col class="d-flex flex-row">
|
||||||
|
<h2>Claptrap Bot</h2>
|
||||||
|
<h2 class="text-disabled">#4815</h2>
|
||||||
|
<v-chip
|
||||||
|
class="ml-2"
|
||||||
|
size="x-small"
|
||||||
|
label
|
||||||
|
color="blue-darken-1"
|
||||||
|
variant="flat"
|
||||||
|
prepend-icon="mdi-check"
|
||||||
|
>
|
||||||
|
Bot
|
||||||
|
</v-chip>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<h3 class="text-secondary">About me</h3>
|
||||||
|
<p class="text-secondary">Claptrap bot a your service !</p>
|
||||||
|
<p class="text-secondary">
|
||||||
|
Setup
|
||||||
|
<v-icon>mdi-arrow-right</v-icon>
|
||||||
|
<a href="/">claptrapbot.com</a>
|
||||||
|
</p>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-btn :href="inviteLinkStore.inviteLink" color="primary">
|
||||||
|
Invite me !
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row justify="center" class="mt-5">
|
||||||
|
<v-col cols="6" class="text-center">
|
||||||
|
Login to have access to your servers
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row justify="center">
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-btn
|
||||||
|
to="/oauth2/redirect"
|
||||||
|
prepend-icon="mdi-discord"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Login with Discord
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-row>
|
||||||
|
<v-col class="text-center">
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-scroll-x-transition group>
|
||||||
|
<v-row
|
||||||
|
v-for="(item, index) in messages"
|
||||||
|
:key="index"
|
||||||
|
v-show="item.show"
|
||||||
|
>
|
||||||
|
<v-col cols="2" sm="1" md="2" xl="1">
|
||||||
|
<v-avatar size="large">
|
||||||
|
<v-img src="/icon.png" />
|
||||||
|
</v-avatar>
|
||||||
|
</v-col>
|
||||||
|
<v-col class="px-0 py-2" cols="10" sm="1" md="10" xl="11">
|
||||||
|
<v-row justify="left">
|
||||||
|
<v-col class="d-flex align-center">
|
||||||
|
<p class="text-primary">Claptrap Bot</p>
|
||||||
|
<span class="text-disabled text-caption ml-2">
|
||||||
|
just now
|
||||||
|
</span>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row justify="left" class="mb-2">
|
||||||
|
<v-col
|
||||||
|
class="d-flex flex-column justify-start text-start pt-0 text-body-2 pb-0"
|
||||||
|
cols="12"
|
||||||
|
v-for="(text, textIndex) in item.lines"
|
||||||
|
:key="textIndex"
|
||||||
|
style="white-space: normal"
|
||||||
|
>
|
||||||
|
{{ text }}
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-scroll-x-transition>
|
||||||
|
<v-row v-if="typing">
|
||||||
|
<v-col class="text-disabled text-caption text-left">
|
||||||
|
Claptrap Bot is typing ...
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-title>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { getInviteLink } from "@/services/guildService";
|
||||||
|
import { useInviteLinkStore } from "@/stores/inviteLink";
|
||||||
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { onBeforeMount } from "vue";
|
import { onBeforeMount, onBeforeUnmount, ref } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const inviteLinkStore = useInviteLinkStore();
|
||||||
|
|
||||||
onBeforeMount(() => {
|
const messages = ref([
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
lines: ["Hi i'm Claptrap Bot, let me help you with your server !"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
lines: [
|
||||||
|
"A little list of all I can do:",
|
||||||
|
"- 🎉 Welcome message: Greet your new members with the perfect message !",
|
||||||
|
"- 📇 Default role: All newcomer will receive this role !",
|
||||||
|
"- 🔊 Temporary voice channel: Auto create temporary voice channel !",
|
||||||
|
"- 🔊 Audio Bot: Play your favorite playlist on voice channel !",
|
||||||
|
"- 🔞 Madame Command: NSFW command that get random picture from bonjourmadame.fr, and a daily surprise can be enable 😉",
|
||||||
|
"- 📄 Web page: You can control the audio bot and change all the settings here, goodbye endless commands !",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
lines: ["And more to come !"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
lines: [
|
||||||
|
"So what are you waiting for ?!",
|
||||||
|
"Login now and invite me on your server !",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const typing = ref(true);
|
||||||
|
|
||||||
|
let interval = setInterval(() => {
|
||||||
|
let changed = false;
|
||||||
|
for (const item of messages.value) {
|
||||||
|
if (!item.show) {
|
||||||
|
item.show = true;
|
||||||
|
changed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!changed) {
|
||||||
|
clearInterval(interval);
|
||||||
|
interval = -1;
|
||||||
|
typing.value = false;
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (interval != -1) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
const mutualGuildStore = useMutualGuildsStore();
|
const mutualGuildStore = useMutualGuildsStore();
|
||||||
if (userStore.isLoggedIn) {
|
if (userStore.isLoggedIn) {
|
||||||
if (!mutualGuildStore.lastGuildId) {
|
if (!mutualGuildStore.lastGuildId) {
|
||||||
@ -31,6 +205,10 @@ onBeforeMount(() => {
|
|||||||
params: { guildId: mutualGuildStore.lastGuildId },
|
params: { guildId: mutualGuildStore.lastGuildId },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
const inviteLink = await getInviteLink();
|
||||||
|
inviteLinkStore.inviteLink = inviteLink.link;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
//
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user