🔨 Add home page

This commit is contained in:
SebClem 2022-07-04 17:59:34 +02:00 committed by Sébastien Clément
parent bc21ee54f2
commit 7145bd9fa2
7 changed files with 200 additions and 14 deletions

View File

@ -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;
}); });

View File

@ -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>

View File

@ -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 }>();

View File

@ -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>

View File

@ -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>

View File

@ -9,6 +9,7 @@ const darkTheme = {
dark: true, dark: true,
colors: { colors: {
primary: "#FFC107", primary: "#FFC107",
secondary: "#BDBDBD",
}, },
}; };

View File

@ -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>