{% extends "base.html" %} {% block header_script_files %} {% endblock %} {% block header %} {{ emit_tep('single_volume_page_header', volume_id=volume_id) }} {% endblock %} {% block content %}
{% endblock %} {% block modals %} {{ emit_tep('single_volume_page_modals', volume_id=volume_id) }} {% endblock %} {% block button_container %} {{ emit_tep('single_volume_page_button_container', volume_id=volume_id) }} {% endblock %} {% block script %} Vue.component('collection-option', { props: ['collection'], template: ` `, delimiters: ["[[","]]"] }) Vue.component('rating-option', { props: ['rating'], template: ` `, delimiters: ["[[","]]"] }) Vue.component('modals-issue', { props: [ 'issue', 'collections' ], template: `
{% if (current_user.role.lower() == 'admin') or (current_user.role.lower() == 'librarian') %} {% endif %}
`, data() { return { // collections: [], collection_id: 0, file: '', } }, methods: { addToReadingList() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).addToReadingList() }, addToCollection() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).addToCollection() }, toggleReadStatus() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleRead() }, toggleOwnedStatus() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleOwned() }, changeCollection() { this.collection_id = this.$refs.collectionselection.value }, deleteIssue() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).deleteIssue() }, addToCollection() { if(this.collection_id == '0') { axios.post('{{ url_for('api.api_post_all_collections') }}', { data: { collection_name: this.$refs.collectionName.value, issue_id: this.issue.issue_id } }) .then(res => { if (res.data.status_code == '200') { app.refreshCollections(); stashrToast('Collection Created', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) } else { axios.post('{{ url_for('api.api_post_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', this.$refs.collectionselection.value), { data: { issue_id: this.issue.issue_id } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Added to Collection', 'success'); } else { stashrToast(response.data.message, 'error') } }) .catch(err => console.log(err)) } }, uploadFile(){ let formData = new FormData(); var imagefile = document.querySelector('#fileupload'); formData.append("file", imagefile.files[0]); bootstrap.Modal.getInstance(document.getElementById('modalUpload')).hide() stashrToast('Uploading Comic', 'info') axios.post('{{ url_for('api.api_post_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(res => { if(res.data.status_code == 200) { stashrToast('Issue Uploaded', 'success') app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleFile() app.refreshVolumeInfo() } else { stashrToast(res.data.message, 'error') } }) .catch(err => { stashrToast(err, 'error') }) }, }, delimiters: ["[[","]]"] }) Vue.component('modals-volume', { props: [ 'issue', 'volume', 'ratings' ], template: `
{% if (current_user.role.lower() == 'admin') or (current_user.role.lower() == 'librarian') %} {% endif %}
`, data() { return { collections: [], collection_id: 0, file: '', } }, methods: { removeFromLibrary() { axios.delete('{{ url_for('api.api_delete_single_volume', volume_id=volume_id) }}') .then(res => { window.location.replace("{{ url_for('all_volumes_page') }}"); }) .catch() }, updateVolumeRating() { axios.put('{{ url_for('api.api_put_single_volume', volume_id=volume_id) }}', { data: { volume_age_rating: this.$refs.ratingselection.value } }) .then(res => { if(res.data.status_code == '200') { app.$refs.volume.volume.age_rating = app.ratings.filter(child => child.rating_value == this.$refs.ratingselection.value ) stashrToast('Updated Comic Rating', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, }, delimiters: ["[[","]]"] }) Vue.component('volume-jumbo', { props: ['volume'], template: `

[[ volume.volume_name ]]

[[ statusWord ]] [[ volume.age_rating[0].rating_long ]] [[ publisherName ]] [[ volume.volume_year ]]
Digital: [[ volume.volume_have ]]/[[ volume.volume_total ]] Physical: [[ ownedNumber ]]/[[ volume.volume_total ]] Read: [[ readNumber ]]/[[ volume.volume_total ]] ComicVine
{{ emit_tep('single_volume_page_badge_row', volume_id=volume_id) }}
{{ emit_tep('single_volume_page_button_row', volume_id=volume_id) }}
`, computed: { publisherName() { let pub_name = 'Not Defined'; try { pub_name = this.volume.publisher.publisher_name; } finally { return pub_name; } }, ownedNumber() { var read_issues = app.issues.filter(issue => issue.owned_status[0].owned_status == 1) return read_issues.length }, readNumber() { var read_issues = app.issues.filter(issue => issue.read_status[0].read_status == 1) return read_issues.length }, volumeNote() { let note = '' try { note = this.volume.notes.volume_note; } finally { return note; }; }, volumeStatus() { let classname = 'bg-danger'; if (this.volume.volume_status) { classname = 'bg-success' }; return classname; }, statusWord() { let status = 'Ended'; if(this.volume.volume_status) { status = 'Ongoing'; }; return status; } }, methods: { toggleStatus() { axios.put('{{ url_for('api.api_put_single_volume', volume_id=volume_id) }}', { data: { volume_status: !this.volume.volume_status } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Status Updated', 'success') this.volume.volume_status = !this.volume.volume_status } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, refreshVolume() { app.refreshVolume() }, deleteSubscription() { axios.delete('{{ url_for('api.api_delete_single_volume', volume_id=volume_id) }}') .then(function(response) { window.location.replace("{{ url_for('all_volumes_page') }}"); }) .catch(err => console.log(err)) }, }, delimiters: ["[[","]]"] }) Vue.component('issue-item', { props: ['issue'], template: `
  • [[ issue.issue_number ]]
    {% if (current_user.role.lower() == 'admin') or (current_user.role.lower() == 'librarian') or (current_user.role.lower() == 'patron') %} {% endif %} {{ emit_tep("single_volume_page_top_overlay_have", volume_id=volume_id) }} {% if (current_user.role.lower() == 'admin') or (current_user.role.lower() == 'librarian') %} {% endif %} {{ emit_tep("single_volume_page_top_overlay_missing", volume_id=volume_id) }}
  • `, data() { return { hover: false, have: false, } }, computed: { statusFile() { let classname = 'text-danger'; if(this.issue.issue_file_status) { classname = 'text-success'; }; return classname; }, statusOwned() { let classname = 'text-danger'; try { if(this.issue.owned_status[0].owned_status) { classname = 'text-success'; } } catch { classname = 'text-danger'; } return classname; }, statusRead() { let classname = 'text-danger'; try { if(this.issue.read_status[0].read_status) { classname = 'text-success'; } } catch { classname = 'text-danger'; } return classname; }, }, methods: { toggleRead() { axios.put('{{ url_for('api.api_put_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), { data: { read_status: !this.issue.read_status[0].read_status } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Toggled Read Status', 'success') this.issue.read_status[0].read_status = !this.issue.read_status[0].read_status; } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, toggleOwned() { axios.put('{{ url_for('api.api_put_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), { data: { owned_status: !this.issue.owned_status[0].owned_status } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Toggled Owned Status', 'success') this.issue.owned_status[0].owned_status = !this.issue.owned_status[0].owned_status; } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, addToReadingList() { axios.post('{{ url_for('api.api_post_reading_list') }}', { issue_id: this.issue.issue_id }) .then( res => { if(res.data.status_code == '200') { stashrToast('Added to Reading List', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, imageError() { $event.target.src = 'shit' }, addToCollection() { let collection = document.getElementById('collectionName').value if (collection == 0) { axios.post('{{ url_for('api.api_post_all_collections') }}', { data: { collection_name: document.getElementById('newCollection').value, issue_id: this.issue.issue_id }}) .then(function(response) { if (response.data.status_code == '200') { stashrToast('Added to Collection', 'success') } else { stashrToast(response.data.message, 'error') } }) .catch(err => console.log(err)) } else { axios.post('{{ url_for('api.api_post_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', collection), { data: { issue_id: this.issue.issue_id } }) .then(function(response){ if (response.data.status_code == '200') { stashrToast('Added to Collection', 'success') } else { stashrToast(response.data.message, 'error') } }) .catch(err => console.log(err)) } }, changeModal() { app.changeModal(this.issue) }, toggleFile() { this.issue.issue_file_status = 'true'; app.$refs.volume.volume.volume_have = parseInt(app.$refs.volume.volume.volume_have) + 1 }, deleteIssue() { axios.delete('{{ url_for('api.api_delete_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id)) .then( res=> { if(res.data.status_code == 200) { app.refreshVolumeInfo(); this.issue.issue_file_status = 0; stashrToast('Issue Deleted', 'success') } }) .catch(err => console.log(err)) }, }, delimiters: ["[[","]]"] }) Vue.component('issues', { props: ['issues'], template: `
    `, delimiters: ["[[","]]"] }) var app = new Vue({ el: '#app', data: { volume: [], issues: [], issue: [], ratings: [], collections: [], }, created() { this.getVolume(); this.getIssues(); this.getRatings(); this.getCollections(); }, methods: { getVolume() { axios.get('{{ url_for('api.api_get_single_volume', volume_id=volume_id) }}') .then(res => { if(res.data.status_code == '200') { this.volume = res.data.results } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, getIssues() { axios.get('{{ url_for('api.api_get_single_volume_all_issues', volume_id=volume_id) }}', { params: { offset: this.issues.length } }) .then(res => { if(res.data.number_of_page_results > 0) { res.data.results.forEach(result => { this.issues.push(result) }); if(this.issues.length < res.data.number_of_total_results) { this.getIssues(); } } this.issue = this.issues[0] }) .catch(err => console.log(err)) }, changeModal(issue) { this.issue = issue }, getRatings() { axios.get('{{ url_for('api.api_get_all_ratings') }}') .then(res => { this.ratings = res.data.results; }) .catch(err => console.log(err)) }, getCollections() { axios.get('{{ url_for('api.api_get_all_collections') }}') .then(res => { if(res.status == '200') { this.collections = res.data.results } else { stashrToast('Problem Retrieving Collections', 'error') } }) .catch(err => console.log(err)) }, refreshVolume() { axios.post('{{ url_for('api.api_post_single_volume', volume_id=volume_id) }}') .then(res => { if(res.data.status_code == '200') { this.refreshVolumeInfo(); this.refreshIssueInfo(); stashrToast('Updated Volume', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, refreshCollections() { this.collections = []; this.getCollections(); }, refreshVolumeInfo() { this.volume = []; this.getVolume(); }, refreshIssueInfo() { this.issues = []; this.getIssues(); }, }, delimiters: ["[[","]]"] }); {{ emit_tep('single_volume_page_script', volume_id=volume_id) }} {% endblock %}