🔨 Add home page
This commit is contained in:
parent
bc21ee54f2
commit
7145bd9fa2
@ -59,7 +59,7 @@ const router = useRouter();
|
||||
const mutualGuildsStore = useMutualGuildsStore();
|
||||
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
|
||||
onBeforeMount(async () => {
|
||||
let inviteLink = await getInviteLink();
|
||||
const inviteLink = await getInviteLink();
|
||||
inviteLinkStore.inviteLink = inviteLink.link;
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<v-card>
|
||||
<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-row v-if="props.descriptor.mainField">
|
||||
<v-col>
|
||||
@ -33,7 +33,7 @@
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
</v-card-content>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
||||
import { useSettingStore } from "@/stores/setting";
|
||||
import { computed } from "@vue/reactivity";
|
||||
import { computed } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
defineProps<{ fieldDescription: FieldDescriptor }>();
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { FieldDescriptor } from "@/data/Setting/SettingDescription";
|
||||
import { useSettingStore } from "@/stores/setting";
|
||||
import { computed } from "@vue/reactivity";
|
||||
import { computed } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
const props = defineProps<{
|
||||
fieldDescription: FieldDescriptor;
|
||||
@ -54,6 +54,7 @@ const items = computed(() => {
|
||||
if (props.fieldDescription.type == "ROLE") {
|
||||
return roles;
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -159,8 +159,13 @@
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
<v-card min-width="300" class="rounded-lg">
|
||||
<v-card-content>
|
||||
<v-card
|
||||
min-width="300"
|
||||
class="rounded-lg"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-form @submit.prevent="add">
|
||||
<v-text-field
|
||||
@ -170,6 +175,7 @@
|
||||
label="Url"
|
||||
hide-details="auto"
|
||||
color="primary"
|
||||
class="text-primary"
|
||||
autofocus
|
||||
:loading="urlLoading"
|
||||
:disabled="urlLoading"
|
||||
@ -187,7 +193,7 @@
|
||||
</v-text-field>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</v-card-content>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
|
||||
@ -9,6 +9,7 @@ const darkTheme = {
|
||||
dark: true,
|
||||
colors: {
|
||||
primary: "#FFC107",
|
||||
secondary: "#BDBDBD",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,25 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row v-if="!userStore.isLoggedIn">
|
||||
<v-col>
|
||||
<v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
|
||||
Login
|
||||
</v-btn>
|
||||
<v-col cols="12" md="6">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="8" lg="6">
|
||||
<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-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getInviteLink } from "@/services/guildService";
|
||||
import { useInviteLinkStore } from "@/stores/inviteLink";
|
||||
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { onBeforeMount } from "vue";
|
||||
import { onBeforeMount, onBeforeUnmount, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const userStore = useUserStore();
|
||||
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();
|
||||
if (userStore.isLoggedIn) {
|
||||
if (!mutualGuildStore.lastGuildId) {
|
||||
@ -31,6 +205,10 @@ onBeforeMount(() => {
|
||||
params: { guildId: mutualGuildStore.lastGuildId },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const inviteLink = await getInviteLink();
|
||||
inviteLinkStore.inviteLink = inviteLink.link;
|
||||
}
|
||||
});
|
||||
//
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user