recastin-panel/public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue

<template>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h4 v-if="$route.params.id == 'add'">Create a new Endpoint</h4>
                    <h4 v-if="$route.params.id != 'add'">Edit "{{ endpoint.name }}"</h4>

                    <card>
                        <form @submit="save">
                            <fg-input label="Name" v-model="endpoint.name"></fg-input>

                            <div class="form-group">
                                <p-checkbox v-model="endpoint.active">Active</p-checkbox>
                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    Type
                                </label>
                                <select class="form-control" v-model="endpoint.type">
                                    <option v-for="name in serviceNames" :value="name">{{name}}</option>
                                </select>
                            </div>

                            <div class="form-group" v-if="serverData.length">
                                <label class="control-label">
                                    Server
                                </label>
                                <select class="form-control" v-model="endpoint.server">
                                    <option v-for="server in serverData" :value="server.value">{{server.name}}</option>
                                </select>
                            </div>

                            <fg-input label="Server" v-model="endpoint.server" v-if="!serverData.length"></fg-input>

                            <fg-input label="Stream-Key" v-model="endpoint.streamKey"></fg-input>

                            <fg-input label="Channel Name" v-model="endpoint.channelName"></fg-input>

                            <button class="btn btn-primary">Save</button>
                        </form>
                    </card>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import PCheckbox from 'src/components/UIComponents/Inputs/Checkbox.vue'
    import Card from 'src/components/UIComponents/Cards/Card.vue'

    export default {
        components: {
            PCheckbox,
            Card
        },
        data() {
            return {
                endpoint: {
                    name: '',
                    active: false,
                    type: 'Mixer',
                    server: '',
                    streamKey: '',
                    channelName: '',
                },
                services: {},
                serviceNames: []
            }
        },
        mounted() {
            this.axios.get('/streams/services').then(response => {
                this.serviceNames = Object.keys(response.data);
                this.services = response.data;
            });

            if (this.$route.params.id !== 'add') {
                this.axios.get('/streams/endpoint/' + this.$route.params.id).then(response => {
                    this.endpoint = response.data;
                });
            }
        },
        methods: {
            save: function (e) {
                e.preventDefault();
                this.axios.post('/streams/' + this.$route.params.streamId + '/endpoints/update', this.endpoint).then(() => {
                    this.$router.push('/ucp/streams/' + this.$route.params.streamId + '/');
                }).catch(error => {
                    const notification = {
                        template: `<span>${error.response.data.message}</span>`
                    };

                    this.$notify(
                        {
                            component: notification,
                            icon: 'fa fa-exclamation-triangle',
                            horizontalAlign: 'right',
                            verticalAlign: 'top',
                            type: 'danger'
                        });
                });
            }
        },
        computed: {
            serverData: function () {
                let data =[];
                if (this.endpoint.type.length && this.services[this.endpoint.type]) {
                    let keys = Object.keys(this.services[this.endpoint.type]);
                    keys.forEach(name => {
                        data.push({
                            name: name,
                            value: this.services[this.endpoint.type][name]
                        })
                    });
                }

                return data;
            }
        }
    }
</script>
<style>

</style>