122 lines
5.0 KiB
HTML
122 lines
5.0 KiB
HTML
{% if item.can_add %}
|
||
<button class="btn btn-success" hx-post="/addplaylist?provider={{provider_id}}" hx-include="this" hx-swap="outerHTML" hx-target="this"
|
||
data-bs-toggle="tooltip" title="Add to my Jellyfin"
|
||
hx-vals='{"item_id": "{{ item.id }}", "item_name": "{{ item.name }}"}'>
|
||
<i class="fa-solid fa-circle-plus"> </i>
|
||
</button>
|
||
|
||
{% elif item.can_remove %}
|
||
<span id="item-can-remove-{{ item.id }}" >
|
||
<button class="btn btn-warning" hx-delete="{{ url_for('delete_playlist', playlist_id=item['jellyfin_id']) }}"
|
||
hx-include="this" hx-swap="outerHTML" hx-target="this" data-bs-toggle="tooltip" title="Remove from Jellyfin">
|
||
<i class="fa-solid fa-circle-minus"> </i>
|
||
</button>
|
||
{% endif %}
|
||
{% if session['is_admin'] and item.can_remove %}
|
||
<button class="btn btn-danger" id="confirm-delete-{{item['jellyfin_id']}}" data-bs-toggle="tooltip" title="Delete playlist from monitoring and remove (DELETE FOR ALL USERS) from Jellyfin">
|
||
<i class="fa-solid fa-trash"> </i>
|
||
</button>
|
||
|
||
<script>
|
||
document.getElementById("confirm-delete-{{item['jellyfin_id']}}").addEventListener('click', function() {
|
||
const button = this;
|
||
const icon = button.querySelector('i');
|
||
if (icon.classList.contains('fa-trash')) {
|
||
icon.classList.remove('fa-trash');
|
||
icon.classList.add('fa-check');
|
||
button.setAttribute('title', 'Click again to confirm deletion');
|
||
} else {
|
||
fetch("{{ url_for('wipe_playlist', playlist_id=item['jellyfin_id']) }}", {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'HX-Request': 'true'
|
||
}
|
||
}).then(response => {
|
||
if (response.ok) {
|
||
button.closest('#item-can-remove-{{ item.id }}').outerHTML = '';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</span>
|
||
{% endif%}
|
||
{% if session['is_admin'] and item.can_remove %}
|
||
<button class="btn btn-info" id="manage-users-{{item['jellyfin_id']}}" data-bs-toggle="tooltip" title="Manage Users">
|
||
<i class="fa-solid fa-user"> </i>
|
||
</button>
|
||
<div class="modal fade" id="manageUsersModal-{{item['jellyfin_id']}}" tabindex="-1" aria-labelledby="manageUsersModal-{{item['jellyfin_id']}}Label" aria-hidden="true" data-bs-modal-backdrop="false">
|
||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="manageUsersModal-{{item['jellyfin_id']}}Label">Manage Users</h5>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="assignedUsers-{{item['jellyfin_id']}}">
|
||
<!-- Assigned users will be dynamically loaded here -->
|
||
</div>
|
||
<div class="input-group mt-3">
|
||
<select class="form-select" id="availableUsers-{{item['jellyfin_id']}}">
|
||
<!-- Available users will be dynamically loaded here -->
|
||
</select>
|
||
<button class="btn btn-primary" id="addUserButton-{{item['jellyfin_id']}}">Add User to Playlist</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.getElementById("manage-users-{{item['jellyfin_id']}}").addEventListener('click', function() {
|
||
var modal = new bootstrap.Modal(document.getElementById("manageUsersModal-{{item['jellyfin_id']}}"));
|
||
modal.show();
|
||
loadUsers{{item['jellyfin_id']}}();
|
||
});
|
||
|
||
function loadUsers{{item['jellyfin_id']}}() {
|
||
fetch("/admin/getJellyfinPlaylistUsers?playlist={{item['jellyfin_id']}}")
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
console.log("jellyfin playlist id: {{item['jellyfin_id']}}");
|
||
const assignedUsersDiv = document.getElementById("assignedUsers-{{item['jellyfin_id']}}");
|
||
console.log(assignedUsersDiv);
|
||
assignedUsersDiv.innerHTML = '';
|
||
data.assigned_users.forEach(user => {
|
||
const badge = document.createElement('span');
|
||
badge.classList.add('badge', 'bg-primary', 'me-1', 'mb-1');
|
||
badge.innerHTML = `${user.Name} <button class="btn btn-danger btn-sm ms-1" onclick="removeUser{{item['jellyfin_id']}}('${user.UserId}')">×</button>`;
|
||
assignedUsersDiv.appendChild(badge);
|
||
});
|
||
|
||
const availableUsersSelect = document.getElementById("availableUsers-{{item['jellyfin_id']}}");
|
||
availableUsersSelect.innerHTML = '';
|
||
data.remaining_users.forEach(user => {
|
||
const option = document.createElement('option');
|
||
option.value = user.Id;
|
||
option.textContent = user.Name;
|
||
availableUsersSelect.appendChild(option);
|
||
});
|
||
});
|
||
}
|
||
|
||
function removeUser{{item['jellyfin_id']}}(userId) {
|
||
fetch(`/admin/removeJellyfinUserFromPlaylist?user=${userId}&playlist={{item['jellyfin_id']}}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
loadUsers{{item['jellyfin_id']}}();
|
||
}
|
||
});
|
||
}
|
||
|
||
document.getElementById("addUserButton-{{item['jellyfin_id']}}").addEventListener('click', function() {
|
||
const userId = document.getElementById("availableUsers-{{item['jellyfin_id']}}").value;
|
||
fetch(`/admin/addJellyfinUserToPlaylist?user=${userId}&playlist={{item['jellyfin_id']}}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
loadUsers{{item['jellyfin_id']}}();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{% endif %} |