Skip to content

GitLab

Commit 46a58bf8 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

some more mock-up features

parent 6ed4e2de
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ 46a58bf8
......@@ -21,16 +21,18 @@ export default {
data () {
return {
'modules': [
{ slug: '', title: 'Home' },
{ slug: 'home', title: 'Home' },
{ slug: 'shows', title: 'Sendungen verwalten' },
{ slug: 'files', title: 'Dateien und Playlists' }
{ slug: 'files', title: 'Dateien und Playlists' },
{ slug: 'settings', title: 'Settings' },
{ slug: 'credits', title: 'Credits' }
],
'activeModule': {
route: '/'
route: 'home'
},
'user': {
name: 'jackie',
logged_in: true
logged_in: false
}
}
}
......@@ -40,7 +42,7 @@ export default {
<style>
#app {
text-align: center;
color: #2c3e50;
color: #2e3436;
}
#app .content-width {
margin: auto;
......
src/components/Credits.vue 0 → 100644
View file @ 46a58bf8
<template>
<div>
<h1>Credits</h1>
<p>
<b>AUTOradio dashboard</b><br />
... developed under the GNU General Public License, by<br />
<ul>
<li>Andrea Ida Malkah Klaura <a href="mailto:jackie@o94.at">jackie@o94.at</a></li>
<li>...</li>
</ul>
</p>
<p>
<b>Graphics &amp; Icons</b><br />
<ul>
<li>animated loading icon: <a href="https://loading.io/spinner">spinner by loading.io</a>, CC-BY License</li>
<li>all other Icons: <a href="http://tango.freedesktop.org/">Tango Project</a>, Public Domain</li>
</ul>
</p>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
p {
text-align: left;
}
</style>
src/components/FileManager.vue
View file @ 46a58bf8
<template>
<div>
<h1>Dateien und Playlists verwalten</h1>
<br /><br />
<div style="border: 5px dotted #5c3566;">
<br /><br />
<p><b>By the mighty witchcraftry of the mother of time!</b></p>
<p>This feature is not implemented yet.</p>
<br /><br />
</div>
</div>
</template>
......
src/components/Header.vue
View file @ 46a58bf8
......@@ -2,31 +2,31 @@
<header>
<div class="content-width header-branding section group">
<div class="col span_3_of_4">
<span class="header-title">AUTOradio dashboard</span>
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span>
</div>
<div class="col span_1_of_4">
<img class="header-logo" src="../assets/logo.jpg" />
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</div>
</div>
<div class="content-width section group">
<div class="col span_1_of_4">
<router-link to="help"><img src="../assets/help-browser-32x32.png" alt="Help symbol"></router-link>
<router-link to="help"><img src="../assets/help-browser-32x32.png" alt="Help symbol" v-on:click="activeModule.route = 'help'"></router-link>
</div>
<div class="col span_2_of_4">
<nav>
Go to:
<select v-model="activeModule.route" v-on:change="activateModule" v-on:click="activateModule">
<option v-for="mod in modules" v-bind:value="'/' + mod.slug">{{ mod.title }}</option>
<select v-model="activeModule.route" v-on:change="activateModule">
<option v-for="mod in modules" v-bind:value="mod.slug">{{ mod.title }}</option>
</select>
</nav>
</div>
<div class="col span_1_of_4">
<div v-if="user.logged_in">
Logged in as: {{ user.name }}
<router-link v-bind:to="{ name: 'login', params: { action: 'logout'} }">(Log out)</router-link>
<router-link v-bind:to="{ name: 'login', params: { action: 'logout'} }"><img src="../assets/16x16/media-eject.png" alt="Log out" v-on:click="user.logged_in = !user.logged_in"></router-link>
</div>
<div v-if="! user.logged_in">
You are not logged in. <router-link to="login">Log in</router-link>
You are not logged in. <router-link to="login"><img src="../assets/16x16/system-users.png" alt="Log in" v-on:click="user.logged_in = !user.logged_in"></router-link>
</div>
</div>
</div>
......@@ -42,8 +42,11 @@ export default {
},
methods: {
activateModule () {
this.$router.push(this.activeModule.route)
this.$router.push('/' + this.activeModule.route)
}
},
created () {
this.activateModule()
}
}
</script>
......@@ -69,8 +72,14 @@ nav {
.header-title {
font-family: 'Montserrat', sans-serif;
font-size: 3em;
font-weight: bold;
vertical-align: middle;
}
.header-title a {
text-decoration: none;
color: #2e3436;
text-shadow: #ccc 0 0 10px;
}
.header-logo {
width: 75px;
height: 75px;
......
src/components/Help.vue 0 → 100644
View file @ 46a58bf8
<template>
<div>
<h1>Help pages</h1>
<br /><br />
<div style="border: 5px dotted #5c3566;">
<br /><br />
<p><b>By the mighty witchcraftry of the mother of time!</b></p>
<p>This feature is not implemented yet.</p>
<br /><br />
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
src/components/LogIn.vue
View file @ 46a58bf8
<template>
<div>
<h1>Log in:</h1>
<p>...</p>
<h1>Log in</h1>
<br /><br />
<div style="border: 5px dotted #5c3566;">
<br /><br />
<p><b>By the mighty witchcraftry of the mother of time!</b></p>
<p>This feature is not implemented yet.</p>
<p style="color:#ad7fa8;">But we are nice, we've logged you in automatically</p>
<br /><br />
</div>
</div>
</template>
......
src/components/Settings.vue 0 → 100644
View file @ 46a58bf8
<template>
<div>
<h1>Dashboard Settings</h1>
<br /><br />
<div style="border: 5px dotted #5c3566;">
<br /><br />
<p><b>By the mighty witchcraftry of the mother of time!</b></p>
<p>This feature is not implemented yet.</p>
<br /><br />
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
src/components/ShowManager.vue
View file @ 46a58bf8
......@@ -4,8 +4,8 @@
<div class="section group">
<div class="col span_4_of_4">
Aktuelle Sendereihe:
<select v-model="newShow" v-on:change="switchShow">
<option v-for="show in this.shows" v-bind:value="show.id">{{ show.name }}</option>
<select v-model="currentShow" v-on:change="switchShow">
<option v-for="(show, index) in this.shows" v-bind:value="index">{{ show.name }}</option>
</select>
<hr />
</div>
......@@ -17,60 +17,73 @@
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesFutureShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
<div v-if="episodesLoaded">
<div class="section group">
<div class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
<div align="left" class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
<div class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<div class="recentepisodes">
<p align="left">Die letzten <select v-model="numRecent">
<p>Die letzten <select v-model="numRecent">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesPastShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
<div v-if="episodesLoaded">
<div class="section group">
<div class="col span_2_of_4">
<div v-for="episode in this.episodesPastShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesPastShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="editEpisode" />
<div class="col span_2_of_4">
<div v-for="episode in this.episodesPastShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="editEpisode" />
</div>
</div>
</div>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<hr />
<p align="left">Allgemeine Einstellungen zur Sendereihe:</p>
<div>
...
<div class="showsettings">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<div v-if="showsLoaded">
<p>
<span v-if="shows[currentShow].short_description === ''"><b>Kurzbeschreibung:</b><i>(noch keine Kurzbeschreibung eingetragen)</i></span>
<span v-else="shows[currentShow].short_description === ''"><b>Kurzbeschreibung</b><br />{{ shows[currentShow].short_description }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" />
</p>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
</div>
</template>
......@@ -90,7 +103,10 @@ export default {
// an array of objects describing sendereihen (empty at load, will be populated on created())
shows: [],
episodes: [],
newShow: 0,
showsLoaded: false,
episodesLoaded: false,
currentShow: 0,
currentShowID: 0,
numShows: 0,
numUpcoming: 8,
numRecent: 8
......@@ -125,17 +141,20 @@ export default {
},
methods: {
switchShow: function () {
this.episodesLoaded = false
this.currentShowID = this.shows[this.currentShow].id
// fetch single episodes for a given show from PV backend
this.$http.post(config.api_pv, {
action: 'query',
query: 'episodes',
show_id: this.newShow,
show_id: this.currentShowID,
api_key: 'D1EB23A42F'
}, { emulateJSON: true }).then(response => {
if (response.body.hasOwnProperty('error')) alert(response.body.error)
else {
this.episodes = response.body
this.numShows = this.episodes.length
this.episodesLoaded = true
}
}, response => {
alert('There was an error fetching the data from the server')
......@@ -164,6 +183,9 @@ export default {
},
playPlaylist: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
setShortDescription: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
}
},
created () {
......@@ -176,7 +198,9 @@ export default {
if (response.body.hasOwnProperty('error')) alert(response.body.error)
else {
this.shows = response.body
this.newShow = this.shows[0].id
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.showsLoaded = true
this.switchShow()
}
}, response => {
......@@ -190,4 +214,7 @@ export default {
div.recentepisodes {
margin-top: 2em;
}
.showsettings, .recentepisodes, .nextepisodes {
text-align: left;
}
</style>
src/router/index.js
View file @ 46a58bf8
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Help from '@/components/Help'
import LogIn from '@/components/LogIn'
import Credits from '@/components/Credits'
import Settings from '@/components/Settings'
import ShowManager from '@/components/ShowManager'
import FileManager from '@/components/FileManager'
......@@ -9,9 +12,13 @@ Vue.use(Router)
export default new Router({
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/', component: Home },
{ path: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager },
{ path: '/login', name: 'login', component: LogIn }
{ path: '/login', name: 'login', component: LogIn },
{ path: '/help', name: 'help', component: Help },
{ path: '/settings', name: 'settings', component: Settings },
{ path: '/credits', name: 'credits', component: Credits }
]
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment