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

Starting work on Vue.js-based admin interface

Browse source 
Depending on my experience may port primary frontend to Vue.js as well. Really bad but I hope I can improve it with time, still learning Vue.js :)
This commit is contained in:
gmemstr 2017-10-06 12:49:11 -07:00
parent 2e748dd5a4
commit 09f8ce44df
3 changed files with 10244 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
assets/web/admin.html
View file

@ -7,64 +7,24 @@
</head>
<body>
<div class="notifications" id="notifarea">
<span id="notiftext"></span>
<div class="container">
<div id="app">
<a href="#publish">Publish</a>
<a href="#customcss">Theme</a>
<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>
</div>
<div class="admin container">
<h1>Pogo Publish</h1>
<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>
<hr />
<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>
<footer>
<p>Pogo licensed under the GPLv3</p>
</footer>
</div>
<script>
var notifarea = document.getElementById("notifarea");
var notiftext = document.getElementById("notiftext");
if (window.location.hash == "#cssupdated") {
notiftext.innerHTML = "CSS updated";
notifarea.style = "background-color:green;";
}
if (window.location.hash == "#published") {
notiftext.innerHTML = "Episode published";
notifarea.style = "background-color:green;";
}
if (window.location.hash == "#failed") {
notiftext.innerHTML = "Something went wrong";
notifarea.style = "background-color:red;";
}
get("/admin/css", function(data) {
document.getElementById("css").innerHTML=data;
});
function get(url, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
<script src="/assets/vue.js"></script>
<script src="/assets/app.js"></script>
</body>
</html>

47
assets/web/static/app.js Normal file
View file

@ -0,0 +1,47 @@
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"
}
}
function getcss(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
document.getElementById("css").innerHTML=xmlHttp.responseText;
}
xmlHttp.open("GET", "/admin/css", true);
xmlHttp.send(null);
}

10183
assets/web/static/vue.js Normal file
View file

File diff suppressed because it is too large Load diff