Skip to content

Commit 108170a

Browse files
gmemstrgmemstr
committed
Porting admin interface over to Vue components
Also threw in the test feed.json file, currently implements (untested) publish interface and episode list, taken directly from DeV's interface
1 parent d27f7e1 commit 108170a

File tree

6 files changed

+281
-59
lines changed

6 files changed

+281
-59
lines changed

‎admin/src/App.vue‎

Lines changed: 109 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
3+
<h1>Pogo LAUNCHPAD</h1>
4+
<nav>
5+
<router-link to="/" tag="button">Publish</router-link>
6+
<router-link to="/manage" tag="button">Episodes</router-link>
7+
<router-link to="/theme" tag="button">Theme</router-link>
8+
<router-link to="/users" tag="button">Users</router-link>
9+
<button onclick="logout()">Logout</button>
10+
</nav>
411
<router-view/>
512
</div>
613
</template>
@@ -12,12 +19,108 @@ export default {
1219
</script>
1320

1421
<style>
15-
#app {
22+
body {
1623
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
24+
margin:0; padding:0;
25+
}
26+
h1,h2,h3,h4,h5 {
27+
font-weight: 400;
28+
}
29+
.podcastlist {
30+
padding-bottom: 10%;
31+
}
32+
#app {
33+
margin: 0 auto;
34+
padding: 0 2.0rem;
35+
position: relative;
36+
width: 60vw;
37+
height: 100%;
38+
}
39+
button, .button {
40+
margin-bottom: 10px;
41+
background-color: #397AD6;
42+
border: none;
43+
color: white;
44+
padding: 5px 32px;
45+
text-align: center;
46+
text-decoration: none;
47+
display: inline-block;
48+
font-size: 16px;
49+
-webkit-transition:.52s;
50+
-moz-transition: .5s;
51+
-o-transition: .5s;
52+
-ms-transition: .5s;
53+
transition:.5s;
54+
}
55+
button:hover, .button:hover {
56+
background-color: #50B7D5;
57+
}
58+
footer {
59+
position: absolute;
60+
right: 0;
61+
bottom: 0;
62+
left: 0;
63+
padding: .25rem;
64+
color: #f9f9f9;
65+
background-color: #397AD6;
66+
text-align: center;
67+
}
68+
table {
69+
text-align: left;
70+
width: 100%;
71+
}
72+
nav a {
73+
margin-bottom: 10px;
74+
background-color: #397AD6;
75+
border: none;
76+
color: white;
77+
padding: 5px 32px;
1978
text-align: center;
20-
color: #2c3e50;
21-
margin-top: 60px;
79+
text-decoration: none;
80+
display: inline-block;
81+
font-size: 16px;
82+
-webkit-transition:.52s;
83+
-moz-transition: .5s;
84+
-o-transition: .5s;
85+
-ms-transition: .5s;
86+
transition:.5s;
2287
}
88+
nav a:hover {
89+
background-color: #50B7D5;
90+
}
91+
.podcast {
92+
width:70%;
93+
}
94+
label {
95+
display: block;
96+
}
97+
hr {
98+
max-width: 40%;
99+
}
100+
.notifications {
101+
margin:0; padding:10px;
102+
font-size: 130%;
103+
height: 1.5vw;
104+
text-align: center;
105+
}
106+
.css {
107+
font-family: Monospace;
108+
}
109+
input[type=text], input[type=date], input[type=file], input[type=password],textarea, select {
110+
padding:10px;
111+
border-radius: 4px;
112+
box-sizing: border-box;
113+
border: 1px solid #397AD6;
114+
}
115+
.publish [type=text],
116+
.publish input[type=date],
117+
.publish input[type=file],
118+
.publish input[type=password],
119+
.publish textarea {
120+
width: 100%;
121+
}
122+
.publish textarea {
123+
height: 30vh;
124+
}
125+
23126
</style>

‎admin/src/components/EpisodeList.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="hello">
3+
<h1>Published Episodes</h1>
4+
<div>
5+
<table style="width:100%">
6+
<tr>
7+
<th>Title</th>
8+
<th>URL</th>
9+
<th></th>
10+
</tr>
11+
<tr v-for="item in items">
12+
<td>{{ item.id }}: {{ item.title }}</td><td>{{ item.url }}</td><td><router-link class="button" :to="'edit/' + item.id">Edit</router-link></td>
13+
</tr>
14+
</table>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'EpisodeList',
23+
data () {
24+
return {
25+
loading: false,
26+
items: null,
27+
error: null
28+
}
29+
},
30+
created () {
31+
// fetch the data when the view is created and the data is
32+
// already being observed
33+
this.fetchData()
34+
},
35+
watch: {
36+
// call again the method if the route changes
37+
'$route': 'fetchData'
38+
},
39+
methods: {
40+
fetchData () {
41+
this.error = this.items = []
42+
this.loading = true
43+
44+
fetch('/static/feed.json').then(response => {
45+
return response.text()
46+
}).then(blob => {
47+
console.log(blob)
48+
this.loading = false
49+
var t = JSON.parse(blob).items
50+
for (var i = t.length - 1; i >= 0; i--) {
51+
console.log(i)
52+
this.items.push({
53+
title: t[i].title,
54+
url: t[i].url,
55+
id: t[i].id
56+
})
57+
}
58+
})
59+
}
60+
}
61+
}
62+
</script>
63+
64+
<!-- Add "scoped" attribute to limit CSS to this component only -->
65+
<style scoped>
66+
h1, h2 {
67+
font-weight: normal;
68+
}
69+
ul {
70+
list-style-type: none;
71+
padding: 0;
72+
}
73+
li {
74+
display: inline-block;
75+
margin: 0 10px;
76+
}
77+
</style>

‎admin/src/components/HelloWorld.vue‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎admin/src/components/Publish.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="hello">
3+
<h1>Publish Episode</h1>
4+
<div>
5+
<h3>Publish Episode</h3>
6+
<form enctype="multipart/form-data" action="/admin/publish" method="post" class="publish">
7+
<label for="title">Episode Title</label>
8+
<input type="text" id="title" name="title">
9+
<label for="description">Episode Description</label>
10+
<textarea name="description" id="description" style="resize: none;" class="epdesc"></textarea>
11+
<label for="file">Media File</label>
12+
<input type="file" id="file" name="file">
13+
<label for="date">Publish Date</label>
14+
<input type="date" id="date" name="date"><br /><br />
15+
<input type="submit" value="Publish" class="button">
16+
</form>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script>
22+
export default {
23+
name: 'Publish',
24+
data () {
25+
return {
26+
msg: 'Welcome to Your Vue.js App'
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<!-- Add "scoped" attribute to limit CSS to this component only -->
33+
<style scoped>
34+
h1, h2 {
35+
font-weight: normal;
36+
}
37+
ul {
38+
list-style-type: none;
39+
padding: 0;
40+
}
41+
li {
42+
display: inline-block;
43+
margin: 0 10px;
44+
}
45+
</style>

‎admin/src/router/index.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
3-
import HelloWorld from '@/components/HelloWorld'
3+
import Publish from '@/components/Publish'
4+
import EpisodeList from '@/components/EpisodeList'
45

56
Vue.use(Router)
67

78
export default new Router({
89
routes: [
910
{
1011
path: '/',
11-
name: 'HelloWorld',
12-
component: HelloWorld
12+
name: 'Publish',
13+
component: Publish
14+
},
15+
{
16+
path: '/manage',
17+
name: 'EpisodeList',
18+
component: EpisodeList
1319
}
1420
]
1521
})

‎admin/static/feed.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"version": "https://jsonfeed.org/version/1",
3+
"title": "Pogo Test Feed",
4+
"home_page_url": "http://localhost:3000",
5+
"description": "Discussion about open source projects on the internet.",
6+
"author": {
7+
"name": "Gabriel Simmer"
8+
},
9+
"items": [
10+
{
11+
"id": "0",
12+
"url": "http://localhost:3000/download/2017-08-27_Machine Learning.mp3",
13+
"title": "Machine Learning",
14+
"summary": "boop",
15+
"date_published": "2017-08-27T00:00:00Z",
16+
"author": {
17+
"name": "Gabriel Simmer"
18+
}
19+
},
20+
{
21+
"id": "1",
22+
"url": "http://localhost:3000/download/2017-10-08_Testing.mp3",
23+
"title": "Testing",
24+
"summary": "TEST with Time Allen",
25+
"date_published": "2017-10-08T00:00:00Z",
26+
"author": {
27+
"name": "Gabriel Simmer"
28+
}
29+
},
30+
{
31+
"id": "2",
32+
"url": "http://localhost:3000/download/2017-11-21_Keyboard Comparison.mp3",
33+
"title": "Keyboard Comparison",
34+
"summary": "Hello, world! this is a keyboard comparison!",
35+
"date_published": "2017-11-21T00:00:00Z",
36+
"author": {
37+
"name": "Gabriel Simmer"
38+
}
39+
}
40+
]
41+
}

0 commit comments

Comments
 (0)