add config

ffplayout/frontend/pages/configure.vue

@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <b-container class="config-container">
+            <b-form v-if="config" @submit="onSubmit">
+                <b-form-group
+                    v-for="(item, key, index) in config"
+                    :key="index"
+                    label-cols-lg="2"
+                    :label="key"
+                    label-size="lg"
+                    label-class="font-weight-bold pt-0"
+                    class="config-group"
+                >
+                    <b-form-group
+                        v-for="(prop, name, idx) in item"
+                        :key="idx"
+                        label-cols-sm="2"
+                        :label="(typeof prop === 'boolean') ? '' : name"
+                        label-align-sm="right"
+                        :label-for="name"
+                    >
+                        <b-form-checkbox
+                            v-if="typeof prop === 'boolean'"
+                            :id="name"
+                            v-model="config[key][name]"
+                            :name="name"
+                        >
+                            {{ name }}
+                        </b-form-checkbox>
+                        <b-form-input
+                            v-else-if="typeof prop === 'number' && Number.isInteger(prop)"
+                            :id="name"
+                            v-model="config[key][name]"
+                            type="number"
+                        />
+                        <b-form-input
+                            v-else-if="typeof prop === 'number'"
+                            :id="name"
+                            v-model="config[key][name]"
+                            type="number"
+                            step="0.001"
+                        />
+                        <b-form-tags
+                            v-else-if="Array.isArray(prop)"
+                            v-model="config[key][name]"
+                            input-id="tags-basic"
+                            placeholder="add item..."
+                            class="mb-2"
+                        />
+                        <b-form-input v-else :id="name" v-model="config[key][name]" :value="prop" />
+                    </b-form-group>
+                </b-form-group>
+
+                <b-button type="submit" variant="primary">
+                    Save
+                </b-button>
+            </b-form>
+        </b-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Configure',
+
+    components: {},
+
+    async asyncData ({ app, store }) {
+        await store.dispatch('auth/inspectToken')
+        await store.dispatch('config/getConfig')
+
+        return {
+            config: store.state.config.config
+        }
+    },
+
+    data () {
+        return {
+        }
+    },
+
+    methods: {
+        onSubmit (evt) {
+            evt.preventDefault()
+            this.$store.dispatch('config/setConfig', this.config)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.config-container {
+    margin: 2em auto 0;
+    padding: 0;
+}
+
+.config-group {
+    margin-bottom: 2em;
+}
+</style>

ffplayout/frontend/pages/index.vue

@@ -137,7 +137,9 @@
                                 Media
                             </b-button>
                             <b-button>Logging</b-button>
-                            <b-button>Configure</b-button>
+                            <b-button to="/configure">
+                                Configure
+                            </b-button>
                             <b-button @click="logout()">
                                 Logout
                             </b-button>

ffplayout/frontend/store/config.js

@@ -0,0 +1,39 @@
+export const state = () => ({
+    config: null
+})
+
+export const mutations = {
+    UPDATE_CONFIG (state, config) {
+        state.config = config
+    }
+}
+
+export const actions = {
+    async getConfig ({ commit, state, rootState }) {
+        const response = await this.$axios.get('api/config/?config', { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+
+        if (response.data) {
+            // post_ffmpeg_param is normally a object, for the form we convert it to a string
+            response.data.out.post_ffmpeg_param = JSON.stringify(response.data.out.post_ffmpeg_param).replace('{', '').replace('}', '').replace(/":/g, ' ').replace(/","/g, ' ').replace(/"/g, '')
+            commit('UPDATE_CONFIG', response.data)
+        }
+    },
+
+    async setConfig ({ commit, state, rootState }, obj) {
+        const ffmpegParam = new Map()
+        const newObj = JSON.parse(JSON.stringify(obj))
+        const params = obj.out.post_ffmpeg_param.split(' ')
+
+        for (let i = 0; i < params.length; i++) {
+            if (i % 2) {
+                continue
+            } else {
+                ffmpegParam.set(params[i], (params[i + 1]) ? params[i + 1] : null)
+            }
+        }
+
+        newObj.out.post_ffmpeg_param = Object.fromEntries(ffmpegParam)
+        const response = await this.$axios.post('api/config/', { body: { name: 'andi', des: 'welcome' } })
+        console.log(response)
+    }
+}