mirror of
https://github.com/koel/koel
synced 2025-01-09 19:28:44 +00:00
105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<template>
|
||
<section id="settingsWrapper">
|
||
<h1 class="heading">
|
||
<span>Settings</span>
|
||
</h1>
|
||
|
||
<form @submit.prevent="save" 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 } from '../../../stores';
|
||
import { parseValidationError, forceReloadWindow, event, showOverlay, hideOverlay } from '../../../utils';
|
||
import router from '../../../router';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
state: settingStore.state,
|
||
originalMediaPath: null,
|
||
};
|
||
},
|
||
|
||
created() {
|
||
this.originalMediaPath = this.state.settings.media_path;
|
||
console.log('dam');
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* Save the settings.
|
||
*/
|
||
save() {
|
||
console.log(this.originalMediaPath);
|
||
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',
|
||
}, () => {
|
||
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>
|