🔨 Build singleton of guild home page

This commit is contained in:
SebClem 2022-06-12 18:12:57 +02:00
parent 8c14b9fde5
commit d460a2d5b0
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
6 changed files with 133 additions and 7 deletions

View File

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

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

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

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

View File

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

View File

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