272 lines
8.0 KiB
Vue
272 lines
8.0 KiB
Vue
<template>
|
|
<div class="ui vertical stripe segment" v-title="labels.title">
|
|
<div>
|
|
<div>
|
|
<h2 class="ui header">
|
|
<translate>Builder</translate>
|
|
</h2>
|
|
<p><translate>You can use this interface to build your own custom radio, which will play tracks according to your criteria.</translate></p>
|
|
<div class="ui form">
|
|
<div v-if="success" class="ui positive message">
|
|
<div class="header">
|
|
<template v-if="radioName">
|
|
<translate>Radio updated</translate>
|
|
</template>
|
|
<template v-else>
|
|
<translate>Radio created</translate>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="field">
|
|
<label for="name"><translate>Radio name</translate></label>
|
|
<input id="name" type="text" v-model="radioName" :placeholder="labels.placeholder.name" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="description"><translate>Description</translate></label>
|
|
<textarea rows="2" id="description" type="text" v-model="radioDesc" :placeholder="labels.placeholder.description" />
|
|
</div>
|
|
<div class="inline field">
|
|
<input id="public" type="checkbox" v-model="isPublic" />
|
|
<label for="public"><translate>Display publicly</translate></label>
|
|
</div>
|
|
<button :disabled="!canSave" @click="save" :class="['ui', 'green', {loading: isLoading}, 'button']">
|
|
<translate>Save</translate>
|
|
</button>
|
|
<radio-button v-if="id" type="custom" :custom-radio-id="id"></radio-button>
|
|
</div>
|
|
</div>
|
|
<div class="ui form">
|
|
<p>
|
|
<translate>Add filters to customize your radio</translate>
|
|
</p>
|
|
<div class="inline field">
|
|
<select class="ui dropdown" v-model="currentFilterType">
|
|
<option value="">
|
|
<translate>Select a filter</translate>
|
|
</option>
|
|
<option v-for="f in availableFilters" :value="f.type">{{ f.label }}</option>
|
|
</select>
|
|
<button :disabled="!currentFilterType" @click="add" class="ui button">
|
|
<translate>Add filter</translate>
|
|
</button>
|
|
</div>
|
|
<p v-if="currentFilter">
|
|
{{ currentFilter.help_text }}
|
|
</p>
|
|
</div>
|
|
<table class="ui table">
|
|
<thead>
|
|
<tr>
|
|
<th class="two wide"><translate>Filter name</translate></th>
|
|
<th class="one wide"><translate>Exclude</translate></th>
|
|
<th class="six wide"><translate>Config</translate></th>
|
|
<th class="five wide"><translate>Candidates</translate></th>
|
|
<th class="two wide"><translate>Actions</translate></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<builder-filter
|
|
v-for="(f, index) in filters"
|
|
:key="(f, index, f.hash)"
|
|
:index="index"
|
|
@update-config="updateConfig"
|
|
@delete="deleteFilter"
|
|
:config="f.config"
|
|
:filter="f.filter">
|
|
</builder-filter>
|
|
</tbody>
|
|
</table>
|
|
<template v-if="checkResult">
|
|
<h3
|
|
class="ui header"
|
|
v-translate="{count: checkResult.candidates.count}"
|
|
:translate-n="checkResult.candidates.count"
|
|
translate-plural="%{ count } tracks matching combined filters">
|
|
%{ count } track matching combined filters
|
|
</h3>
|
|
<track-table v-if="checkResult.candidates.sample" :tracks="checkResult.candidates.sample"></track-table>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
|
import $ from 'jquery'
|
|
import _ from 'lodash'
|
|
import BuilderFilter from './Filter'
|
|
import TrackTable from '@/components/audio/track/Table'
|
|
import RadioButton from '@/components/radios/Button'
|
|
|
|
export default {
|
|
props: {
|
|
id: {required: false}
|
|
},
|
|
components: {
|
|
BuilderFilter,
|
|
TrackTable,
|
|
RadioButton
|
|
},
|
|
data: function () {
|
|
return {
|
|
isLoading: false,
|
|
success: false,
|
|
availableFilters: [],
|
|
currentFilterType: null,
|
|
filters: [],
|
|
checkResult: null,
|
|
radioName: '',
|
|
radioDesc: '',
|
|
isPublic: true
|
|
}
|
|
},
|
|
created: function () {
|
|
let self = this
|
|
this.fetchFilters().then(() => {
|
|
if (self.id) {
|
|
self.fetch()
|
|
}
|
|
})
|
|
},
|
|
mounted () {
|
|
$('.ui.dropdown').dropdown()
|
|
},
|
|
methods: {
|
|
fetchFilters: function () {
|
|
let self = this
|
|
let url = 'radios/radios/filters/'
|
|
return axios.get(url).then((response) => {
|
|
self.availableFilters = response.data
|
|
})
|
|
},
|
|
add () {
|
|
this.filters.push({
|
|
config: {},
|
|
filter: this.currentFilter,
|
|
hash: +new Date()
|
|
})
|
|
this.fetchCandidates()
|
|
},
|
|
updateConfig (index, field, value) {
|
|
this.filters[index].config[field] = value
|
|
this.fetchCandidates()
|
|
},
|
|
deleteFilter (index) {
|
|
this.filters.splice(index, 1)
|
|
this.fetchCandidates()
|
|
},
|
|
fetch: function () {
|
|
let self = this
|
|
self.isLoading = true
|
|
let url = 'radios/radios/' + this.id + '/'
|
|
axios.get(url).then((response) => {
|
|
self.filters = response.data.config.map(f => {
|
|
return {
|
|
config: f,
|
|
filter: this.availableFilters.filter(e => { return e.type === f.type })[0],
|
|
hash: +new Date()
|
|
}
|
|
})
|
|
self.radioName = response.data.name
|
|
self.radioDesc = response.data.description
|
|
self.isPublic = response.data.is_public
|
|
self.isLoading = false
|
|
})
|
|
},
|
|
fetchCandidates: function () {
|
|
let self = this
|
|
let url = 'radios/radios/validate/'
|
|
let final = this.filters.map(f => {
|
|
let c = _.clone(f.config)
|
|
c.type = f.filter.type
|
|
return c
|
|
})
|
|
final = {
|
|
'filters': [
|
|
{'type': 'group', filters: final}
|
|
]
|
|
}
|
|
axios.post(url, final).then((response) => {
|
|
self.checkResult = response.data.filters[0]
|
|
})
|
|
},
|
|
save: function () {
|
|
let self = this
|
|
self.success = false
|
|
self.isLoading = true
|
|
|
|
let final = this.filters.map(f => {
|
|
let c = _.clone(f.config)
|
|
c.type = f.filter.type
|
|
return c
|
|
})
|
|
final = {
|
|
'name': this.radioName,
|
|
'description': this.radioDesc,
|
|
'is_public': this.isPublic,
|
|
'config': final
|
|
}
|
|
if (this.id) {
|
|
let url = 'radios/radios/' + this.id + '/'
|
|
axios.put(url, final).then((response) => {
|
|
self.isLoading = false
|
|
self.success = true
|
|
})
|
|
} else {
|
|
let url = 'radios/radios/'
|
|
axios.post(url, final).then((response) => {
|
|
self.success = true
|
|
self.isLoading = false
|
|
self.$router.push({
|
|
name: 'library.radios.detail',
|
|
params: {
|
|
id: response.data.id
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
labels () {
|
|
let title = this.$gettext('Radio Builder')
|
|
let placeholder = {
|
|
'name': this.$gettext('My awesome radio'),
|
|
'description': this.$gettext('My awesome description')
|
|
}
|
|
return {
|
|
title,
|
|
placeholder
|
|
}
|
|
},
|
|
canSave: function () {
|
|
return (
|
|
this.radioName.length > 0 && this.checkErrors.length === 0
|
|
)
|
|
},
|
|
checkErrors: function () {
|
|
if (!this.checkResult) {
|
|
return []
|
|
}
|
|
let errors = this.checkResult.errors
|
|
return errors
|
|
},
|
|
currentFilter: function () {
|
|
let self = this
|
|
return this.availableFilters.filter(e => {
|
|
return e.type === self.currentFilterType
|
|
})[0]
|
|
}
|
|
},
|
|
watch: {
|
|
filters: {
|
|
handler: function () {
|
|
this.fetchCandidates()
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|