🔨 Get setting form server

This commit is contained in:
SebClem 2022-06-17 19:25:24 +02:00
parent 034b6b7b5c
commit 0418e29df2
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
10 changed files with 129 additions and 58 deletions

View File

@ -1,6 +1,6 @@
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="https://next.api.claptrapbot.com/api/v2/" # VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
VITE_API_BASE_URL="http://localhost:8080/api/v2/"
VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/" VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
VITE_APP_TITLE="Claptrap DEV" VITE_APP_TITLE="Claptrap DEV"

5
.env.staging Normal file
View File

@ -0,0 +1,5 @@
VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=986632811207348294&redirect_uri=https%3A%2F%2Fnext.claptrapbot.com%2Foauth2%2Fcallback&response_type=code&scope=identify"
VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
VITE_APP_TITLE="Claptrap NEXT"

View File

@ -19,6 +19,6 @@ import HeaderComponent from "./components/Header/HeaderComponent.vue";
<style> <style>
html { html {
overflow: auto; overflow: auto !important;
} }
</style> </style>

View File

@ -0,0 +1,26 @@
<template>
<div>
<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>
</div>
</template>
<script setup lang="ts">
import type { Guild } from "@/data/guild/Guild";
defineProps<{ guild: Guild }>();
</script>
<style scoped></style>

View File

@ -2,8 +2,9 @@
<div> <div>
<v-card> <v-card>
<v-card-title>{{ props.descriptor.name }}</v-card-title> <v-card-title>{{ props.descriptor.name }}</v-card-title>
<v-card-content> <v-card-content class="pt-1">
<v-row v-if="props.descriptor.mainField"> <v-container class="py-0">
<v-row v-if="props.descriptor.mainField" class="mb-4">
<v-col> <v-col>
<bool-field-component <bool-field-component
v-if="props.descriptor.mainField.type == 'BOOL'" v-if="props.descriptor.mainField.type == 'BOOL'"
@ -35,6 +36,7 @@
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
</v-container>
</v-card-content> </v-card-content>
</v-card> </v-card>
</div> </div>

View File

@ -30,12 +30,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Guild } from "@/data/guild/Guild"; import type { Guild } from "@/data/guild/Guild";
import type { SettingDescrition } from "@/data/Setting/SettingDescription"; import type { SettingDescrition } from "@/data/Setting/SettingDescription";
import type { SettingValue } from "@/data/Setting/SettingValue";
import { import {
getRoles, getRoles,
getTextChannels, getTextChannels,
getVoiceChannels, getVoiceChannels,
} from "@/services/guildService"; } from "@/services/guildService";
import { getSettingDescrition } from "@/services/settingsService"; import {
getSettingDescrition,
getSettingValues,
} from "@/services/settingsService";
import { useSettingStore } from "@/stores/setting"; import { useSettingStore } from "@/stores/setting";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
@ -72,13 +76,21 @@ function loadVoiceChannels() {
function loadRoles() { function loadRoles() {
getRoles(props.guild.id).then((value) => { getRoles(props.guild.id).then((value) => {
roles.value = value; roles.value = value;
loadSettings();
});
}
function loadSettings() {
getSettingValues(props.guild.id).then((value) => {
let temp = {} as SettingValue;
for (let item of value) {
temp[item.id] = item.value;
}
values.value = temp;
loading.value = false; loading.value = false;
}); });
} }
</script> </script>
<style> <style scoped></style>
.v-input__details {
margin-bottom: 0;
}
</style>

View File

@ -0,0 +1,6 @@
type RawSettingValue = {
id: string;
value: string | boolean;
};
export type { RawSettingValue };

View File

@ -1,8 +1,10 @@
import type { RawSettingValue } from "@/data/Setting/RawSettingValue";
import type { SettingDescrition } from "@/data/Setting/SettingDescription"; import type { SettingDescrition } from "@/data/Setting/SettingDescription";
import { useEventQueuStore } from "@/stores/eventQueu";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import axios from "axios"; import axios from "axios";
export function getSettingDescrition() { function getSettingDescrition() {
return new Promise<SettingDescrition[]>((resole, reject) => { return new Promise<SettingDescrition[]>((resole, reject) => {
const userStore = useUserStore(); const userStore = useUserStore();
@ -17,3 +19,31 @@ export function getSettingDescrition() {
}); });
}); });
} }
function getSettingValues(guildId: string): Promise<RawSettingValue[]> {
return new Promise((resolve, reject) => {
const userStore = useUserStore();
axios
.get<RawSettingValue[]>(`/setting/${guildId}/values`, {
headers: {
authorization: `Bearer ${userStore.token}`,
},
})
.then((value) => {
resolve(value.data);
})
.catch((reason) => {
console.error(`Fail to get settings !`);
console.log(reason);
const eventQueuStore = useEventQueuStore();
eventQueuStore.push({
uuid: undefined,
type: "error",
text: "Fail to retrive current settings!",
});
reject(reason);
});
});
}
export { getSettingDescrition, getSettingValues };

View File

@ -2,23 +2,7 @@
<div v-if="guild"> <div v-if="guild">
<v-row> <v-row>
<v-col> <v-col>
<v-card> <GuildHeaderComponent :guild="guild" />
<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-col>
</v-row> </v-row>
<v-row> <v-row>
@ -47,6 +31,7 @@ import { useRoute, useRouter } from "vue-router";
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 SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue"; import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
import GuildHeaderComponent from "@/components/guild/GuildHeaderComponent.vue";
const guildStore = useMutualGuildsStore(); const guildStore = useMutualGuildsStore();
const route = useRoute(); const route = useRoute();

View File

@ -1,6 +1,11 @@
<template> <template>
<div> <div v-if="guild">
<SettingListComponent :guild="guild" v-if="guild" /> <v-row>
<v-col>
<GuildHeaderComponent :guild="guild" />
</v-col>
</v-row>
<SettingListComponent :guild="guild" />
</div> </div>
</template> </template>
@ -10,7 +15,7 @@ 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 SettingListComponent from "../components/guild/Settings/SettingListComponent.vue"; import SettingListComponent from "../components/guild/Settings/SettingListComponent.vue";
import GuildHeaderComponent from "@/components/guild/GuildHeaderComponent.vue";
const guildStore = useMutualGuildsStore(); const guildStore = useMutualGuildsStore();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();