🔨 Responsive

This commit is contained in:
SebClem 2022-06-16 15:19:29 +02:00
parent 10020efa61
commit eef86a95d5
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
8 changed files with 98 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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) => {

View File

@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>