Commit 9f9acc7b authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Allow file upload directly from playlist selector

parent 1f03d695
......@@ -99,7 +99,7 @@
<div
v-else
class="tw-text-center"
v-html="this.$t('no_assigned_shows', { admin_url: adminUrl })"
v-html="this.$t('noAssignedShows', { adminUrl })"
/>
</b-container>
</template>
......@@ -130,6 +130,7 @@
data() {
return {
adminUrl: `${process.env.VUE_APP_BASEURI_STEERING}/admin`,
calendarSlots: [],
// flag for when submitting resolve data
......
......@@ -8,25 +8,25 @@
/>
<hr>
<jumbotron/>
<jumbotron />
<!-- All the UI for uploading and editing files is only shown if the user
choose to edit files in the jumbotron above -->
<div v-if="mode === 'files'">
<files/>
<files />
</div>
<!-- All the UI for creating and editing playlists is only shown if the user
choose to edit playlists in the jumbotron above -->
<div v-if="mode === 'playlists'">
<playlists/>
<playlists />
</div>
</template>
<div
v-else
class="tw-text-center"
v-html="this.$t('no_assigned_shows', { admin_url: adminUrl })"
v-html="this.$t('noAssignedShows', { adminUrl })"
/>
</b-container>
</template>
......@@ -50,6 +50,8 @@
// of the data fetched from the AuRa tank API
data() {
return {
adminUrl: `${process.env.VUE_APP_BASEURI_STEERING}/admin`,
// for formatting the buttons - this way we could customize it later
button: {
files: 'info',
......
......@@ -11,19 +11,19 @@
<!-- The jumbotron is used to display the name and description of the
currently selected show -->
<show-jumbotron/>
<show-schedules/>
<show-jumbotron />
<show-schedules />
<!-- include the modals to edit show and timeslot entries from the modal compontents -->
<show-timeslots ref="timeslotsComponent"/>
<show-timeslots ref="timeslotsComponent" />
<hr>
<h2>General settings for the radio show:</h2>
<show-metaSimpleTypes/>
<show-metaArrays/>
<show-metaOwners/>
<show-metaImages/>
<show-metaSimpleTypes />
<show-metaArrays />
<show-metaOwners />
<show-metaImages />
<hr>
</template>
......@@ -31,7 +31,7 @@
<div
v-else
class="tw-text-center"
v-html="this.$t('no_assigned_shows', { admin_url: adminUrl })"
v-html="this.$t('noAssignedShows', { adminUrl })"
/>
</template>
......
......@@ -9,7 +9,7 @@
>
<span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
<span class="d-sm-none menu-context-info">Hit menu button for more:</span>
<b-navbar-toggle target="nav_collapse"/>
<b-navbar-toggle target="nav_collapse" />
<b-collapse
id="nav_collapse"
is-nav
......
......@@ -12,14 +12,13 @@
</span>
<span v-else>
{{ timeslot.playlist_id }}
<span v-if="currentPlaylistDescription">
, Description: <b>{{ currentPlaylistDescription }}</b>
</span>
<span v-if="currentPlaylistDescription">, Description: <b>{{ currentPlaylistDescription }}</b></span>
</span>
</p>
<p>Available playlists:</p>
<div v-if="loaded">
<div v-if="playlists.length">
<p>Available playlists:</p>
<b-table
ref="playlistsTable"
striped
......@@ -47,7 +46,6 @@
:class="{'is-mismatched': isMismatchedLength(data) }"
>
{{ playlistDuration(data) }}
<abbr
v-if="isMismatchedLength(data)"
:title="title(data)"
......@@ -81,6 +79,16 @@
</template>
</b-table>
</div>
<!-- If no playlists are available -->
<div
v-else
class="tw-mb-4"
>
{{ $t('playlistSelector.noPlaylistsAvailable') }}
</div>
</div>
<div v-else>
<img
src="/assets/radio.gif"
......@@ -88,11 +96,38 @@
>
</div>
<div align="center">
<div>
<div class="tw-space-x-2">
<b-button :to="'files'">
Go to FileManager
{{ $t('playlistSelector.goToFiles') }}
</b-button>
<b-button
v-if="!audioUpload"
v-model="audioFile"
@click="toggleAudioUpload"
>
{{ $t('playlistSelector.uploadAudio') }}
</b-button>
</div>
<div
v-if="audioUpload"
class="tw-mt-4 tw-space-x-2 tw-flex"
>
<b-form-file
v-model="audioFile"
accept="audio/*"
/>
<b-button
:disabled="!audioFile"
@click="upload"
>
{{ $t('playlistSelector.upload') }}
</b-button>
</div>
</div>
</b-modal>
</div>
</template>
......@@ -109,6 +144,10 @@
scheduleId: null,
timeslot: null,
audioFile: null,
audioUpload: false,
audioUploadError: '',
playlistsTableFields: [
{key: 'id', label: 'Index'},
{key: 'description', label: 'Description'},
......@@ -163,7 +202,51 @@
},
methods: {
upload(event) {
event.preventDefault();
event.stopPropagation();
if (!this.audioFile) {
this.audioUploadError = this.$t('playlistSelector.missingFile')
return;
}
this.audioUpload = false;
this.$store.dispatch('files/addFile', {
show: this.selectedShow.slug,
uploadSourceFile: this.audioFile,
callback: this.handleUploadedFile,
})
},
handleUploadedFile() {
this.$store.dispatch('files/fetchFiles', {
slug: this.selectedShow.slug,
callback: this.createPlaylistForUploadedFile
})
},
createPlaylistForUploadedFile(files) {
const file = files.slice(-1)[0]
const { slug } = this.selectedShow
const playlist = {
description: 'Automatisch erstellt durch Dateiupload',
entries: [{ file }]
}
this.$store.dispatch('playlists/add', {
slug,
playlist,
})
},
toggleAudioUpload() {
this.audioUpload = !this.audioUpload
},
open(scheduleId, timeslotId) {
this.audioFile = null
this.audioUpload = false
this.scheduleId = scheduleId
this.timeslot = this.getTimeslotById(timeslotId)
this.$refs.modalPlaylistSelector.show()
......
......@@ -8,7 +8,7 @@ export default {
// Layout
'loading': 'Lädt..',
'no_assigned_shows': 'Dir sind noch keine Sendungen zugewiesen.<br>Diese können im <a href="%{admin_url}">Administrationsbereich</a> zugewiesen werden.',
'noAssignedShows': 'Dir sind noch keine Sendungen zugewiesen.<br>Diese können im <a href="%{adminUrl}">Administrationsbereich</a> zugewiesen werden.',
'auth': {
'signOut': 'Abmelden',
......@@ -39,6 +39,13 @@ export default {
'actions': 'Aktionen',
},
'playlistSelector': {
'noPlaylistsAvailable': 'Keine Playlists verfügbar. Verwende die Buttons unten um welche zu erstellen!',
'upload': 'Hochladen',
'uploadAudio': 'Audio-Datei hochladen',
'goToFiles': "Zu 'Dateien & Playlists' gehen"
},
// Etc
'rrule': {
'day': {
......
......@@ -8,7 +8,7 @@ export default {
// Layout
'loading': 'Loading..',
'no_assigned_shows': 'You have not been assigned any shows yet.<br>They can be assigned in the <a href="%{admin_url}">administration interface</a>.',
'noAssignedShows': 'You have not been assigned any shows yet.<br>They can be assigned in the <a href="%{adminUrl}">administration interface</a>.',
'auth': {
'signOut': 'Sign out',
......@@ -39,6 +39,13 @@ export default {
'actions': 'Actions',
},
'playlistSelector': {
'noPlaylistsAvailable': 'No playlists available. Use the buttons below to create some!',
'upload': 'Upload',
'uploadAudio': 'Upload audio file',
'goToFiles': "Go to 'Files & Playlists'"
},
// Etc
'rrule': {
'day': {
......
......@@ -80,7 +80,7 @@ const actions = {
ctx.commit('setFiles', response.data.results)
ctx.commit('finishLoading', 'files')
if (data && typeof (data.callback) === 'function') {
data.callback()
data.callback(response.data.results)
}
}).catch(error => {
handleApiError(this, error, 'could not load files')
......
......@@ -87,7 +87,7 @@ const actions = {
}).then(response => {
ctx.commit('addPlaylist', response.data)
if (data && typeof (data.callback) === 'function') {
data.callback()
data.callback(response.data)
}
}).catch(error => {
handleApiError(this, error, 'could not add new playlist')
......
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