179 lines
6.7 KiB
Vue
179 lines
6.7 KiB
Vue
<template>
|
|
|
|
|
|
|
|
<div id="WRAPPER">
|
|
|
|
<!-- Side Menu -->
|
|
<menu-comp></menu-comp>
|
|
|
|
<!-- Side Dialog -->
|
|
<dialog-comp></dialog-comp>
|
|
|
|
<!-- Container -->
|
|
<router-view></router-view>
|
|
|
|
<!-- Side menu (ONLINE/OFFLINE) -->
|
|
<side-menu-comp></side-menu-comp>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Pop-up Filter Background -->
|
|
<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>
|
|
|
|
<!-- Pop-up ROOM CREATE -->
|
|
<div class='popup' v-show='gs.popup.get(`room.create`).active'>
|
|
<span class='header'>Create {{ gs.popup.get(`room.create`).type.mutable }} room</span>
|
|
|
|
<span class='body form'>
|
|
<label>Room Name <span :data-err='gs.popup.get(`room.create`).name.error'></span></label>
|
|
<input type='text' v-model='gs.popup.get(`room.create`).name.mutable'>
|
|
|
|
<label>Room Type</label>
|
|
<span class='select-box' @click='gs.popup.get(`room.create`).type.mutable=`text`' :data-selected='gs.popup.get(`room.create`).type.mutable==`text`?1:0' data-type='text'>Text Room</span>
|
|
<span class='select-box' @click='gs.popup.get(`room.create`).type.mutable=`voice`' :data-selected='gs.popup.get(`room.create`).type.mutable==`voice`?1:0' data-type='voice'>Voice Room</span>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up CHANNEL CREATE -->
|
|
<div class='popup' v-show='gs.popup.get(`channel.create`).active'>
|
|
<span class='header'>Create channel #<strong>{{ gs.popup.get(`channel.create`).name.mutable }}</strong><br>url: <strong>/{{gs.popup.get(`channel.create`).link.mutable}}</strong></span>
|
|
|
|
<span class='body form'>
|
|
<label>Channel Name <span :data-err='gs.popup.get(`channel.create`).name.error'></span></label>
|
|
<input type='text' v-model='gs.popup.get(`channel.create`).name.mutable'>
|
|
|
|
<label>Channel Link <span :data-err='gs.popup.get(`channel.create`).link.error'></span></label>
|
|
<input type='text' v-model='gs.popup.get(`channel.create`).link.mutable'>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up NICKNAME CHANGE -->
|
|
<div class='popup' v-show='gs.popup.get(`username.change`).active'>
|
|
<span class='header'>Change nickname</span>
|
|
|
|
<span class='body form'>
|
|
<label for='username'>Nickname <span :data-err='gs.popup.get(`username.change`).username.error'></span></label>
|
|
<input type='text' name='username' v-model='gs.popup.get(`username.change`).username.mutable' :placeholder='gs.auth.user.username'>
|
|
|
|
<a @click='gs.popup.get(`username.change`).reset()'>Reset Nickname</a>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`username.change`).submit()'>Save</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up CHANNEL INVITE -->
|
|
<div class='popup' v-show='gs.popup.get(`channel.invite`).active'>
|
|
<span class='header'>Invite a friend</span>
|
|
|
|
<span class='body form'>
|
|
<label for='username'>friend's username <span :data-err='gs.popup.get(`channel.invite`).username.error'></span></label>
|
|
<input type='text' name='username' v-model='gs.popup.get(`channel.invite`).username.mutable'>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up CHANNEL REMOVE -->
|
|
<div class='popup' v-show='gs.popup.get(`channel.remove`).active'>
|
|
<span class='header'>Remove channel</span>
|
|
|
|
<span class='body form'>
|
|
<p>You are about to remove the channel #<strong>{{ gs.content.cbuf.label }}</strong>, this operation cannot be undone.</p>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up ROOM REMOVE -->
|
|
<div class='popup' v-show='gs.popup.get(`room.remove`).active'>
|
|
<span class='header'>Remove <strong>{{ gs.popup.get(`room.remove`).data.type }}</strong> room</span>
|
|
|
|
<span class='body form'>
|
|
<p>You are about to remove the room #<strong>{{ gs.popup.get(`room.remove`).data.name }}</strong>, this operation cannot be undone. All {{ gs.popup.get(`room.remove`).data.messages.length }} messages will be gone.</p>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.remove`).submit()'>Remove</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up CHANNEL LEAVE -->
|
|
<div class='popup' v-show='gs.popup.get(`channel.leave`).active'>
|
|
<span class='header'>Leave channel</span>
|
|
|
|
<span class='body form'>
|
|
<p>You are about to leave the channel #<strong>{{ gs.content.cbuf.label }}</strong>, this operation cannot be undone.</p>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pop-up PASSWORD CHANGE -->
|
|
<div class='popup' v-show='gs.popup.get(`password.change`).active'>
|
|
<span class='header'>Change password</span>
|
|
|
|
<span class='body form'>
|
|
<label v-show='!gs.popup.get(`password.change`).matches'><span data-err='passwords does not match'></span></label>
|
|
<label>New password <span :data-err='gs.popup.get(`password.change`).password.error'></span></label>
|
|
<input type='password' v-model='gs.popup.get(`password.change`).password.mutable'>
|
|
|
|
<label>Confirmation <span :data-err='gs.popup.get(`password.change`).confirm.error'></span></label>
|
|
<input type='password' v-model='gs.popup.get(`password.change`).confirm.mutable'>
|
|
</span>
|
|
|
|
<span class='footer form'>
|
|
<button @click='gs.popup.hide()'>Cancel</button>
|
|
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`password.change`).submit()'>Update</button>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</template><script>
|
|
|
|
import menu_vue from './menu.vue'
|
|
import dialog_vue from './dialog.vue'
|
|
import sidemenu_vue from './side-menu.vue'
|
|
|
|
export default {
|
|
|
|
name: 'wrapper-',
|
|
|
|
data(){ return { gs: gs.get }; },
|
|
|
|
components: {
|
|
'MenuComp': menu_vue,
|
|
'DialogComp': dialog_vue,
|
|
'SideMenuComp': sidemenu_vue
|
|
}
|
|
|
|
}
|
|
|
|
</script> |