124 lines
6.4 KiB
HTML
124 lines
6.4 KiB
HTML
{{ define "content" }}
|
|
{{ $filter := index .PageData "Filter" }}
|
|
<div class="max-w-6xl">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-3xl font-bold">{{ $filter.Name }}</h1>
|
|
<a href="/filters" class="text-blue-400 hover:text-blue-300">← Back to Filters</a>
|
|
</div>
|
|
|
|
<p class="text-gray-400 mb-6">{{ $filter.Description }}</p>
|
|
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-gray-700 mb-6 gap-0">
|
|
<button onclick="showTab('search')" id="tab-search" class="px-6 py-3 border-b-2 border-blue-600 font-bold text-white">Search</button>
|
|
<button onclick="showTab('blocklist')" id="tab-blocklist" class="px-6 py-3 border-b-2 border-transparent hover:border-gray-600 text-gray-400">Blocklist</button>
|
|
<button onclick="showTab('whitelist')" id="tab-whitelist" class="px-6 py-3 border-b-2 border-transparent hover:border-gray-600 text-gray-400">Whitelist</button>
|
|
</div>
|
|
|
|
<!-- Search Tab -->
|
|
<div id="tab-content-search" class="tab-content">
|
|
<div class="bg-gray-800 p-4 rounded mb-6">
|
|
<div class="flex gap-2 mb-4">
|
|
<input type="text" id="searchQuery" placeholder="Search domains (use * for wildcard)" onkeydown="if(event.key === 'Enter') filterSearch()" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
|
|
<button type="button" onclick="filterSearch()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Search</button>
|
|
</div>
|
|
</div>
|
|
<div id="searchResults"></div>
|
|
</div>
|
|
|
|
<!-- Blocklist Tab -->
|
|
<div id="tab-content-blocklist" class="tab-content hidden">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<!-- Add Domain -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">Add Domain</h3>
|
|
<form method="POST" action="/filter/blocklist?filter={{ $filter.Name }}" class="bg-gray-800 p-4 rounded space-y-4">
|
|
<input type="hidden" name="action" value="add_domain">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
<input type="text" name="domain" placeholder="Enter domain" class="w-full p-2 bg-gray-700 rounded text-white" required>
|
|
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Manage URLs -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">Import URLs</h3>
|
|
<a href="/filter/blocklist/urls?filter={{ $filter.Name }}" class="block bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded text-center transition">Manage URLs</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Whitelist Tab -->
|
|
<div id="tab-content-whitelist" class="tab-content hidden">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<!-- Add Domain -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">Add Domain</h3>
|
|
<form method="POST" action="/filter/whitelist?filter={{ $filter.Name }}" class="bg-gray-800 p-4 rounded space-y-4">
|
|
<input type="hidden" name="action" value="add_domain">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
<input type="text" name="domain" placeholder="Enter domain" class="w-full p-2 bg-gray-700 rounded text-white" required>
|
|
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Manage URLs -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">Import URLs</h3>
|
|
<a href="/filter/whitelist/urls?filter={{ $filter.Name }}" class="block bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded text-center transition">Manage URLs</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showTab(tabName) {
|
|
// Hide all tabs
|
|
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
|
|
document.querySelectorAll('#tab-search, #tab-blocklist, #tab-whitelist').forEach(btn => btn.classList.remove('border-blue-600', 'text-white'));
|
|
document.querySelectorAll('#tab-search, #tab-blocklist, #tab-whitelist').forEach(btn => btn.classList.add('border-transparent', 'text-gray-400'));
|
|
|
|
// Show selected tab
|
|
document.getElementById('tab-content-' + tabName).classList.remove('hidden');
|
|
document.getElementById('tab-' + tabName).classList.add('border-blue-600', 'text-white');
|
|
document.getElementById('tab-' + tabName).classList.remove('border-transparent', 'text-gray-400');
|
|
}
|
|
|
|
function filterSearch() {
|
|
const query = document.getElementById('searchQuery').value.trim();
|
|
if (!query) {
|
|
document.getElementById('searchResults').innerHTML = '<p class="text-gray-300">Please enter a search query.</p>';
|
|
return;
|
|
}
|
|
document.getElementById('searchResults').innerHTML = '<p class="text-gray-300">Searching...</p>';
|
|
|
|
fetch('/api/filter-search', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'X-CSRF-Token': '{{ .CSRFToken }}'
|
|
},
|
|
body: 'filter=' + encodeURIComponent('{{ $filter.Name }}') + '&query=' + encodeURIComponent(query)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let html = '';
|
|
if (data.results && data.results.length > 0) {
|
|
html = '<h3 class="text-xl font-bold mb-4">Results (' + data.results.length + ' found)</h3>';
|
|
html += '<ul class="space-y-2 max-h-96 overflow-y-auto">';
|
|
data.results.forEach(r => {
|
|
html += '<li class="bg-gray-800 p-3 rounded flex"><div class="flex-1 text-sm text-gray-300 break-all">' + r.domain + '</div><div class="w-24 text-sm text-blue-400 text-right select-none">' + r.source + '</div></li>';
|
|
});
|
|
html += '</ul>';
|
|
} else {
|
|
html = '<p class="text-gray-300">No results found for \'' + query + '\'</p>';
|
|
}
|
|
document.getElementById('searchResults').innerHTML = html;
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('searchResults').innerHTML = '<p class="text-red-400">Error searching.</p>';
|
|
});
|
|
}
|
|
</script>
|
|
{{ end }}
|