tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Prefix template refs to avoid name conflicts.

This commit is contained in:
Buster Neece 2022-12-29 13:31:23 -06:00
parent 85012ac2f1
commit ef023675ce
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
42 changed files with 232 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/vue/components/Account.vue
View File

@ -100,7 +100,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="account_api_keys" :show-toolbar="false" :fields="apiKeyFields"
<data-table ref="$dataTable" id="account_api_keys" :show-toolbar="false" :fields="apiKeyFields"
:api-url="apiKeysApiUrl">
<template #cell(actions)="row">
<b-button-group size="sm">
@ -114,16 +114,16 @@
</b-col>
</b-row>
<account-edit-modal ref="editmodal" :user-url="userUrl" :supported-locales="supportedLocales"
<account-edit-modal ref="$editModal" :user-url="userUrl" :supported-locales="supportedLocales"
@reload="reload"></account-edit-modal>
<account-change-password-modal ref="changepasswordmodal" :change-password-url="changePasswordUrl"
<account-change-password-modal ref="$changePasswordModal" :change-password-url="changePasswordUrl"
@relist="relist"></account-change-password-modal>
<account-two-factor-modal ref="twofactormodal" :two-factor-url="twoFactorUrl"
<account-two-factor-modal ref="$twoFactorModal" :two-factor-url="twoFactorUrl"
@relist="relist"></account-two-factor-modal>
<account-api-key-modal ref="apikeymodal" :create-url="apiKeysApiUrl" @relist="relist"></account-api-key-modal>
<account-api-key-modal ref="$apiKeyModal" :create-url="apiKeysApiUrl" @relist="relist"></account-api-key-modal>
</div>
</template>
@ -185,7 +185,7 @@ const apiKeyFields = [
}
];
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const {wrapWithLoading, notifySuccess} = useNotify();
const {axios} = useAxios();
@ -217,7 +217,7 @@ const relist = () => {
securityLoading.value = false;
});
datatable.value?.relist();
$dataTable.value?.relist();
};
onMounted(relist);
@ -226,22 +226,22 @@ const reload = () => {
location.reload();
};
const editmodal = ref(); // EditModal
const $editModal = ref(); // EditModal
const doEditProfile = () => {
editmodal.value?.open();
$editModal.value?.open();
};
const changepasswordmodal = ref(); // ChangePasswordModal
const $changePasswordModal = ref(); // ChangePasswordModal
const doChangePassword = () => {
changepasswordmodal.value?.open();
$changePasswordModal.value?.open();
};
const twofactormodal = ref(); // TwoFactorModal
const $twoFactorModal = ref(); // TwoFactorModal
const enableTwoFactor = () => {
twofactormodal.value?.open();
$twoFactorModal.value?.open();
};
const {confirmDelete} = useSweetAlert();
@ -261,10 +261,10 @@ const disableTwoFactor = () => {
});
};
const apikeymodal = ref(); // ApiKeyModal
const $apiKeyModal = ref(); // ApiKeyModal
const createApiKey = () => {
apikeymodal.value?.create();
$apiKeyModal.value?.create();
};
const deleteApiKey = (url) => {

9
frontend/vue/components/Account/ApiKeyModal.vue
View File

@ -1,5 +1,6 @@
<template>
<b-modal size="md" centered id="api_keys_modal" ref="modal" :title="$gettext('Add API Key')" @hidden="clearContents"
<b-modal size="md" centered id="api_keys_modal" ref="$modal" :title="$gettext('Add API Key')"
@hidden="clearContents"
no-enforce-focus>
<template #default="slotProps">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
@ -70,12 +71,12 @@ const clearContents = () => {
newKey.value = null;
};
const modal = ref(); // BModal
const $modal = ref(); // BModal
const create = () => {
clearContents();
modal.value?.show();
$modal.value?.show();
};
const {wrapWithLoading} = useNotify();
@ -104,7 +105,7 @@ const doSubmit = () => {
};
const close = () => {
modal.value?.hide();
$modal.value?.hide();
};
defineExpose({

10
frontend/vue/components/Account/ChangePasswordModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
<modal-form ref="$modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
@submit="onSubmit" @hidden="clearContents">
<b-form-fieldset>
<b-wrapped-form-group id="form_current_password" :field="v$.current_password"
@ -75,15 +75,15 @@ const clearContents = () => {
resetForm();
};
const modal = ref(); // ModalForm
const $modal = ref(); // ModalForm
const open = () => {
clearContents();
modal.value.show();
$modal.value.show();
};
const close = () => {
modal.value.hide();
$modal.value.hide();
}
const {wrapWithLoading} = useNotify();
@ -98,7 +98,7 @@ const onSubmit = () => {
wrapWithLoading(
axios.put(props.changePasswordUrl, form.value)
).finally(() => {
modal.value.hide();
$modal.value.hide();
emit('relist');
});
};

9
frontend/vue/components/Account/EditModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" :loading="loading" :title="$gettext('Edit Profile')" :error="error"
<modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Profile')" :error="error"
:disable-save-button="v$.$invalid"
@submit="doSubmit" @hidden="clearContents">
@ -11,7 +11,6 @@
<script setup>
import mergeExisting from "~/functions/mergeExisting";
import {email, required} from '@vuelidate/validators';
import useVuelidate from "@vuelidate/core";
import AccountEditForm from "./EditForm.vue";
import ModalForm from "~/components/Common/ModalForm.vue";
import {ref} from "vue";
@ -52,10 +51,10 @@ const clearContents = () => {
error.value = null;
};
const modal = ref(); // BModal
const $modal = ref(); // BModal
const close = () => {
modal.value.hide();
$modal.value.hide();
};
const {wrapWithLoading, notifySuccess} = useNotify();
@ -64,7 +63,7 @@ const {axios} = useAxios();
const open = () => {
clearContents();
modal.value?.show();
$modal.value?.show();
wrapWithLoading(
axios.get(props.userUrl)

8
frontend/vue/components/Account/TwoFactorModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" :loading="loading" :title="$gettext('Enable Two-Factor Authentication')"
<modal-form ref="$modal" :loading="loading" :title="$gettext('Enable Two-Factor Authentication')"
:error="error" :disable-save-button="v$.$invalid"
@submit="doSubmit" @hidden="clearContents" no-enforce-focus>
@ -99,10 +99,10 @@ const clearContents = () => {
error.value = null;
};
const modal = ref(); // BModal
const $modal = ref(); // BModal
const close = () => {
modal.value?.hide();
$modal.value?.hide();
};
const {wrapWithLoading, notifySuccess} = useNotify();
@ -113,7 +113,7 @@ const open = () => {
loading.value = true;
modal.value?.show();
$modal.value?.show();
wrapWithLoading(
axios.put(props.twoFactorUrl)

6
frontend/vue/components/Admin/ApiKeys.vue
View File

@ -4,7 +4,7 @@
<h2 class="card-title">{{ $gettext('API Keys') }}</h2>
</b-card-header>
<data-table ref="datatable" id="api_keys" :fields="fields" :api-url="apiUrl">
<data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="apiUrl">
<template #cell(owner)="row">
{{ row.item.user.email }}
</template>
@ -53,10 +53,10 @@ const fields = ref([
}
]);
const datatable = ref();
const $dataTable = ref();
const relist = () => {
datatable.value.relist();
$dataTable.value.relist();
};
const {confirmDelete} = useSweetAlert();

6
frontend/vue/components/Admin/AuditLog.vue
View File

@ -10,7 +10,7 @@
</div>
</div>
</div>
<data-table ref="datatable" responsive paginated
<data-table ref="$dataTable" responsive paginated
:fields="fields" :apiUrl="apiUrl">
<template #cell(date_time)="row">
{{ formatTimestamp(row.item.timestamp) }}
@ -123,10 +123,10 @@ const apiUrl = computed(() => {
return apiUrl.toString();
});
const datatable = ref(); // DataTable Template Ref
const $dataTable = ref(); // DataTable Template Ref
const relist = () => {
datatable.value.relist();
$dataTable.value.relist();
};
const formatTimestamp = (unix_timestamp) => {

24
frontend/vue/components/Admin/Backups.vue
View File

@ -74,7 +74,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="api_keys" :fields="fields" :api-url="listUrl">
<data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="listUrl">
<template #cell(timestamp)="row">
{{ toLocaleTime(row.item.timestamp) }}
</template>
@ -94,15 +94,15 @@
</data-table>
</section>
<admin-backups-configure-modal ref="configureModal" :settings-url="settingsUrl"
<admin-backups-configure-modal ref="$configureModal" :settings-url="settingsUrl"
:storage-locations="storageLocations"
@relist="relist"></admin-backups-configure-modal>
<admin-backups-run-backup-modal ref="runBackupModal" :run-backup-url="runBackupUrl"
<admin-backups-run-backup-modal ref="$runBackupModal" :run-backup-url="runBackupUrl"
:storage-locations="storageLocations"
@relist="relist"></admin-backups-run-backup-modal>
<admin-backups-last-output-modal ref="lastOutputModal"
<admin-backups-last-output-modal ref="$lastOutputModal"
:last-output="settings.backupLastOutput"></admin-backups-last-output-modal>
</div>
</template>
@ -168,7 +168,7 @@ const fields = [
}
];
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const {wrapWithLoading, notifySuccess} = useNotify();
const {axios} = useAxios();
@ -186,7 +186,7 @@ const relist = () => {
settingsLoading.value = false;
});
datatable.value.relist();
$dataTable.value.relist();
};
onMounted(relist);
@ -203,19 +203,19 @@ const toLocaleTime = (timestamp) => {
);
};
const lastOutputModal = ref(); // AdminBackupsLastOutputModal
const $lastOutputModal = ref(); // AdminBackupsLastOutputModal
const showLastOutput = () => {
lastOutputModal.value.show();
$lastOutputModal.value.show();
};
const configureModal = ref(); // AdminBackupsConfigureModal
const $configureModal = ref(); // AdminBackupsConfigureModal
const doConfigure = () => {
configureModal.value.open();
$configureModal.value.open();
};
const runBackupModal = ref(); // AdminBackupsRunBackupModal
const $runBackupModal = ref(); // AdminBackupsRunBackupModal
const doRunBackup = () => {
runBackupModal.value.open();
$runBackupModal.value.open();
};
const {confirmDelete} = useSweetAlert();

8
frontend/vue/components/Admin/Backups/ConfigureModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
<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">
@ -101,7 +101,7 @@ const emit = defineEmits(['relist']);
const loading = ref(true);
const error = ref(null);
const modal = ref(); // ModalForm
const $modal = ref(); // ModalForm
const {form, resetForm, v$} = useVuelidateOnForm(
{
@ -147,14 +147,14 @@ const {axios} = useAxios();
const close = () => {
emit('relist');
modal.value.hide();
$modal.value.hide();
};
const open = () => {
resetForm();
loading.value = true;
modal.value.show();
$modal.value.show();
axios.get(props.settingsUrl).then((resp) => {
form.value = mergeExisting(form.value, resp.data);

6
frontend/vue/components/Admin/Backups/LastOutputModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="md" id="log_view_modal" ref="modal" :title="$gettext('Log Viewer')">
<b-modal size="md" id="log_view_modal" ref="$modal" :title="$gettext('Log Viewer')">
<pre id="modal-log-view-contents" class="form-control log-viewer"
style="height: 300px; overflow-y: auto;">{{ lastOutput }}</pre>
</b-modal>
@ -12,9 +12,9 @@ const props = defineProps({
lastOutput: String,
});
const modal = ref(); // Template ref
const $modal = ref(); // Template ref
const show = () => {
modal.value.show();
$modal.value.show();
};
defineExpose({

8
frontend/vue/components/Admin/Backups/RunBackupModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="md" centered id="run_backup_modal" ref="modal" :title="$gettext('Run Manual Backup')"
<b-modal size="md" centered id="run_backup_modal" ref="$modal" :title="$gettext('Run Manual Backup')"
@hidden="clearContents">
<template #default="slotProps">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
@ -105,7 +105,7 @@ const storageLocationOptions = computed(() => {
const logUrl = ref(null);
const error = ref(null);
const modal = ref(); // BModal
const $modal = ref(); // BModal
const {form, resetForm, v$} = useVuelidateOnForm(
{
@ -121,11 +121,11 @@ const {form, resetForm, v$} = useVuelidateOnForm(
);
const open = () => {
modal.value.show();
$modal.value.show();
};
const close = () => {
modal.value.hide();
$modal.value.hide();
emit('relist');
}

18
frontend/vue/components/Admin/CustomFields.vue
View File

@ -19,7 +19,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
<data-table ref="$dataTable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
<template #cell(name)="row">
{{ row.item.name }} <code>{{ row.item.short_name }}</code>
</template>
@ -39,7 +39,7 @@
</data-table>
</b-card>
<edit-modal ref="editmodal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
<edit-modal ref="$editModal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
@relist="relist"></edit-modal>
</template>
@ -48,7 +48,7 @@ import DataTable from '~/components/Common/DataTable.vue';
import EditModal from './CustomFields/EditModal.vue';
import Icon from '~/components/Common/Icon.vue';
import InfoCard from '~/components/Common/InfoCard.vue';
import _ from 'lodash';
import _, {get} from 'lodash';
import {useTranslate} from "~/vendor/gettext";
import {ref} from "vue";
import {useSweetAlert} from "~/vendor/sweetalert";
@ -69,23 +69,23 @@ const fields = [
];
const getAutoAssignName = (autoAssign) => {
return _.get(props.autoAssignTypes, autoAssign, $gettext('None'));
return get(props.autoAssignTypes, autoAssign, $gettext('None'));
};
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const relist = () => {
datatable.value.refresh();
$dataTable.value.refresh();
};
const editmodal = ref(); // EditModal
const $editModal = ref(); // EditModal
const doCreate = () => {
editmodal.value.create();
$editModal.value.create();
}
const doEdit = (url) => {
editmodal.value.edit(url);
$editModal.value.edit(url);
}
const {confirmDelete} = useSweetAlert();

9
frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('CPU Stats Help')">
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('CPU Stats Help')">
<div class="mb-2">
<h6>
<b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
@ -68,15 +68,14 @@
<script setup>
import {ref} from "vue";
import {BModal} from "bootstrap-vue";
const modal = ref(); // BModal
const $modal = ref(); // BModal
const create = () => {
modal.value.show();
$modal.value.show();
}
const close = () => {
modal.value.hide();
$modal.value.hide();
}
defineExpose({

8
frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('Memory Stats Help')">
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('Memory Stats Help')">
<div class="mb-2">
<h6>
<b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
@ -42,13 +42,13 @@
import {ref} from "vue";
import {BModal} from "bootstrap-vue";
const modal = ref(); // BModal
const $modal = ref(); // BModal
const create = () => {
modal.value.show();
$modal.value.show();
}
const close = () => {
modal.value.hide();
$modal.value.hide();
}
defineExpose({

6
frontend/vue/components/Admin/Logs.vue
View File

@ -23,7 +23,7 @@
</b-tabs>
</div>
<streaming-log-modal ref="modal"></streaming-log-modal>
<streaming-log-modal ref="$modal"></streaming-log-modal>
</template>
<script setup>
@ -36,9 +36,9 @@ const props = defineProps({
stationLogs: Array
});
const modal = ref(); // StreamingLogModal
const $modal = ref(); // StreamingLogModal
const viewLog = (url) => {
modal.value.show(url);
$modal.value.show(url);
};
</script>

6
frontend/vue/components/Admin/Settings/ServicesTab.vue
View File

@ -220,7 +220,7 @@
</div>
</b-form-fieldset>
<streaming-log-modal ref="acmemodal"></streaming-log-modal>
<streaming-log-modal ref="$acmeModal"></streaming-log-modal>
<admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
</template>
@ -270,7 +270,7 @@ const avatarServiceOptions = computed(() => {
]
});
const acmemodal = ref(); // StreamingLogModal
const $acmeModal = ref(); // StreamingLogModal
const {wrapWithLoading} = useNotify();
const {axios} = useAxios();
@ -278,7 +278,7 @@ const generateAcmeCert = () => {
wrapWithLoading(
axios.put(props.acmeUrl)
).then((resp) => {
acmemodal.value.show(resp.data.links.log);
$acmeModal.value.show(resp.data.links.log);
});
}
</script>

6
frontend/vue/components/Admin/Settings/TestMessageModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal id="send_test_message" centered ref="modal" :title="$gettext('Send Test Message')">
<b-modal id="send_test_message" centered ref="$modal" :title="$gettext('Send Test Message')">
<b-form @submit.prevent="doSendTest">
<b-wrapped-form-group id="email_address" :field="v$.emailAddress" autofocus>
<template #label>
@ -44,11 +44,11 @@ const {form, resetForm, v$} = useVuelidateOnForm(
}
);
const modal = ref(); // BModal
const $modal = ref(); // BModal
const close = () => {
v$.value.reset();
modal.value.hide();
$modal.value.hide();
}
const {wrapWithLoading, notifySuccess} = useNotify();

8
frontend/vue/components/Admin/Stations/CloneModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" :loading="loading" :title="$gettext('Clone Station')" :error="error"
<modal-form ref="$modal" :loading="loading" :title="$gettext('Clone Station')" :error="error"
:disable-save-button="v$.$invalid"
@submit="doSubmit" @hidden="clearContents">
@ -37,7 +37,7 @@ const {form, resetForm, v$} = useVuelidateOnForm(
}
);
const modal = ref(); // ModalForm
const $modal = ref(); // ModalForm
const {$gettext} = useTranslate();
const create = (stationName, stationCloneUrl) => {
@ -51,7 +51,7 @@ const create = (stationName, stationCloneUrl) => {
error.value = null;
cloneUrl.value = stationCloneUrl;
modal.value.show();
$modal.value.show();
};
const clearContents = () => {
@ -60,7 +60,7 @@ const clearContents = () => {
};
const close = () => {
modal.value.hide();
$modal.value.hide();
};
const {wrapWithLoading, notifySuccess} = useNotify();

18
frontend/vue/components/Admin/Stations/EditModal.vue
View File

@ -1,7 +1,7 @@
<template>
<b-modal size="lg" id="station_edit_modal" ref="modal" :title="langTitle" :busy="loading"
<b-modal size="lg" id="station_edit_modal" ref="$modal" :title="langTitle" :busy="loading"
@shown="resetForm" @hidden="clearContents">
<admin-stations-form v-bind="$props" ref="form" is-modal :create-url="createUrl" :edit-url="editUrl"
<admin-stations-form v-bind="$props" ref="$form" is-modal :create-url="createUrl" :edit-url="editUrl"
:is-edit-mode="isEditMode" @error="close" @submitted="onSubmit"
@validUpdate="onValidUpdate" @loadingUpdate="onLoadingUpdate">
<template #submitButton>
@ -51,7 +51,7 @@ const langTitle = computed(() => {
: $gettext('Add Station');
});
const modal = ref(); // BModal
const $modal = ref(); // BModal
const onValidUpdate = (newValue) => {
disableSaveButton.value = !newValue;
@ -63,22 +63,22 @@ const onLoadingUpdate = (newValue) => {
const create = () => {
editUrl.value = null;
modal.value.show();
$modal.value.show();
};
const edit = (recordUrl) => {
editUrl.value = recordUrl;
modal.value.show();
$modal.value.show();
};
const form = ref(); // AdminStationsForm
const $form = ref(); // AdminStationsForm
const resetForm = () => {
form.value.reset();
$form.value.reset();
};
const close = () => {
modal.value.hide();
$modal.value.hide();
};
const onSubmit = () => {
@ -87,7 +87,7 @@ const onSubmit = () => {
};
const doSubmit = () => {
form.value.submit();
$form.value.submit();
};
const clearContents = () => {

6
frontend/vue/components/Common/Charts/HourChart.vue
View File

@ -1,5 +1,5 @@
<template>
<canvas ref="canvas">
<canvas ref="$canvas">
<slot></slot>
</canvas>
</template>
@ -17,7 +17,7 @@ const props = defineProps({
});
let $chart = null;
const canvas = ref(); // Template Ref
const $canvas = ref(); // Template Ref
const {$gettext} = useTranslate();
onMounted(() => {
@ -59,7 +59,7 @@ onMounted(() => {
}
let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
$chart = new Chart(canvas.value.getContext('2d'), chartOptions);
$chart = new Chart($canvas.value.getContext('2d'), chartOptions);
});
onUnmounted(() => {

6
frontend/vue/components/Common/Charts/PieChart.vue
View File

@ -1,5 +1,5 @@
<template>
<canvas ref="canvas">
<canvas ref="$canvas">
<slot></slot>
</canvas>
</template>
@ -19,7 +19,7 @@ const props = defineProps({
}
});
const canvas = ref(); // Template ref
const $canvas = ref(); // Template ref
let $chart = null;
onMounted(() => {
@ -44,7 +44,7 @@ onMounted(() => {
}
let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
$chart = new Chart(canvas.value.getContext('2d'), chartOptions);
$chart = new Chart($canvas.value.getContext('2d'), chartOptions);
});
onUnmounted(() => {

6
frontend/vue/components/Common/Charts/TimeSeriesChart.vue
View File

@ -1,5 +1,5 @@
<template>
<canvas ref="canvas">
<canvas ref="$canvas">
<slot></slot>
</canvas>
</template>
@ -18,7 +18,7 @@ const props = defineProps({
data: Array
});
const canvas = ref(); // Template ref
const $canvas = ref(); // Template ref
let $chart = null;
const {$gettext} = useTranslate();
@ -92,7 +92,7 @@ onMounted(() => {
}
let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
$chart = new Chart(get(canvas).getContext('2d'), chartOptions);
$chart = new Chart(get($canvas).getContext('2d'), chartOptions);
});
onUnmounted(() => {

62
frontend/vue/components/Common/FlowUpload.vue
View File

@ -17,9 +17,9 @@
</div>
</template>
</div>
<div class="file-drop-target" ref="file_drop_target">
<div class="file-drop-target" ref="$fileDropTarget">
{{ $gettext('Drag file(s) here to upload or') }}
<button ref="file_browse_target" class="file-upload btn btn-primary text-center ml-1" type="button">
<button ref="$fileBrowseTarget" class="file-upload btn btn-primary text-center ml-1" type="button">
<icon icon="cloud_upload"></icon>
{{ $gettext('Select File') }}
</button>
@ -121,47 +121,47 @@ const files = reactive({
return this.value[file.uniqueIdentifier] ?? {};
},
hideAll() {
forEach(this.value, (file) => {
file.isVisible = false;
});
forEach(this.value, (file) => {
file.isVisible = false;
});
},
reset() {
this.value = {};
}
reset() {
this.value = {};
}
});
const file_browse_target = ref(); // Template Ref
const file_drop_target = ref(); // Template Ref
const $fileBrowseTarget = ref(); // Template Ref
const $fileDropTarget = ref(); // Template Ref
const {apiCsrf} = useAzuraCast();
const {$gettext} = useTranslate();
onMounted(() => {
let defaultConfig = {
target: () => {
return props.targetUrl
},
singleFile: !props.allowMultiple,
headers: {
'Accept': 'application/json',
'X-API-CSRF': apiCsrf
},
withCredentials: true,
allowDuplicateUploads: true,
fileParameterName: 'file_data',
uploadMethod: 'POST',
testMethod: 'GET',
method: 'multipart',
maxChunkRetries: 3,
testChunks: false
};
let config = defaultsDeep({}, props.flowConfiguration, defaultConfig);
let defaultConfig = {
target: () => {
return props.targetUrl
},
singleFile: !props.allowMultiple,
headers: {
'Accept': 'application/json',
'X-API-CSRF': apiCsrf
},
withCredentials: true,
allowDuplicateUploads: true,
fileParameterName: 'file_data',
uploadMethod: 'POST',
testMethod: 'GET',
method: 'multipart',
maxChunkRetries: 3,
testChunks: false
};
let config = defaultsDeep({}, props.flowConfiguration, defaultConfig);
flow = new Flow(config);
flow.assignBrowse(file_browse_target.value);
flow.assignDrop(file_drop_target.value);
flow.assignBrowse($fileBrowseTarget.value);
flow.assignDrop($fileDropTarget.value);
flow.on('fileAdded', (file) => {
files.push(file);

14
frontend/vue/components/Common/StreamingLogModal.vue
View File

@ -1,7 +1,7 @@
<template>
<b-modal id="logs_modal" size="lg" ref="modal" @hidden="clearContents"
<b-modal id="logs_modal" size="lg" ref="$modal" @hidden="clearContents"
:title="$gettext('Log Viewer')" no-enforce-focus>
<streaming-log-view ref="logView" :log-url="logUrl"></streaming-log-view>
<streaming-log-view ref="$logView" :log-url="logUrl"></streaming-log-view>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
@ -20,22 +20,22 @@ import {ref} from "vue";
import {useClipboard} from "@vueuse/core";
const logUrl = ref('');
const modal = ref(); // Template ref
const logView = ref(); // Template ref
const $modal = ref(); // Template ref
const $logView = ref(); // Template ref
const show = (newLogUrl) => {
logUrl.value = newLogUrl;
modal.value.show();
$modal.value.show();
};
const clipboard = useClipboard();
const doCopy = () => {
clipboard.copy(logView.value.getContents());
clipboard.copy($logView.value.getContents());
};
const close = () => {
modal.value.hide();
$modal.value.hide();
}
const clearContents = () => {

8
frontend/vue/components/Form/BWrappedFormGroup.vue
View File

@ -2,10 +2,10 @@
<b-form-group v-bind="$attrs" :label-for="id" :state="fieldState">
<template #default>
<slot name="default" v-bind="{ id, field, state: fieldState }">
<b-form-textarea v-bind="inputAttrs" v-if="inputType === 'textarea'" ref="input" :id="id" :name="name"
<b-form-textarea v-bind="inputAttrs" v-if="inputType === 'textarea'" ref="$input" :id="id" :name="name"
v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
:autofocus="autofocus" :state="fieldState"></b-form-textarea>
<b-form-input v-bind="inputAttrs" v-else ref="input" :type="inputType" :id="id" :name="name"
<b-form-input v-bind="inputAttrs" v-else ref="$input" :type="inputType" :id="id" :name="name"
v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
:autofocus="autofocus" :state="fieldState"></b-form-input>
</slot>
@ -112,10 +112,10 @@ const isNumeric = computed(() => {
return props.inputNumber || props.inputType === "number";
});
const input = ref(); // Input
const $input = ref(); // Input
const focus = () => {
input.value?.focus();
$input.value?.focus();
};
defineExpose({

12
frontend/vue/components/InlinePlayer.vue
View File

@ -1,5 +1,5 @@
<template>
<audio-player ref="player" :volume="volume" :is-muted="isMuted"></audio-player>
<audio-player ref="$player" :volume="volume" :is-muted="isMuted"></audio-player>
<div class="ml-3 player-inline" v-if="isPlaying">
<div class="inline-seek d-inline-flex align-items-center ml-1" v-if="!current.isStream && duration !== 0">
@ -79,10 +79,10 @@ const current = toRef(store, 'current');
const volume = useStorage('player_volume', 55);
const isMuted = useStorage('player_is_muted', false);
const isMounted = useMounted();
const player = ref(); // AudioPlayer
const $player = ref(); // AudioPlayer
const duration = computed(() => {
return player.value?.getDuration();
return $player.value?.getDuration();
});
const durationText = computed(() => {
@ -90,7 +90,7 @@ const durationText = computed(() => {
});
const currentTime = computed(() => {
return player.value?.getCurrentTime();
return $player.value?.getCurrentTime();
});
const currentTimeText = computed(() => {
@ -99,10 +99,10 @@ const currentTimeText = computed(() => {
const progress = computed({
get: () => {
return player.value?.getProgress();
return $player.value?.getProgress();
},
set: (prog) => {
player.value?.setProgress(prog);
$player.value?.setProgress(prog);
}
});

6
frontend/vue/components/Public/FullPlayer/RequestModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="lg" id="request_modal" ref="modal" :title="$gettext('Request a Song')" hide-footer>
<b-modal size="lg" id="request_modal" ref="$modal" :title="$gettext('Request a Song')" hide-footer>
<song-request :show-album-art="showAlbumArt" :request-list-uri="requestListUri" :custom-fields="customFields"
@submitted="doClose"></song-request>
</b-modal>
@ -25,9 +25,9 @@ const props = defineProps({
}
});
const modal = ref(); // BModal
const $modal = ref(); // BModal
const doClose = () => {
modal.value?.hide();
$modal.value?.hide();
};
</script>

6
frontend/vue/components/Public/Player.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="radio-player-widget">
<audio-player ref="player" :title="np.now_playing.song.text" :volume="volume"
<audio-player ref="$player" :title="np.now_playing.song.text" :volume="volume"
:is-muted="isMuted"></audio-player>
<div class="now-playing-details">
@ -304,7 +304,7 @@ const currentTimeTotalDisplay = computed(() => {
});
const isMounted = useMounted();
const player = ref(); // Template ref
const $player = ref(); // Template ref
const volume = useStorage('player_volume', 55);
const isMuted = useStorage('player_is_muted', false);
@ -319,7 +319,7 @@ const fullVolume = () => {
const switchStream = (new_stream) => {
currentStream.value = new_stream;
player.value.toggle(new_stream.url, true, new_stream.hls);
$player.value.toggle(new_stream.url, true, new_stream.hls);
};
onMounted(() => {

6
frontend/vue/components/Setup/Station.vue
View File

@ -14,7 +14,7 @@
}}
</info-card>
<admin-stations-form v-bind="$props" ref="adminForm" :is-edit-mode="false" :create-url="createUrl"
<admin-stations-form v-bind="$props" ref="$adminForm" :is-edit-mode="false" :create-url="createUrl"
@submitted="onSubmitted">
<template #submitButtonText>
{{ $gettext('Create and Continue') }}
@ -39,10 +39,10 @@ const props = defineProps({
}
});
const adminForm = ref(); // Template Ref
const $adminForm = ref(); // Template Ref
onMounted(() => {
adminForm.value.reset();
$adminForm.value.reset();
});
const onSubmitted = () => {

6
frontend/vue/components/Stations/Help.vue
View File

@ -11,7 +11,7 @@
<log-list :url="logsUrl" @view="viewLog"></log-list>
</div>
<streaming-log-modal ref="modal"></streaming-log-modal>
<streaming-log-modal ref="$modal"></streaming-log-modal>
</div>
<div class="col-md-4">
<div class="card">
@ -57,9 +57,9 @@ const props = defineProps({
logsUrl: String,
});
const modal = ref(); // BModal
const $modal = ref(); // BModal
const viewLog = (url) => {
modal.value?.show(url);
$modal.value?.show(url);
};
</script>

14
frontend/vue/components/Stations/HlsStreams.vue
View File

@ -19,7 +19,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="station_hls_streams" :fields="fields" paginated
<data-table ref="$dataTable" id="station_hls_streams" :fields="fields" paginated
:api-url="listUrl">
<template #cell(name)="row">
<h5 class="m-0">{{ row.item.name }}</h5>
@ -43,7 +43,7 @@
</data-table>
</b-card>
<edit-modal ref="editmodal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
<edit-modal ref="$editModal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
</template>
<script setup>
@ -80,20 +80,20 @@ const upper = (data) => {
return upper.join(' ');
};
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const relist = () => {
datatable.value?.refresh();
$dataTable.value?.refresh();
};
const editmodal = ref(); // EditModal
const $editModal = ref(); // EditModal
const doCreate = () => {
editmodal.value?.create();
$editModal.value?.create();
};
const doEdit = (url) => {
editmodal.value?.edit(url);
$editModal.value?.edit(url);
};
const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);

2
frontend/vue/components/Stations/LiquidsoapConfig.vue
View File

@ -81,7 +81,7 @@ const buildForm = () => {
const {validations, blankForm} = buildForm();
const {form, resetForm, v$} = useVuelidateOnForm(validations, blankForm);
const loading = ref();
const loading = ref(true);
const {mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);

8
frontend/vue/components/Stations/Media/EditModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-form ref="modal" :loading="loading" :title="$gettext('Edit Media')" :error="error"
<modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Media')" :error="error"
:disable-save-button="v$.$invalid"
@submit="doEdit" @hidden="resetForm">
@ -145,10 +145,10 @@ const resetForm = () => {
audioUrl.value = '';
};
const modal = ref(); // BModal
const $modal = ref(); // BModal
const close = () => {
modal.value?.hide();
$modal.value?.hide();
};
const {axios} = useAxios();
@ -162,7 +162,7 @@ const open = (newRecordUrl, newAlbumArtUrl, newAudioUrl, newWaveformUrl) => {
audioUrl.value = newAudioUrl;
waveformUrl.value = newWaveformUrl;
modal.value?.show();
$modal.value?.show();
axios.get(newRecordUrl).then((resp) => {
let d = resp.data;

34
frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
View File

@ -6,7 +6,7 @@
</p>
<b-form-group>
<waveform-component ref="waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
<waveform-component ref="$waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
@ready="updateRegions"></waveform-component>
</b-form-group>
<b-form-group>
@ -56,18 +56,18 @@ const props = defineProps({
waveformUrl: String
});
const waveform = ref(); // Waveform
const $waveform = ref(); // Waveform
const playAudio = () => {
waveform.value?.play();
$waveform.value?.play();
};
const stopAudio = () => {
waveform.value?.stop();
$waveform.value?.stop();
};
const updateRegions = () => {
let duration = waveform.value?.getDuration();
let duration = $waveform.value?.getDuration();
let cue_in = props.form.cue_in ?? 0;
let cue_out = props.form.cue_out ?? duration;
@ -75,42 +75,42 @@ const updateRegions = () => {
let fade_in = props.form.fade_in ?? 0;
let fade_out = props.form.fade_out ?? 0;
waveform.value?.clearRegions();
$waveform.value?.clearRegions();
// Create cue region
waveform.value?.addRegion(cue_in, cue_out, 'hsla(207,90%,54%,0.4)');
$waveform.value?.addRegion(cue_in, cue_out, 'hsla(207,90%,54%,0.4)');
// Create overlap region
if (fade_overlap > cue_in) {
waveform.value?.addRegion(cue_out - fade_overlap, cue_out, 'hsla(29,100%,48%,0.4)');
$waveform.value?.addRegion(cue_out - fade_overlap, cue_out, 'hsla(29,100%,48%,0.4)');
}
// Create fade regions
if (fade_in) {
waveform.value?.addRegion(cue_in, fade_in + cue_in, 'hsla(351,100%,48%,0.4)');
$waveform.value?.addRegion(cue_in, fade_in + cue_in, 'hsla(351,100%,48%,0.4)');
}
if (fade_out) {
waveform.value?.addRegion(cue_out - fade_out, cue_out, 'hsla(351,100%,48%,0.4)');
$waveform.value?.addRegion(cue_out - fade_out, cue_out, 'hsla(351,100%,48%,0.4)');
}
};
const setCueIn = () => {
let currentTime = waveform.value?.getCurrentTime();
let currentTime = $waveform.value?.getCurrentTime();
props.form.cue_in = Math.round((currentTime) * 10) / 10;
updateRegions();
};
const setCueOut = () => {
let currentTime = waveform.value?.getCurrentTime();
let currentTime = $waveform.value?.getCurrentTime();
props.form.cue_out = Math.round((currentTime) * 10) / 10;
updateRegions();
};
const setFadeOverlap = () => {
let duration = waveform.value?.getDuration();
let currentTime = waveform.value?.getCurrentTime();
let duration = $waveform.value?.getDuration();
let currentTime = $waveform.value?.getCurrentTime();
let cue_out = form.value?.cue_out ?? duration;
props.form.fade_overlap = Math.round((cue_out - currentTime) * 10) / 10;
@ -118,7 +118,7 @@ const setFadeOverlap = () => {
};
const setFadeIn = () => {
let currentTime = waveform.value?.getCurrentTime();
let currentTime = $waveform.value?.getCurrentTime();
let cue_in = form.value?.cue_in ?? 0;
props.form.fade_in = Math.round((currentTime - cue_in) * 10) / 10;
@ -126,8 +126,8 @@ const setFadeIn = () => {
}
const setFadeOut = () => {
let currentTime = waveform.value?.getCurrentTime();
let duration = waveform.value?.getDuration();
let currentTime = $waveform.value?.getCurrentTime();
let duration = $waveform.value?.getDuration();
let cue_out = form.value?.cue_out ?? duration;
props.form.fade_out = Math.round((cue_out - currentTime) * 10) / 10;

14
frontend/vue/components/Stations/Mounts.vue
View File

@ -19,7 +19,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="station_mounts" :fields="fields" paginated
<data-table ref="$dataTable" id="station_mounts" :fields="fields" paginated
:api-url="listUrl">
<template #cell(display_name)="row">
<h5 class="m-0">
@ -53,7 +53,7 @@
</data-table>
</b-card>
<edit-modal ref="editmodal" :create-url="listUrl" :new-intro-url="newIntroUrl"
<edit-modal ref="$editModal" :create-url="listUrl" :new-intro-url="newIntroUrl"
:show-advanced="showAdvanced" :station-frontend-type="stationFrontendType"
@relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
</template>
@ -90,20 +90,20 @@ const fields = [
{key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
];
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const relist = () => {
datatable.value.refresh();
$dataTable.value.refresh();
};
const editmodal = ref(); // EditModal
const $editModal = ref(); // EditModal
const doCreate = () => {
editmodal.value.create();
$editModal.value.create();
};
const doEdit = (url) => {
editmodal.value.edit(url);
$editModal.value.edit(url);
};
const {needsRestart, mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);

6
frontend/vue/components/Stations/Profile/EmbedModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal size="lg" id="embed_modal" ref="modal" :title="$gettext('Embed Widgets')" hide-footer no-enforce-focus>
<b-modal size="lg" id="embed_modal" ref="$modal" :title="$gettext('Embed Widgets')" hide-footer no-enforce-focus>
<b-row>
<b-col md="7">
<b-card class="mb-3" no-body>
@ -175,10 +175,10 @@ const embedCode = computed(() => {
return '<iframe src="' + embedUrl.value + '" frameborder="0" allowtransparency="true" style="width: 100%; min-height: ' + embedHeight.value + '; border: 0;"></iframe>';
});
const modal = ref(); // Template Ref
const $modal = ref(); // Template Ref
const open = () => {
modal.value.show();
$modal.value.show();
};
defineExpose({

6
frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
View File

@ -56,7 +56,7 @@
{{ $gettext('Disable') }}
</a>
</div>
<embed-modal v-bind="$props" ref="embed_modal"></embed-modal>
<embed-modal v-bind="$props" ref="$embedModal"></embed-modal>
</template>
<template v-else>
<div class="card-header bg-primary-dark">
@ -95,9 +95,9 @@ const props = defineProps({
...embedModalProps
});
const embed_modal = ref(); // Template Ref
const $embedModal = ref(); // Template Ref
const doOpenEmbed = () => {
embed_modal.value.open();
$embedModal.value.open();
};
</script>

6
frontend/vue/components/Stations/ProfileEdit.vue
View File

@ -6,7 +6,7 @@
</h3>
</div>
<admin-stations-form v-bind="$props" ref="form" :is-edit-mode="true" :edit-url="editUrl"
<admin-stations-form v-bind="$props" ref="$form" :is-edit-mode="true" :edit-url="editUrl"
@submitted="onSubmitted"></admin-stations-form>
</section>
</template>
@ -25,10 +25,10 @@ const props = defineProps({
}
});
const form = ref(); // AdminStationsForm
const $form = ref(); // AdminStationsForm
onMounted(() => {
form.value?.reset();
$form.value?.reset();
});
const onSubmitted = () => {

8
frontend/vue/components/Stations/Queue/LogsModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal id="logs_modal" ref="modal" :title="$gettext('Log Viewer')">
<b-modal id="logs_modal" ref="$modal" :title="$gettext('Log Viewer')">
<textarea class="form-control log-viewer" spellcheck="false" readonly>{{ logs }}</textarea>
<template #modal-footer>
@ -18,7 +18,7 @@ import {ref} from "vue";
import {useClipboard} from "@vueuse/core";
const logs = ref('Loading...');
const modal = ref(); // Template Ref
const $modal = ref(); // Template Ref
const show = (newLogs) => {
let logDisplay = [];
@ -27,7 +27,7 @@ const show = (newLogs) => {
});
logs.value = logDisplay.join('');
modal.value.show();
$modal.value.show();
};
const clipboard = useClipboard();
@ -37,7 +37,7 @@ const doCopy = () => {
};
const close = () => {
modal.value.hide();
$modal.value.hide();
}
defineExpose({

14
frontend/vue/components/Stations/Remotes.vue
View File

@ -19,7 +19,7 @@
</b-button>
</b-card-body>
<data-table ref="datatable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
<data-table ref="$dataTable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
<template #cell(display_name)="row">
<h5 class="m-0">
<a :href="row.item.url" target="_blank">{{ row.item.display_name }}</a>
@ -47,7 +47,7 @@
</data-table>
</b-card>
<remote-edit-modal ref="editmodal" :create-url="listUrl"
<remote-edit-modal ref="$editModal" :create-url="listUrl"
@relist="relist" @needs-restart="mayNeedRestart"></remote-edit-modal>
</template>
@ -78,20 +78,20 @@ const fields = [
{key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
];
const datatable = ref(); // DataTable
const $dataTable = ref(); // DataTable
const relist = () => {
datatable.value?.refresh();
$dataTable.value?.refresh();
};
const editmodal = ref(); // EditModal
const $editModal = ref(); // EditModal
const doCreate = () => {
editmodal.value?.create();
$editModal.value?.create();
};
const doEdit = (url) => {
editmodal.value?.edit(url);
$editModal.value?.edit(url);
};
const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);

6
frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="leaflet-container" ref="container">
<div id="leaflet-container" ref="$container">
<slot v-if="$map" :map="$map"/>
</div>
</template>
@ -22,7 +22,7 @@ const props = defineProps({
attribution: String
});
const container = ref(); // Template Ref
const $container = ref(); // Template Ref
const $map = shallowRef();
provide('map', $map);
@ -40,7 +40,7 @@ onMounted(() => {
});
// Init map
const map = L.map(container.value);
const map = L.map($container.value);
map.setView([40, 0], 1);
$map.value = map;

6
frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="content">
<div ref="$content">
<slot/>
</div>
</template>
@ -18,10 +18,10 @@ const marker = L.marker(props.position);
marker.addTo(map);
const popup = new L.Popup();
const content = ref(); // Template Ref
const $content = ref(); // Template Ref
watch(
content,
$content,
(newContent) => {
popup.setContent(newContent);
marker.bindPopup(popup);