🔨 Responsive
This commit is contained in:
parent
10020efa61
commit
eef86a95d5
@ -1,5 +1,5 @@
|
|||||||
VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=238351507634913280&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
|
VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=238351507634913280&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
|
||||||
VITE_API_BASE_URL="http://localhost:8080/api/v2/"
|
VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
|
||||||
|
|
||||||
VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
|
VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
|
||||||
|
|
||||||
|
@ -6,8 +6,21 @@
|
|||||||
<span class="ml-3">Claptrap Bot</span>
|
<span class="ml-3">Claptrap Bot</span>
|
||||||
</div>
|
</div>
|
||||||
</v-app-bar-title>
|
</v-app-bar-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-btn icon to="/"><v-icon>mdi-home</v-icon></v-btn>
|
||||||
|
<v-app-bar-nav-icon
|
||||||
|
@click="drawer = !drawer"
|
||||||
|
v-if="mobile"
|
||||||
|
></v-app-bar-nav-icon>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
<v-navigation-drawer expand-on-hover rail position="right" v-if="isLoggedIn">
|
<v-navigation-drawer
|
||||||
|
:expand-on-hover="!mobile"
|
||||||
|
:rail="!mobile"
|
||||||
|
position="right"
|
||||||
|
v-if="isLoggedIn"
|
||||||
|
v-model="drawer"
|
||||||
|
:temporary="mobile"
|
||||||
|
>
|
||||||
<v-list class="overflow-hidden">
|
<v-list class="overflow-hidden">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
:prepend-avatar="getAvatar()"
|
:prepend-avatar="getAvatar()"
|
||||||
@ -35,11 +48,16 @@
|
|||||||
import { logout } from "@/services/authService";
|
import { logout } from "@/services/authService";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useDisplay } from "vuetify/lib/framework.mjs";
|
||||||
import ServerListComponent from "./ServerListComponent.vue";
|
import ServerListComponent from "./ServerListComponent.vue";
|
||||||
import SnackbarComponent from "./SnackbarComponent.vue";
|
import SnackbarComponent from "./SnackbarComponent.vue";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
const drawer = ref(true);
|
||||||
const { userName, avatar, discriminator, isLoggedIn } = storeToRefs(userStore);
|
const { userName, avatar, discriminator, isLoggedIn } = storeToRefs(userStore);
|
||||||
|
const { mobile } = useDisplay();
|
||||||
|
|
||||||
function getAvatar() {
|
function getAvatar() {
|
||||||
const avatarBaseUrl = import.meta.env.VITE_DISCORD_USER_AVATAR_URL;
|
const avatarBaseUrl = import.meta.env.VITE_DISCORD_USER_AVATAR_URL;
|
||||||
return avatarBaseUrl + userStore.discordId + "/" + avatar.value + ".png";
|
return avatarBaseUrl + userStore.discordId + "/" + avatar.value + ".png";
|
||||||
|
@ -7,7 +7,8 @@
|
|||||||
:key="guild.id"
|
:key="guild.id"
|
||||||
:value="guild.id"
|
:value="guild.id"
|
||||||
active-color="yellow"
|
active-color="yellow"
|
||||||
:to="`/guild/${guild.id}`"
|
:to="getToUrl(guild)"
|
||||||
|
:disabled="shouldBeDisabled(guild)"
|
||||||
>
|
>
|
||||||
<v-list-item-avatar
|
<v-list-item-avatar
|
||||||
start
|
start
|
||||||
@ -39,16 +40,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { Guild } from "@/data/Guild";
|
||||||
import { getInviteLink } from "@/services/guildService";
|
import { getInviteLink } from "@/services/guildService";
|
||||||
import { useInviteLinkStore } from "@/stores/inviteLink";
|
import { useInviteLinkStore } from "@/stores/inviteLink";
|
||||||
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { onBeforeMount } from "vue";
|
import { onBeforeMount } from "vue";
|
||||||
|
import {
|
||||||
|
useRouter,
|
||||||
|
type RouteLocation,
|
||||||
|
type RouteLocationRaw,
|
||||||
|
} from "vue-router";
|
||||||
|
|
||||||
const inviteLinkStore = useInviteLinkStore();
|
const inviteLinkStore = useInviteLinkStore();
|
||||||
|
|
||||||
const { inviteLink } = storeToRefs(inviteLinkStore);
|
const { inviteLink } = storeToRefs(inviteLinkStore);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const mutualGuildsStore = useMutualGuildsStore();
|
const mutualGuildsStore = useMutualGuildsStore();
|
||||||
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
|
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
@ -57,6 +66,19 @@ onBeforeMount(async () => {
|
|||||||
inviteLinkStore.inviteLink = inviteLink.link;
|
inviteLinkStore.inviteLink = inviteLink.link;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function shouldBeDisabled(guild: Guild) {
|
||||||
|
return router.currentRoute.value.name == "guildSetting" && !guild.canManage;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getToUrl(guild: Guild): RouteLocationRaw {
|
||||||
|
return {
|
||||||
|
name: router.currentRoute.value.name?.toString(),
|
||||||
|
params: {
|
||||||
|
guildId: guild.id,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
@ -1,11 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-card title="Guild Settings">
|
<v-card title="Guild Settings" :disabled="!properties.guild?.canManage">
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="yellow" size="x-large">mdi-cog</v-icon>
|
<v-icon color="yellow" size="x-large">mdi-cog</v-icon>
|
||||||
</template>
|
</template>
|
||||||
|
<v-card-text class="d-flex justify-center">
|
||||||
|
<v-btn
|
||||||
|
color="info"
|
||||||
|
prepend-icon="mdi-progress-wrench"
|
||||||
|
size="large"
|
||||||
|
:to="{
|
||||||
|
name: 'guildSetting',
|
||||||
|
params: { guildId: properties.guild?.id },
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
Go to settings
|
||||||
|
</v-btn>
|
||||||
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import type { Guild } from "@/data/Guild";
|
||||||
|
|
||||||
|
const properties = defineProps<{
|
||||||
|
guild?: Guild;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
type Guild = {
|
interface Guild {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
iconUrl: string;
|
iconUrl: string;
|
||||||
canManage: boolean;
|
canManage: boolean;
|
||||||
};
|
}
|
||||||
|
|
||||||
export type { Guild };
|
export type { Guild };
|
||||||
|
@ -3,6 +3,7 @@ import { getMutualGuilds } from "@/services/guildService";
|
|||||||
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import GuildHomeViewVue from "@/views/GuildHomeView.vue";
|
import GuildHomeViewVue from "@/views/GuildHomeView.vue";
|
||||||
|
import GuildSettingViewVue from "@/views/GuildSettingView.vue";
|
||||||
import OauthCallbackViewVue from "@/views/oauth/OauthCallbackView.vue";
|
import OauthCallbackViewVue from "@/views/oauth/OauthCallbackView.vue";
|
||||||
import OauthRedirectViewVue from "@/views/oauth/OauthRedirectView.vue";
|
import OauthRedirectViewVue from "@/views/oauth/OauthRedirectView.vue";
|
||||||
import { createRouter, createWebHistory } from "vue-router";
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
@ -36,6 +37,15 @@ const router = createRouter({
|
|||||||
title: "Home",
|
title: "Home",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/guild/:guildId/settings",
|
||||||
|
name: "guildSetting",
|
||||||
|
component: GuildSettingViewVue,
|
||||||
|
meta: {
|
||||||
|
requiresAuth: true,
|
||||||
|
title: "Settings",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/oauth2/callback",
|
path: "/oauth2/callback",
|
||||||
name: "oauth-callback",
|
name: "oauth-callback",
|
||||||
@ -60,6 +70,7 @@ const router = createRouter({
|
|||||||
router.beforeEach((to, from) => {
|
router.beforeEach((to, from) => {
|
||||||
const store = useUserStore();
|
const store = useUserStore();
|
||||||
document.title = `${import.meta.env.VITE_APP_TITLE} - ${to.meta.title}`;
|
document.title = `${import.meta.env.VITE_APP_TITLE} - ${to.meta.title}`;
|
||||||
|
|
||||||
if (to.meta.requiresAuth && !store.isLoggedIn) {
|
if (to.meta.requiresAuth && !store.isLoggedIn) {
|
||||||
return { name: "oauth-redirect" };
|
return { name: "oauth-redirect" };
|
||||||
} else {
|
} else {
|
||||||
|
@ -23,19 +23,17 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col>
|
<v-col>
|
||||||
<v-container>
|
<v-row>
|
||||||
<v-row>
|
<v-col md="6" cols="12">
|
||||||
<v-col cols="6">
|
<MusicPreviewComponent></MusicPreviewComponent>
|
||||||
<MusicPreviewComponent></MusicPreviewComponent>
|
</v-col>
|
||||||
</v-col>
|
<v-col md="6" cols="12">
|
||||||
<v-col cols="6">
|
<StatsPreviewComponent></StatsPreviewComponent>
|
||||||
<StatsPreviewComponent></StatsPreviewComponent>
|
</v-col>
|
||||||
</v-col>
|
<v-col md="6" cols="12">
|
||||||
<v-col cols="6">
|
<SettingPreviewComponent :guild="guild" />
|
||||||
<SettingPreviewComponent />
|
</v-col>
|
||||||
</v-col>
|
</v-row>
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
@ -43,12 +41,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||||
|
import { redirectIfNoGuild } from "@/tools/GuildTools";
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
|
|
||||||
import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
|
import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
|
||||||
|
import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
|
||||||
import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
|
import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
|
||||||
import { redirectIfNoGuild } from "@/tools/GuildTools";
|
|
||||||
|
|
||||||
const guildStore = useMutualGuildsStore();
|
const guildStore = useMutualGuildsStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -56,6 +54,7 @@ const router = useRouter();
|
|||||||
|
|
||||||
const guild = ref(guildStore.getGuild(route.params.guildId as string));
|
const guild = ref(guildStore.getGuild(route.params.guildId as string));
|
||||||
redirectIfNoGuild(guild.value, router);
|
redirectIfNoGuild(guild.value, router);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.params.guildId,
|
() => route.params.guildId,
|
||||||
(value, oldValue) => {
|
(value, oldValue) => {
|
||||||
|
7
src/views/GuildSettingView.vue
Normal file
7
src/views/GuildSettingView.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
Loading…
Reference in New Issue
Block a user