203 lines
8.0 KiB
HTML
203 lines
8.0 KiB
HTML
{% if item.can_add %}
|
||
|
||
|
||
{% if session['is_admin'] %}
|
||
<button class="btn btn-primary" id="add-playlist-admin-{{item['id']}}" data-bs-toggle="tooltip" title="Add Playlist for Users">
|
||
<i class="fa-solid fa-users"> </i>
|
||
</button>
|
||
|
||
<div class="modal fade" id="addPlaylistModal-{{item['id']}}" tabindex="-1" aria-labelledby="addPlaylistModal-{{item['id']}}Label" aria-hidden="true" data-bs-backdrop="false" >
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="addPlaylistModal-{{item['id']}}Label">Select Additional Users</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="allUsers-{{item['id']}}">
|
||
<!-- All users will be dynamically loaded here with checkboxes -->
|
||
</div>
|
||
<div class="d-flex justify-content-between mt-3">
|
||
<button class="btn btn-secondary" id="selectAllUsers-{{item['id']}}">Select All</button>
|
||
<button class="btn btn-success" id="addPlaylistButton-{{item['id']}}">Add Playlist</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById("add-playlist-admin-{{item['id']}}").addEventListener('click', function() {
|
||
var modal = new bootstrap.Modal(document.getElementById("addPlaylistModal-{{item['id']}}"));
|
||
modal.show();
|
||
loadAllUsers{{item['id']}}();
|
||
});
|
||
|
||
function loadAllUsers{{item['id']}}() {
|
||
fetch("/admin/getJellyfinUsers")
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const allUsersDiv = document.getElementById("allUsers-{{item['id']}}");
|
||
allUsersDiv.innerHTML = '';
|
||
data.users.forEach(user => {
|
||
const checkbox = document.createElement('div');
|
||
checkbox.classList.add('form-check');
|
||
checkbox.innerHTML = `<input class="form-check-input" type="checkbox" value="${user.Id}" id="user-${user.Id}">
|
||
<label class="form-check-label" for="user-${user.Id}">${user.Name}</label>`;
|
||
allUsersDiv.appendChild(checkbox);
|
||
});
|
||
});
|
||
}
|
||
|
||
document.getElementById("selectAllUsers-{{item['id']}}").addEventListener('click', function() {
|
||
document.querySelectorAll("#allUsers-{{item['id']}} .form-check-input").forEach(checkbox => {
|
||
checkbox.checked = true;
|
||
});
|
||
});
|
||
|
||
document.getElementById("addPlaylistButton-{{item['id']}}").addEventListener('click', function() {
|
||
const selectedUsers = Array.from(document.querySelectorAll("#allUsers-{{item['id']}} .form-check-input:checked")).map(checkbox => checkbox.value);
|
||
const hxVals = {
|
||
item_id: "{{ item.id }}",
|
||
item_name: "{{ item.name }}",
|
||
additional_users: selectedUsers
|
||
};
|
||
fetch("/addplaylist?provider={{provider_id}}", {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'HX-Request': 'true'
|
||
},
|
||
body: JSON.stringify(hxVals)
|
||
}).then(response => {
|
||
if (response.ok) {
|
||
location.reload();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{%else%}
|
||
<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>
|
||
{% endif %}
|
||
|
||
|
||
{% 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 %} |