Simplify Vue comp API references.
This commit is contained in:
parent
a122e90cd8
commit
47e36c551d
|
@ -1,6 +1,6 @@
|
|||
import NowPlaying from '~/components/Entity/NowPlaying';
|
||||
import {onMounted, shallowRef, watch} from "vue";
|
||||
import {set, useEventSource} from "@vueuse/core";
|
||||
import {useEventSource} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
export const nowPlayingProps = {
|
||||
|
@ -30,7 +30,7 @@ export default function useNowPlaying(props) {
|
|||
const np = shallowRef(props.initialNowPlaying);
|
||||
|
||||
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)
|
||||
if ('mediaSession' in navigator) {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<script setup>
|
||||
import Icon from "~/components/Common/Icon";
|
||||
import {onMounted, ref} from "vue";
|
||||
import {get, set, useVModel} from "@vueuse/core";
|
||||
import {useVModel} from "@vueuse/core";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String
|
||||
|
@ -26,13 +26,13 @@ const emit = defineEmits(['update:modelValue']);
|
|||
|
||||
const initial = ref(75);
|
||||
onMounted(() => {
|
||||
set(initial, props.modelValue);
|
||||
initial.value = props.modelValue;
|
||||
});
|
||||
|
||||
const volume = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const reset = () => {
|
||||
set(volume, get(initial));
|
||||
volume.value = initial.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -45,7 +45,6 @@ import FlowUpload from '~/components/Common/FlowUpload';
|
|||
|
||||
import {computed, toRef} from "vue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import {set} from "@vueuse/core";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Object,
|
||||
|
@ -65,7 +64,7 @@ const targetUrl = computed(() => {
|
|||
});
|
||||
|
||||
const onFileSuccess = (file, message) => {
|
||||
set(hasIntro, true);
|
||||
hasIntro.value = true;
|
||||
|
||||
if (!props.editIntroUrl) {
|
||||
emit('update:modelValue', message);
|
||||
|
@ -77,10 +76,11 @@ const {axios} = useAxios();
|
|||
const deleteIntro = () => {
|
||||
if (props.editIntroUrl) {
|
||||
axios.delete(props.editIntroUrl).then(() => {
|
||||
set(hasIntro, false);
|
||||
hasIntro.value = false;
|
||||
});
|
||||
} else {
|
||||
set(hasIntro, false);
|
||||
hasIntro.value = false;
|
||||
|
||||
emit('update:modelValue', null);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -33,7 +33,6 @@
|
|||
<script setup>
|
||||
|
||||
import {computed, ref, toRef} from "vue";
|
||||
import {get, set} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -49,7 +48,7 @@ const artworkSrc = toRef(props, 'artworkSrc');
|
|||
const localSrc = ref(null);
|
||||
|
||||
const src = computed(() => {
|
||||
return get(localSrc) ?? get(artworkSrc);
|
||||
return localSrc.value ?? artworkSrc.value;
|
||||
});
|
||||
|
||||
const {axios} = useAxios();
|
||||
|
@ -61,7 +60,7 @@ const uploadNewArt = (file) => {
|
|||
|
||||
let fileReader = new FileReader();
|
||||
fileReader.addEventListener('load', () => {
|
||||
set(localSrc, fileReader.result);
|
||||
localSrc.value = fileReader.result;
|
||||
}, false);
|
||||
fileReader.readAsDataURL(file);
|
||||
|
||||
|
@ -77,10 +76,10 @@ const uploadNewArt = (file) => {
|
|||
const deleteArt = () => {
|
||||
if (props.editArtUrl) {
|
||||
axios.delete(props.editArtUrl).then(() => {
|
||||
set(localSrc, null);
|
||||
localSrc.value = null;
|
||||
});
|
||||
} else {
|
||||
set(localSrc, null);
|
||||
localSrc.value = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -43,7 +43,6 @@
|
|||
<script setup>
|
||||
import FlowUpload from '~/components/Common/FlowUpload';
|
||||
import {computed, toRef} from "vue";
|
||||
import {set} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -65,7 +64,8 @@ const targetUrl = computed(() => {
|
|||
});
|
||||
|
||||
const onFileSuccess = (file, message) => {
|
||||
set(hasMedia, true);
|
||||
hasMedia.value = true;
|
||||
|
||||
if (!props.editMediaUrl) {
|
||||
emit('update:modelValue', message);
|
||||
}
|
||||
|
@ -76,10 +76,11 @@ const {axios} = useAxios();
|
|||
const deleteMedia = () => {
|
||||
if (props.editMediaUrl) {
|
||||
axios.delete(props.editMediaUrl).then(() => {
|
||||
set(hasMedia, false);
|
||||
hasMedia.value = false;
|
||||
});
|
||||
} else {
|
||||
set(hasMedia, false);
|
||||
hasMedia.value = false;
|
||||
|
||||
emit('update:modelValue', null);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -121,7 +121,7 @@
|
|||
|
||||
<script setup>
|
||||
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 {DateTime} from "luxon";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
@ -142,23 +142,24 @@ const dateRange = toRef(props, 'dateRange');
|
|||
const {axios} = useAxios();
|
||||
|
||||
const relist = () => {
|
||||
set(loading, true);
|
||||
loading.value = true;
|
||||
|
||||
axios.get(props.apiUrl, {
|
||||
params: {
|
||||
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(),
|
||||
end: DateTime.fromJSDate(get(dateRange).endDate).toISO()
|
||||
start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
|
||||
end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
|
||||
}
|
||||
}).then((response) => {
|
||||
set(bestAndWorst, response.data.bestAndWorst);
|
||||
set(mostPlayed, response.data.mostPlayed);
|
||||
set(loading, false);
|
||||
bestAndWorst.value = response.data.bestAndWorst;
|
||||
mostPlayed.value = response.data.mostPlayed;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const isMounted = useMounted();
|
||||
|
||||
watch(dateRange, () => {
|
||||
if (get(isMounted)) {
|
||||
if (isMounted.value) {
|
||||
relist();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -50,7 +50,7 @@ import formatTime from "~/functions/formatTime";
|
|||
import {onMounted, ref, shallowRef, toRef, watch} from "vue";
|
||||
import gettext from "~/vendor/gettext";
|
||||
import {DateTime} from "luxon";
|
||||
import {get, set, useMounted} from "@vueuse/core";
|
||||
import {useMounted} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -88,26 +88,28 @@ const dateRange = toRef(props, 'dateRange');
|
|||
const {axios} = useAxios();
|
||||
|
||||
const relist = () => {
|
||||
set(loading, true);
|
||||
loading.value = true;
|
||||
|
||||
axios.get(props.apiUrl, {
|
||||
params: {
|
||||
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(),
|
||||
end: DateTime.fromJSDate(get(dateRange).endDate).toISO()
|
||||
start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
|
||||
end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
|
||||
}
|
||||
}).then((response) => {
|
||||
set(stats, {
|
||||
stats.value = {
|
||||
all: response.data.all,
|
||||
top_listeners: response.data.top_listeners,
|
||||
top_connected_time: response.data.top_connected_time
|
||||
});
|
||||
set(loading, false);
|
||||
};
|
||||
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const isMounted = useMounted();
|
||||
|
||||
watch(dateRange, () => {
|
||||
if (get(isMounted)) {
|
||||
if (isMounted.value) {
|
||||
relist();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -51,7 +51,7 @@ import HourChart from "~/components/Common/Charts/HourChart.vue";
|
|||
import {DateTime} from "luxon";
|
||||
import PieChart from "~/components/Common/Charts/PieChart.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";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -79,22 +79,23 @@ const dateRange = toRef(props, 'dateRange');
|
|||
const {axios} = useAxios();
|
||||
|
||||
const relist = () => {
|
||||
set(loading, true);
|
||||
loading.value = true;
|
||||
|
||||
axios.get(props.apiUrl, {
|
||||
params: {
|
||||
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(),
|
||||
end: DateTime.fromJSDate(get(dateRange).endDate).toISO()
|
||||
start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
|
||||
end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
|
||||
}
|
||||
}).then((response) => {
|
||||
set(chartData, response.data);
|
||||
set(loading, false);
|
||||
chartData.value = response.data;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const isMounted = useMounted();
|
||||
|
||||
watch(dateRange, () => {
|
||||
if (get(isMounted)) {
|
||||
if (isMounted.value) {
|
||||
relist();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -30,7 +30,7 @@ import DataTable from "~/components/Common/DataTable";
|
|||
import {onMounted, ref, shallowRef, toRef, watch} from "vue";
|
||||
import gettext from "~/vendor/gettext";
|
||||
import {DateTime} from "luxon";
|
||||
import {get, set, useMounted} from "@vueuse/core";
|
||||
import {useMounted} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -58,29 +58,26 @@ const dateRange = toRef(props, 'dateRange');
|
|||
const {axios} = useAxios();
|
||||
|
||||
const relist = () => {
|
||||
set(loading, true);
|
||||
loading.value = true;
|
||||
|
||||
axios.get(props.apiUrl, {
|
||||
params: {
|
||||
start: DateTime.fromJSDate(get(dateRange).startDate).toISO(),
|
||||
end: DateTime.fromJSDate(get(dateRange).endDate).toISO()
|
||||
start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
|
||||
end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
|
||||
}
|
||||
}).then((response) => {
|
||||
set(
|
||||
stats,
|
||||
{
|
||||
all: response.data.all,
|
||||
chart: response.data.chart
|
||||
}
|
||||
);
|
||||
set(loading, false);
|
||||
stats.value = {
|
||||
all: response.data.all,
|
||||
chart: response.data.chart
|
||||
};
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const isMounted = useMounted();
|
||||
|
||||
watch(dateRange, () => {
|
||||
if (get(isMounted)) {
|
||||
if (isMounted.value) {
|
||||
relist();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -32,7 +32,6 @@
|
|||
|
||||
<script setup>
|
||||
import {computed, ref, toRef} from "vue";
|
||||
import {get, set} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -48,7 +47,7 @@ const artworkSrc = toRef(props, 'artworkSrc');
|
|||
const localSrc = ref(null);
|
||||
|
||||
const src = computed(() => {
|
||||
return get(localSrc) ?? get(artworkSrc);
|
||||
return localSrc.value ?? artworkSrc.value;
|
||||
});
|
||||
|
||||
const {axios} = useAxios();
|
||||
|
@ -60,7 +59,7 @@ const uploadNewArt = (file) => {
|
|||
|
||||
let fileReader = new FileReader();
|
||||
fileReader.addEventListener('load', () => {
|
||||
set(localSrc, fileReader.result);
|
||||
localSrc.value = fileReader.result;
|
||||
}, false);
|
||||
fileReader.readAsDataURL(file);
|
||||
|
||||
|
@ -76,10 +75,10 @@ const uploadNewArt = (file) => {
|
|||
const deleteArt = () => {
|
||||
if (props.editArtUrl) {
|
||||
axios.delete(props.editArtUrl).then(() => {
|
||||
set(localSrc, null);
|
||||
localSrc.value = null;
|
||||
});
|
||||
} else {
|
||||
set(localSrc, null);
|
||||
localSrc.value = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue