From 454006b8e568bb8cfdb17e9c1f966513e189ebb7 Mon Sep 17 00:00:00 2001 From: gmemstr Date: Fri, 6 Oct 2017 13:24:05 -0700 Subject: [PATCH 1/4] Move to vue-router Implemented vue-router w/ data fetching, plan to make it lazy at some point. --- assets/web/admin.html | 11 ++--- assets/web/static/app.js | 99 ++++++++++++++++++++++++---------------- 2 files changed, 63 insertions(+), 47 deletions(-) diff --git a/assets/web/admin.html b/assets/web/admin.html index 966ecb2..760bcbc 100644 --- a/assets/web/admin.html +++ b/assets/web/admin.html @@ -9,22 +9,17 @@
- Publish - Theme + Publish Theme

{{ header }}

{{ current_page }}

-
- -
-
- -
+

Pogo licensed under the GPLv3

+ \ No newline at end of file diff --git a/assets/web/static/app.js b/assets/web/static/app.js index 1f09be1..27e82e8 100644 --- a/assets/web/static/app.js +++ b/assets/web/static/app.js @@ -1,46 +1,67 @@ -Vue.component('episode-publish-form', { - template: '
' -}) - -Vue.component('custom-css', { - template: '

' -}) - -var app = new Vue({ - el: '#app', - data: { - header: 'Pogo Admin', - current_page: "Page Title", - page: false, - } -}) - -window.onhashchange = setpagecontents -window.onload = setpagecontents -// I know I'm probably not using -// vue.js properly here but it's the -// best I can do right now -function setpagecontents(){ - page = window.location.href.split('#')[1] - app.page = page - - if (page == "publish") { - app.current_page = "Publish Episode" - } - else if (page == "customcss") { - app.current_page = "Edit Theme" - getcss() - } - else { - app.current_page = "404 Not found" - } +const episodepublishform = { + template: '
', + current_page: "Publish Episode" } -function getcss(){ - var xmlHttp = new XMLHttpRequest(); +const customcss = { + template: '

', + current_page: "Publish Episode", + data() { + return { + loading: false, + css: null, + error: null + } + }, + created() { + // fetch the data when the view is created and the data is + // already being observed + this.fetchData() + }, + watch: { + // call again the method if the route changes + '$route': 'fetchData' + }, + methods: { + fetchData() { + this.error = this.css = null + this.loading = true + + getCss( (err, css) => { + this.loading = false + if (err) { + this.error = err.toString() + } else { + this.css = css + } + }) + } + } +} + +const routes = [ + { path: '/publish', component: episodepublishform }, + { path: '/theme', component: customcss } +] + +const router = new VueRouter({ + routes +}) + +const app = new Vue({ + router, + data: { + header: 'Pogo Admin', + current_page: "Page Title", + page: false, + } +}).$mount('#app') + +function getCss(callback) { + var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) - document.getElementById("css").innerHTML=xmlHttp.responseText; + callback(null, xmlHttp.responseText) } xmlHttp.open("GET", "/admin/css", true); xmlHttp.send(null); From ad698b78012233ddcf581e24d8594c8603bbf8f0 Mon Sep 17 00:00:00 2001 From: gmemstr Date: Fri, 6 Oct 2017 14:13:30 -0700 Subject: [PATCH 2/4] Move current page to template. --- assets/web/admin.html | 1 - assets/web/static/app.js | 6 ++---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/assets/web/admin.html b/assets/web/admin.html index 760bcbc..178cb5e 100644 --- a/assets/web/admin.html +++ b/assets/web/admin.html @@ -11,7 +11,6 @@
Publish Theme

{{ header }}

-

{{ current_page }}