make use of components
This commit is contained in:
parent
c9f75fda39
commit
0caed5d8b1
GPG Key ID:
1688DA83D222D0B5
@ -47,7 +47,7 @@ Vue.component('BanModal', {
|
|||||||
csrf: csrfToken
|
csrf: csrfToken
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
this.close()
|
this.close()
|
||||||
banList.getBans(1)
|
this.$root.$emit('reload_bans')
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
if (err.body && err.body.error) this.error = err.body.error
|
if (err.body && err.body.error) this.error = err.body.error
|
||||||
@ -56,9 +56,11 @@ Vue.component('BanModal', {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const userList = new Vue({
|
Vue.component('UserList', {
|
||||||
el: '#userlist',
|
template: '#user-list-template',
|
||||||
data: {
|
props: [],
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
pagination: {
|
pagination: {
|
||||||
offset: 0,
|
offset: 0,
|
||||||
page: 1,
|
page: 1,
|
||||||
@ -68,9 +70,7 @@ const userList = new Vue({
|
|||||||
},
|
},
|
||||||
users: [],
|
users: [],
|
||||||
banning: 0
|
banning: 0
|
||||||
},
|
}
|
||||||
mounted: function () {
|
|
||||||
this.getUsers(1)
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getUsers: function (page) {
|
getUsers: function (page) {
|
||||||
@ -78,14 +78,21 @@ const userList = new Vue({
|
|||||||
if (data.body && data.body.error) return
|
if (data.body && data.body.error) return
|
||||||
this.pagination = data.body.page
|
this.pagination = data.body.page
|
||||||
this.users = data.body.users
|
this.users = data.body.users
|
||||||
|
|
||||||
|
console.log(this.pagination)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getUsers(1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const banList = new Vue({
|
Vue.component('BanList', {
|
||||||
el: '#banlist',
|
template: '#ban-list-template',
|
||||||
data: {
|
props: [],
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
pagination: {
|
pagination: {
|
||||||
offset: 0,
|
offset: 0,
|
||||||
page: 1,
|
page: 1,
|
||||||
@ -95,9 +102,7 @@ const banList = new Vue({
|
|||||||
},
|
},
|
||||||
error: '',
|
error: '',
|
||||||
bans: []
|
bans: []
|
||||||
},
|
}
|
||||||
mounted: function () {
|
|
||||||
this.getBans(1)
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getBans: function (page) {
|
getBans: function (page) {
|
||||||
@ -118,5 +123,16 @@ const banList = new Vue({
|
|||||||
this.getBans(1)
|
this.getBans(1)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getBans(1)
|
||||||
|
|
||||||
|
this.$root.$on('reload_bans', () => {
|
||||||
|
this.getBans(1)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
el: '#app'
|
||||||
|
})
|
||||||
|
|||||||
@ -2,71 +2,95 @@ extends layout.pug
|
|||||||
|
|
||||||
block body
|
block body
|
||||||
.container
|
.container
|
||||||
.content
|
.content#app
|
||||||
h1 Welcome to the Admin Panel
|
h1 Welcome to the Admin Panel
|
||||||
.left
|
.left
|
||||||
#userlist
|
user-list
|
||||||
h3 Registered Users ({{ pagination.total }})
|
|
||||||
.pgn
|
|
||||||
span.pagenum Page {{ pagination.page }} of {{ pagination.pages }}
|
|
||||||
.button(v-if="pagination.page > 1" v-on:click="getUsers(pagination.page - 1)") Previous
|
|
||||||
.button(v-for="n in pagination.pages" v-on:click="getUsers(n)" v-bind:class="{active: n == pagination.page}") {{ n }}
|
|
||||||
.button(v-if="pagination.page < pagination.pages" v-on:click="getUsers(pagination.page + 1)") Next
|
|
||||||
.list.users
|
|
||||||
.user.list-item(v-for="user in users")
|
|
||||||
.avatar
|
|
||||||
img(v-if="user.avatar_file" v-bind:src="'/usercontent/images/' + user.avatar_file")
|
|
||||||
img(v-else src="/static/image/avatar.png")
|
|
||||||
.info
|
|
||||||
.stamps
|
|
||||||
.noactive(v-if="user.activated == false" title="Not activated.")
|
|
||||||
i.fa.fa-fw.fa-envelope
|
|
||||||
.display_name {{ user.display_name }}
|
|
||||||
.username {{ user.id }} - {{ user.username }} ({{ user.uuid }})
|
|
||||||
.email {{ user.email }}
|
|
||||||
.privilege Privilege: level {{ user.nw_privilege }}
|
|
||||||
.timestamp {{ new Date(user.created_at).toString() }}
|
|
||||||
.external(v-if="!user.password")
|
|
||||||
b Used external login
|
|
||||||
.button.ban(v-if="user.bannable" v-on:click="banning = user.id")
|
|
||||||
i.fa.fa-fw.fa-ban
|
|
||||||
|Ban User
|
|
||||||
ban-modal(:show="banning", @close="banning = 0", :id="banning")
|
|
||||||
.right
|
.right
|
||||||
#banlist
|
ban-list
|
||||||
h3 Bans ({{pagination.total}})
|
|
||||||
.message.error(v-if="error") {{ error }}
|
|
||||||
.entry(v-else)
|
|
||||||
.pgn
|
|
||||||
span.pagenum Page {{ pagination.page }} of {{ pagination.pages }}
|
|
||||||
.button(v-if="pagination.page > 1" v-on:click="getBans(pagination.page - 1)") Previous
|
|
||||||
.button(v-for="n in pagination.pages" v-on:click="getBans(n)" v-bind:class="{active: n == pagination.page}") {{ n }}
|
|
||||||
.button(v-if="pagination.page < pagination.pages" v-on:click="getBans(pagination.page + 1)") Next
|
|
||||||
.list.bans
|
|
||||||
.ban.list-item(v-for="ban in bans")
|
|
||||||
.stamps
|
|
||||||
.noactive(title="Expired" v-if="ban.expired")
|
|
||||||
.fa.fa-fw.fa-ban
|
|
||||||
.info
|
|
||||||
.section
|
|
||||||
span.key User
|
|
||||||
span.value {{ ban.user.display_name }}
|
|
||||||
.section
|
|
||||||
span.key Admin
|
|
||||||
span.value {{ ban.admin.display_name }}
|
|
||||||
.section
|
|
||||||
span.key Reason
|
|
||||||
span.value {{ ban.reason }}
|
|
||||||
.section
|
|
||||||
span.key Placed
|
|
||||||
span.value {{ new Date(ban.created_at).toString() }}
|
|
||||||
.section
|
|
||||||
span.key Expires
|
|
||||||
span.value(v-if="ban.expires_at") {{ new Date(ban.expires_at).toString() }}
|
|
||||||
span.value(v-else)
|
|
||||||
b This ban is permanent.
|
|
||||||
.button.remove(@click="pardon(ban.id)") Pardon
|
|
||||||
.templates
|
.templates
|
||||||
|
script(type="text/x-template" id="user-list-template").
|
||||||
|
<div id="userlist">
|
||||||
|
<h3>Registered Users ({{ pagination.total }})</h3>
|
||||||
|
<div class="pgn">
|
||||||
|
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
|
||||||
|
<div class="button" v-if="pagination.page > 1" v-on:click="getUsers(pagination.page - 1)">Previous</div>
|
||||||
|
<div class="button" v-for="n in pagination.pages" v-on:click="getUsers(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
|
||||||
|
<div class="button" v-if="pagination.page < pagination.pages" v-on:click="getUsers(pagination.page + 1)">Next</div>
|
||||||
|
</div>
|
||||||
|
<div class="list users">
|
||||||
|
<div class="user list-item" v-for="user in users">
|
||||||
|
<div class="avatar">
|
||||||
|
<img v-if="user.avatar_file" v-bind:src="'/usercontent/images/' + user.avatar_file"/>
|
||||||
|
<img v-else="v-else" src="/static/image/avatar.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="stamps">
|
||||||
|
<div class="noactive" v-if="user.activated == false" title="Not activated.">
|
||||||
|
<i class="fa fa-fw fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="display_name">{{ user.display_name }}</div>
|
||||||
|
<div class="username">{{ user.id }} - {{ user.username }} ({{ user.uuid }})</div>
|
||||||
|
<div class="email">{{ user.email }}</div>
|
||||||
|
<div class="privilege">Privilege: level {{ user.nw_privilege }}</div>
|
||||||
|
<div class="timestamp">{{ new Date(user.created_at).toString() }}</div>
|
||||||
|
<div class="external" v-if="!user.password"><b>Used external login</b></div>
|
||||||
|
<div class="button ban" v-if="user.bannable" v-on:click="banning = user.id">
|
||||||
|
<i class="fa fa-fw fa-ban"></i>Ban User
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ban-modal :show="banning" @close="banning = 0" :id="banning"></ban-modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
script(type="text/x-template" id="ban-list-template").
|
||||||
|
<div id="banlist">
|
||||||
|
<h3>Bans ({{pagination.total}})</h3>
|
||||||
|
<div class="message error" v-if="error">{{ error }}</div>
|
||||||
|
<div class="entry" v-else="v-else">
|
||||||
|
<div class="pgn">
|
||||||
|
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
|
||||||
|
<div class="button" v-if="pagination.page > 1" v-on:click="getBans(pagination.page - 1)">Previous</div>
|
||||||
|
<div class="button" v-for="n in pagination.pages" v-on:click="getBans(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
|
||||||
|
<div class="button" v-if="pagination.page < pagination.pages" v-on:click="getBans(pagination.page + 1)">Next</div>
|
||||||
|
</div>
|
||||||
|
<div class="list bans">
|
||||||
|
<div class="ban list-item" v-for="ban in bans">
|
||||||
|
<div class="stamps">
|
||||||
|
<div class="noactive" title="Expired" v-if="ban.expired">
|
||||||
|
<i class="fa fa-fw fa-ban"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="section">
|
||||||
|
<span class="key">User</span>
|
||||||
|
<span class="value">{{ ban.user.display_name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<span class="key">Admin</span>
|
||||||
|
<span class="value">{{ ban.admin.display_name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<span class="key">Reason</span>
|
||||||
|
<span class="value">{{ ban.reason }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<span class="key">Placed</span>
|
||||||
|
<span class="value">{{ new Date(ban.created_at).toString() }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<span class="key">Expires</span>
|
||||||
|
<span class="value" v-if="ban.expires_at">{{ new Date(ban.expires_at).toString() }}</span>
|
||||||
|
<span class="value" v-else="v-else"><b>This ban is permanent.</b></span>
|
||||||
|
</div>
|
||||||
|
<div class="button remove" @click="pardon(ban.id)">Pardon</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
script(type="text/x-template" id="modal-template").
|
script(type="text/x-template" id="modal-template").
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div class="modal-mask" @click="close" v-show="show">
|
<div class="modal-mask" @click="close" v-show="show">
|
||||||
|
|||||||
Reference in New Issue
Block a user