arch/pogo
1
0
Fork 0
mirror of https://github.com/gmemstr/pogo.git synced 2024-09-19 17:21:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add basic episode viewing page

Browse source 
Will have functions for removing episodes
This commit is contained in:
gmemstr 2017-10-06 15:06:04 -07:00
parent ad698b7801
commit aaddd40956
2 changed files with 57 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/web/admin.html
View file

@ -9,7 +9,7 @@
<body> <body>
<div class="container"> <div class="container">
<div id="app"> <div id="app">
<router-link to="/publish">Publish</router-link> <router-link to="/theme">Theme</router-link> <router-link to="/publish">Publish</router-link> <router-link to="/theme">Theme</router-link> <router-link to="/manage">Manage</router-link>
<h1>{{ header }}</h1> <h1>{{ header }}</h1>
<router-view></router-view> <router-view></router-view>
</div> </div>

61
assets/web/static/app.js
View file

@ -1,11 +1,51 @@
const episodepublishform = { const episodepublishform = {
template: '<div><h3>Publish Episode</h3><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></div>', template: '<div><h3>Publish Episode</h3><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></div>'
current_page: "Publish Episode" }
const episodemanagement = {
template: '<div><table style="width:100%"><tr><th>Title</th><th>URL</th><th>Actions</th></tr><tr v-for="item in items"><td>{{ item.title }}</td><td>{{ item.url }}</td><td>Remove Edit</td></tr></table></div>',
data() {
return {
loading: false,
items: 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.items = []
this.loading = true
getEpisodes((err, items) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
var t = JSON.parse(items).items
for (var i = t.length - 1; i >= 0; i--) {
this.items.push({
title: t[i].title,
url: t[i].url
})
}
}
console.log(this.items)
})
}
}
} }
const customcss = { const customcss = {
template: '<div><h3>Edit CSS</h3><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></div>', template: '<div><h3>Edit CSS</h3><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></div>',
current_page: "Publish Episode",
data() { data() {
return { return {
loading: false, loading: false,
@ -27,7 +67,7 @@ const customcss = {
this.error = this.css = null this.error = this.css = null
this.loading = true this.loading = true
getCss( (err, css) => { getCss((err, css) => {
this.loading = false this.loading = false
if (err) { if (err) {
this.error = err.toString() this.error = err.toString()
@ -41,6 +81,7 @@ const customcss = {
const routes = [ const routes = [
{ path: '/publish', component: episodepublishform }, { path: '/publish', component: episodepublishform },
{ path: '/manage', component: episodemanagement },
{ path: '/theme', component: customcss } { path: '/theme', component: customcss }
] ]
@ -57,10 +98,20 @@ const app = new Vue({
function getCss(callback) { function getCss(callback) {
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() { xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(null, xmlHttp.responseText) callback(null, xmlHttp.responseText)
} }
xmlHttp.open("GET", "/admin/css", true); xmlHttp.open("GET", "/admin/css", true);
xmlHttp.send(null); xmlHttp.send(null);
}
function getEpisodes(callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(null, xmlHttp.responseText)
}
xmlHttp.open("GET", "/json", true);
xmlHttp.send(null);
} }