mirror of https://github.com/Kylart/KawAnime.git
configModal now has its own component
This commit is contained in:
Kylart
parent
73000d3238
commit
73f3fc8d58
|
|
@ -0,0 +1,221 @@
|
|||
<template>
|
||||
<div class="modals text-xs-center">
|
||||
<v-modal v-model="configModal" :style="configModalStyle" class="config-modal">
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card class="secondary white--text">
|
||||
<v-card-text class="white--text">
|
||||
<h2 class="title">Settings</h2>
|
||||
</v-card-text>
|
||||
<v-divider/>
|
||||
<v-card-text class="subheading white--text">
|
||||
<div class="section">
|
||||
<h5 class="section-title">Download</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs4 class="fansub-selector">
|
||||
<p class="subsection-title">Preferred Fansub</p>
|
||||
<v-select v-bind:items="fansubChoices"
|
||||
v-model="config.fansub"
|
||||
dark
|
||||
single-line
|
||||
auto/>
|
||||
</v-col>
|
||||
<v-col xs1></v-col>
|
||||
<v-col xs7>
|
||||
<p class="subsection-title">Quality</p>
|
||||
<v-row>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="480p"
|
||||
v-model="config.quality"
|
||||
value="480p" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="720p"
|
||||
v-model="config.quality"
|
||||
value="720p" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="1080p"
|
||||
v-model="config.quality"
|
||||
value="1080p" primary dark/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col xs1><!-- Dummy cell --></v-col>
|
||||
<v-col xs4>
|
||||
<v-card-text class="switch">
|
||||
<v-switch label="Pref magnets" dark primary v-model="config.magnets"/>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
<v-col xs5>
|
||||
<p class="subsection-title">Sound on magnet downloads</p>
|
||||
<v-select v-bind:items="soundChoices"
|
||||
v-model="config.sound"
|
||||
item-value="config.sound"
|
||||
dark
|
||||
single-line
|
||||
auto/>
|
||||
</v-col>
|
||||
<v-col xs2><!-- Dummy cell --></v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5 class="section-title">Local</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs4>
|
||||
<p class="subsection-title">
|
||||
Preferred directory
|
||||
</p>
|
||||
<div class="choose-button">
|
||||
<v-btn dark flat @click.native="changeConfigPath()">Choose</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col
|
||||
xs8><span class="">Current: </span>
|
||||
<!-- TODO Add a "last one" option-->
|
||||
<p class="config-dir">
|
||||
{{ configDir }}
|
||||
</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5 class="section-title">News</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs12>
|
||||
<p class="subsection-title">
|
||||
Display news
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col xs1></v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="Inside"
|
||||
v-model="config.inside"
|
||||
value="true" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="Outside"
|
||||
v-model="config.inside"
|
||||
value="false" primary dark/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-row actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn dark primary
|
||||
v-on:click.native="save()">
|
||||
Save
|
||||
</v-btn>
|
||||
<v-btn dark primary
|
||||
v-on:click.native="saveAndClose()">
|
||||
Save and close
|
||||
</v-btn>
|
||||
</v-card-row>
|
||||
</v-card>
|
||||
</v-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
configModal: false,
|
||||
configModalStyle: {
|
||||
minHeight: '90%'
|
||||
},
|
||||
fansubChoices: [
|
||||
'HorribleSubs',
|
||||
'PuyaSubs',
|
||||
'BakedFish',
|
||||
'DeadFish',
|
||||
'DefinitelyNotMe'
|
||||
],
|
||||
soundChoices: [
|
||||
'None',
|
||||
'Nyanpasu'
|
||||
],
|
||||
config: {
|
||||
fansub: this.$store.state.config.fansub,
|
||||
quality: this.$store.state.config.quality,
|
||||
sound: this.$store.state.config.sound,
|
||||
localPath: this.configDir,
|
||||
inside: this.$store.state.config.inside.toString(),
|
||||
magnets: this.$store.state.config.magnets
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
configDir: function () {
|
||||
return this.$store.state.configDir
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeConfigPath() {
|
||||
this.$store.dispatch('changePathWithConfig')
|
||||
},
|
||||
save() {
|
||||
this.$store.commit('setConfig', this.config)
|
||||
const toSave = {...this.config}
|
||||
toSave.inside = this.config.inside === 'true'
|
||||
toSave.localPath = this.$store.state.configDir
|
||||
|
||||
// Here we save to config
|
||||
this.$store.dispatch('saveConfig', toSave)
|
||||
},
|
||||
saveAndClose() {
|
||||
this.save()
|
||||
this.configModal = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h2
|
||||
{
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.section
|
||||
{
|
||||
padding: 2% 2% 2% 2%;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgb(60, 60, 60);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-title
|
||||
{
|
||||
padding-left: 25px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.subsection-title
|
||||
{
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.choose-button
|
||||
{
|
||||
padding-left: 25%;
|
||||
}
|
||||
|
||||
.config-dir
|
||||
{
|
||||
padding-left: 10%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -7,129 +7,7 @@
|
|||
<v-toolbar-logo class="text-xs-right title" v-bind:style="title">
|
||||
<div style="width: 100%;">
|
||||
<div class="title-text">かわニメ</div>
|
||||
|
||||
<div class="modals text-xs-center">
|
||||
<v-modal v-model="configModal" :style="configModalStyle" class="config-modal">
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card class="secondary white--text">
|
||||
<v-card-text class="white--text">
|
||||
<h2 class="title">Settings</h2>
|
||||
</v-card-text>
|
||||
<v-divider/>
|
||||
<v-card-text class="subheading white--text">
|
||||
<div class="section">
|
||||
<h5 class="section-title">Download</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs4 class="fansub-selector">
|
||||
<p class="subsection-title">Preferred Fansub</p>
|
||||
<v-select v-bind:items="fansubChoices"
|
||||
v-model="config.fansub"
|
||||
dark
|
||||
single-line
|
||||
auto/>
|
||||
</v-col>
|
||||
<v-col xs1></v-col>
|
||||
<v-col xs7>
|
||||
<p class="subsection-title">Quality</p>
|
||||
<v-row>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="480p"
|
||||
v-model="config.quality"
|
||||
value="480p" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="720p"
|
||||
v-model="config.quality"
|
||||
value="720p" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="1080p"
|
||||
v-model="config.quality"
|
||||
value="1080p" primary dark/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col xs1><!-- Dummy cell --></v-col>
|
||||
<v-col xs4>
|
||||
<v-card-text class="switch">
|
||||
<v-switch label="Pref magnets" dark primary v-model="$store.state.config.magnets"/>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
<v-col xs5>
|
||||
<p class="subsection-title">Sound on magnet downloads</p>
|
||||
<v-select v-bind:items="soundChoices"
|
||||
v-model="config.sound"
|
||||
item-value="config.sound"
|
||||
dark
|
||||
single-line
|
||||
auto/>
|
||||
</v-col>
|
||||
<v-col xs2><!-- Dummy cell --></v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5 class="section-title">Local</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs4>
|
||||
<p class="subsection-title">
|
||||
Preferred directory
|
||||
</p>
|
||||
<div class="choose-button">
|
||||
<v-btn dark flat @click.native="changeConfigPath()">Choose</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col
|
||||
xs8><span class="">Current: </span>
|
||||
<!-- TODO Add a "last one" option-->
|
||||
<p class="config-dir">
|
||||
{{ configDir }}
|
||||
</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5 class="section-title">News</h5>
|
||||
<v-row class="section-content">
|
||||
<v-col xs12>
|
||||
<p class="subsection-title">
|
||||
Display news
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col xs1></v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="Inside"
|
||||
v-model="config.inside"
|
||||
value="true" primary dark/>
|
||||
</v-col>
|
||||
<v-col xs4>
|
||||
<v-radio class="radio"
|
||||
label="Outside"
|
||||
v-model="config.inside"
|
||||
value="false" primary dark/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-row actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn dark primary
|
||||
v-on:click.native="save()">
|
||||
Save
|
||||
</v-btn>
|
||||
<v-btn dark primary
|
||||
v-on:click.native="saveAndClose()">
|
||||
Save and close
|
||||
</v-btn>
|
||||
</v-card-row>
|
||||
</v-card>
|
||||
</v-modal>
|
||||
</div>
|
||||
<settings></settings>
|
||||
|
||||
<div class="modals text-xs-center">
|
||||
<v-modal v-model="searchModal">
|
||||
|
|
@ -230,11 +108,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Settings from '~components/settings.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
searchModal: false,
|
||||
configModal: false,
|
||||
// configModal: false,
|
||||
sidebar: false,
|
||||
itemGroup: [
|
||||
{header: 'Core'},
|
||||
|
|
@ -291,31 +171,12 @@
|
|||
],
|
||||
sidebarTitle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)'
|
||||
},
|
||||
configModalStyle: {
|
||||
minHeight: '90%'
|
||||
},
|
||||
fansubChoices: [
|
||||
'HorribleSubs',
|
||||
'PuyaSubs',
|
||||
'BakedFish',
|
||||
'DeadFish',
|
||||
'DefinitelyNotMe'
|
||||
],
|
||||
soundChoices: [
|
||||
'None',
|
||||
'Nyanpasu'
|
||||
],
|
||||
config: {
|
||||
fansub: this.$store.state.config.fansub,
|
||||
quality: this.$store.state.config.quality,
|
||||
sound: this.$store.state.config.sound,
|
||||
localPath: this.configDir,
|
||||
inside: this.$store.state.config.inside.toString(),
|
||||
magnets: this.$store.state.config.magnets
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Settings
|
||||
},
|
||||
computed: {
|
||||
title: function () {
|
||||
if (this.sidebar)
|
||||
|
|
@ -323,70 +184,14 @@
|
|||
marginLeft: '210px'
|
||||
}
|
||||
},
|
||||
configDir: function () {
|
||||
return this.$store.state.configDir
|
||||
},
|
||||
searchInput: function () {
|
||||
return this.$store.state.searchInput
|
||||
searchInput: function () {
|
||||
return this.$store.state.searchInput
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeConfigPath() {
|
||||
this.$store.dispatch('changePathWithConfig')
|
||||
},
|
||||
save() {
|
||||
this.$store.commit('setConfig', this.config)
|
||||
const toSave = {...this.config}
|
||||
toSave.inside = this.config.inside === 'true'
|
||||
toSave.localPath = this.$store.state.configDir
|
||||
|
||||
// Here we save to config
|
||||
this.$store.dispatch('saveConfig', toSave)
|
||||
},
|
||||
saveAndClose() {
|
||||
this.save()
|
||||
this.configModal = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ----------- CONFIG ----------- */
|
||||
.section
|
||||
{
|
||||
padding: 2% 2% 2% 2%;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgb(60, 60, 60);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-title
|
||||
{
|
||||
padding-left: 25px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.subsection-title
|
||||
{
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.choose-button
|
||||
{
|
||||
padding-left: 25%;
|
||||
}
|
||||
|
||||
.config-dir
|
||||
{
|
||||
padding-left: 10%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/*noinspection ALL*/
|
||||
.with.top-toolbar main > .content
|
||||
{
|
||||
|
|
|
|||
|
|
@ -316,15 +316,13 @@ const store = new Vuex.Store({
|
|||
console.log(`[${(new Date()).toLocaleTimeString()}]: Opening torrents directly on preferred torrent client.`)
|
||||
}
|
||||
},
|
||||
async saveConfig({state}, data) {
|
||||
async saveConfig({}, data) {
|
||||
const toSave = JSON.stringify({
|
||||
config: data
|
||||
})
|
||||
|
||||
writeFileSync(configPath, toSave)
|
||||
console.log(`[${(new Date()).toLocaleTimeString()}]: New config saved!`)
|
||||
|
||||
console.log(state.config)
|
||||
},
|
||||
async appendHistory({}, data) {
|
||||
const {status} = await axios.get(`appendHistory?type=${data.type}&text=${data.text}`)
|
||||
|
|
|
|||
Loading…
Reference in New Issue