feat: add admin functionality to dynamically load and manage users for playlist addition

templates/partials/_add_remove_button.html

@@ -1,9 +1,88 @@
 {% 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-modal-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>
+      </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 }}" >