koel/resources/assets/js/components/screens/settings.vue

92 lines
2.5 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="settingsWrapper">
2022-04-15 17:00:08 +00:00
<ScreenHeader>Settings</ScreenHeader>
2022-04-15 14:24:30 +00:00
<form @submit.prevent="confirmThenSave" class="main-scroll-wrap">
<div class="form-row">
<label for="inputSettingsPath">Media Path</label>
<p class="help" id="mediaPathHelp">
The <em>absolute</em> path to the server directory containing your media.
Koel will scan this directory for songs and extract any available information.<br>
Scanning may take a while, especially if you have a lot of songs, so be patient.
</p>
<input
aria-describedby="mediaPathHelp"
id="inputSettingsPath"
type="text"
2022-04-15 17:00:08 +00:00
v-model="state.media_path"
2022-04-15 14:24:30 +00:00
name="media_path"
>
</div>
<div class="form-row">
2022-04-15 17:00:08 +00:00
<Btn type="submit">Scan</Btn>
2022-04-15 14:24:30 +00:00
</div>
</form>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
import { computed, defineAsyncComponent, reactive } from 'vue'
2022-04-15 14:24:30 +00:00
import { settingStore, sharedStore } from '@/stores'
2022-04-15 17:00:08 +00:00
import { alerts, forceReloadWindow, hideOverlay, parseValidationError, showOverlay } from '@/utils'
2022-04-15 14:24:30 +00:00
import router from '@/router'
2022-04-21 16:06:45 +00:00
const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
2022-04-21 18:39:18 +00:00
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const state = settingStore.state
const sharedState = reactive(sharedStore.state)
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const shouldWarn = computed(() => {
// Warn the user if the media path is not empty and about to change.
if (!sharedState.originalMediaPath || !state.media_path) {
return false
}
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
return sharedState.originalMediaPath !== state.media_path.trim()
})
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const save = async () => {
showOverlay()
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
try {
await settingStore.update()
// Make sure we're back to home first.
router.go('home')
forceReloadWindow()
} catch (err: any) {
hideOverlay()
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const msg = err.response.status === 422 ? parseValidationError(err.response.data)[0] : 'Unknown error.'
alerts.error(msg)
}
}
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const confirmThenSave = () => {
if (shouldWarn.value) {
alerts.confirm('Warning: Changing the media path will essentially remove all existing data songs, artists, \
albums, favorites, everything and empty your playlists! Sure you want to proceed?', save)
} else {
save()
2022-04-15 14:24:30 +00:00
}
2022-04-15 17:00:08 +00:00
}
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss">
#settingsWrapper {
input[type="text"] {
width: 50%;
margin-top: 1rem;
}
2022-04-15 17:00:08 +00:00
@media only screen and (max-width: 667px) {
2022-04-15 14:24:30 +00:00
input[type="text"] {
width: 100%;
}
}
}
</style>