dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-06 11:30:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added error message for server general settings.

Browse source
This commit is contained in:
supertiger1234 2019-08-10 11:58:52 +01:00
parent e0fc34f6ed
commit 48f3f80a6e
1 changed files with 74 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
View file

@ -1,40 +1,48 @@
<template> <template>
<div class="content-inner"> <div class="content">
<div class="top"> <errors-list-template :errors="errors" v-if="errors" />
<profile-picture <div class="content-inner">
class="server-avatar" <div class="top">
size="100px" <profile-picture
:url="update.avatar || `${avatarDomain}/${server.avatar}`" class="server-avatar"
/> size="100px"
<div class="button" @click="$refs.avatarBrowser.click()">Edit Avatar</div> :url="update.avatar || `${avatarDomain}/${server.avatar}`"
/>
<div class="button" @click="$refs.avatarBrowser.click()">Edit Avatar</div>
<input <input
ref="avatarBrowser" ref="avatarBrowser"
type="file" type="file"
accept=".jpeg, .jpg, .png, .gif" accept=".jpeg, .jpg, .png, .gif"
class="hidden" class="hidden"
@change="avatarChangeEvent" @change="avatarChangeEvent"
>
<div class="input">
<div class="input-title">Server Name</div>
<input
type="text"
ref="name"
placeholder="Channel Name"
:default-value.prop="server.name"
@input="inputEvent('name', $event)"
/> />
<div class="input">
<div class="input-title">Server Name</div>
<input
type="text"
ref="name"
placeholder="Channel Name"
:default-value.prop="server.name"
@input="inputEvent('name', $event)"
/>
</div>
</div> </div>
</div> <div class="details">
<div class="details"> <div class="options">
<div class="options"> <drop-down
<drop-down :items="channels"
:items="channels" :selected-item="defaultChannel"
:selected-item="defaultChannel" name="Default Channel"
name="Default Channel" @change="changeEvent('default_channel_id', $event.channelID)"
@change="changeEvent('default_channel_id', $event.channelID)" />
/> </div>
<div
class="button save-button"
:class="{disabled: requestSent}"
v-if="changed"
@click="updateServer()"
>{{requestSent ? 'Saving...' : 'Save Changes'}}</div>
</div> </div>
<div class="button save-button" :class="{disabled: requestSent}" v-if="changed" @click="updateServer()">{{requestSent ? 'Saving...' : 'Save Changes'}}</div>
</div> </div>
</div> </div>
</template> </template>
@ -43,17 +51,19 @@
import config from "@/config.js"; import config from "@/config.js";
import { bus } from "@/main"; import { bus } from "@/main";
import ProfilePicture from "@/components/ProfilePictureTemplate.vue"; import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
import ErrorsListTemplate from "@/components/app/errorsListTemplate";
import ServerService from "@/services/ServerService"; import ServerService from "@/services/ServerService";
import DropDown from "./DropDownMenu"; import DropDown from "./DropDownMenu";
import { mapState } from "vuex"; import { mapState } from "vuex";
import path from "path"; import path from "path";
export default { export default {
components: { DropDown, ProfilePicture }, components: { DropDown, ProfilePicture, ErrorsListTemplate },
data() { data() {
return { return {
requestSent: false, requestSent: false,
changed: false, changed: false,
errors: null,
avatarDomain: config.domain + "/avatars/", avatarDomain: config.domain + "/avatars/",
update: {} update: {}
}; };
@ -68,17 +78,23 @@ export default {
async updateServer() { async updateServer() {
if (this.requestSent) return; if (this.requestSent) return;
this.requestSent = true; this.requestSent = true;
const {ok, error, result} = await ServerService.updateServer(this.server.server_id, this.update); const { ok, error, result } = await ServerService.updateServer(
this.server.server_id,
this.update
);
if (!ok) { if (!ok) {
this.requestSent = false; if (error.response) {
if (!error.response) { if (error.response.data.message)
return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.") this.errors = [{ msg: error.response.data.message }];
else this.errors = error.response.data.errors;
} else {
this.errors = [{ msg: "Something went wrong." }];
} }
return this.$store.dispatch('setGenericMessage', error.response.data.message) this.requestSent = false;
return;
} }
this.update = {}; this.update = {};
this.requestSent = false; this.requestSent = false;
}, },
avatarChangeEvent(e) { avatarChangeEvent(e) {
if (!this.googleDriveLinked) { if (!this.googleDriveLinked) {
@ -91,36 +107,45 @@ export default {
const _this = this; const _this = this;
const maxSize = 2092000; const maxSize = 2092000;
if (file.size > maxSize) { if (file.size > maxSize) {
return this.$store.dispatch('setGenericMessage', "Image is larger than 2MB") return this.$store.dispatch(
"setGenericMessage",
"Image is larger than 2MB"
);
} }
event.target.value = ""; event.target.value = "";
const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"]; const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) { if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
return this.$store.dispatch('setGenericMessage', "That file format is not allowed!"); return this.$store.dispatch(
"setGenericMessage",
"That file format is not allowed!"
);
} }
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function() {
_this.$set(_this.update, 'avatar', reader.result); _this.$set(_this.update, "avatar", reader.result);
}; };
reader.onerror = function (error) { reader.onerror = function(error) {
console.log('Error: ', error); console.log("Error: ", error);
return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.") return this.$store.dispatch(
"setGenericMessage",
"Something went wrong. Try again later."
);
}; };
} }
}, },
watch: { watch: {
update(obj) { update(obj) {
if ( Object.keys(obj).length === 0 ){ if (Object.keys(obj).length === 0) {
return this.changed = false return (this.changed = false);
} }
this.changed = true; this.changed = true;
} }
}, },
computed: { computed: {
googleDriveLinked() { googleDriveLinked() {
return this.$store.getters['settingsModule/settings'].GDriveLinked return this.$store.getters["settingsModule/settings"].GDriveLinked;
}, },
server() { server() {
const serverID = this.$store.state.popoutsModule.serverSettings.serverID; const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
@ -157,6 +182,9 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.errors {
align-self: center;
}
.server-avatar { .server-avatar {
align-self: center; align-self: center;
margin: 10px; margin: 10px;