andrew.vanderbye
/
stashr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added more filtering options

Browse Source
nightly
Andrew 4 years ago
parent e82d583dce
commit 0349435dcf
1 changed files with 93 additions and 20 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 113
      stashr/templates/all_volumes_page.html

113
stashr/templates/all_volumes_page.html
Unescape View File

@ -29,7 +29,7 @@
</div>
<div id="app">
<volumes v-bind:volumes='volumesList'></volumes>
<volumes v-bind:volumes='volumesList' v-bind:publishers="publishers" v-bind:ratings="ratings"></volumes>
</div>
{% endblock %}
@ -49,6 +49,22 @@
{% block script %}
Vue.component('publisher-item', {
props: ['publisher'],
template: `
<option :value="publisher.publisher_id">[[ publisher.publisher_name ]]</option>
`,
delimiters: ["[[","]]"],
})
Vue.component('rating-item', {
props: ['rating'],
template: `
<option :value="rating.rating_value">[[ rating.rating_long ]]</option>
`,
delimiters: ["[[","]]"],
})
Vue.component('volume-item', {
props: ['volume'],
template: `
@ -110,7 +126,7 @@ Vue.component('volume-item', {
})
Vue.component('volumes', {
props: ['volumes'],
props: ['volumes', 'ratings', 'publishers'],
template: `
<div>
<div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
@ -120,23 +136,49 @@ Vue.component('volumes', {
<i class="fas fa-bars fa-stack-1x"></i>
</span>
</div>
<div class="row d-flex flex-nowrap w-100 m-0 p-3 stashr-submenu">
<div class="d-flex flex-shrink-1">
<i class="fas fa-2x fa-sort text-white me-1"></i>
<select class="form-select" aria-label="Default select example" v-model="sorted">
<option value="volume_sort_title">Name</option>
<option value="volume_year">Year</option>
<option value="volume_total">Length</option>
<option value="progress">Progress</option>
</select>
<div class="row d-flex flex-wrap w-100 m-0 p-0 stashr-submenu">
<div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
<div class="d-flex flex-grow-1">
<i class="fas fa-2x fa-sort text-white mx-2"></i>
<select class="form-select" aria-label="Default select example" v-model="sorted">
<option value="volume_sort_title">Name</option>
<option value="volume_year">Year</option>
<option value="volume_total">Length</option>
<option value="progress">Progress</option>
</select>
</div>
<div class="d-flex flex-grow-1">
<i class="fas fa-2x fa-filter text-white mx-2"></i>
<select class="form-select" aria-label="Default select example" v-model="filter">
<option :value="''">All</option>
<option :value=false>Ended</option>
<option :value=true>Ongoing</option>
</select>
</div>
</div>
<div class="d-flex flex-shrink-1">
<i class="fas fa-2x fa-filter text-white me-1"></i>
<select class="form-select" aria-label="Default select example" v-model="filter">
<option :value="''">All</option>
<option :value=false>Ended</option>
<option :value=true>Ongoing</option>
</select>
<div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
<div class="d-flex flex-grow-1">
<i class="fas fa-2x fa-filter text-white mx-2"></i>
<select class="form-select" aria-label="Default select example" v-model="rating">
<option :value="''">All</option>
<rating-item
v-for="rating in ratings"
v-bind:rating="rating"
v-bind:key="rating.rating_id"
></rating-item>
</select>
</div>
<div class="d-flex flex-grow-1">
<i class="fas fa-2x fa-filter text-white mx-2"></i>
<select class="form-select" aria-label="Default select example" v-model="publisher">
<option :value="''">All</option>
<publisher-item
v-for="publisher in publishers"
v-bind:publisher="publisher"
v-bind:key="publisher.publisher_id"
></publisher-item>
</select>
</div>
</div>
</div>
</div>
@ -149,18 +191,21 @@ Vue.component('volumes', {
</ul>
</div>
`,
data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title'} },
data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title', rating: '', publisher: ''} },
computed: {
filteredList() {
if (this.sorted.toLowerCase() == 'progress') {
return this.volumes
.filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
.filter(volume => { return volume.volume_status.toString().includes(this.filter) })
.filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
.sort((a, b) => (a.volume_have / a.volume_total) - (b.volume_have / b.volume_total))
} else {
return this.volumes
.filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
.filter(volume => { return volume.volume_status.toString().includes(this.filter) })
.filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
.filter(volume => { return volume.volume_age_rating.toString().includes(this.rating) })
.sort((a, b) => a[this.sorted] - b[this.sorted])
}
},
@ -172,11 +217,39 @@ var app = new Vue({
el: '#app',
data: {
volumesList: [],
ratings: [],
publishers: [],
},
created() {
this.getVolumes()
this.getVolumes();
this.getPublishers();
this.getRatings();
},
methods:{
getRatings() {
axios.get('{{ url_for('api.api_get_all_ratings') }}')
.then(res => {
this.ratings = res.data.results;
})
.catch(err => console.log(err))
},
getPublishers() {
axios.get('{{ url_for('api.api_get_all_publishers') }}', {
params: {
offset: this.publishers.length
}
})
.then(res => {
if(res.data.number_of_page_results > 0) {
res.data.results.forEach(result => {
this.publishers.push(result)
})
if(this.publishers.length < res.data.number_of_total_results) {
this.getPublishers()
}
}
})
},
getVolumes() {
axios.get('{{ url_for('api.api_get_all_volumes') }}', {
params: {

Write Preview
Loading…
Cancel
Save