mirror of
https://github.com/gmemstr/pogo.git
synced 2024-09-19 17:21:10 +01:00
Move to vue-router
Implemented vue-router w/ data fetching, plan to make it lazy at some point.
This commit is contained in:
parent
09f8ce44df
commit
454006b8e5
|
@ -9,22 +9,17 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div id="app">
|
||||
<a href="#publish">Publish</a>
|
||||
<a href="#customcss">Theme</a>
|
||||
<router-link to="/publish">Publish</router-link> <router-link to="/theme">Theme</router-link>
|
||||
<h1>{{ header }}</h1>
|
||||
<h3>{{ current_page }}</h3>
|
||||
<div v-if="page == 'publish'">
|
||||
<episode-publish-form></episode-publish-form>
|
||||
</div>
|
||||
<div v-if="page == 'customcss'">
|
||||
<custom-css></custom-css>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<footer>
|
||||
<p>Pogo licensed under the GPLv3</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="/assets/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.js"></script>
|
||||
<script src="/assets/app.js"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,46 +1,67 @@
|
|||
Vue.component('episode-publish-form', {
|
||||
template: '<form enctype="multipart/form-data" action="/admin/publish" method="post"><label for="title">Episode Title</label><input type="text" id="title" name="title"><label for="description">Episode Description</label><textarea name="description" id="description" cols="100" rows="20" style="resize: none;"></textarea><label for="file">Media File</label><input type="file" id="file" name="file"><label for="date">Publish Date</label><input type="date" id="date" name="date"><input type="submit" value="Publish"></form>'
|
||||
})
|
||||
|
||||
Vue.component('custom-css', {
|
||||
template: '<form action="/admin/css" method="post" enctype="multipart/form-data"><label for="css">Custom CSS</label><textarea name="css" id="css" cols="120" rows="20"></textarea><br /><input type="submit" value="Submit"></form>'
|
||||
})
|
||||
|
||||
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: '<form enctype="multipart/form-data" action="/admin/publish" method="post"><label for="title">Episode Title</label><input type="text" id="title" name="title"><label for="description">Episode Description</label><textarea name="description" id="description" cols="100" rows="20" style="resize: none;"></textarea><label for="file">Media File</label><input type="file" id="file" name="file"><label for="date">Publish Date</label><input type="date" id="date" name="date"><input type="submit" value="Publish"></form>',
|
||||
current_page: "Publish Episode"
|
||||
}
|
||||
|
||||
function getcss(){
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
const customcss = {
|
||||
template: '<form action="/admin/css" method="post" enctype="multipart/form-data"><label for="css">Custom CSS</label><textarea name="css" id="css" cols="120" rows="20">{{ css }}</textarea><br /><input type="submit" value="Submit"></form>',
|
||||
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);
|
||||
|
|
Loading…
Reference in a new issue