djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

work on channel support - add new channel, select channel in menu

Browse Source
This commit is contained in:
jb-alvarado 2020-12-29 22:01:15 +01:00
parent fd1e72e2f6
commit bfd0795203
3 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Menu.vue
View File

@ -20,6 +20,11 @@
<b-nav-item to="/configure" exact-active-class="active-menu-item">
Configure
</b-nav-item>
<b-nav-item-dropdown :text="configGui[configID].channel" right>
<b-dropdown-item v-for="(channel, index) in configGui" :key="channel.key" @click="selectChannel(index)">
{{ channel.channel }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item to="/" @click="logout()">
Logout
</b-nav-item>
@ -29,10 +34,13 @@
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Menu',
computed: {
...mapState('config', ['configID', 'configGui'])
},
methods: {
@ -43,6 +51,10 @@ export default {
} catch (e) {
this.formError = e.message
}
},
selectChannel (index) {
this.$store.commit('config/UPDATE_CONFIG_ID', index)
}
}
}

30
pages/configure.vue
View File

@ -13,7 +13,14 @@
label-class="font-weight-bold pt-0"
class="config-group"
>
<div v-for="(prop, name, idx) in configGui" :key="idx">
<div style="width: 100%; height: 43px;">
<div class="float-right">
<b-button size="sm" variant="primary" class="m-md-2" @click="addChannel()">
Add new Channel
</b-button>
</div>
</div>
<div v-for="(prop, name, idx) in configGui[configID]" :key="idx">
<b-form-group
v-if="idx >= 1"
label-cols-sm="2"
@ -23,7 +30,7 @@
>
<b-form-tags
v-if="name === 'extra_extensions'"
v-model="configGui[name]"
v-model="configGui[configID][name]"
:input-id="name"
separator=" ,;"
:placeholder="`add ${name}...`"
@ -32,8 +39,8 @@
<b-form-text v-if="name === 'extra_extensions'">
Visible extensions only for the GUI and not the playout
</b-form-text>
<b-form-select v-else-if="name === 'net_interface'" :id="name" v-model="configGui[name]" :options="netChoices" :value="prop" />
<b-form-input v-else :id="name" v-model="configGui[name]" :value="prop" />
<b-form-select v-else-if="name === 'net_interface'" :id="name" v-model="configGui[configID][name]" :options="netChoices" :value="prop" />
<b-form-input v-else :id="name" v-model="configGui[configID][name]" :value="prop" />
</b-form-group>
</div>
</b-form-group>
@ -237,7 +244,7 @@ export default {
},
computed: {
...mapState('config', ['netChoices']),
...mapState('config', ['configID', 'netChoices']),
configGui: {
get () {
return this.$store.state.config.configGui
@ -265,12 +272,23 @@ export default {
},
methods: {
addChannel () {
const config = JSON.parse(JSON.stringify(this.configGui))
const newConf = JSON.parse(JSON.stringify(this.configGui[this.configGui.length - 1]))
newConf.id = config.length + 1
newConf.channel = `New Channel - ${Math.random().toString(36).substring(7)}`
config.push(newConf)
this.$store.commit('config/UPDATE_GUI_CONFIG', config)
this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
},
async onSubmitGui (evt) {
evt.preventDefault()
await this.$store.dispatch('auth/inspectToken')
const update = await this.$store.dispatch('config/setGuiConfig', this.configGui)
if (update.status === 200) {
if (update.status === 200 || update.status === 201) {
this.alertVariant = 'success'
this.alertMsg = 'Update GUI config success!'
} else {

37
store/config.js
View File

@ -1,4 +1,6 @@
export const state = () => ({
configID: 0,
configCount: 0,
configGui: null,
netChoices: [],
configPlayout: [],
@ -7,6 +9,12 @@ export const state = () => ({
})
export const mutations = {
UPDATE_CONFIG_ID (state, id) {
state.configID = id
},
UPDATE_CONFIG_COUNT (state, count) {
state.configCount = count
},
UPDATE_GUI_CONFIG (state, config) {
state.configGui = config
},
@ -46,35 +54,40 @@ export const actions = {
})
commit('UPDATE_NET_CHOICES', choices)
}
if (response.data && response.data[0]) {
if (response.data[0].extra_extensions) {
response.data[0].extra_extensions = response.data[0].extra_extensions.split(',')
} else {
response.data[0].extra_extensions = []
for (const data of response.data) {
if (data.extra_extensions) {
data.extra_extensions = data.extra_extensions.split(',')
} else {
data.extra_extensions = []
}
}
commit('UPDATE_GUI_CONFIG', response.data[0])
commit('UPDATE_GUI_CONFIG', response.data)
commit('UPDATE_CONFIG_COUNT', response.data.length)
} else {
commit('UPDATE_GUI_CONFIG', {
id: 0,
commit('UPDATE_GUI_CONFIG', [{
id: 1,
channel: '',
player_url: '',
playout_config: '',
net_interface: '',
media_disk: '',
extra_extensions: []
})
}])
}
},
async setGuiConfig ({ commit, state }, obj) {
const stringObj = JSON.parse(JSON.stringify(obj))
stringObj.extra_extensions = obj.extra_extensions.join(',')
const stringObj = JSON.parse(JSON.stringify(obj[state.configID]))
stringObj.extra_extensions = stringObj.extra_extensions.join(',')
let response
if (state.configPlayout.length === 0) {
if (state.configPlayout.length === 0 || state.configCount !== stringObj.length) {
response = await this.$axios.post('api/player/guisettings/', stringObj)
} else {
response = await this.$axios.put(`api/player/guisettings/${obj.id}/`, stringObj)
response = await this.$axios.put(`api/player/guisettings/${obj[state.configID].id}/`, stringObj)
}
return response