You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
283 lines
11 KiB
283 lines
11 KiB
{% extends "base.html" %}
|
|
|
|
{% block header_script_files %}
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
{{ emit_tep('new_releases_page_header') }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div id="app">
|
|
<releases ref='releases' v-bind:releases='releaseList'></releases>
|
|
<modals v-bind:volume='volume'></modals>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block button_container %}
|
|
<button type="button" class="btn btn-outline-info btn-circle btn-md" data-bs-toggle="tooltip" data-bs-placement="top" title="Update New Releases" onclick="app.updateNewReleases()">
|
|
<i class="text-white fas fa-2x fa-sync-alt"></i>
|
|
</button>
|
|
{{ emit_tep('new_releases_page_button_container') }}
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
|
|
Vue.component('modals', {
|
|
props: [
|
|
'volume'
|
|
],
|
|
template: `
|
|
<div>
|
|
<div class="modal" id="modalSubscription" tabindex="-1" role="dialog" aria-labelledby="subscriptionModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notesModalTitle">
|
|
[[ volume.new_release_comic_name ]] #[[ volume.new_release_issue_number ]]
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<a id="comic-have-link" class="btn btn-outline-primary" :href="volume.new_release_item_url" role="button" target="new">ComicVine Link</a>
|
|
<span id="subscribeSubscribed" v-if="volume.status">
|
|
<!-- SUBSCRIBED -->
|
|
<a id="comic-page" class="btn btn-outline-primary" :href="'{{ url_for('all_volumes_page') }}/' + volume.new_release_volume_id" role="button">Comic Page</a>
|
|
</span>
|
|
<span id="subscribeNotSubscribed" v-else>
|
|
<!-- NOT SUBSCRIBED -->
|
|
<button id="subscribeToVolume" class="btn btn-outline-primary" role="button" data-bs-dismiss="modal" @click='add_to_library'>Add to Library</button>
|
|
</span>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ emit_tep('new_releases_page_modals') }}
|
|
</div>
|
|
`,
|
|
methods: {
|
|
add_to_library() {
|
|
console.log('adding to library')
|
|
app.$refs.releases.$children.find(child => { return child.$vnode.key == this.volume.new_release_id }).subscribe_to_volume()
|
|
},
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('release-item', {
|
|
props: ['release'],
|
|
template: `
|
|
<li class='stashr-item_container m-2'
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
>
|
|
<div class="stashr-poster_container border border-dark rounded-3" data-bs-toggle="modal" data-bs-target="#modalSubscription" v-on:click="this.changeModal">
|
|
<div class="stashr-badge_top_left bg-info text-white px-1">
|
|
#[[ release.new_release_issue_number ]]
|
|
</div>
|
|
<div class="stashr-badge_bottom_right bg-dark">
|
|
<span class="fa-stack p-0">
|
|
<i class="fas fa-university fa-stack-1x" :class="className"></i>
|
|
<i class="fas fa-slash fa-stack-1x text-danger" v-if="!this.release.status"></i>
|
|
</span>
|
|
</div>
|
|
<img class="stashr-background w-100" loading="eager" src="/static/assets/cover.svg" />
|
|
<img class="stashr-poster w-100" loading="lazy" :src="release.new_release_image_url" />
|
|
<div class="stashr-overlay_bottom w-100 text-center shadow" v-if="hover">
|
|
[[ release.new_release_comic_name ]]
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`,
|
|
computed: {
|
|
className() {
|
|
let classname = 'text-danger';
|
|
try {
|
|
if (this.release.status) {
|
|
classname = 'text-success';
|
|
}
|
|
} finally {
|
|
return classname;
|
|
}
|
|
},
|
|
subText() {
|
|
let text = 'Not In Library';
|
|
try {
|
|
if (this.release.status) {
|
|
text = 'In Library';
|
|
}
|
|
} finally {
|
|
return text;
|
|
}
|
|
},
|
|
subStatus() {
|
|
let status = false;
|
|
try {
|
|
if (this.release.status) {
|
|
status = true;
|
|
}
|
|
} finally {
|
|
return status
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
subscribe_to_volume() {
|
|
axios.post('{{ url_for('api.api_post_single_volume', volume_id='VOLUMESTRING') }}'.replace('VOLUMESTRING', this.release.new_release_volume_id))
|
|
.then(res => {
|
|
console.log(res)
|
|
if (res.data.status_code == 200) {
|
|
this.release.status = {'volume_status': true};
|
|
stashrToast('Added to Library', 'success')
|
|
} else {
|
|
stashrToast(res.data.message, 'error')
|
|
}
|
|
})
|
|
.catch(err => console.log(err))
|
|
},
|
|
changeModal() {
|
|
app.changeModal(this.release)
|
|
},
|
|
},
|
|
data () { return { hover: false, subscribed: false, } },
|
|
delimiters: ["[[","]]"],
|
|
})
|
|
|
|
Vue.component('releases', {
|
|
props: ['releases'],
|
|
template: `
|
|
<div>
|
|
<div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
|
|
<div class="row d-flex flex-nowrap w-100 m-0 p-3 bg-mine">
|
|
<input type="text" v-model="search" class="form-control flex-shrink-1" placeholder="Search New Releases..." />
|
|
<a class="fa-stack p-0 text-white">
|
|
<i class="fas fa-bars fa-stack-1x" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
|
|
<release-item
|
|
v-for="release in filteredList"
|
|
v-bind:release="release"
|
|
v-bind:key="release.new_release_id"
|
|
></release-item>
|
|
</ul>
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
|
<div class="offcanvas-header">
|
|
<h5 id="offcanvasRightLabel">New Releases</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<div class="m-3">
|
|
<div class="my-2">
|
|
<i class="fas fa-sort"></i>
|
|
<strong>Sort</strong>
|
|
</div>
|
|
<select class="form-select" aria-label="Default select example" v-model="sorted">
|
|
<option value="new_release_comic_name">Name</option>
|
|
<option value="new_release_issue_number">Issue Number</option>
|
|
</select>
|
|
</div>
|
|
<div class="m-3">
|
|
<div class="my-2">
|
|
<i class="fas fa-sort"></i>
|
|
<strong>Library Status</strong>
|
|
</div>
|
|
<select class="form-select" aria-label="Default select example" v-model="library">
|
|
<option :value="''">All</option>
|
|
<option value="library">In Library</option>
|
|
<option :value="Null">Not In Library</option>
|
|
</select>
|
|
</div>
|
|
<hr />
|
|
<div class="text-center w-100 m-0 p-3">
|
|
<button type="button" class="btn btn-info w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="Update New Releases" onclick="app.updateNewReleases()">
|
|
<i class="fas fa-sync-alt"></i>
|
|
Update New Releases
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() { return { search: '', sorted: 'new_release_comic_name', library: ''} },
|
|
computed: {
|
|
filteredList() {
|
|
if (this.library == null) {
|
|
return this.releases
|
|
.filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
|
|
.filter(release => { return release.status == null })
|
|
.sort((a, b) => a[this.sorted] - b[this.sorted])
|
|
} else if (this.library == 'library') {
|
|
return this.releases
|
|
.filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
|
|
.filter(release => { return release.status != null })
|
|
.sort((a, b) => a[this.sorted] - b[this.sorted])
|
|
} else {
|
|
return this.releases
|
|
.filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
|
|
.sort((a, b) => a[this.sorted] - b[this.sorted])
|
|
}
|
|
},
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
releaseList: [],
|
|
volume: [],
|
|
},
|
|
created() {
|
|
this.getNewReleases()
|
|
},
|
|
methods: {
|
|
getNewReleases(){
|
|
axios.get('{{ url_for('api.api_get_new_releases') }}', {
|
|
params: {
|
|
offset: this.releaseList.length
|
|
}
|
|
})
|
|
.then(res => {
|
|
if(res.data.number_of_page_results > 0) {
|
|
res.data.results.forEach(result => {
|
|
this.releaseList.push(result)
|
|
});
|
|
if(this.releaseList.length < res.data.number_of_total_results) {
|
|
this.getNewReleases()
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
updateNewReleases() {
|
|
stashrToast('Updating New Releases', 'info')
|
|
axios.post('{{ url_for('api.api_post_new_releases') }}')
|
|
.then(res => {
|
|
if(res.data.status_code == '200') {
|
|
this.releaseList = [];
|
|
this.getNewReleases();
|
|
} else {
|
|
stashrToast(res.data.message, 'error')
|
|
}
|
|
})
|
|
.catch(err => console.log(err))
|
|
},
|
|
changeModal(volume) {
|
|
console.log('changing modal')
|
|
this.volume = volume
|
|
}
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
{{ emit_tep('new_releases_page_script') }}
|
|
|
|
{% endblock %} |