tilderadio/AzuraCast
4
0
Fork 0
mirror of https://github.com/AzuraCast/AzuraCast.git synced 2024-06-13 20:56:36 +00:00
Code Issues Releases Wiki Activity

Simplify Vue comp API references.

Browse Source
This commit is contained in:
Buster Neece 2022-12-20 04:19:23 -06:00
parent a122e90cd8
commit 47e36c551d
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
10 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/vue/components/Common/NowPlaying.js
View File

@ -1,6 +1,6 @@
import NowPlaying from '~/components/Entity/NowPlaying'; import NowPlaying from '~/components/Entity/NowPlaying';
import {onMounted, shallowRef, watch} from "vue"; import {onMounted, shallowRef, watch} from "vue";
import {set, useEventSource} from "@vueuse/core"; import {useEventSource} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
export const nowPlayingProps = { export const nowPlayingProps = {
@ -30,7 +30,7 @@ export default function useNowPlaying(props) {
const np = shallowRef(props.initialNowPlaying); const np = shallowRef(props.initialNowPlaying);
const setNowPlaying = (np_new) => { const setNowPlaying = (np_new) => {
set(np, np_new); np.value = np_new;
// Update the browser metadata for browsers that support it (i.e. Mobile Chrome) // Update the browser metadata for browsers that support it (i.e. Mobile Chrome)
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {

6
frontend/vue/components/Public/WebDJ/VolumeSlider.vue
View File

@ -16,7 +16,7 @@
<script setup> <script setup>
import Icon from "~/components/Common/Icon"; import Icon from "~/components/Common/Icon";
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import {get, set, useVModel} from "@vueuse/core"; import {useVModel} from "@vueuse/core";
const props = defineProps({ const props = defineProps({
modelValue: String modelValue: String
@ -26,13 +26,13 @@ const emit = defineEmits(['update:modelValue']);
const initial = ref(75); const initial = ref(75);
onMounted(() => { onMounted(() => {
set(initial, props.modelValue); initial.value = props.modelValue;
}); });
const volume = useVModel(props, 'modelValue', emit); const volume = useVModel(props, 'modelValue', emit);
const reset = () => { const reset = () => {
set(volume, get(initial)); volume.value = initial.value;
} }
</script> </script>

8
frontend/vue/components/Stations/Mounts/Form/Intro.vue
View File

@ -45,7 +45,6 @@ import FlowUpload from '~/components/Common/FlowUpload';
import {computed, toRef} from "vue"; import {computed, toRef} from "vue";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
import {set} from "@vueuse/core";
const props = defineProps({ const props = defineProps({
modelValue: Object, modelValue: Object,
@ -65,7 +64,7 @@ const targetUrl = computed(() => {
}); });
const onFileSuccess = (file, message) => { const onFileSuccess = (file, message) => {
set(hasIntro, true); hasIntro.value = true;
if (!props.editIntroUrl) { if (!props.editIntroUrl) {
emit('update:modelValue', message); emit('update:modelValue', message);
@ -77,10 +76,11 @@ const {axios} = useAxios();
const deleteIntro = () => { const deleteIntro = () => {
if (props.editIntroUrl) { if (props.editIntroUrl) {
axios.delete(props.editIntroUrl).then(() => { axios.delete(props.editIntroUrl).then(() => {
set(hasIntro, false); hasIntro.value = false;
}); });
} else { } else {
set(hasIntro, false); hasIntro.value = false;
emit('update:modelValue', null); emit('update:modelValue', null);
} }
}; };

9
frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
View File

@ -33,7 +33,6 @@
<script setup> <script setup>
import {computed, ref, toRef} from "vue"; import {computed, ref, toRef} from "vue";
import {get, set} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -49,7 +48,7 @@ const artworkSrc = toRef(props, 'artworkSrc');
const localSrc = ref(null); const localSrc = ref(null);
const src = computed(() => { const src = computed(() => {
return get(localSrc) ?? get(artworkSrc); return localSrc.value ?? artworkSrc.value;
}); });
const {axios} = useAxios(); const {axios} = useAxios();
@ -61,7 +60,7 @@ const uploadNewArt = (file) => {
let fileReader = new FileReader(); let fileReader = new FileReader();
fileReader.addEventListener('load', () => { fileReader.addEventListener('load', () => {
set(localSrc, fileReader.result); localSrc.value = fileReader.result;
}, false); }, false);
fileReader.readAsDataURL(file); fileReader.readAsDataURL(file);
@ -77,10 +76,10 @@ const uploadNewArt = (file) => {
const deleteArt = () => { const deleteArt = () => {
if (props.editArtUrl) { if (props.editArtUrl) {
axios.delete(props.editArtUrl).then(() => { axios.delete(props.editArtUrl).then(() => {
set(localSrc, null); localSrc.value = null;
}); });
} else { } else {
set(localSrc, null); localSrc.value = null;
} }
} }
</script> </script>

9
frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
View File

@ -43,7 +43,6 @@
<script setup> <script setup>
import FlowUpload from '~/components/Common/FlowUpload'; import FlowUpload from '~/components/Common/FlowUpload';
import {computed, toRef} from "vue"; import {computed, toRef} from "vue";
import {set} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -65,7 +64,8 @@ const targetUrl = computed(() => {
}); });
const onFileSuccess = (file, message) => { const onFileSuccess = (file, message) => {
set(hasMedia, true); hasMedia.value = true;
if (!props.editMediaUrl) { if (!props.editMediaUrl) {
emit('update:modelValue', message); emit('update:modelValue', message);
} }
@ -76,10 +76,11 @@ const {axios} = useAxios();
const deleteMedia = () => { const deleteMedia = () => {
if (props.editMediaUrl) { if (props.editMediaUrl) {
axios.delete(props.editMediaUrl).then(() => { axios.delete(props.editMediaUrl).then(() => {
set(hasMedia, false); hasMedia.value = false;
}); });
} else { } else {
set(hasMedia, false); hasMedia.value = false;
emit('update:modelValue', null); emit('update:modelValue', null);
} }
} }

17
frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
View File

@ -121,7 +121,7 @@
<script setup> <script setup>
import Icon from "~/components/Common/Icon"; import Icon from "~/components/Common/Icon";
import {get, set, useMounted} from "@vueuse/core"; import {useMounted} from "@vueuse/core";
import {onMounted, ref, shallowRef, toRef, watch} from "vue"; import {onMounted, ref, shallowRef, toRef, watch} from "vue";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
@ -142,23 +142,24 @@ const dateRange = toRef(props, 'dateRange');
const {axios} = useAxios(); const {axios} = useAxios();
const relist = () => { const relist = () => {
set(loading, true); loading.value = true;
axios.get(props.apiUrl, { axios.get(props.apiUrl, {
params: { params: {
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(), start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
end: DateTime.fromJSDate(get(dateRange).endDate).toISO() end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
} }
}).then((response) => { }).then((response) => {
set(bestAndWorst, response.data.bestAndWorst); bestAndWorst.value = response.data.bestAndWorst;
set(mostPlayed, response.data.mostPlayed); mostPlayed.value = response.data.mostPlayed;
set(loading, false); loading.value = false;
}); });
}; };
const isMounted = useMounted(); const isMounted = useMounted();
watch(dateRange, () => { watch(dateRange, () => {
if (get(isMounted)) { if (isMounted.value) {
relist(); relist();
} }
}); });

18
frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
View File

@ -50,7 +50,7 @@ import formatTime from "~/functions/formatTime";
import {onMounted, ref, shallowRef, toRef, watch} from "vue"; import {onMounted, ref, shallowRef, toRef, watch} from "vue";
import gettext from "~/vendor/gettext"; import gettext from "~/vendor/gettext";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import {get, set, useMounted} from "@vueuse/core"; import {useMounted} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -88,26 +88,28 @@ const dateRange = toRef(props, 'dateRange');
const {axios} = useAxios(); const {axios} = useAxios();
const relist = () => { const relist = () => {
set(loading, true); loading.value = true;
axios.get(props.apiUrl, { axios.get(props.apiUrl, {
params: { params: {
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(), start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
end: DateTime.fromJSDate(get(dateRange).endDate).toISO() end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
} }
}).then((response) => { }).then((response) => {
set(stats, { stats.value = {
all: response.data.all, all: response.data.all,
top_listeners: response.data.top_listeners, top_listeners: response.data.top_listeners,
top_connected_time: response.data.top_connected_time top_connected_time: response.data.top_connected_time
}); };
set(loading, false);
loading.value = false;
}); });
}; };
const isMounted = useMounted(); const isMounted = useMounted();
watch(dateRange, () => { watch(dateRange, () => {
if (get(isMounted)) { if (isMounted.value) {
relist(); relist();
} }
}); });

15
frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
View File

@ -51,7 +51,7 @@ import HourChart from "~/components/Common/Charts/HourChart.vue";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import PieChart from "~/components/Common/Charts/PieChart.vue"; import PieChart from "~/components/Common/Charts/PieChart.vue";
import {onMounted, ref, shallowRef, toRef, watch} from "vue"; import {onMounted, ref, shallowRef, toRef, watch} from "vue";
import {get, set, useMounted} from "@vueuse/core"; import {useMounted} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -79,22 +79,23 @@ const dateRange = toRef(props, 'dateRange');
const {axios} = useAxios(); const {axios} = useAxios();
const relist = () => { const relist = () => {
set(loading, true); loading.value = true;
axios.get(props.apiUrl, { axios.get(props.apiUrl, {
params: { params: {
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(), start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
end: DateTime.fromJSDate(get(dateRange).endDate).toISO() end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
} }
}).then((response) => { }).then((response) => {
set(chartData, response.data); chartData.value = response.data;
set(loading, false); loading.value = false;
}); });
} }
const isMounted = useMounted(); const isMounted = useMounted();
watch(dateRange, () => { watch(dateRange, () => {
if (get(isMounted)) { if (isMounted.value) {
relist(); relist();
} }
}); });

23
frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
View File

@ -30,7 +30,7 @@ import DataTable from "~/components/Common/DataTable";
import {onMounted, ref, shallowRef, toRef, watch} from "vue"; import {onMounted, ref, shallowRef, toRef, watch} from "vue";
import gettext from "~/vendor/gettext"; import gettext from "~/vendor/gettext";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import {get, set, useMounted} from "@vueuse/core"; import {useMounted} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -58,29 +58,26 @@ const dateRange = toRef(props, 'dateRange');
const {axios} = useAxios(); const {axios} = useAxios();
const relist = () => { const relist = () => {
set(loading, true); loading.value = true;
axios.get(props.apiUrl, { axios.get(props.apiUrl, {
params: { params: {
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(), start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
end: DateTime.fromJSDate(get(dateRange).endDate).toISO() end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
} }
}).then((response) => { }).then((response) => {
set( stats.value = {
stats, all: response.data.all,
{ chart: response.data.chart
all: response.data.all, };
chart: response.data.chart loading.value = false;
}
);
set(loading, false);
}); });
} }
const isMounted = useMounted(); const isMounted = useMounted();
watch(dateRange, () => { watch(dateRange, () => {
if (get(isMounted)) { if (isMounted.value) {
relist(); relist();
} }
}); });

9
frontend/vue/components/Stations/Streamers/Form/Artwork.vue
View File

@ -32,7 +32,6 @@
<script setup> <script setup>
import {computed, ref, toRef} from "vue"; import {computed, ref, toRef} from "vue";
import {get, set} from "@vueuse/core";
import {useAxios} from "~/vendor/axios"; import {useAxios} from "~/vendor/axios";
const props = defineProps({ const props = defineProps({
@ -48,7 +47,7 @@ const artworkSrc = toRef(props, 'artworkSrc');
const localSrc = ref(null); const localSrc = ref(null);
const src = computed(() => { const src = computed(() => {
return get(localSrc) ?? get(artworkSrc); return localSrc.value ?? artworkSrc.value;
}); });
const {axios} = useAxios(); const {axios} = useAxios();
@ -60,7 +59,7 @@ const uploadNewArt = (file) => {
let fileReader = new FileReader(); let fileReader = new FileReader();
fileReader.addEventListener('load', () => { fileReader.addEventListener('load', () => {
set(localSrc, fileReader.result); localSrc.value = fileReader.result;
}, false); }, false);
fileReader.readAsDataURL(file); fileReader.readAsDataURL(file);
@ -76,10 +75,10 @@ const uploadNewArt = (file) => {
const deleteArt = () => { const deleteArt = () => {
if (props.editArtUrl) { if (props.editArtUrl) {
axios.delete(props.editArtUrl).then(() => { axios.delete(props.editArtUrl).then(() => {
set(localSrc, null); localSrc.value = null;
}); });
} else { } else {
set(localSrc, null); localSrc.value = null;
} }
} }
</script> </script>