Ceratic/MediaCollectorLibary
1
0
Fork 0
mirror of https://github.com/ceratic/MediaCollectorLibary.git synced 2026-05-13 23:56:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
Lars Behrends
2025-10-18 22:03:30 +02:00
parent f4c1cfc164
commit ca2d3a6960
45 changed files with 4827 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
public/resources/views/admin/index.twig Normal file
View File

@@ -0,0 +1,248 @@
{% extends 'layouts/app.twig' %}
{% block content %}
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
<p class="mt-2 text-sm text-gray-600">Manage your media sources and synchronization</p>
</div>
<!-- Source Management -->
<div class="bg-white shadow rounded-lg mb-8">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Source Management</h2>
<p class="mt-1 text-sm text-gray-600">Configure and sync your media sources</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{% for source in sources %}
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-medium text-gray-900">{{ source.display_name }}</h3>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if source.is_active %}
bg-green-100 text-green-800
{% else %}
bg-red-100 text-red-800
{% endif %}">
{% if source.is_active %}Active{% else %}Inactive{% endif %}
</span>
</div>
<div class="space-y-3">
<!-- Sync Buttons -->
<div class="flex space-x-2">
<button onclick="startSync({{ source.id }}, 'full')"
class="flex-1 bg-indigo-600 text-white px-3 py-1 rounded text-xs hover:bg-indigo-700 transition-colors">
Full Sync
</button>
<button onclick="startSync({{ source.id }}, 'incremental')"
class="flex-1 bg-gray-600 text-white px-3 py-1 rounded text-xs hover:bg-gray-700 transition-colors">
Incremental
</button>
</div>
<!-- Last Sync Status -->
{% if source.last_sync_at %}
<div class="text-xs text-gray-500">
Last sync: {{ source.last_sync_at|date('M j, Y H:i') }}
</div>
{% else %}
<div class="text-xs text-gray-400">
Never synced
</div>
{% endif %}
<!-- Sync Progress (hidden by default) -->
<div id="sync-progress-{{ source.id }}" class="hidden">
<div class="w-full bg-gray-200 rounded-full h-2">
<div id="sync-progress-bar-{{ source.id }}"
class="bg-indigo-600 h-2 rounded-full transition-all duration-300"
style="width: 0%"></div>
</div>
<div id="sync-status-{{ source.id }}" class="text-xs text-gray-600 mt-1">
Preparing sync...
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Recent Sync Activity -->
<div class="bg-white shadow rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Recent Sync Activity</h2>
<p class="mt-1 text-sm text-gray-600">Latest synchronization logs and status</p>
</div>
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Source
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Type
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Progress
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Started
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Duration
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for sync in recent_syncs %}
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{{ sync.source_name }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ sync.sync_type|title }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if sync.status == 'completed' %}
bg-green-100 text-green-800
{% elseif sync.status == 'failed' %}
bg-red-100 text-red-800
{% elseif sync.status == 'running' %}
bg-yellow-100 text-yellow-800
{% else %}
bg-gray-100 text-gray-800
{% endif %}">
{{ sync.status|title }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{% if sync.total_items > 0 %}
{{ sync.processed_items }} / {{ sync.total_items }}
{% else %}
-
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{% if sync.started_at %}
{{ sync.started_at|date('M j, H:i') }}
{% else %}
-
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{% if sync.started_at and sync.completed_at %}
{{ sync.started_at|date('U') - sync.completed_at|date('U') }}s
{% else %}
-
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
let syncIntervals = {};
function startSync(sourceId, syncType) {
// Show progress indicator
const progressDiv = document.getElementById(`sync-progress-${sourceId}`);
const progressBar = document.getElementById(`sync-progress-bar-${sourceId}`);
const statusDiv = document.getElementById(`sync-status-${sourceId}`);
progressDiv.classList.remove('hidden');
progressBar.style.width = '0%';
statusDiv.textContent = 'Starting sync...';
// Start sync via API
fetch(`/admin/sync/${sourceId}?type=${syncType}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Start monitoring sync status
monitorSyncStatus(data.sync_log_id, sourceId, progressBar, statusDiv);
} else {
statusDiv.textContent = 'Error: ' + (data.message || 'Unknown error');
progressDiv.classList.add('hidden');
}
})
.catch(error => {
statusDiv.textContent = 'Error: ' + error.message;
progressDiv.classList.add('hidden');
});
}
function monitorSyncStatus(syncLogId, sourceId, progressBar, statusDiv) {
const interval = setInterval(() => {
fetch(`/admin/sync/status/${syncLogId}`)
.then(response => response.json())
.then(data => {
// Update progress
if (data.total_items > 0) {
const progress = (data.processed_items / data.total_items) * 100;
progressBar.style.width = progress + '%';
}
// Update status
statusDiv.textContent = getStatusMessage(data);
// Stop monitoring if sync is complete or failed
if (['completed', 'failed'].includes(data.status)) {
clearInterval(interval);
delete syncIntervals[sourceId];
if (data.status === 'completed') {
setTimeout(() => {
document.getElementById(`sync-progress-${sourceId}`).classList.add('hidden');
// Refresh page to show updated sync log
location.reload();
}, 2000);
}
}
})
.catch(error => {
console.error('Error monitoring sync:', error);
clearInterval(interval);
delete syncIntervals[sourceId];
});
}, 1000);
syncIntervals[sourceId] = interval;
}
function getStatusMessage(data) {
if (data.status === 'completed') {
return `Completed: ${data.new_items} new, ${data.updated_items} updated`;
} else if (data.status === 'failed') {
return 'Failed: ' + (data.errors.join(', ') || 'Unknown error');
} else if (data.status === 'running') {
return `Processing: ${data.processed_items}/${data.total_items} items`;
} else {
return data.message || 'Unknown status';
}
}
// Cleanup intervals on page unload
window.addEventListener('beforeunload', () => {
Object.values(syncIntervals).forEach(interval => clearInterval(interval));
});
</script>
{% endblock %}