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

components/Menu.vue

@@ -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)
         }
     }
 }

pages/configure.vue

@@ -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-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[name]" :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 {

store/config.js

@@ -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) {
+            for (const data of response.data) {
-                response.data[0].extra_extensions = response.data[0].extra_extensions.split(',')
+                if (data.extra_extensions) {
-            } else {
+                    data.extra_extensions = data.extra_extensions.split(',')
-                response.data[0].extra_extensions = []
+                } 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', {
+            commit('UPDATE_GUI_CONFIG', [{
-                id: 0,
+                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))
+        const stringObj = JSON.parse(JSON.stringify(obj[state.configID]))
-        stringObj.extra_extensions = obj.extra_extensions.join(',')
+        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