AzuraCast/frontend/vue/components/Stations/LiquidsoapConfig.vue

<template>
    <form class="form vue-form" @submit.prevent="submit">
        <section class="card" role="region">
            <div class="card-header bg-primary-dark">
                <h2 class="card-title">
                    <translate key="lang_hdr">Edit Liquidsoap Configuration</translate>
                </h2>
            </div>

            <b-overlay variant="card" :show="loading">
                <div class="card-body">
                    <b-form-fieldset v-for="(row, index) in config" :key="index" class="mb-0">
                        <b-wrapped-form-group v-if="row.is_field" :field="$v.form[row.field_name]"
                                              :id="'form_edit_'+row.field_name" input-type="textarea"
                                              :input-attrs="{class: 'text-preformatted mb-3', spellcheck: 'false', style: 'height: 150px;'}">
                        </b-wrapped-form-group>
                        <b-form-markup v-else :id="'form_section_'+index">
                            <pre class="typography-body-1">{{ row.markup }}</pre>
                        </b-form-markup>
                    </b-form-fieldset>

                    <b-button size="lg" type="submit" variant="primary" :disabled="$v.form.$invalid">
                        <translate key="lang_btn_save_changes">Save Changes</translate>
                    </b-button>
                </div>
            </b-overlay>
        </section>
    </form>
</template>

<script>
import BFormFieldset from "~/components/Form/BFormFieldset";
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
import BFormMarkup from "~/components/Form/BFormMarkup";
import {validationMixin} from "vuelidate";
import _ from "lodash";
import mergeExisting from "~/functions/mergeExisting";

export default {
    name: 'StationsLiquidsoapConfig',
    components: {BFormFieldset, BWrappedFormGroup, BFormMarkup},
    props: {
        settingsUrl: String,
        config: Array,
        sections: Array,
    },
    mixins: [
        validationMixin
    ],
    validations() {
        let validations = {form: {}};
        _.forEach(this.sections, (section) => {
            validations.form[section] = {};
        });
        return validations;
    },
    data() {
        return {
            loading: true,
            form: {},
        }
    },
    mounted() {
        this.relist();
    },
    methods: {
        resetForm() {
            let form = {};
            _.forEach(this.sections, (section) => {
                form[section] = null;
            });
            this.form = form;
        },
        relist() {
            this.resetForm();
            this.$v.form.$reset();

            this.loading = true;
            this.axios.get(this.settingsUrl).then((resp) => {
                this.form = mergeExisting(this.form, resp.data);
                this.loading = false;
            });
        },
        submit() {
            this.$v.form.$touch();
            if (this.$v.form.$anyError) {
                return;
            }

            this.$wrapWithLoading(
                this.axios({
                    method: 'PUT',
                    url: this.settingsUrl,
                    data: this.form
                })
            ).then((resp) => {
                this.$notifySuccess();
                this.relist();
            });
        }
    }
}
</script>