{% extends "base.html" %} {% block header_script_files %} {% endblock %} {% block header %} {{ emit_tep('all_volumes_page_header') }} {% endblock %} {% block content %}
{% endblock %} {% block modals %} {{ emit_tep('all_volumes_modals') }} {% endblock %} {% block button_container %} {% if current_user.role == 'admin' %} {% endif %} {{ emit_tep('all_volumes_button_container') }} {% endblock %} {% block script %} Vue.component('publisher-item', { props: ['publisher'], template: ` `, delimiters: ["[[","]]"], }) Vue.component('rating-item', { props: ['rating'], template: ` `, delimiters: ["[[","]]"], }) Vue.component('volume-item', { props: ['volume'], template: `
  • [[ volume.age_rating[0].rating_short ]]
  • `, computed: { volumeTag() { let cornertag = ''; if(!this.volume.volume_status) { cornertag = "stashr-poster_tag bg-danger shadow"; } return cornertag; }, progressWidth() { return (this.volume.volume_have / this.volume.volume_total)*100; }, progressColor() { let classname = 'bg-success'; if(this.volume.volume_status) { classname = 'bg-info'; } if(this.progressWidth < 100) { classname = 'bg-danger'; } return classname }, progressStyle() { return "width: " + this.progressWidth + "%;" } }, data() { return { hover: false } }, delimiters: ["[[","]]"], }) Vue.component('volumes', { props: ['volumes', 'ratings', 'publishers'], template: `
    Sort/Filter
    Sort
    Volume Status
    Publisher
    Age Rating
    `, 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]) } }, }, delimiters: ["[[","]]"], }) var app = new Vue({ el: '#app', data: { volumesList: [], ratings: [], publishers: [], }, created() { 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: { offset: this.volumesList.length } }) .then(res => { if(res.data.number_of_page_results > 0) { res.data.results.forEach(result => { this.volumesList.push(result) }) if(this.volumesList.length < res.data.number_of_total_results) { this.getVolumes() } } }) }, }, delimiters: ["[[","]]"] }); {{ emit_tep('all_volumes_page_script') }} {% endblock %}