Commit 15238f3b authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

make componentes bootstrap-vue compatible

parent f3cd1c33
<template> <template>
<div id="app"> <div id="app">
<app-header v-bind:modules="modules" v-bind:activeModule="activeModule" v-bind:user="user"></app-header> <app-header v-bind:modules="modules" v-bind:user="user"></app-header>
<router-view/> <router-view/>
<app-footer></app-footer> <app-footer></app-footer>
</div> </div>
...@@ -27,9 +27,6 @@ export default { ...@@ -27,9 +27,6 @@ export default {
{ slug: 'settings', title: 'Settings' }, { slug: 'settings', title: 'Settings' },
{ slug: 'credits', title: 'Credits' } { slug: 'credits', title: 'Credits' }
], ],
'activeModule': {
route: 'home'
},
'user': { 'user': {
name: 'jackie', name: 'jackie',
logged_in: true logged_in: true
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<footer> <footer>
<b-container> <b-container>
<b-row> <b-row>
<b-col sm="9"> <b-col sm="8">
AUTOradio dashboard v0.0.1 autoradio/<b>dashboard v0.0.23</b>
</b-col> </b-col>
<b-col sm="3" align="right"> <b-col sm="4" align="right">
... bla ... bla ... hear the music? ... bla ... bla ... hear the music?
</b-col> </b-col>
</b-row> </b-row>
...@@ -19,13 +19,18 @@ export default { ...@@ -19,13 +19,18 @@ export default {
</script> </script>
<style> <style>
html, body, #app {
height: 100%;
}
#app {
display: flex;
flex-direction: column;
}
footer { footer {
background-color: #555753; background-color: #343a40;
border-top: 1px solid #2e3436; border-top: 1px solid #2e3436;
color: #fff; color: rgba(255, 255, 255, 0.5);
position:absolute; width: 100%;
bottom:0px; margin-top: auto;
margin:0px auto;
width: 100%
} }
</style> </style>
<template> <template>
<header> <header>
<b-container> <div>
<b-row class="header-branding"> <b-container>
<b-col md="10"> <b-row class="header-branding">
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span> <b-col md="10">
</b-col> <span class="header-title"><router-link to="home">autoradio/<b>dashboard</b></router-link></span>
<b-col md="2" class="d-none d-sm-none d-md-block"> </b-col>
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a> <b-col md="2" class="d-none d-sm-none d-md-block" align="right">
</b-col> <a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</b-row> </b-col>
<b-row> </b-row>
<b-col md="1"> </b-container>
<router-link to="help"><img src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages" v-on:click="activeModule.route = 'help'"></router-link> </div>
</b-col> <div>
<b-col md="9"> <b-container>
<nav> <b-navbar toggleable="md" type="dark" variant="dark">
Go to: <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<select v-model="activeModule.route" v-on:change="activateModule"> <b-collapse is-nav id="nav_collapse">
<option v-for="mod in modules" v-bind:value="mod.slug">{{ mod.title }}</option> <b-navbar-nav>
</select> <b-nav-item v-for="mod in modules" :to="mod.slug">{{ mod.title }}</b-nav-item>
</nav> </b-navbar-nav>
</b-col> <b-navbar-nav class="ml-auto">
<b-col md="2"> <b-nav-item-dropdown text="EN" right>
<div v-if="user.logged_in"> <b-dropdown-item href="#">EN</b-dropdown-item>
{{ user.name }} <b-dropdown-item href="#">DE</b-dropdown-item>
<router-link v-bind:to="{ name: 'login', params: { action: 'logout'} }"><img src="../assets/16x16/media-eject.png" alt="log-out symbol" title="Log out" v-on:click="user.logged_in = !user.logged_in"></router-link> </b-nav-item-dropdown>
</div> <b-nav-item-dropdown v-if="user.logged_in" right>
<div v-if="! user.logged_in"> <!-- Using button-content slot -->
not logged in <router-link to="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></router-link> <template slot="button-content">
</div> <em>{{ user.name }}</em>
</b-col> </template>
</b-row> <b-dropdown-item href="#">Settings</b-dropdown-item>
</b-container> <b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item v-if="! user.logged_in" href="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></b-nav-item>
<div class="help-image-container">
<b-nav-item>
<router-link to="help"><img class="help-image" src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages"></router-link>
</b-nav-item>
</div>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</b-container>
</div>
</header> </header>
</template> </template>
...@@ -39,35 +52,20 @@ ...@@ -39,35 +52,20 @@
export default { export default {
props: { props: {
modules: { type: Array, required: true }, modules: { type: Array, required: true },
activeModule: { type: Object, required: true },
user: { type: Object, required: true } user: { type: Object, required: true }
},
methods: {
activateModule () {
this.$router.push('/' + this.activeModule.route)
}
},
created () {
this.activateModule()
} }
} }
</script> </script>
<style scoped> <style scoped>
header { header > div:first-child {
background: #ad7fa8; /* for browsers that don't support gradients */ background: #ad7fa8; /* for browsers that don't support gradients */
/* background: linear-gradient(#ad7fa8, #888a85); /* light magenta to light alu */ background: linear-gradient(#ad7fa8, #343a40); /* light magenta to bootstrap dark navbar */
/* background: linear-gradient(#ad7fa8, #555753); /* light magenta to medium alu */
/* background: linear-gradient(#ad7fa8, #5c3566); /* light magenta to dark magenta */
/* background: linear-gradient(#ad7fa8, #75507b); /* light magenta to medium magenta */
/* background: linear-gradient(#5c3566, #555753); /* dark magenta to light alu */
background: linear-gradient(#5c3566, #ad7fa8); /* dark magenta to light magenta */
border-bottom: 1px solid #5c3566;
padding-bottom: 1em; padding-bottom: 1em;
margin-bottom: 2em;
} }
div.container { header > div:nth-child(2) {
text-align: center; background-color: #343a40;
margin-bottom: 2em;
} }
.header-branding { .header-branding {
height: 75px; height: 75px;
...@@ -75,17 +73,22 @@ div.container { ...@@ -75,17 +73,22 @@ div.container {
} }
.header-title { .header-title {
font-size: 3em; font-size: 3em;
font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
.header-title a { .header-title a {
text-decoration: none; text-decoration: none;
color: #2e3436; color: #2e3436;
text-shadow: #ccc 0 0 10px; text-shadow: #eee 0 0 10px;
} }
.header-logo { .header-logo {
width: 75px; width: 75px;
height: 75px; height: 75px;
} }
.help-image {
width: 24px;
height: 24px;
padding: 0;
margin: 0;
}
</style> </style>
<template> <template>
<div> <b-container>
<h1>Sendereihen &amp; Sendungen</h1> <div>
<div class="row"> <h1>Sendereihen &amp; Sendungen</h1>
<div class="col">
Aktuelle Sendereihe:
<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>
</div>
<p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div v-if="episodesLoaded">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col">
<div v-for="episode in this.episodesFutureShowFirstHalf"> Aktuelle Sendereihe:
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" /> <select v-model="currentShow" v-on:change="switchShow">
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" /> <option v-for="(show, index) in this.shows" v-bind:value="index">{{ show.name }}</option>
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }}) </select>
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span> <hr />
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
<div class="col-6">
<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>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
<div class="recentepisodes"> <p align="left">Die nächsten <select v-model="numUpcoming">
<p>Die letzten <select v-model="numRecent">
<option>8</option> <option>8</option>
<option>16</option> <option>16</option>
<option value="all">alle</option> <option value="all">alle</option>
</select> Sendungen:</p> </select> Sendungen:</p>
<div v-if="episodesLoaded"> <div v-if="episodesLoaded">
<div class="section group"> <div class="row">
<div class="col span_2_of_4"> <div class="col-6">
<div v-for="episode in this.episodesPastShowFirstHalf"> <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-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" /> <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }}) {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
...@@ -57,36 +28,67 @@ ...@@ -57,36 +28,67 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div> </div>
</div> </div>
<div class="col span_2_of_4"> <div class="col-6">
<div v-for="episode in this.episodesPastShowSecondHalf"> <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-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" /> <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }}) {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span> <span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="editEpisode" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<hr />
<div class="showsettings"> <div class="recentepisodes">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2> <p>Die letzten <select v-model="numRecent">
<div v-if="showsLoaded"> <option>8</option>
<p> <option>16</option>
<span v-if="shows[currentShow].short_description === ''"><b>Kurzbeschreibung:</b><i>(noch keine Kurzbeschreibung eingetragen)</i></span> <option value="all">alle</option>
<span v-else="shows[currentShow].short_description === ''"><b>Kurzbeschreibung</b><br />{{ shows[currentShow].short_description }}</span> </select> Sendungen:</p>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" /> <div v-if="episodesLoaded">
</p> <div class="section group">
<p> <div class="col span_2_of_4">
CBA-Url: <a v-bind:href="shows[currentShow].cba_url">{{ shows[currentShow].cba_url }}</a> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" /> <div v-for="episode in this.episodesPastShowFirstHalf">
</p> <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 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 />
<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>
<p>
CBA-Url: <a v-bind:href="shows[currentShow].cba_url">{{ shows[currentShow].cba_url }}</a> <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>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div> </div>
</div> </b-container>
</template> </template>
<script> <script>
......
...@@ -12,8 +12,7 @@ Vue.use(Router) ...@@ -12,8 +12,7 @@ Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ path: '/', component: Home }, { path: '/', alias: '/home', name: 'home', component: Home },
{ path: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager }, { path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager }, { path: '/files', name: 'files', component: FileManager },
{ path: '/login', name: 'login', component: LogIn }, { path: '/login', name: 'login', component: LogIn },
......
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
/**
* Layout
*/
/** /**
* Typography * Typography
......
Markdown is supported
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