use component files

This commit is contained in:
Evert Prants 2017-12-04 22:33:44 +02:00
parent 0caed5d8b1
commit 22c4addc0f
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
6 changed files with 421 additions and 78 deletions

244
package-lock.json generated
View File

@ -1278,6 +1278,21 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"color-convert": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"combined-stream": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
@ -1497,6 +1512,29 @@
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
},
"cosmiconfig": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
"integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
"dev": true,
"requires": {
"is-directory": "0.3.1",
"js-yaml": "3.10.0",
"minimist": "1.2.0",
"object-assign": "4.1.1",
"os-homedir": "1.0.2",
"parse-json": "2.2.0",
"require-from-string": "1.2.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
}
},
"crc": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/crc/-/crc-3.4.4.tgz",
@ -1645,6 +1683,12 @@
"integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
"dev": true
},
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
"dev": true
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@ -2656,6 +2700,12 @@
"write": "0.2.1"
}
},
"flatten": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
"integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
"dev": true
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -2988,6 +3038,12 @@
"inherits": "2.0.3"
}
},
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
"dev": true
},
"hash.js": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
@ -3009,6 +3065,12 @@
"sntp": "2.1.0"
}
},
"he": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
"dev": true
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -3116,6 +3178,12 @@
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
"dev": true
},
"indexes-of": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"indexof": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
@ -3227,6 +3295,12 @@
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
},
"is-directory": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
"dev": true
},
"is-dotfile": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@ -4525,6 +4599,103 @@
"integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=",
"dev": true
},
"postcss": {
"version": "6.0.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
"integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
"dev": true,
"requires": {
"chalk": "2.3.0",
"source-map": "0.6.1",
"supports-color": "4.5.0"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
"integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
"dev": true,
"requires": {
"color-convert": "1.9.1"
}
},
"chalk": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
"integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
"dev": true,
"requires": {
"ansi-styles": "3.2.0",
"escape-string-regexp": "1.0.5",
"supports-color": "4.5.0"
}
},
"has-flag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
"dev": true,
"requires": {
"has-flag": "2.0.0"
}
}
}
},
"postcss-load-config": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
"integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=",
"dev": true,
"requires": {
"cosmiconfig": "2.2.2",
"object-assign": "4.1.1",
"postcss-load-options": "1.2.0",
"postcss-load-plugins": "2.3.0"
}
},
"postcss-load-options": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-load-options/-/postcss-load-options-1.2.0.tgz",
"integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=",
"dev": true,
"requires": {
"cosmiconfig": "2.2.2",
"object-assign": "4.1.1"
}
},
"postcss-load-plugins": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz",
"integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=",
"dev": true,
"requires": {
"cosmiconfig": "2.2.2",
"object-assign": "4.1.1"
}
},
"postcss-selector-parser": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
"integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=",
"dev": true,
"requires": {
"flatten": "1.0.2",
"indexes-of": "1.0.1",
"uniq": "1.0.1"
}
},
"prelude-ls": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@ -4542,6 +4713,12 @@
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
},
"prettier": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.8.2.tgz",
"integrity": "sha512-fHWjCwoRZgjP1rvLP7OGqOznq7xH1sHMQUFLX8qLRO79hI57+6xbc5vB904LxEkCfgFgyr3vv06JkafgCSzoZg==",
"dev": true
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -5042,6 +5219,12 @@
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
"dev": true
},
"require-from-string": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
"integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
"dev": true
},
"require-main-filename": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@ -5965,6 +6148,41 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.9.tgz",
"integrity": "sha512-9B9XBpCtj8y5eJFrspIcKxIWt+lG9FMdF8qgyOlUeOIvcS4xSAvcARygbzHA6Pi0KWFj4BvxjtWbuPVWRx/wuA=="
},
"vue-hot-reload-api": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",
"integrity": "sha512-e+ThJMYmZg4D9UnrLcr6LQxGu6YlcxkrmZGPCyIN4malcNhdeGGKxmFuM5y6ICMJJxQywLfT8MM1rYZr4LpeLw==",
"dev": true
},
"vue-loader": {
"version": "13.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.5.0.tgz",
"integrity": "sha512-O0+ZU1oyLlDXSAQB7pV/pwVt3wJLfyhXtnGpCVFBGMKGC0Yp9Un7ULFHKejrFEYaMBKY0s6h4iJzjMdSngNA2g==",
"dev": true,
"requires": {
"consolidate": "0.14.5",
"hash-sum": "1.0.2",
"loader-utils": "1.1.0",
"lru-cache": "4.1.1",
"postcss": "6.0.14",
"postcss-load-config": "1.2.0",
"postcss-selector-parser": "2.2.3",
"prettier": "1.8.2",
"resolve": "1.5.0",
"source-map": "0.6.1",
"vue-hot-reload-api": "2.2.4",
"vue-style-loader": "3.0.3",
"vue-template-es2015-compiler": "1.6.0"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"vue-resource": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.3.4.tgz",
@ -5974,6 +6192,32 @@
"got": "7.1.0"
}
},
"vue-style-loader": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.0.3.tgz",
"integrity": "sha512-P/ihpaZKU23T1kq3E0y4c+F8sbm1HQO69EFYoLoGMSGVAHroHsGir/WQ9qUavP8dyFYHmXenzHaJ/nqd8vfaxw==",
"dev": true,
"requires": {
"hash-sum": "1.0.2",
"loader-utils": "1.1.0"
}
},
"vue-template-compiler": {
"version": "2.5.9",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.9.tgz",
"integrity": "sha512-Icev7QPuQ3flpOvxMe09irgXPklBi/VpiveUDs5nRVH5GA8R9asLBlahsA7AuRZQbaty0cGKm6kh/icDLcr93w==",
"dev": true,
"requires": {
"de-indent": "1.0.2",
"he": "1.1.1"
}
},
"vue-template-es2015-compiler": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz",
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
"dev": true
},
"watch": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz",

View File

@ -68,7 +68,9 @@
"mustache": "^2.3.0",
"standard": "^10.0.3",
"uglifyjs-webpack-plugin": "^0.4.6",
"vue-loader": "^13.5.0",
"vue-resource": "^1.3.4",
"vue-template-compiler": "^2.5.9",
"watch": "^1.0.2",
"webpack": "^3.10.0",
"webpack-merge": "^4.1.1"

View File

@ -1,6 +1,9 @@
import Vue from 'vue'
import VueResource from 'vue-resource'
import UserList from './component/UserList.vue'
import BanList from './component/BanList.vue'
const csrfToken = document.querySelector('meta[name="csrf-token"]').content
Vue.use(VueResource)
@ -56,83 +59,10 @@ Vue.component('BanModal', {
}
})
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) {
this.$http.get('/admin/api/users?page=' + page).then(data => {
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)
}
})
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) {
this.error = ''
this.pagination.total = 0
this.$http.get('/admin/api/bans?page=' + page).then(data => {
if (data.body && data.body.error) {
this.error = data.body.error
return
}
this.pagination = data.body.page
this.bans = data.body.bans
})
},
pardon: function (id) {
this.$http.post('/admin/api/ban/pardon/' + id).then(data => {
this.getBans(1)
})
}
},
mounted: function () {
this.getBans(1)
this.$root.$on('reload_bans', () => {
this.getBans(1)
})
}
})
const app = new Vue({
el: '#app'
el: '#app',
components: {
UserList,
BanList
}
})

View File

@ -0,0 +1,92 @@
<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 &gt; 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 &lt; 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>
</template>
<script type="text/javascript">
module.exports = {
data: function () {
return {
pagination: {
offset: 0,
page: 1,
pages: 1,
perPage: 6,
total: 0
},
error: '',
bans: []
}
},
methods: {
getBans: function (page) {
this.error = ''
this.pagination.total = 0
this.$http.get('/admin/api/bans?page=' + page).then(data => {
if (data.body && data.body.error) {
this.error = data.body.error
return
}
this.pagination = data.body.page
this.bans = data.body.bans
})
},
pardon: function (id) {
this.$http.post('/admin/api/ban/pardon/' + id).then(data => {
this.getBans(1)
})
}
},
mounted: function () {
this.getBans(1)
this.$root.$on('reload_bans', () => {
this.getBans(1)
})
}
}
</script>

View File

@ -0,0 +1,68 @@
<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 &gt; 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 &lt; 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>
</template>
<script>
module.exports = {
data: function () {
return {
pagination: {
offset: 0,
page: 1,
pages: 1,
perPage: 6,
total: 0
},
users: [],
banning: 0
}
},
methods: {
getUsers: function (page) {
this.$http.get('/admin/api/users?page=' + page).then(data => {
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)
}
}
</script>

View File

@ -30,6 +30,13 @@ module.exports = {
]
}
}
},
{
test: /\.vue$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'vue-loader'
}
}
]
},