AzuraCast/frontend/vue/components/Admin/Backups/ConfigureModal.vue

<template>
    <modal-form ref="modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
                :disable-save-button="v$.$invalid" @submit="submit" @hidden="resetForm">
        <b-form-fieldset>
            <div class="form-row mb-3">
                <b-wrapped-form-checkbox class="col-md-12" id="form_edit_backup_enabled"
                                         :field="v$.backup_enabled">
                    <template #label>
                        {{ $gettext('Run Automatic Nightly Backups') }}
                    </template>
                    <template #description>
                        {{
                            $gettext('Enable to have AzuraCast automatically run nightly backups at the time specified.')
                        }}
                    </template>
                </b-wrapped-form-checkbox>
            </div>

            <div class="form-row" v-if="v$.backup_enabled.$model">
                <b-wrapped-form-group class="col-md-6" id="form_backup_time_code" :field="v$.backup_time_code">
                    <template #label>
                        {{ $gettext('Scheduled Backup Time') }}
                    </template>
                    <template #description>
                        {{ $gettext('If the end time is before the start time, the playlist will play overnight.') }}
                    </template>
                    <template #default="props">
                        <time-code :id="props.id" v-model="props.field.$model" :state="props.state"></time-code>
                    </template>
                </b-wrapped-form-group>

                <b-wrapped-form-checkbox class="col-md-6" id="form_edit_exclude_media"
                                         :field="v$.backup_exclude_media">
                    <template #label>
                        {{ $gettext('Exclude Media from Backup') }}
                    </template>
                    <template #description>
                        {{
                            $gettext('Excluding media from automated backups will save space, but you should make sure to back up your media elsewhere. Note that only locally stored media will be backed up.')
                        }}
                    </template>
                </b-wrapped-form-checkbox>

                <b-wrapped-form-group class="col-md-6" id="form_backup_keep_copies" :field="v$.backup_keep_copies"
                                      input-type="number" :input-attrs="{min: '0', max: '365'}">
                    <template #label>
                        {{ $gettext('Number of Backup Copies to Keep') }}
                    </template>
                    <template #description>
                        {{
                            $gettext('Copies older than the specified number of days will automatically be deleted. Set to zero to disable automatic deletion.')
                        }}
                    </template>
                </b-wrapped-form-group>

                <b-wrapped-form-group class="col-md-6" id="edit_form_backup_storage_location"
                                      :field="v$.backup_storage_location">
                    <template #label>
                        {{ $gettext('Storage Location') }}
                    </template>
                    <template #default="props">
                        <b-form-select :id="props.id" v-model="props.field.$model"
                                       :options="storageLocationOptions"></b-form-select>
                    </template>
                </b-wrapped-form-group>

                <b-wrapped-form-group class="col-md-6" id="edit_form_backup_format" :field="v$.backup_format">
                    <template #label>
                        {{ $gettext('Backup Format') }}
                    </template>
                    <template #default="props">
                        <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
                                            :options="formatOptions"></b-form-radio-group>
                    </template>
                </b-wrapped-form-group>
            </div>
        </b-form-fieldset>
    </modal-form>
</template>

<script setup>
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
import ModalForm from "~/components/Common/ModalForm.vue";
import BFormFieldset from "~/components/Form/BFormFieldset.vue";
import mergeExisting from "~/functions/mergeExisting.js";
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
import TimeCode from "~/components/Common/TimeCode.vue";
import objectToFormOptions from "~/functions/objectToFormOptions.js";
import {computed, ref} from "vue";
import {useAxios} from "~/vendor/axios";
import {useNotify} from "~/vendor/bootstrapVue";
import {useVuelidateOnForm} from "~/components/Form/useVuelidateOnForm";

const props = defineProps({
    settingsUrl: String,
    storageLocations: Object
});

const emit = defineEmits(['relist']);

const loading = ref(true);
const error = ref(null);

const modal = ref(); // ModalForm

const {form, resetForm, v$} = useVuelidateOnForm(
    {
        'backup_enabled': {},
        'backup_time_code': {},
        'backup_exclude_media': {},
        'backup_keep_copies': {},
        'backup_storage_location': {},
        'backup_format': {},
    },
    {
        backup_enabled: false,
        backup_time_code: null,
        backup_exclude_media: null,
        backup_keep_copies: null,
        backup_storage_location: null,
        backup_format: null,
    }
);

const storageLocationOptions = computed(() => {
    return objectToFormOptions(props.storageLocations);
});

const formatOptions = computed(() => {
    return [
        {
            value: 'zip',
            text: 'Zip',
        },
        {
            value: 'tgz',
            text: 'TarGz'
        },
        {
            value: 'tzst',
            text: 'ZStd'
        }
    ];
});

const {axios} = useAxios();

const close = () => {
    emit('relist');
    modal.value.hide();
};

const open = () => {
    resetForm();
    loading.value = true;

    modal.value.show();

    axios.get(props.settingsUrl).then((resp) => {
        form.value = mergeExisting(form.value, resp.data);
        loading.value = false;
    }).catch(() => {
        close();
    });
};

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();
        close();
    });
}

defineExpose({
    open
});
</script>