move subscribe buttons to API calls
This commit is contained in:
parent
b005b7bcfe
commit
076452c612
|
@ -66,9 +66,9 @@
|
||||||
<div>
|
<div>
|
||||||
<p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
|
<p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
|
||||||
{% if channel.source.channel_subscribed %}
|
{% if channel.source.channel_subscribed %}
|
||||||
<button class="unsubscribe" type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
|
<button class="unsubscribe" type="button" data-type="channel" data-subscribe="" data-id="{{ channel.source.channel_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
|
<button type="button" data-type="channel" data-subscribe="true" data-id="{{ channel.source.channel_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,9 +38,9 @@
|
||||||
<p>Subscribers: {{ channel_info.channel_subs|intcomma }}</p>
|
<p>Subscribers: {{ channel_info.channel_subs|intcomma }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if channel_info.channel_subscribed %}
|
{% if channel_info.channel_subscribed %}
|
||||||
<button class="unsubscribe" type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
|
<button class="unsubscribe" type="button" data-type="channel" data-subscribe="" data-id="{{ channel_info.channel_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
|
<button type="button" data-type="channel" data-subscribe="true" data-id="{{ channel_info.channel_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -54,9 +54,9 @@
|
||||||
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
|
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
|
||||||
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
|
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
|
||||||
{% if playlist.source.playlist_subscribed %}
|
{% if playlist.source.playlist_subscribed %}
|
||||||
<button class="unsubscribe" type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
|
<button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
|
<button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -49,9 +49,9 @@
|
||||||
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
|
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
|
||||||
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
|
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
|
||||||
{% if playlist.source.playlist_subscribed %}
|
{% if playlist.source.playlist_subscribed %}
|
||||||
<button class="unsubscribe" type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
|
<button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
|
<button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,9 +27,9 @@
|
||||||
<p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
|
<p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
|
||||||
<p>Playlist:
|
<p>Playlist:
|
||||||
{% if playlist_info.playlist_subscribed %}
|
{% if playlist_info.playlist_subscribed %}
|
||||||
<button class="unsubscribe" type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
|
<button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
|
<button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
{% if playlist_info.playlist_active %}
|
{% if playlist_info.playlist_active %}
|
||||||
|
|
|
@ -71,20 +71,27 @@ function isWatchedButton(button) {
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function unsubscribe(id_unsub) {
|
function subscribeStatus(subscribeButton) {
|
||||||
let payload = JSON.stringify({ unsubscribe: id_unsub });
|
let id = subscribeButton.getAttribute('data-id');
|
||||||
sendPost(payload);
|
let type = subscribeButton.getAttribute('data-type');
|
||||||
|
let subscribe = Boolean(subscribeButton.getAttribute('data-subscribe'));
|
||||||
|
let apiEndpoint;
|
||||||
|
let data;
|
||||||
|
if (type === 'channel') {
|
||||||
|
apiEndpoint = '/api/channel/';
|
||||||
|
data = { data: [{ channel_id: id, channel_subscribed: subscribe }] };
|
||||||
|
} else if (type === 'playlist') {
|
||||||
|
apiEndpoint = '/api/playlist/';
|
||||||
|
data = { data: [{ playlist_id: id, playlist_subscribed: subscribe }] };
|
||||||
|
}
|
||||||
|
apiRequest(apiEndpoint, 'POST', data);
|
||||||
let message = document.createElement('span');
|
let message = document.createElement('span');
|
||||||
message.innerText = 'You are unsubscribed.';
|
if (subscribe) {
|
||||||
document.getElementById(id_unsub).replaceWith(message);
|
message.innerText = 'You are subscribed.';
|
||||||
}
|
} else {
|
||||||
|
message.innerText = 'You are unsubscribed.';
|
||||||
function subscribe(id_sub) {
|
}
|
||||||
let payload = JSON.stringify({ subscribe: id_sub });
|
subscribeButton.replaceWith(message);
|
||||||
sendPost(payload);
|
|
||||||
let message = document.createElement('span');
|
|
||||||
message.innerText = 'You are subscribed.';
|
|
||||||
document.getElementById(id_sub).replaceWith(message);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeView(image) {
|
function changeView(image) {
|
||||||
|
@ -1057,9 +1064,9 @@ function createChannel(channel, viewStyle) {
|
||||||
const channelLastRefresh = channel.channel_last_refresh;
|
const channelLastRefresh = channel.channel_last_refresh;
|
||||||
let button;
|
let button;
|
||||||
if (channel.channel_subscribed) {
|
if (channel.channel_subscribed) {
|
||||||
button = `<button class="unsubscribe" type="button" id="${channelId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${channelName}">Unsubscribe</button>`;
|
button = `<button class="unsubscribe" type="button" data-id="${channelId}" data-subscribe="" data-type="channel" onclick="subscribeStatus(this)" title="Unsubscribe from ${channelName}">Unsubscribe</button>`;
|
||||||
} else {
|
} else {
|
||||||
button = `<button type="button" id="${channelId}" onclick="subscribe(this.id)" title="Subscribe to ${channelName}">Subscribe</button>`;
|
button = `<button type="button" data-id="${channelId}" data-subscribe="true" data-type="channel" onclick="subscribeStatus(this)" title="Subscribe to ${channelName}">Subscribe</button>`;
|
||||||
}
|
}
|
||||||
// build markup
|
// build markup
|
||||||
const markup = `
|
const markup = `
|
||||||
|
@ -1103,9 +1110,9 @@ function createPlaylist(playlist, viewStyle) {
|
||||||
const playlistLastRefresh = playlist.playlist_last_refresh;
|
const playlistLastRefresh = playlist.playlist_last_refresh;
|
||||||
let button;
|
let button;
|
||||||
if (playlist.playlist_subscribed) {
|
if (playlist.playlist_subscribed) {
|
||||||
button = `<button class="unsubscribe" type="button" id="${playlistId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${playlistName}">Unsubscribe</button>`;
|
button = `<button class="unsubscribe" type="button" data-id="${playlistId}" data-subscribe="" data-type="playlist" onclick="subscribeStatus(this)" title="Unsubscribe from ${playlistName}">Unsubscribe</button>`;
|
||||||
} else {
|
} else {
|
||||||
button = `<button type="button" id="${playlistId}" onclick="subscribe(this.id)" title="Subscribe to ${playlistName}">Subscribe</button>`;
|
button = `<button type="button" data-id="${playlistId}" data-subscribe="true" data-type="playlist" onclick="subscribeStatus(this)" title="Subscribe to ${playlistName}">Subscribe</button>`;
|
||||||
}
|
}
|
||||||
const markup = `
|
const markup = `
|
||||||
<div class="playlist-thumbnail">
|
<div class="playlist-thumbnail">
|
||||||
|
|
Loading…
Reference in New Issue