mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-13 19:42:01 +00:00
added error messages to places
This commit is contained in:
supertiger1234
parent
f08d09d4d2
commit
e0fc34f6ed
7 changed files with 179 additions and 151 deletions
|
|
@ -522,10 +522,6 @@ export default {
|
|||
delete this.$options.sockets.typingStatus;
|
||||
},
|
||||
watch: {
|
||||
scrolledDown(v) {
|
||||
|
||||
|
||||
},
|
||||
selectedChannelMessages(newMessages, oldMessages){
|
||||
this.$nextTick(function () {
|
||||
this.scrollDown();
|
||||
|
|
|
|||
|
|
@ -1,128 +1,55 @@
|
|||
<template>
|
||||
<div
|
||||
class="dark-background"
|
||||
@mousedown="backgroundClick"
|
||||
>
|
||||
<div class="dark-background" @mousedown="backgroundClick">
|
||||
<div class="inner">
|
||||
<div class="tabs">
|
||||
<div
|
||||
:class="{tab: true, selected: tab == 0}"
|
||||
@click="tab = 0; slideBack(); "
|
||||
>
|
||||
Create
|
||||
</div>
|
||||
<div :class="{tab: true, selected: tab == 0}" @click="tab = 0; slideBack(); ">Create</div>
|
||||
<div
|
||||
:class="{tab: true, selected: tab == 1 || tab == 2}"
|
||||
@click="tab = 1; slideForward();"
|
||||
>
|
||||
Join
|
||||
</div>
|
||||
>Join</div>
|
||||
</div>
|
||||
<transition-group
|
||||
tag="div"
|
||||
class="slider"
|
||||
:name="slideInDirection"
|
||||
>
|
||||
<div
|
||||
v-if="tab == 0"
|
||||
key="add-server"
|
||||
class="content"
|
||||
>
|
||||
<!-- <div class="title">
|
||||
Set your server's avatar
|
||||
</div> -->
|
||||
<profile-picture
|
||||
class="avatar"
|
||||
size="90px"
|
||||
:url="avatar + 'default'"
|
||||
/>
|
||||
<!-- <div class="button">
|
||||
Browse Avatar Coming Soon!
|
||||
</div> -->
|
||||
<div class="input">
|
||||
<div class="input-name">
|
||||
Server Name
|
||||
<transition-group tag="div" class="slider" :name="slideInDirection">
|
||||
<div class="content" v-if="tab == 0" key="add-server">
|
||||
<errors-list-template :errors="errors" v-if="errors" />
|
||||
|
||||
<div class="inner-content">
|
||||
<div class="add-server">
|
||||
<profile-picture class="avatar" size="90px" :url="avatar + 'default'" />
|
||||
<div class="input">
|
||||
<div class="input-name">Server Name</div>
|
||||
<input v-model="serverName" type="text" placeholder="Server Name" />
|
||||
</div>
|
||||
<span v-if="serverNameError" class="warn">{{ serverNameError }}</span>
|
||||
<div class="button create-button" @click="createButton">Create</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="serverName"
|
||||
type="text"
|
||||
placeholder="Server Name"
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
v-if="serverNameError"
|
||||
class="warn"
|
||||
>{{ serverNameError }}</span>
|
||||
<div
|
||||
class="button create-button"
|
||||
@click="createButton"
|
||||
>
|
||||
Create
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="tab == 1"
|
||||
key="check-invite"
|
||||
class="content"
|
||||
>
|
||||
<div v-if="tab == 1" key="check-invite" class="content">
|
||||
<i class="material-icons icon">forum</i>
|
||||
<div class="title">
|
||||
Join A Server
|
||||
</div>
|
||||
<div class="title">Join A Server</div>
|
||||
<div class="input">
|
||||
<div class="input-name">
|
||||
Invite Code
|
||||
<span
|
||||
v-if="inviteCodeError"
|
||||
class="warn"
|
||||
>- {{ inviteCodeError }}</span>
|
||||
<span v-if="inviteCodeError" class="warn">- {{ inviteCodeError }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="inviteCode"
|
||||
type="text"
|
||||
placeholder="Invite code"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="button check-button"
|
||||
@click="checkInviteCode"
|
||||
>
|
||||
Check
|
||||
<input v-model="inviteCode" type="text" placeholder="Invite code" />
|
||||
</div>
|
||||
<div class="button check-button" @click="checkInviteCode">Check</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="tab == 2"
|
||||
key="join-server"
|
||||
class="content server"
|
||||
>
|
||||
<profile-picture
|
||||
class="avatar"
|
||||
size="100px"
|
||||
:url="avatar + server.avatar"
|
||||
/>
|
||||
<div class="server-name">
|
||||
{{ server.name }}
|
||||
</div>
|
||||
<div v-if="tab == 2" key="join-server" class="content server">
|
||||
<profile-picture class="avatar" size="100px" :url="avatar + server.avatar" />
|
||||
<div class="server-name">{{ server.name }}</div>
|
||||
<div class="buttons">
|
||||
<div
|
||||
v-if="!servers[server.server_id]"
|
||||
class="button join-button"
|
||||
@click="joinButton"
|
||||
>
|
||||
Join
|
||||
</div>
|
||||
<div
|
||||
v-if="servers[server.server_id]"
|
||||
class="button join-button button-clicked"
|
||||
>
|
||||
Joined
|
||||
</div>
|
||||
>Join</div>
|
||||
<div v-if="servers[server.server_id]" class="button join-button button-clicked">Joined</div>
|
||||
<div
|
||||
class="button cancel-button"
|
||||
@click="server = null; inviteCode = ''; tab = 1; slideBack();"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
>Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
|
@ -135,10 +62,11 @@ import config from "@/config.js";
|
|||
import { bus } from "@/main";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import serversModule from '../../../../store/modules/serversModule';
|
||||
import serversModule from "../../../../store/modules/serversModule";
|
||||
import ErrorsListTemplate from "@/components/app/errorsListTemplate";
|
||||
|
||||
export default {
|
||||
components: { ProfilePicture },
|
||||
components: { ProfilePicture, ErrorsListTemplate },
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
|
|
@ -148,12 +76,13 @@ export default {
|
|||
inviteCode: "",
|
||||
inviteCodeError: null,
|
||||
server: null,
|
||||
slideInDirection: "slide-forward"
|
||||
slideInDirection: "slide-forward",
|
||||
errors: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
servers() {
|
||||
return this.$store.getters['servers/servers'];
|
||||
return this.$store.getters["servers/servers"];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -176,10 +105,10 @@ export default {
|
|||
},
|
||||
async createButton(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
this.serverNameError = null;
|
||||
this.errors = null;
|
||||
const name = this.serverName.trim();
|
||||
if (!name) {
|
||||
this.serverNameError = "Enter a name!";
|
||||
this.errors = [{ msg: "Enter a name!" }];
|
||||
return;
|
||||
}
|
||||
event.target.classList.add("button-clicked");
|
||||
|
|
@ -188,9 +117,11 @@ export default {
|
|||
this.closeMenu();
|
||||
} else {
|
||||
if (error.response) {
|
||||
this.serverNameError = error.response.data.message;
|
||||
if (error.response.data.message)
|
||||
this.errors = [{ msg: error.response.data.message }];
|
||||
else this.errors = error.response.data.errors;
|
||||
} else {
|
||||
this.serverNameError = "Something went wrong.";
|
||||
this.errors = [{ msg: "Something went wrong." }];
|
||||
}
|
||||
event.target.classList.remove("button-clicked");
|
||||
}
|
||||
|
|
@ -221,7 +152,9 @@ export default {
|
|||
async joinButton(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
event.target.classList.add("button-clicked");
|
||||
const { ok, error, result } = await ServerService.joinServer(this.inviteCode)
|
||||
const { ok, error, result } = await ServerService.joinServer(
|
||||
this.inviteCode
|
||||
);
|
||||
if (ok) {
|
||||
this.closeMenu();
|
||||
}
|
||||
|
|
@ -273,7 +206,8 @@ export default {
|
|||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 450px;
|
||||
height: 100%;
|
||||
max-height: 450px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
|
|
@ -287,6 +221,7 @@ export default {
|
|||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
background: rgb(27, 27, 27);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -314,15 +249,31 @@ export default {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.inner-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
.add-server {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
.errors {
|
||||
margin-top: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
align-self: center;
|
||||
margin-top: 15px;
|
||||
|
|
|
|||
|
|
@ -166,6 +166,7 @@ export default {
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.details {
|
||||
display: flex;
|
||||
|
|
@ -179,6 +180,7 @@ export default {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.server-name {
|
||||
align-self: center;
|
||||
|
|
@ -192,6 +194,7 @@ export default {
|
|||
padding: 10px;
|
||||
align-self: center;
|
||||
margin: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input input {
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,53 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<errors-list-template :errors="errors" v-if="errors" />
|
||||
<div class="content-inner">
|
||||
|
||||
<div class="channels-list">
|
||||
<div class="channel add-channel-button" @click="createChannel()"><div class="material-icons">add</div><div>Create Channel</div></div>
|
||||
<div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="channelClick($event, index)"><div class="name">{{channel.name}}</div></div>
|
||||
<div
|
||||
class="channel add-channel-button"
|
||||
:class="{warn: Object.keys(channels).length === 50}"
|
||||
@click="createChannel()"
|
||||
>
|
||||
<div class="material-icons">add</div>
|
||||
<div>Create Channel</div>
|
||||
</div>
|
||||
<div
|
||||
class="channel"
|
||||
v-for="(channel, index) in channels"
|
||||
:key="channel.channelID"
|
||||
:class="{selected: index === selectedChannelIndex}"
|
||||
@click="channelClick($event, index)"
|
||||
>
|
||||
<div class="name">{{channel.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details" v-if="channels[selectedChannelIndex]">
|
||||
<div class="input">
|
||||
<div class="input-title">Channel Name</div>
|
||||
<input type="text" ref="name" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
|
||||
<div class="input-title">Channel Name</div>
|
||||
<input
|
||||
type="text"
|
||||
ref="name"
|
||||
placeholder="Channel Name"
|
||||
:default-value.prop="channels[selectedChannelIndex].name"
|
||||
@input="inputEvent('name', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="button" v-if="update.name" @click="updateChannel">Save Changes</div>
|
||||
<div class="button warn delete-server disabled" v-if="server.default_channel_id === channels[selectedChannelIndex].channelID">Cannot delete default channel</div>
|
||||
<div class="button warn delete-server" :class="{disabled: deleteClicked}" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
|
||||
<div
|
||||
class="button warn delete-server disabled"
|
||||
v-if="server.default_channel_id === channels[selectedChannelIndex].channelID"
|
||||
>Cannot delete default channel</div>
|
||||
<div
|
||||
class="button warn delete-server"
|
||||
:class="{disabled: deleteClicked}"
|
||||
v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID"
|
||||
@click="deleteChannel"
|
||||
>{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -21,65 +55,85 @@ import config from "@/config.js";
|
|||
import { bus } from "@/main";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
import ErrorsListTemplate from "@/components/app/errorsListTemplate";
|
||||
export default {
|
||||
components: {},
|
||||
components: { ErrorsListTemplate },
|
||||
data() {
|
||||
return {
|
||||
deleteButtonConfirmed: false,
|
||||
deleteClicked: false,
|
||||
selectedChannelIndex: 0,
|
||||
errors: null,
|
||||
update: {
|
||||
name: null
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async createChannel() {
|
||||
const {ok, error, result} = await ServerService.createChannel(this.server.server_id, "New Channel");
|
||||
const { ok, error, result } = await ServerService.createChannel(
|
||||
this.server.server_id,
|
||||
"New Channel"
|
||||
);
|
||||
},
|
||||
async updateChannel() {
|
||||
this.errors = null;
|
||||
const data = {
|
||||
name: this.update.name || this.channels[this.selectedChannelIndex].name
|
||||
}
|
||||
const {ok, error, result} = await ServerService.updateChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID, data);
|
||||
};
|
||||
const { ok, error, result } = await ServerService.updateChannel(
|
||||
this.server.server_id,
|
||||
this.channels[this.selectedChannelIndex].channelID,
|
||||
data
|
||||
);
|
||||
if (ok) {
|
||||
this.update.name = null;
|
||||
} else {
|
||||
if (error.response) {
|
||||
if (error.response.data.message)
|
||||
this.errors = [{ msg: error.response.data.message }];
|
||||
else this.errors = error.response.data.errors;
|
||||
} else {
|
||||
this.errors = [{ msg: "Something went wrong." }];
|
||||
}
|
||||
}
|
||||
},
|
||||
async deleteChannel() {
|
||||
if (this.deleteClicked) return;
|
||||
if (!this.deleteButtonConfirmed) {
|
||||
return this.deleteButtonConfirmed = true;
|
||||
return (this.deleteButtonConfirmed = true);
|
||||
}
|
||||
this.deleteClicked = true;
|
||||
const {ok, error, result} = await ServerService.deleteChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID)
|
||||
const { ok, error, result } = await ServerService.deleteChannel(
|
||||
this.server.server_id,
|
||||
this.channels[this.selectedChannelIndex].channelID
|
||||
);
|
||||
this.deleteButtonConfirmed = false;
|
||||
this.selectedChannelIndex = null;
|
||||
this.deleteClicked = false;
|
||||
},
|
||||
inputEvent(name, event) {
|
||||
this.update.name = event.target.value
|
||||
this.update.name = event.target.value;
|
||||
},
|
||||
channelClick(event, index) {
|
||||
this.selectedChannelIndex = index
|
||||
this.$refs['name'].value = this.channels[this.selectedChannelIndex].name
|
||||
this.selectedChannelIndex = index;
|
||||
this.$refs["name"].value = this.channels[this.selectedChannelIndex].name;
|
||||
this.update.name = null;
|
||||
this.deleteButtonConfirmed = false;
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
server() {
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID
|
||||
return this.$store.getters['servers/servers'][serverID]
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
|
||||
return this.$store.getters["servers/servers"][serverID];
|
||||
},
|
||||
channels() {
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
|
||||
const channels = this.$store.getters.channels;
|
||||
const channelIDs = this.$store.getters['servers/channelsIDs'][serverID];
|
||||
const channelIDs = this.$store.getters["servers/channelsIDs"][serverID];
|
||||
return channelIDs.map(c => {
|
||||
return channels[c];
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -118,7 +172,7 @@ export default {
|
|||
}
|
||||
.channel .name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.channel div {
|
||||
|
|
@ -168,8 +222,12 @@ export default {
|
|||
.button.disabled:hover {
|
||||
background: grey;
|
||||
}
|
||||
.add-channel-button.warn {
|
||||
background: rgba(255, 17, 17, 0.192);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.delete-server{
|
||||
.delete-server {
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,8 @@ export default {
|
|||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 500px;
|
||||
height: 100%;
|
||||
max-height: 500px;
|
||||
width: 700px;
|
||||
background: rgba(32, 32, 32, 0.87);
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div class="edit-profile">
|
||||
<div class="errors" v-if="errors">
|
||||
<div class="error-title">Fix these mistakes:</div>
|
||||
<li class="error" v-for="error in errors" :key="error.msg">{{error.msg}}</li>
|
||||
</div>
|
||||
<errors-list-template :errors="errors" v-if="errors" />
|
||||
<div class="inner-content">
|
||||
<div class="left">
|
||||
<form>
|
||||
|
|
@ -59,11 +56,12 @@
|
|||
<script>
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import userService from "@/services/userService.js";
|
||||
import ErrorsListTemplate from "@/components/app/errorsListTemplate";
|
||||
import config from "@/config.js";
|
||||
import path from "path";
|
||||
|
||||
export default {
|
||||
components: { ProfilePicture },
|
||||
components: { ProfilePicture, ErrorsListTemplate },
|
||||
data() {
|
||||
return {
|
||||
errors: null,
|
||||
|
|
@ -245,10 +243,6 @@ export default {
|
|||
}
|
||||
|
||||
.errors {
|
||||
background: rgb(255, 62, 62);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
.link {
|
||||
|
|
|
|||
25
src/components/app/errorsListTemplate.vue
Normal file
25
src/components/app/errorsListTemplate.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="errors">
|
||||
<div class="errors-title">Fix these mistakes:</div>
|
||||
<li class="error" v-for="(error, index) in errors" :key="index">{{error.msg}}</li>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['errors']
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.errors{
|
||||
background: rgb(255, 62, 62);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue