From 0caed5d8b1e93510ef0ec65072a338207aa409d5 Mon Sep 17 00:00:00 2001 From: Evert Date: Mon, 4 Dec 2017 22:21:15 +0200 Subject: [PATCH] make use of components --- src/script/admin.js | 78 +++++++++++++--------- views/admin/index.pug | 146 ++++++++++++++++++++++++------------------ 2 files changed, 132 insertions(+), 92 deletions(-) diff --git a/src/script/admin.js b/src/script/admin.js index 1735a24..ee1aae2 100644 --- a/src/script/admin.js +++ b/src/script/admin.js @@ -47,7 +47,7 @@ Vue.component('BanModal', { csrf: csrfToken }).then(data => { this.close() - banList.getBans(1) + this.$root.$emit('reload_bans') }).catch(err => { console.log(err) if (err.body && err.body.error) this.error = err.body.error @@ -56,21 +56,21 @@ Vue.component('BanModal', { } }) -const userList = new Vue({ - el: '#userlist', - data: { - pagination: { - offset: 0, - page: 1, - pages: 1, - perPage: 6, - total: 0 - }, - users: [], - banning: 0 - }, - mounted: function () { - this.getUsers(1) +Vue.component('UserList', { + template: '#user-list-template', + props: [], + data: function () { + return { + pagination: { + offset: 0, + page: 1, + pages: 1, + perPage: 6, + total: 0 + }, + users: [], + banning: 0 + } }, methods: { getUsers: function (page) { @@ -78,26 +78,31 @@ const userList = new Vue({ if (data.body && data.body.error) return this.pagination = data.body.page this.users = data.body.users + + console.log(this.pagination) }) } + }, + mounted: function () { + this.getUsers(1) } }) -const banList = new Vue({ - el: '#banlist', - data: { - pagination: { - offset: 0, - page: 1, - pages: 1, - perPage: 6, - total: 0 - }, - error: '', - bans: [] - }, - mounted: function () { - this.getBans(1) +Vue.component('BanList', { + template: '#ban-list-template', + props: [], + data: function () { + return { + pagination: { + offset: 0, + page: 1, + pages: 1, + perPage: 6, + total: 0 + }, + error: '', + bans: [] + } }, methods: { getBans: function (page) { @@ -118,5 +123,16 @@ const banList = new Vue({ this.getBans(1) }) } + }, + mounted: function () { + this.getBans(1) + + this.$root.$on('reload_bans', () => { + this.getBans(1) + }) } }) + +const app = new Vue({ + el: '#app' +}) diff --git a/views/admin/index.pug b/views/admin/index.pug index 4b48111..44cb5f9 100644 --- a/views/admin/index.pug +++ b/views/admin/index.pug @@ -2,71 +2,95 @@ extends layout.pug block body .container - .content + .content#app h1 Welcome to the Admin Panel .left - #userlist - 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") + user-list .right - #banlist - 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 + ban-list + .templates + script(type="text/x-template" id="user-list-template"). +
+

Registered Users ({{ pagination.total }})

+
+ Page {{ pagination.page }} of {{ pagination.pages }} +
Previous
+
{{ n }}
+
Next
+
+
+
+
+ + +
+
+
+
+ +
+
+
{{ user.display_name }}
+
{{ user.id }} - {{ user.username }} ({{ user.uuid }})
+ +
Privilege: level {{ user.nw_privilege }}
+
{{ new Date(user.created_at).toString() }}
+
Used external login
+
+ Ban User +
+
+
+ +
+
+ script(type="text/x-template" id="ban-list-template"). +
+

Bans ({{pagination.total}})

+
{{ error }}
+
+
+ Page {{ pagination.page }} of {{ pagination.pages }} +
Previous
+
{{ n }}
+
Next
+
+
+
+
+
+ +
+
+
+
+ User + {{ ban.user.display_name }} +
+
+ Admin + {{ ban.admin.display_name }} +
+
+ Reason + {{ ban.reason }} +
+
+ Placed + {{ new Date(ban.created_at).toString() }} +
+
+ Expires + {{ new Date(ban.expires_at).toString() }} + This ban is permanent. +
+
Pardon
+
+
+
+
+
script(type="text/x-template" id="modal-template").