🔨 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_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/"

View File

@ -6,8 +6,21 @@
<span class="ml-3">Claptrap Bot</span>
</div>
</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-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-item
:prepend-avatar="getAvatar()"
@ -35,11 +48,16 @@
import { logout } from "@/services/authService";
import { useUserStore } from "@/stores/user";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useDisplay } from "vuetify/lib/framework.mjs";
import ServerListComponent from "./ServerListComponent.vue";
import SnackbarComponent from "./SnackbarComponent.vue";
const userStore = useUserStore();
const drawer = ref(true);
const { userName, avatar, discriminator, isLoggedIn } = storeToRefs(userStore);
const { mobile } = useDisplay();
function getAvatar() {
const avatarBaseUrl = import.meta.env.VITE_DISCORD_USER_AVATAR_URL;
return avatarBaseUrl + userStore.discordId + "/" + avatar.value + ".png";

View File

@ -7,7 +7,8 @@
:key="guild.id"
:value="guild.id"
active-color="yellow"
:to="`/guild/${guild.id}`"
:to="getToUrl(guild)"
:disabled="shouldBeDisabled(guild)"
>
<v-list-item-avatar
start
@ -39,16 +40,24 @@
</template>
<script setup lang="ts">
import type { Guild } from "@/data/Guild";
import { getInviteLink } from "@/services/guildService";
import { useInviteLinkStore } from "@/stores/inviteLink";
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
import { storeToRefs } from "pinia";
import { onBeforeMount } from "vue";
import {
useRouter,
type RouteLocation,
type RouteLocationRaw,
} from "vue-router";
const inviteLinkStore = useInviteLinkStore();
const { inviteLink } = storeToRefs(inviteLinkStore);
const router = useRouter();
const mutualGuildsStore = useMutualGuildsStore();
const { guilds, loaded } = storeToRefs(mutualGuildsStore);
onBeforeMount(async () => {
@ -57,6 +66,19 @@ onBeforeMount(async () => {
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>
<style scoped></style>

View File

@ -1,11 +1,30 @@
<template>
<v-card title="Guild Settings">
<v-card title="Guild Settings" :disabled="!properties.guild?.canManage">
<template v-slot:prepend>
<v-icon color="yellow" size="x-large">mdi-cog</v-icon>
</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>
</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>

View File

@ -1,8 +1,8 @@
type Guild = {
interface Guild {
id: string;
name: string;
iconUrl: string;
canManage: boolean;
};
}
export type { Guild };

View File

@ -3,6 +3,7 @@ import { getMutualGuilds } from "@/services/guildService";
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
import { useUserStore } from "@/stores/user";
import GuildHomeViewVue from "@/views/GuildHomeView.vue";
import GuildSettingViewVue from "@/views/GuildSettingView.vue";
import OauthCallbackViewVue from "@/views/oauth/OauthCallbackView.vue";
import OauthRedirectViewVue from "@/views/oauth/OauthRedirectView.vue";
import { createRouter, createWebHistory } from "vue-router";
@ -36,6 +37,15 @@ const router = createRouter({
title: "Home",
},
},
{
path: "/guild/:guildId/settings",
name: "guildSetting",
component: GuildSettingViewVue,
meta: {
requiresAuth: true,
title: "Settings",
},
},
{
path: "/oauth2/callback",
name: "oauth-callback",
@ -60,6 +70,7 @@ const router = createRouter({
router.beforeEach((to, from) => {
const store = useUserStore();
document.title = `${import.meta.env.VITE_APP_TITLE} - ${to.meta.title}`;
if (to.meta.requiresAuth && !store.isLoggedIn) {
return { name: "oauth-redirect" };
} else {

View File

@ -23,19 +23,17 @@
</v-row>
<v-row>
<v-col>
<v-container>
<v-row>
<v-col cols="6">
<v-col md="6" cols="12">
<MusicPreviewComponent></MusicPreviewComponent>
</v-col>
<v-col cols="6">
<v-col md="6" cols="12">
<StatsPreviewComponent></StatsPreviewComponent>
</v-col>
<v-col cols="6">
<SettingPreviewComponent />
<v-col md="6" cols="12">
<SettingPreviewComponent :guild="guild" />
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</div>
@ -43,12 +41,12 @@
<script setup lang="ts">
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
import { redirectIfNoGuild } from "@/tools/GuildTools";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.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 { redirectIfNoGuild } from "@/tools/GuildTools";
const guildStore = useMutualGuildsStore();
const route = useRoute();
@ -56,6 +54,7 @@ const router = useRouter();
const guild = ref(guildStore.getGuild(route.params.guildId as string));
redirectIfNoGuild(guild.value, router);
watch(
() => route.params.guildId,
(value, oldValue) => {

View File

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