🔨 Build singleton of guild home page
This commit is contained in:
parent
8c14b9fde5
commit
d460a2d5b0
@ -15,7 +15,7 @@
|
|||||||
"postpublish": "pinst --enable"
|
"postpublish": "pinst --enable"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "5.9.55",
|
"@mdi/font": "6.5.95",
|
||||||
"@types/js-cookie": "^3.0.2",
|
"@types/js-cookie": "^3.0.2",
|
||||||
"@types/uuid": "^8.3.4",
|
"@types/uuid": "^8.3.4",
|
||||||
"@vue/cli": "^5.0.4",
|
"@vue/cli": "^5.0.4",
|
||||||
|
55
src/components/guild/home/MusicPreviewComponent.vue
Normal file
55
src/components/guild/home/MusicPreviewComponent.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<v-card title="Music">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon color="yellow" size="x-large">mdi-music-circle</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-container class="pt-0">
|
||||||
|
<v-row>
|
||||||
|
<v-col class="d-flex align-center">
|
||||||
|
<v-avatar color="grey-darken-3" size="x-large">
|
||||||
|
<v-icon icon="mdi-connection"></v-icon>
|
||||||
|
</v-avatar>
|
||||||
|
<v-row class="ml-3">
|
||||||
|
<v-col>
|
||||||
|
<h4>Not connected to voice channel</h4>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-progress-linear
|
||||||
|
model-value="0"
|
||||||
|
background-color="blue-grey"
|
||||||
|
color="lime"
|
||||||
|
height="10"
|
||||||
|
rounded
|
||||||
|
></v-progress-linear>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col class="d-flex justify-center">
|
||||||
|
<v-btn icon="mdi-play" class="mr-2" variant="outlined"></v-btn>
|
||||||
|
<v-btn icon="mdi-skip-next" class="mr-2" variant="outlined"></v-btn>
|
||||||
|
<v-btn icon="mdi-stop" class="mr-2" variant="outlined"></v-btn>
|
||||||
|
<v-btn icon="mdi-eject" class="mr-2" variant="outlined"></v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-overlay
|
||||||
|
v-model="loading"
|
||||||
|
contained
|
||||||
|
class="align-center justify-center"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
11
src/components/guild/home/SettingPreviewComponent.vue
Normal file
11
src/components/guild/home/SettingPreviewComponent.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<v-card title="Guild Settings">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon color="yellow" size="x-large">mdi-cog</v-icon>
|
||||||
|
</template>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
11
src/components/guild/home/StatsPreviewComponent.vue
Normal file
11
src/components/guild/home/StatsPreviewComponent.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<v-card title="Stats">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon color="yellow" size="x-large">mdi-crown</v-icon>
|
||||||
|
</template>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
@ -1,11 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
{{ route.params.guildId }}
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="d-flex">
|
||||||
|
<v-avatar :color="guild?.iconUrl ? '' : 'grey-darken-3'" class="mr-3">
|
||||||
|
<v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
|
||||||
|
<template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
|
||||||
|
</v-avatar>
|
||||||
|
<span class="mr-auto">{{ guild?.name }}</span>
|
||||||
|
<v-icon
|
||||||
|
icon="mdi-account-wrench"
|
||||||
|
color="green"
|
||||||
|
v-if="guild?.canManage"
|
||||||
|
></v-icon>
|
||||||
|
</v-card-title>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="6">
|
||||||
|
<MusicPreviewComponent></MusicPreviewComponent>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="6">
|
||||||
|
<StatsPreviewComponent></StatsPreviewComponent>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="6">
|
||||||
|
<SettingPreviewComponent />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
|
||||||
|
import { ref, watch } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
|
||||||
|
import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
|
||||||
|
import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
|
||||||
|
|
||||||
|
const guildStore = useMutualGuildsStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
|
const guild = ref(guildStore.getGuild(route.params.guildId as string));
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.params.guildId,
|
||||||
|
(value, oldValue) => {
|
||||||
|
guild.value = guildStore.getGuild(value as string);
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
10
yarn.lock
10
yarn.lock
@ -1529,10 +1529,10 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@mdi/font@npm:5.9.55":
|
"@mdi/font@npm:6.5.95":
|
||||||
version: 5.9.55
|
version: 6.5.95
|
||||||
resolution: "@mdi/font@npm:5.9.55"
|
resolution: "@mdi/font@npm:6.5.95"
|
||||||
checksum: 05d8e30d5c5bd0992bde4827ddcde0e4e00882ae70d4355c69d4db93d9b69c75d3bde6b414bea90f5f8ad46336837b082d64a26761a12b1548e28cfe765b0e4f
|
checksum: 6333a2e15462b55e4a981c8f1a249254090a9c0e242f6331f75403897241bbc94d9470a660bf0c596471e47a68e07cd630e0984cb576e1e12a4d6e8bfc02198c
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@ -3611,7 +3611,7 @@ __metadata:
|
|||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "claptrap-ui@workspace:."
|
resolution: "claptrap-ui@workspace:."
|
||||||
dependencies:
|
dependencies:
|
||||||
"@mdi/font": 5.9.55
|
"@mdi/font": 6.5.95
|
||||||
"@rushstack/eslint-patch": ^1.1.0
|
"@rushstack/eslint-patch": ^1.1.0
|
||||||
"@types/js-cookie": ^3.0.2
|
"@types/js-cookie": ^3.0.2
|
||||||
"@types/jsdom": ^16.2.14
|
"@types/jsdom": ^16.2.14
|
||||||
|
Loading…
Reference in New Issue
Block a user