mirror of https://github.com/Kylart/KawAnime.git
323 lines
9.0 KiB
Vue
323 lines
9.0 KiB
Vue
<template>
|
|
<v-container fluid id="watch-list" class="pa-0">
|
|
<v-tabs id="tabs" grow icons>
|
|
<v-tabs-bar slot="activators" class="mablue">
|
|
<v-tabs-slider class="primary"></v-tabs-slider>
|
|
<template v-for="i in 5">
|
|
<v-tabs-item :href="'#tabs-' + i">
|
|
{{ actionsList[i - 1].name }}
|
|
<v-icon>{{ actionsList[i - 1].icon }}</v-icon>
|
|
</v-tabs-item>
|
|
</template>
|
|
</v-tabs-bar>
|
|
<v-tabs-content v-for="i in 5" :key="i"
|
|
v-bind:id="'tabs-' + i">
|
|
<v-card style="background-color: #303030">
|
|
<v-card-text>
|
|
<v-layout row wrap class="list-container">
|
|
<v-flex xs12>
|
|
<v-layout row wrap align-center justify-center class="top-form">
|
|
<v-flex md3 sm4 xs9>
|
|
<v-btn icon flat
|
|
@click="selectAll(i)"
|
|
v-tooltip:bottom="{ html: allSelected[i] ? 'Unselect all' : 'Select all' }">
|
|
<v-icon>select_all</v-icon>
|
|
</v-btn>
|
|
<v-menu open-on-hover
|
|
transition="slide-x-transition">
|
|
<v-btn secondary slot="activator">Move to</v-btn>
|
|
<v-list class="dark">
|
|
<v-list-tile @click.capture="moveTo(action.list, i)"
|
|
v-for="action in actions(i)"
|
|
:key="action.name">
|
|
<v-list-tile-action>
|
|
<v-icon>{{ action.icon }}</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>{{ action.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-menu>
|
|
<v-btn @click="deleteSelected(i)"
|
|
class="red--text"
|
|
v-tooltip:bottom="{ html: 'Delete all selected items from this list' }"
|
|
icon>
|
|
<v-icon>delete_sweep</v-icon>
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex md2 sm2 xs3>
|
|
<p class="elem-number">
|
|
{{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
|
|
</p>
|
|
</v-flex>
|
|
<v-flex md3 sm1 hidden-xs-only></v-flex>
|
|
<v-flex md2 sm3 xs4 @keyup.enter="addEntry(i)">
|
|
<v-text-field type="text"
|
|
class="entry-text"
|
|
label="Add entry"
|
|
v-model="entries[i]"
|
|
dark>
|
|
</v-text-field>
|
|
</v-flex>
|
|
<v-flex hidden-sm-and-up xs1></v-flex>
|
|
<v-flex md2 sm2 xs4 class="add-button-container">
|
|
<v-btn dark secondary
|
|
@click="addEntry(i)"
|
|
class="add-button">
|
|
Add
|
|
</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
<transition-group name="list">
|
|
<template v-for="item in lists[i - 1]">
|
|
<list-entry
|
|
:item="item"
|
|
:deleteEntry="deleteEntry"
|
|
:key="item"
|
|
:index="i"
|
|
:select="select"
|
|
:selected="selected"></list-entry>
|
|
</template>
|
|
</transition-group>
|
|
</v-layout>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-tabs-content>
|
|
</v-tabs>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
const removeSelectedClasses = () => {
|
|
const elems = document.getElementsByClassName('elem')
|
|
|
|
// Remove all selected class
|
|
for (let j = 0, l = elems.length; j < l; ++j) elems[j].children[0].classList.remove('selected')
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
'list-entry': () => import('components/listEntry.vue')
|
|
},
|
|
data () {
|
|
return {
|
|
selected: {
|
|
1: [],
|
|
2: [],
|
|
3: [],
|
|
4: [],
|
|
5: []
|
|
},
|
|
entries: {
|
|
1: '',
|
|
2: '',
|
|
3: '',
|
|
4: '',
|
|
5: ''
|
|
},
|
|
actionsList: [{
|
|
name: 'Watch list',
|
|
list: 'watchList',
|
|
icon: 'watch_later'
|
|
}, {
|
|
name: 'Watching',
|
|
list: 'watching',
|
|
icon: 'tv'
|
|
}, {
|
|
name: 'Seen',
|
|
list: 'seen',
|
|
icon: 'done_all'
|
|
}, {
|
|
name: 'On hold',
|
|
list: 'onHold',
|
|
icon: 'av_timer'
|
|
}, {
|
|
name: 'Dropped',
|
|
list: 'dropped',
|
|
icon: 'visibility_off'
|
|
}],
|
|
allSelected: {
|
|
1: false,
|
|
2: false,
|
|
3: false,
|
|
4: false,
|
|
5: false
|
|
},
|
|
listNames: {
|
|
1: 'watchList',
|
|
2: 'watching',
|
|
3: 'seen',
|
|
4: 'onHold',
|
|
5: 'dropped'
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
watchList: function () {
|
|
return this.$store.state.watchLists.watchList
|
|
},
|
|
seen: function () {
|
|
return this.$store.state.watchLists.seen
|
|
},
|
|
watching: function () {
|
|
return this.$store.state.watchLists.watching
|
|
},
|
|
onHold: function () {
|
|
return this.$store.state.watchLists.onHold
|
|
},
|
|
dropped: function () {
|
|
return this.$store.state.watchLists.dropped
|
|
},
|
|
lists: function () {
|
|
return [
|
|
this.watchList,
|
|
this.watching,
|
|
this.seen,
|
|
this.onHold,
|
|
this.dropped
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
actions: function (i) {
|
|
return this.actionsList.filter((x) => { return x !== this.actionsList[i - 1] })
|
|
},
|
|
addEntry (i) {
|
|
if (this.entries[i] !== '') {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: Adding ${this.entries[i]} to list.`)
|
|
this.$store.dispatch('updateList', {
|
|
entry: this.entries[i],
|
|
listName: this.listNames[i]
|
|
})
|
|
}
|
|
this.entries[i] = ''
|
|
},
|
|
deleteEntry (name, i) {
|
|
removeSelectedClasses()
|
|
|
|
this.$store.dispatch('removeFromList', {
|
|
listName: this.actionsList[i - 1].list,
|
|
entry: name
|
|
})
|
|
},
|
|
select (item, i) {
|
|
const elem = document.getElementsByClassName(item.split(' ').join('-'))[0].children[0]
|
|
|
|
if (elem.classList.contains('selected') === true) {
|
|
elem.classList.remove('selected')
|
|
this.selected[i] = this.selected[i].filter((x) => { return !(x === item) })
|
|
|
|
this.allSelected[i] = false
|
|
} else {
|
|
elem.className += ' selected'
|
|
this.selected[i].push(item)
|
|
|
|
if (this.selected[i].length === this.lists[[i - 1]]) this.allSelected[i] = true
|
|
}
|
|
},
|
|
selectAll (i) {
|
|
const list = this.lists[i - 1]
|
|
|
|
if (this.selected[i].length === list.length) {
|
|
const elems = document.getElementsByClassName('elem')
|
|
|
|
this.selected[i] = []
|
|
|
|
for (let j = 0, l = elems.length; j < l; ++j) { elems[j].children[0].classList.remove('selected') }
|
|
|
|
this.allSelected[i] = false
|
|
} else {
|
|
list.forEach((elem) => {
|
|
// Color element
|
|
const tmpElem = document.getElementsByClassName(elem.split(' ').join('-'))[0].children[0]
|
|
if (!tmpElem.classList.contains('selected') === true) tmpElem.className += ' selected'
|
|
})
|
|
// Add all elements to selected
|
|
this.selected[i] = [...list]
|
|
|
|
this.allSelected[i] = true
|
|
}
|
|
},
|
|
moveTo (name, i) {
|
|
this.selected[i].forEach((anime) => {
|
|
this.$store.dispatch('updateList', {
|
|
listName: name,
|
|
entry: anime
|
|
})
|
|
|
|
this.$store.dispatch('removeFromList', {
|
|
listName: this.actionsList[i - 1].list,
|
|
entry: anime
|
|
})
|
|
})
|
|
|
|
removeSelectedClasses()
|
|
},
|
|
deleteSelected (i) {
|
|
this.selected[i].forEach((anime) => {
|
|
this.$store.dispatch('removeFromList', {
|
|
listName: this.actionsList[i - 1].list,
|
|
entry: anime
|
|
})
|
|
})
|
|
|
|
removeSelectedClasses()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
h6
|
|
{
|
|
margin: 0;
|
|
}
|
|
|
|
span
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.card__text
|
|
{
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ellipsis
|
|
{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elem-number
|
|
{
|
|
margin: 15px 0 0 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
.top-form
|
|
{
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.entry-text
|
|
{
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.add-button-container
|
|
{
|
|
padding-right: 2%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-container
|
|
{
|
|
margin-bottom: 85px;
|
|
}
|
|
</style>
|