{% extends "base.html" %} {% block header_script_files %} {% endblock %} {% block header %} {{ emit_tep('reading_list_page_header') }} {% endblock %} {% block content %}
{% endblock %} {% block modals %} {{ emit_tep('reading_list_page_modals') }} {% endblock %} {% block button_container %} {{ emit_tep('reading_list_page_button_container') }} {% endblock %} {% block script %} Vue.directive('sortable', { inserted (el, binding, vnode) { console.log(binding.value); let options = binding.value; options.onUpdate = (e) => vnode.data.on.sorted(e); const sortable = Sortable.create(el, binding.value); } }) Vue.component('modals', { props: ['issue'], template: `
{{ emit_tep('reading_list_page_issue_modals') }} `, methods: { toggleRead() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleRead() }, removeIssue() { app.removeIssue(this.issue.issue_id) }, }, delimiters: ["[[","]]"] }) Vue.component('issues', { props: ['issues'], template: ` `, methods: { handleSorted(event) { app.handleSorted(event) }, }, sortOptions: { draggable: '.js-sortable-block', handle: '.js-drag-handle', delay: 300, delayOnTouchOnly: true }, delimiters: ["[[","]]"] }) Vue.component('issue', { props: ['issue'], template: `
  • `, computed: { statusRead() { let classname = 'text-danger'; try { if (this.issue.read_status[0].read_status) { classname = 'text-success'; } } finally { 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)) }, changeModal() { app.changeModal(this.issue) }, }, data() { return { hover: false } }, delimiters: ["[[","]]"] }) var app = new Vue({ el: '#app', data: { issues: [], issue: [], }, created() { this.getIssues() }, methods: { getIssues() { axios.get('{{ url_for('api.api_get_reading_list') }}', { 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() }, removeIssue(id) { axios.delete('{{ url_for('api.api_delete_reading_list_single', issue_id='ISSUEID') }}'.replace('ISSUEID', id)) .then( this.issues = this.issues.filter(issue => issue.issue_id !== id) ) .catch(err => console.log(err)) }, handleSorted(event) { axios.put('{{ url_for('api.api_put_reading_list') }}', { data: { old_index: event.oldIndex, new_index: event.newIndex } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Updated Order', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, clearList() { axios.delete('{{ url_for('api.api_delete_reading_list') }}') .then(res => { if(res.data.status_code == '200') { stashrToast('Cleared Reading List', 'success') this.issues = [] } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, changeModal(issue) { this.issue = issue }, }, delimiters: ["[[","]]"] }) {{ emit_tep('reading_list_page_script') }} {% endblock %}