Simplify Vue comp API references.

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

View File

@ -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) {

View File

@ -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>

View File

@ -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);
}
};

View File

@ -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>

View File

@ -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);
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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>