Improve folder access admin dashboard

assets/js/admin.js

@@ -1,83 +1,265 @@
 $(document).ready(function() {
-    // Auth check
+    var users = [];
+    var folders = [];
+    var assignedFolders = [];
+    var selectedUserId = "";
+
     $.get('/api/auth/me')
         .done(function(user) {
             if(user.role !== 'admin') {
                 alert('Kein Zugriff!');
                 window.location.href = '/';
-            } else {
-                loadUsers();
-                loadFolders();
-                $('body').removeClass('is-preload');
+                return;
             }
+            refreshDashboard();
+            $('body').removeClass('is-preload');
         })
         .fail(function() { window.location.href = '/'; });
 
-    // Logout
     $('#logout-btn').click(function(e) {
         e.preventDefault();
         $.post('/api/auth/logout').done(function() { window.location.href = '/'; });
     });
 
-    // ==================== NUTZER ====================
-
-    function loadUsers() {
-        $.get('/api/admin/users').done(function(users) {
-            $('#users-tbody').empty();
-            $('#user-select').html('<option value="">Nutzer waehlen...</option>');
-
-            if (!users || users.length === 0) {
-                $('#users-tbody').html('<tr><td colspan="5" style="text-align:center;">Keine Nutzer gefunden</td></tr>');
-                return;
+    function refreshDashboard() {
+        $.when(loadUsers(), loadFolders()).done(function() {
+            renderUsers();
+            renderUserSelect();
+            renderFolders();
+            if (selectedUserId) {
+                loadAssignments(selectedUserId);
             }
-
-            users.forEach(function(u) {
-                var role = u.role || 'unbekannt';
-                var badge = $('<span></span>').addClass('badge badge-' + role).text(role);
-                var created = u.created_at ? new Date(u.created_at).toLocaleDateString('de-DE') : '-';
-                var info = created;
-
-                if (role === 'client' && u.expires_at) {
-                    var expDate = new Date(u.expires_at).toLocaleDateString('de-DE');
-                    if (u.expired) {
-                        badge = $('<span></span>').addClass('badge badge-expired').text('abgelaufen');
-                        info = 'Abgelaufen: ' + expDate;
-                    } else {
-                        info = 'Bis: ' + expDate;
-                    }
-                }
-
-                var row = $('<tr></tr>');
-                var userCell = $('<td></td>').text(u.username + ' ').append(badge);
-                var actions = $('<td></td>');
-                $('<button type="button" class="btn-small user-password">PW</button>')
-                    .data('user-id', u.id)
-                    .data('username', u.username)
-                    .appendTo(actions);
-                $('<button type="button" class="btn-small user-delete">X</button>')
-                    .data('user-id', u.id)
-                    .data('username', u.username)
-                    .appendTo(actions);
-
-                row.append($('<td></td>').text(u.id));
-                row.append(userCell);
-                row.append($('<td></td>').text(role));
-                row.append($('<td></td>').text(info));
-                row.append(actions);
-                $('#users-tbody').append(row);
-
-                // Dropdown fuer Ordner-Zuweisung (nur non-admin)
-                if (role !== 'admin') {
-                    $('#user-select').append($('<option></option>').val(u.id).text(u.username + ' (' + role + ')'));
-                }
-            });
-        }).fail(function(xhr) {
-            var msg = 'HTTP ' + xhr.status + ': ' + xhr.statusText;
-            $('#users-tbody').html('<tr><td colspan="5" style="color:#e44d26;">Fehler beim Laden: ' + msg + '</td></tr>');
         });
     }
 
-    // Nutzer erstellen
+    function loadUsers() {
+        return $.get('/api/admin/users').done(function(data) {
+            users = data || [];
+        }).fail(function(xhr) {
+            $('#users-tbody').html(
+                '<tr><td colspan="6" style="color:#e44d26;">Fehler beim Laden: HTTP ' +
+                xhr.status + '</td></tr>'
+            );
+        });
+    }
+
+    function loadFolders() {
+        return $.get('/api/admin/folders').done(function(data) {
+            folders = data || [];
+        }).fail(function() {
+            $('#folders-overview').html('<p style="color:#e44d26;">Ordner konnten nicht geladen werden.</p>');
+        });
+    }
+
+    function getRoleBadge(role, expired) {
+        if (expired) return $('<span></span>').addClass('badge badge-expired').text('abgelaufen');
+        return $('<span></span>').addClass('badge badge-' + (role || 'client')).text(role || 'client');
+    }
+
+    function renderUsers() {
+        var $tbody = $('#users-tbody').empty();
+        if (!users.length) {
+            $tbody.html('<tr><td colspan="6" style="text-align:center;">Keine Nutzer gefunden</td></tr>');
+            return;
+        }
+
+        users.forEach(function(u) {
+            var role = u.role || 'client';
+            var created = u.created_at ? new Date(u.created_at).toLocaleDateString('de-DE') : '-';
+            var status = created;
+            if (role === 'client' && u.expires_at) {
+                status = (u.expired ? 'Abgelaufen: ' : 'Bis: ') +
+                    new Date(u.expires_at).toLocaleDateString('de-DE');
+            }
+
+            var $row = $('<tr></tr>');
+            var $userCell = $('<td></td>').text(u.username + ' ').append(getRoleBadge(role, u.expired));
+            var $foldersCell = $('<td></td>');
+            if (u.folders && u.folders.length) {
+                u.folders.forEach(function(folder) {
+                    $('<span></span>').addClass('badge folder-badge').text(folder).appendTo($foldersCell);
+                });
+            } else {
+                $foldersCell.append($('<span></span>').addClass('muted').text('Keine privaten Ordner'));
+            }
+
+            var $actions = $('<td></td>');
+            $('<button type="button" class="btn-small user-access">Zugriff</button>')
+                .data('user-id', u.id)
+                .appendTo($actions);
+            $('<button type="button" class="btn-small user-password">PW</button>')
+                .data('user-id', u.id)
+                .data('username', u.username)
+                .appendTo($actions);
+            $('<button type="button" class="btn-small btn-danger user-delete">Loeschen</button>')
+                .data('user-id', u.id)
+                .data('username', u.username)
+                .appendTo($actions);
+
+            $row.append($('<td></td>').text(u.id));
+            $row.append($userCell);
+            $row.append($('<td></td>').text(role));
+            $row.append($('<td></td>').text(status));
+            $row.append($foldersCell);
+            $row.append($actions);
+            $tbody.append($row);
+        });
+    }
+
+    function renderUserSelect() {
+        var $select = $('#user-select').html('<option value="">Nutzer waehlen...</option>');
+        users.forEach(function(u) {
+            if ((u.role || 'client') === 'admin') return;
+            $('<option></option>')
+                .val(u.id)
+                .text(u.username + ' (' + (u.role || 'client') + ')')
+                .appendTo($select);
+        });
+        if (selectedUserId) $select.val(selectedUserId);
+    }
+
+    function renderFolders() {
+        var $wrap = $('#folders-overview').empty();
+        if (!folders.length) {
+            $wrap.html('<p class="muted">Keine Unterordner im Bilderpfad gefunden.</p>');
+            return;
+        }
+
+        folders.forEach(function(folder) {
+            var $card = $('<div></div>').addClass('folder-card');
+            $('<h3></h3>').text(folder.name).appendTo($card);
+
+            var $meta = $('<div></div>').addClass('folder-meta').appendTo($card);
+            $('<span></span>').addClass('folder-pill').text((folder.image_count || 0) + ' Bilder').appendTo($meta);
+            $('<span></span>').addClass('folder-pill').text('privat').appendTo($meta);
+            $('<span></span>').addClass('folder-pill').text((folder.assigned_users || []).length + ' Freigaben').appendTo($meta);
+
+            var $assigned = $('<div></div>').appendTo($card);
+            if (folder.assigned_users && folder.assigned_users.length) {
+                folder.assigned_users.forEach(function(user) {
+                    $('<span></span>').addClass('badge folder-badge').text(user.username).appendTo($assigned);
+                });
+            } else {
+                $assigned.append($('<span></span>').addClass('muted').text('Noch niemandem freigegeben'));
+            }
+
+            var $actions = $('<div></div>').addClass('folder-actions').appendTo($card);
+            $('<button type="button" class="btn-small folder-preview-btn">Ansehen</button>')
+                .data('folder', folder.name)
+                .appendTo($actions);
+            $('<button type="button" class="btn-small folder-assign-btn">Freigaben</button>')
+                .data('folder', folder.name)
+                .appendTo($actions);
+
+            $wrap.append($card);
+        });
+    }
+
+    function renderAccessList() {
+        var $list = $('#folder-access-list').empty();
+        if (!folders.length) {
+            $list.html('<p class="muted">Keine Unterordner gefunden.</p>');
+            return;
+        }
+
+        folders.forEach(function(folder) {
+            var checked = assignedFolders.indexOf(folder.name) !== -1;
+            var $label = $('<label></label>').addClass('access-item');
+            $('<input type="checkbox" />')
+                .val(folder.name)
+                .prop('checked', checked)
+                .appendTo($label);
+            $('<span></span>').text(folder.name + ' (' + (folder.image_count || 0) + ')').appendTo($label);
+            $list.append($label);
+        });
+    }
+
+    function loadAssignments(userId) {
+        selectedUserId = String(userId || "");
+        if (!selectedUserId) {
+            $('#folder-table-wrap').hide();
+            assignedFolders = [];
+            return;
+        }
+
+        $('#user-select').val(selectedUserId);
+        $.get('/api/admin/assign?user_id=' + encodeURIComponent(selectedUserId)).done(function(data) {
+            assignedFolders = data || [];
+            renderAccessList();
+            $('#folder-table-wrap').show();
+        }).fail(function() {
+            assignedFolders = [];
+            renderAccessList();
+            $('#folder-table-wrap').show();
+        });
+    }
+
+    function saveAssignments() {
+        if (!selectedUserId) return;
+        assignedFolders = [];
+        $('#folder-access-list input:checked').each(function() {
+            assignedFolders.push($(this).val());
+        });
+        $.ajax({
+            url: '/api/admin/assign',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({ user_id: selectedUserId, folders: assignedFolders })
+        }).done(function() {
+            $('#assign-status').text('Gespeichert').show().delay(1200).fadeOut();
+            refreshDashboard();
+        }).fail(function(xhr) {
+            alert((xhr.responseJSON && xhr.responseJSON.error) || 'Speichern fehlgeschlagen');
+        });
+    }
+
+    $('#users-tbody').on('click', '.user-access', function() {
+        loadAssignments($(this).data('user-id'));
+        document.getElementById('user-select').scrollIntoView({ behavior: 'smooth', block: 'center' });
+    });
+
+    $('#user-select').change(function() {
+        loadAssignments($(this).val());
+    });
+
+    $('#folder-access-list').on('change', 'input[type="checkbox"]', saveAssignments);
+
+    $('#folders-overview').on('click', '.folder-assign-btn', function() {
+        var folder = $(this).data('folder');
+        if (!selectedUserId) {
+            alert('Bitte zuerst einen Nutzer in der Ordner-Zuweisung waehlen.');
+            return;
+        }
+        var $checkbox = $('#folder-access-list input').filter(function() {
+            return $(this).val() === folder;
+        });
+        if ($checkbox.length) {
+            $checkbox.prop('checked', !$checkbox.prop('checked')).trigger('change');
+        }
+    });
+
+    $('#folders-overview').on('click', '.folder-preview-btn', function() {
+        var folder = $(this).data('folder');
+        $('#folder-preview-title').text('Ordnerinhalt: ' + folder);
+        $('#folder-preview-note').text('Lade Bilder...');
+        $('#folder-preview').empty();
+        $.get('/api/admin/folders/' + encodeURIComponent(folder) + '/images').done(function(images) {
+            $('#folder-preview-note').text((images || []).length + ' Bilder im Ordner');
+            var $preview = $('#folder-preview').empty();
+            if (!images || !images.length) {
+                $preview.html('<p class="muted">Dieser Ordner ist leer.</p>');
+                return;
+            }
+            images.forEach(function(img) {
+                var $link = $('<a></a>').attr({ href: img.full_url, target: '_blank', rel: 'noopener' });
+                $('<img />').attr({ src: img.thumb_url, alt: img.name, title: img.name }).appendTo($link);
+                $preview.append($link);
+            });
+        }).fail(function(xhr) {
+            $('#folder-preview-note').text((xhr.responseJSON && xhr.responseJSON.error) || 'Ordner konnte nicht geladen werden.');
+        });
+    });
+
     $('#create-user-form').submit(function(e) {
         e.preventDefault();
         var username = $('#new-username').val().trim();
@@ -92,34 +274,27 @@ $(document).ready(function() {
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({ username: username, password: password, role: role })
-        }).done(function(data) {
-            alert('Nutzer "' + username + '" erfolgreich erstellt!');
-            $('#new-username').val('');
-            $('#new-password').val('');
-            loadUsers();
+        }).done(function() {
+            $('#new-username, #new-password').val('');
+            refreshDashboard();
         }).fail(function(xhr) {
-            var msg = 'Unbekannter Fehler';
-            if (xhr.responseJSON && xhr.responseJSON.error) msg = xhr.responseJSON.error;
-            else if (xhr.status) msg = 'HTTP ' + xhr.status + ': ' + xhr.statusText;
+            var msg = (xhr.responseJSON && xhr.responseJSON.error) || 'Unbekannter Fehler';
             alert('Fehler beim Erstellen: ' + msg);
         });
     });
 
-    // Nutzer loeschen
-    function deleteUser(id, name) {
-        if (confirm('Nutzer "' + name + '" wirklich loeschen?')) {
-            $.ajax({ url: '/api/admin/users/' + id, type: 'DELETE' })
-             .done(loadUsers)
-             .fail(function(err) { alert(err.responseJSON ? err.responseJSON.error : 'Fehler'); });
-        }
-    }
-
     $('#users-tbody').on('click', '.user-delete', function() {
-        deleteUser($(this).data('user-id'), $(this).data('username'));
+        var id = $(this).data('user-id');
+        var name = $(this).data('username');
+        if (!confirm('Nutzer "' + name + '" wirklich loeschen?')) return;
+        $.ajax({ url: '/api/admin/users/' + id, type: 'DELETE' })
+            .done(refreshDashboard)
+            .fail(function(err) { alert(err.responseJSON ? err.responseJSON.error : 'Fehler'); });
     });
 
-    // Passwort aendern (Admin setzt fuer anderen User)
-    function changePassword(id, name) {
+    $('#users-tbody').on('click', '.user-password', function() {
+        var id = $(this).data('user-id');
+        var name = $(this).data('username');
         var newPw = prompt('Neues Passwort fuer "' + name + '":');
         if (!newPw) return;
         $.ajax({
@@ -128,142 +303,38 @@ $(document).ready(function() {
             contentType: 'application/json',
             data: JSON.stringify({ new_password: newPw })
         }).done(function() {
-            alert('Passwort geaendert!');
+            alert('Passwort geaendert.');
         }).fail(function(err) {
             alert(err.responseJSON ? err.responseJSON.error : 'Fehler');
         });
-    }
-
-    $('#users-tbody').on('click', '.user-password', function() {
-        changePassword($(this).data('user-id'), $(this).data('username'));
     });
 
-    // ==================== ORDNER-ZUWEISUNG ====================
-
-    var allFolders = [];
-    var assignedFolders = [];
-
-    function loadFolders() {
-        $.get('/api/admin/folders').done(function(folders) {
-            allFolders = folders || [];
-            renderFolderTable();
-        });
-    }
-
-    function renderFolderTable() {
-        var $tbody = $('#folder-tbody');
-        $tbody.empty();
-        if (allFolders.length === 0) {
-            $tbody.html('<tr><td colspan="2" style="text-align:center;">Keine Unterordner gefunden. Erstelle Ordner in Nextcloud.</td></tr>');
-            return;
-        }
-        allFolders.forEach(function(f) {
-            var isAssigned = assignedFolders.indexOf(f) !== -1;
-            var cls = isAssigned ? 'folder-row assigned' : 'folder-row';
-            var statusCls = isAssigned ? 'folder-status yes' : 'folder-status no';
-            var statusText = isAssigned ? 'Zugewiesen' : '—';
-            $tbody.append(
-                '<tr class="' + cls + '" data-folder="' + f + '">' +
-                '<td><i class="fa fa-folder"></i> ' + f + '</td>' +
-                '<td style="text-align:center;"><span class="' + statusCls + '">' + statusText + '</span></td>' +
-                '</tr>'
-            );
-        });
-    }
-
-    // Bei User-Auswahl: zugewiesene Ordner laden und Tabelle anzeigen
-    $('#user-select').change(function() {
-        var uid = $(this).val();
-        if (!uid) {
-            $('#folder-table-wrap').hide();
-            assignedFolders = [];
-            return;
-        }
-        // Ordner neu laden falls noch leer, dann Zuweisung anzeigen
-        var showTable = function() {
-            $.get('/api/admin/assign?user_id=' + uid).done(function(folders) {
-                assignedFolders = folders || [];
-                renderFolderTable();
-                $('#folder-table-wrap').show();
-            }).fail(function() {
-                assignedFolders = [];
-                renderFolderTable();
-                $('#folder-table-wrap').show();
-            });
-        };
-        if (allFolders.length === 0) {
-            $.get('/api/admin/folders').done(function(folders) {
-                allFolders = folders || [];
-                showTable();
-            }).fail(function() {
-                allFolders = [];
-                showTable();
-            });
-        } else {
-            showTable();
-        }
-    });
-
-    // Klick auf Ordner-Zeile: Toggle + sofort speichern
-    $(document).on('click', '.folder-row', function() {
-        var uid = $('#user-select').val();
-        if (!uid) return;
-        var folder = $(this).data('folder');
-        var idx = assignedFolders.indexOf(folder);
-        if (idx !== -1) {
-            assignedFolders.splice(idx, 1);
-        } else {
-            assignedFolders.push(folder);
-        }
-        renderFolderTable();
-        $.ajax({
-            url: '/api/admin/assign',
-            type: 'POST',
-            contentType: 'application/json',
-            data: JSON.stringify({ user_id: uid, folders: assignedFolders })
-        }).done(function() {
-            $('#assign-status').text('Gespeichert!').show().delay(1500).fadeOut();
-        }).fail(function() {
-            alert('Fehler beim Speichern');
-        });
-    });
-
-    // ==================== WEBSITE SYNC ====================
-
     $('#sync-site').click(function() {
-        if (!confirm('Neueste Version laden und Website neu starten?')) return;
-
-        var $button = $(this);
-        var $status = $('#sync-status');
-        $button.prop('disabled', true);
-        $status.text('Sync laeuft...');
-
+        $('#sync-status').text('Sync laeuft...');
+        $('#sync-site').prop('disabled', true);
         $.post('/api/admin/sync')
-            .done(function(res) {
-                $status.text(res.message || 'Sync gestartet. Website startet neu...');
-                window.setTimeout(function() {
-                    window.location.reload();
-                }, 12000);
+            .done(function(resp) {
+                $('#sync-status').text(resp.message || 'Sync gestartet.');
             })
-            .fail(function(err) {
-                var msg = err.responseJSON ? err.responseJSON.error : 'Sync fehlgeschlagen';
-                $status.text(msg);
-                $button.prop('disabled', false);
+            .fail(function(xhr) {
+                var msg = (xhr.responseJSON && (xhr.responseJSON.error || xhr.responseJSON.details)) || 'Sync fehlgeschlagen';
+                $('#sync-status').text(msg);
+            })
+            .always(function() {
+                $('#sync-site').prop('disabled', false);
             });
     });
 
-    // ==================== EIGENES PASSWORT ====================
-
     $('#admin-pw-form').submit(function(e) {
         e.preventDefault();
         $.post('/api/auth/change-password', {
             old_password: $('#admin-pw-old').val(),
             new_password: $('#admin-pw-new').val()
         }).done(function() {
-            alert('Passwort geaendert!');
+            alert('Passwort geaendert.');
             $('#admin-pw-old, #admin-pw-new').val('');
-        }).fail(function(err) {
-            alert(err.responseJSON ? err.responseJSON.error : 'Fehler');
+        }).fail(function(xhr) {
+            alert(xhr.responseJSON ? xhr.responseJSON.error : 'Fehler');
         });
     });
 });

assets/js/main.js

@@ -153,10 +153,17 @@
 		exifDatas = {};
 
 	var imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+	var currentFolder = null;
 
-	function loadGallery() {
+	function loadGallery(folderName) {
+		currentFolder = folderName || null;
+		$main.empty();
+		var galleryUrl = '/images/fulls/';
+		if (currentFolder) {
+			galleryUrl += '?folder=' + encodeURIComponent(currentFolder);
+		}
 		$.ajax({
-			url: '/images/fulls/',
+			url: galleryUrl,
 			dataType: 'json',
 			cache: false,
 			success: function(files) {
@@ -296,6 +303,10 @@
 	// ==================== SELECTION MODE ====================
 
 	function initSelectionMode(allImages) {
+		$('#selection-toolbar').remove();
+		$('#select-mode-toggle').closest('li').remove();
+		$('.folder-download-btn').closest('li').remove();
+
 		var selectedImages = [];
 		var selectionActive = false;
 
@@ -481,6 +492,32 @@
 		});
 	}
 
+	function loadAvailableFolders() {
+		$.get('/api/folders/available').done(function(folders) {
+			renderFolderPicker(folders || []);
+		});
+	}
+
+	function renderFolderPicker(folders) {
+		$('#folder-picker-wrap').remove();
+		if (!folders.length) return;
+
+		var $item = $('<li id="folder-picker-wrap"></li>');
+		var $select = $('<select id="folder-picker" title="Galerie-Ordner waehlen"></select>');
+		$select.append($('<option></option>').val('').text('Oeffentliche Galerie'));
+		folders.forEach(function(folder) {
+			var label = folder.name + ' (' + (folder.image_count || 0) + ')';
+			$select.append($('<option></option>').val(folder.name).text(label));
+		});
+		$item.append($select);
+		$('#header nav > ul').prepend($item);
+
+		$select.on('change', function(e) {
+			e.preventDefault();
+			loadGallery($(this).val() || null);
+		});
+	}
+
 	// Galerie laden
 	loadGallery();
 
@@ -509,6 +546,7 @@
 		$('#login-username, #login-password, #login-submit').hide();
 		$('#logout-btn').show().css('display', 'inline-block');
 		$('#pw-change-section').show();
+		loadAvailableFolders();
 		if(u.role === 'admin') {
 		    $('#admin-link').html('<a href="/admin.html" class="button">Admin-Dashboard</a>');
 		}