95 lines
4.1 KiB
HTML
95 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lesezeichen bearbeiten</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
|
|
<div class="max-w-4xl mx-auto p-6">
|
|
<!-- Header -->
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl font-bold">Lesezeichen bearbeiten</h1>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
Bearbeiten Sie die Lesezeichen dieses Benutzers. Fügen Sie neue Einträge hinzu oder entfernen Sie bestehende.
|
|
</p>
|
|
</header>
|
|
<!-- Formular -->
|
|
<form id="editBookmarksForm" method="POST" action="{{ url_for('edit_bookmarks', user_id=user_id) }}">
|
|
<!-- Dynamische Bookmark-Liste -->
|
|
<div id="bookmarksContainer" class="mb-6 space-y-4">
|
|
{% for bookmark in bookmarks %}
|
|
<div class="flex items-center space-x-3">
|
|
<input type="url" name="bookmarks_list" value="{{ bookmark }}" class="flex-1 p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
|
|
<button type="button" class="deleteBookmark bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600 focus:outline-none">
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<!-- Neuen Bookmark hinzufügen -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center space-x-3">
|
|
<input type="url" id="newBookmarkInput" placeholder="https://example.com" class="flex-1 p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
|
|
<button type="button" id="addBookmarkBtn" class="bg-indigo-600 text-white px-3 py-2 rounded hover:bg-indigo-700 focus:outline-none">
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Aktionen -->
|
|
<div class="flex space-x-4">
|
|
<button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors focus:outline-none">
|
|
Speichern
|
|
</button>
|
|
<a href="{{ url_for('admin') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition-colors">
|
|
Zurück
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const addBookmarkBtn = document.getElementById('addBookmarkBtn');
|
|
const newBookmarkInput = document.getElementById('newBookmarkInput');
|
|
const bookmarksContainer = document.getElementById('bookmarksContainer');
|
|
|
|
addBookmarkBtn.addEventListener('click', () => {
|
|
const url = newBookmarkInput.value.trim();
|
|
if(url === '') return;
|
|
// Optional: URL-Validierung
|
|
if(!/^https?:\/\//i.test(url)){
|
|
alert('Bitte geben Sie eine vollständige URL mit http:// oder https:// ein.');
|
|
return;
|
|
}
|
|
// Neues Element erstellen
|
|
const div = document.createElement('div');
|
|
div.className = 'flex items-center space-x-3';
|
|
const input = document.createElement('input');
|
|
input.type = 'url';
|
|
input.name = 'bookmarks_list';
|
|
input.value = url;
|
|
input.className = 'flex-1 p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100';
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'deleteBookmark bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600 focus:outline-none';
|
|
btn.textContent = 'Löschen';
|
|
btn.addEventListener('click', () => {
|
|
div.remove();
|
|
});
|
|
div.appendChild(input);
|
|
div.appendChild(btn);
|
|
bookmarksContainer.appendChild(div);
|
|
newBookmarkInput.value = '';
|
|
});
|
|
|
|
// Vorhandene Löschen-Buttons initialisieren
|
|
document.querySelectorAll('.deleteBookmark').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
btn.parentElement.remove();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|