mirror of
https://github.com/koel/koel
synced 2025-01-09 19:28:44 +00:00
118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
||
<section id="settingsWrapper">
|
||
<h1 class="heading">
|
||
<span>Settings</span>
|
||
</h1>
|
||
|
||
<form @submit.prevent="confirmThenSave" class="main-scroll-wrap">
|
||
<div class="form-row">
|
||
<label for="inputSettingsPath">Media Path</label>
|
||
<p class="help">
|
||
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 type="text" v-model="state.settings.media_path" id="inputSettingsPath">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<button type="submit">Scan</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import swal from 'sweetalert';
|
||
|
||
import { settingStore, sharedStore } from '../../../stores';
|
||
import { parseValidationError, forceReloadWindow, event, showOverlay, hideOverlay } from '../../../utils';
|
||
import router from '../../../router';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
state: settingStore.state,
|
||
sharedState: sharedStore.state,
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
/**
|
||
* Determine if we should warn the user upon saving.
|
||
*
|
||
* @return {boolean}
|
||
*/
|
||
shouldWarn() {
|
||
// Warn the user if the media path is not empty and about to change.
|
||
return this.sharedState.originalMediaPath &&
|
||
this.sharedState.originalMediaPath !== this.state.settings.media_path.trim();
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
confirmThenSave() {
|
||
if (this.shouldWarn) {
|
||
swal({
|
||
title: 'Be careful!',
|
||
text: 'Changing the media path will essentially remove all existing data – songs, artists, \
|
||
albums, favorites, everything – and empty your playlists!',
|
||
type: 'warning',
|
||
showCancelButton: true,
|
||
confirmButtonText: 'I know. Go ahead.',
|
||
confirmButtonColor: '#c34848',
|
||
}, this.save);
|
||
} else {
|
||
this.save();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Save the settings.
|
||
*/
|
||
save() {
|
||
showOverlay();
|
||
|
||
settingStore.update().then(() => {
|
||
// Make sure we're back to home first.
|
||
router.go('home');
|
||
forceReloadWindow();
|
||
}).catch(r => {
|
||
let msg = 'Unknown error.';
|
||
|
||
if (r.status === 422) {
|
||
msg = parseValidationError(r.responseJSON)[0];
|
||
}
|
||
|
||
hideOverlay();
|
||
|
||
swal({
|
||
title: 'Something went wrong',
|
||
text: msg,
|
||
type: 'error',
|
||
allowOutsideClick: true,
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
@import "../../../../sass/partials/_vars.scss";
|
||
@import "../../../../sass/partials/_mixins.scss";
|
||
|
||
#settingsWrapper {
|
||
input[type="text"] {
|
||
width: 384px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
@media only screen and (max-width : 667px) {
|
||
input[type="text"] {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|