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

make componentes bootstrap-vue compatible

parent f3cd1c33
<template>
<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/>
<app-footer></app-footer>
</div>
......@@ -27,9 +27,6 @@ export default {
{ slug: 'settings', title: 'Settings' },
{ slug: 'credits', title: 'Credits' }
],
'activeModule': {
route: 'home'
},
'user': {
name: 'jackie',
logged_in: true
......
......@@ -2,10 +2,10 @@
<footer>
<b-container>
<b-row>
<b-col sm="9">
AUTOradio dashboard v0.0.1
<b-col sm="8">
autoradio/<b>dashboard v0.0.23</b>
</b-col>
<b-col sm="3" align="right">
<b-col sm="4" align="right">
... bla ... bla ... hear the music?
</b-col>
</b-row>
......@@ -19,13 +19,18 @@ export default {
</script>
<style>
html, body, #app {
height: 100%;
}
#app {
display: flex;
flex-direction: column;
}
footer {
background-color: #555753;
background-color: #343a40;
border-top: 1px solid #2e3436;
color: #fff;
position:absolute;
bottom:0px;
margin:0px auto;
width: 100%
color: rgba(255, 255, 255, 0.5);
width: 100%;
margin-top: auto;
}
</style>
<template>
<header>
<b-container>
<b-row class="header-branding">
<b-col md="10">
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span>
</b-col>
<b-col md="2" class="d-none d-sm-none d-md-block">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</b-col>
</b-row>
<b-row>
<b-col md="1">
<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>
</b-col>
<b-col md="9">
<nav>
Go to:
<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>
</b-col>
<b-col md="2">
<div v-if="user.logged_in">
{{ user.name }}
<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>
</div>
<div v-if="! user.logged_in">
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>
</div>
</b-col>
</b-row>
</b-container>
<div>
<b-container>
<b-row class="header-branding">
<b-col md="10">
<span class="header-title"><router-link to="home">autoradio/<b>dashboard</b></router-link></span>
</b-col>
<b-col md="2" class="d-none d-sm-none d-md-block" align="right">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</b-col>
</b-row>
</b-container>
</div>
<div>
<b-container>
<b-navbar toggleable="md" type="dark" variant="dark">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item v-for="mod in modules" :to="mod.slug">{{ mod.title }}</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="EN" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">DE</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown v-if="user.logged_in" right>
<!-- Using button-content slot -->
<template slot="button-content">
<em>{{ user.name }}</em>
</template>
<b-dropdown-item href="#">Settings</b-dropdown-item>
<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>
</template>
......@@ -39,35 +52,20 @@
export default {
props: {
modules: { type: Array, required: true },
activeModule: { type: Object, required: true },
user: { type: Object, required: true }
},
methods: {
activateModule () {
this.$router.push('/' + this.activeModule.route)
}
},
created () {
this.activateModule()
}
}
</script>
<style scoped>
header {
header > div:first-child {
background: #ad7fa8; /* for browsers that don't support gradients */
/* background: linear-gradient(#ad7fa8, #888a85); /* light magenta to light alu */
/* 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;
background: linear-gradient(#ad7fa8, #343a40); /* light magenta to bootstrap dark navbar */
padding-bottom: 1em;
margin-bottom: 2em;
}
div.container {
text-align: center;
header > div:nth-child(2) {
background-color: #343a40;
margin-bottom: 2em;
}
.header-branding {
height: 75px;
......@@ -75,17 +73,22 @@ div.container {
}
.header-title {
font-size: 3em;
font-weight: bold;
vertical-align: middle;
}
.header-title a {
text-decoration: none;
color: #2e3436;
text-shadow: #ccc 0 0 10px;
text-shadow: #eee 0 0 10px;
}
.header-logo {
width: 75px;
height: 75px;
}
.help-image {
width: 24px;
height: 24px;
padding: 0;
margin: 0;
}
</style>
<template>
<div>
<h1>Sendereihen &amp; Sendungen</h1>
<div class="row">
<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">
<b-container>
<div>
<h1>Sendereihen &amp; Sendungen</h1>
<div class="row">
<div class="col-6">
<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 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 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>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
<div class="recentepisodes">
<p>Die letzten <select v-model="numRecent">
<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="section group">
<div class="col span_2_of_4">
<div v-for="episode in this.episodesPastShowFirstHalf">
<div class="row">
<div class="col-6">
<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) }})
......@@ -57,36 +28,67 @@
<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">
<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="editEpisode" />
<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>
<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 class="recentepisodes">
<p>Die letzten <select v-model="numRecent">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<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 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 v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
</div>
</b-container>
</template>
<script>
......
......@@ -12,8 +12,7 @@ Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/home', name: 'home', component: Home },
{ path: '/', alias: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager },
{ path: '/login', name: 'login', component: LogIn },
......
......@@ -5,6 +5,9 @@
/**
* Layout
*/
/**
* 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