124 lines
4.2 KiB
Vue
124 lines
4.2 KiB
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">
|
|
{{ $gettext('Edit Liquidsoap Configuration') }}
|
|
</h2>
|
|
</div>
|
|
|
|
<info-card>
|
|
<p class="card-text">
|
|
{{
|
|
$gettext('Using this page, you can customize several sections of the Liquidsoap configuration. This allows you to add advanced functionality to your station\'s AutoDJ.')
|
|
}}
|
|
</p>
|
|
<p class="card-text">
|
|
{{
|
|
$gettext('The editable text boxes are areas where you can insert custom configuration code. The non-editable sections are automatically generated by AzuraCast.')
|
|
}}
|
|
</p>
|
|
<p class="card-text">
|
|
{{
|
|
$gettext('This is an advanced feature and custom code is not officially supported by AzuraCast. You may break your station by adding custom code, but removing it should fix any issues.')
|
|
}}
|
|
</p>
|
|
</info-card>
|
|
|
|
<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$[row.field_name]"
|
|
:id="'form_edit_'+row.field_name" input-type="textarea"
|
|
:input-attrs="{class: 'text-preformatted mb-3', spellcheck: 'false', 'max-rows': 20, rows: 5}">
|
|
</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="(v$.$invalid) ? 'danger' : 'primary'">
|
|
{{ $gettext('Save Changes') }}
|
|
</b-button>
|
|
</div>
|
|
</b-overlay>
|
|
</section>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
|
import BFormMarkup from "~/components/Form/BFormMarkup";
|
|
import {forEach} from "lodash";
|
|
import mergeExisting from "~/functions/mergeExisting";
|
|
import InfoCard from "~/components/Common/InfoCard";
|
|
import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
|
|
import {onMounted, ref} from "vue";
|
|
import {mayNeedRestartProps, useMayNeedRestart} from "~/functions/useMayNeedRestart";
|
|
import {useAxios} from "~/vendor/axios";
|
|
import {useNotify} from "~/vendor/bootstrapVue";
|
|
|
|
const props = defineProps({
|
|
...mayNeedRestartProps,
|
|
settingsUrl: String,
|
|
config: Array,
|
|
sections: Array,
|
|
});
|
|
|
|
const buildForm = () => {
|
|
let validations = {};
|
|
let blankForm = {};
|
|
|
|
forEach(props.sections, (section) => {
|
|
validations[section] = {};
|
|
blankForm[section] = null;
|
|
});
|
|
|
|
return {validations, blankForm};
|
|
}
|
|
|
|
const {validations, blankForm} = buildForm();
|
|
const {form, resetForm, v$} = useVuelidateOnForm(validations, blankForm);
|
|
|
|
const loading = ref(true);
|
|
|
|
const {mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
|
|
|
|
const {axios} = useAxios();
|
|
|
|
const relist = () => {
|
|
resetForm();
|
|
|
|
loading.value = true;
|
|
axios.get(props.settingsUrl).then((resp) => {
|
|
form.value = mergeExisting(form.value, resp.data);
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
onMounted(relist);
|
|
|
|
const {wrapWithLoading, notifySuccess} = useNotify();
|
|
|
|
const submit = () => {
|
|
v$.value.$touch();
|
|
if (v$.value.$errors.length > 0) {
|
|
return;
|
|
}
|
|
|
|
wrapWithLoading(
|
|
axios({
|
|
method: 'PUT',
|
|
url: props.settingsUrl,
|
|
data: form.value,
|
|
})
|
|
).then(() => {
|
|
notifySuccess();
|
|
|
|
mayNeedRestart();
|
|
relist();
|
|
});
|
|
}
|
|
</script>
|