From 73049447cde95c8d6240ec96c255137b166dede1 Mon Sep 17 00:00:00 2001 From: Evert Date: Tue, 5 Dec 2017 17:19:22 +0200 Subject: [PATCH] use vue-router, use pug in templates --- package-lock.json | 6 ++ package.json | 1 + src/script/admin.js | 70 ++++-------------- src/script/component/BanList.vue | 82 +++++++++----------- src/script/component/BanModal.vue | 56 ++++++++++++++ src/script/component/Modal.vue | 25 +++++++ src/script/component/UserList.vue | 72 +++++++++--------- src/script/views/OAuth2.vue | 8 ++ src/script/views/Users.vue | 18 +++++ views/admin/index.pug | 119 +----------------------------- views/admin/layout.pug | 40 +++++----- 11 files changed, 216 insertions(+), 281 deletions(-) create mode 100644 src/script/component/BanModal.vue create mode 100644 src/script/component/Modal.vue create mode 100644 src/script/views/OAuth2.vue create mode 100644 src/script/views/Users.vue diff --git a/package-lock.json b/package-lock.json index 822f741..512268b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6192,6 +6192,12 @@ "got": "7.1.0" } }, + "vue-router": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz", + "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==", + "dev": true + }, "vue-style-loader": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.0.3.tgz", diff --git a/package.json b/package.json index 0126c96..341b858 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "uglifyjs-webpack-plugin": "^0.4.6", "vue-loader": "^13.5.0", "vue-resource": "^1.3.4", + "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.9", "watch": "^1.0.2", "webpack": "^3.10.0", diff --git a/src/script/admin.js b/src/script/admin.js index afcf6c8..c913c67 100644 --- a/src/script/admin.js +++ b/src/script/admin.js @@ -1,68 +1,24 @@ import Vue from 'vue' import VueResource from 'vue-resource' +import VueRouter from 'vue-router' -import UserList from './component/UserList.vue' -import BanList from './component/BanList.vue' - -const csrfToken = document.querySelector('meta[name="csrf-token"]').content +import Users from './views/Users.vue' +import OAuth2 from './views/OAuth2.vue' Vue.use(VueResource) +Vue.use(VueRouter) -Vue.component('Modal', { - template: '#modal-template', - props: ['show'], - methods: { - close: function () { - this.$emit('close') - } - }, - mounted: function () { - document.addEventListener('keydown', (e) => { - if (this.show && e.keyCode === 27) { - this.close() - } - }) - } -}) +const routes = [ + { path: '/', component: Users }, + { path: '/oauth2', component: OAuth2 } +] -Vue.component('BanModal', { - template: '#ban-modal-template', - props: ['show', 'id'], - data: function () { - return { - error: '', - reason: '', - expires_at: null - } - }, - methods: { - close: function () { - this.$emit('close') - this.error = '' - this.reason = '' - this.expires_at = null - }, - submit: function () { - this.$http.post('/admin/api/ban', { - user_id: this.id, - reason: this.reason, - expires_at: this.expires_at, - csrf: csrfToken - }).then(data => { - this.close() - this.$root.$emit('reload_bans') - }).catch(err => { - console.log(err) - if (err.body && err.body.error) this.error = err.body.error - }) - } - } +const router = new VueRouter({ + routes }) const app = new Vue({ - el: '#app', - components: { - UserList, - BanList - } + router }) + +app.$mount('#app') diff --git a/src/script/component/BanList.vue b/src/script/component/BanList.vue index 4916466..122aa77 100644 --- a/src/script/component/BanList.vue +++ b/src/script/component/BanList.vue @@ -1,53 +1,41 @@ -