Commit daa31daa authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: first scaffold for playlist manager

parent d93865c2
VUE_APP_API_STEERING = http://127.0.0.1:8000/api/v1/
VUE_APP_API_STEERING_SHOWS = http://127.0.0.1:8000/api/v1/shows/
VUE_APP_API_TANK = http://127.0.0.1:4000/api/v1/
VUE_APP_OIDC_CLIENT_ID = 078036
VUE_APP_API_STEERING_OIDC_URI = http://localhost:8000/openid
VUE_APP_API_STEERING_OIDC_EXPIRE_NOTIFICATION = 120
......
......@@ -5,6 +5,10 @@
VUE_APP_API_STEERING = http://YOUR.STEERING.DOMAIN/api/v1/
VUE_APP_API_STEERING_SHOWS = http://YOUR.STEERING.DOMAIN/api/v1/shows/
# aura/tank REST API settings
# ===========================
VUE_APP_API_TANK = http://YOUR.TANK.DOMAIN/api/v1/
# Open ID Connect settings
# ========================
......
<template>
<b-container align="center">
<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 />
<b-container>
<b-row>
<b-col>
<h3>Dateien und Playlists</h3>
</b-col>
<b-col align="right">
<b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
<b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<hr />
<b-jumbotron>
<template slot="header">
<span v-if="loaded.shows">
{{ shows[currentShow].name }}
</span>
<span v-else>Shows are being loaded</span>
</template>
<template slot="lead">
<span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
</template>
<hr />
<div align="center">
<b-button-group>
<b-button size="lg" :variant="button.files" @click="switchMode('files')">Files</b-button>
<b-button size="lg" :variant="button.playlists" @click="switchMode('playlists')">Playlists</b-button>
</b-button-group>
</div>
</b-jumbotron>
<div v-if="mode === 'files'">
<div v-if="!loaded.files">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
</b-col>
</b-row>
</div>
<div v-else>
files
</div>
</div>
<div v-if="mode === 'playlists'">
<div v-if="!loaded.playlists">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
</b-col>
</b-row>
</div>
<div v-else>
playlists
</div>
</div>
</b-container>
</template>
<script>
export default {}
import axios from 'axios'
export default {
data () {
return {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created())
currentShow: 0, // index of the currently selected show in our shows array
currentShowID: 0, // actual id of the currently selected show
groups: [], // group array from the tank (needed until #2 is solved)
groupExists: false, // indicates if there is already a group in the tank for the current show
mode: 'files',
loaded: {
shows: false,
groups: false,
files: false,
playlists: false
},
button: {
files: 'info',
playlists: 'outline-info'
}
}
},
methods: {
switchShow: function (index) {
// set the current show and its ID to whatever we want to switch to now
this.currentShow = index
this.currentShowID = this.shows[this.currentShow].id
},
switchMode: function (mode) {
if (this.mode !== mode) {
this.mode = mode
for (var b in this.button) {
if (b === mode) this.button[b] = 'info'
else this.button[b] = 'outline-info'
}
}
},
fetchGroup: function (slug) {
this.groupExists = false
for (var s in this.groups) {
if (this.groups[s].name === slug) {
this.groupExists = true
// the group for this show already exists, so lets fetch files and playlists
var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/files'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
this.loaded.files = true
}).catch(error => {
alert('There was an error fetching files from tank: ' + error)
})
var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/playlists'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
this.loaded.playlists = true
}).catch(error => {
alert('There was an error fetching playlists from tank: ' + error)
})
this.loaded.groups = true
return
}
}
// it is important to set this to true, so the interface knows the groups
// are already loaded but for the current show there is no group in the tank
this.loaded.groups = true
}
},
created () {
// when we enter this module, we want to load all shows of the current user
// before we search for corresponding groups in the tank
var uri = process.env.VUE_APP_API_STEERING_SHOWS
// only the superuser should see all shows and therefore files and playlists
// normal users should only see their own shows
if (!this.$parent.user.steeringUser.is_superuser) {
uri += '?owner=' + this.$parent.user.steeringUser.id
}
// now make the API call to fetch the shows
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are now shows associated with your account!')
return
}
this.shows = response.data
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.loaded.shows = true
this.switchShow(this.currentShow)
//
// now that all the shows are laoded we can fetch the groups from tank
var uri = process.env.VUE_APP_API_TANK + 'groups'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are no groups!')
return
}
// store the whole group array (until issue #2 is fixed)
// and then fetch group data for the current show
this.groups = response.data.results
this.fetchGroup(this.shows[this.currentShow].slug)
}).catch(error => {
alert('There was an error fetching groups from tank: ' + error)
})
}).catch(error => {
alert('There was an error fetching shows from steering: ' + error)
})
}
}
</script>
<style>
div.filelistbox {
border: 1px solid #e9ecef;
border-radius: 0.3rem;
padding: 1rem 2rem;
}
</style>
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