mirror of
https://github.com/ceratic/MediaCollectorLibary.git
synced 2026-05-13 23:56:46 +02:00
first commit
This commit is contained in:
Lars Behrends
241
resources/views/admin/index.twig
Normal file
241
resources/views/admin/index.twig
Normal file
@@ -0,0 +1,241 @@
|
||||
{% extends 'layouts/app.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="mb-4">
|
||||
<h1 class="display-4 fw-bold text-dark">Admin Dashboard</h1>
|
||||
<p class="lead text-muted">Manage your media sources and synchronization</p>
|
||||
</div>
|
||||
|
||||
<!-- Source Management -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h2 class="h5 mb-0">Source Management</h2>
|
||||
<p class="text-muted mb-0">Configure and sync your media sources</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for source in sources %}
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card border">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="card-title mb-0">{{ source.display_name }}</h6>
|
||||
{% if source.is_active %}
|
||||
<span class="badge bg-success">Active</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">Inactive</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<!-- Sync Buttons -->
|
||||
<div class="d-flex gap-2 mb-2">
|
||||
<button onclick="startSync({{ source.id }}, 'full')"
|
||||
class="btn btn-primary btn-sm flex-fill">
|
||||
Full Sync
|
||||
</button>
|
||||
<button onclick="startSync({{ source.id }}, 'incremental')"
|
||||
class="btn btn-secondary btn-sm flex-fill">
|
||||
Incremental
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Last Sync Status -->
|
||||
{% if source.last_sync_at %}
|
||||
<div class="small text-muted">
|
||||
Last sync: {{ source.last_sync_at|date('M j, Y H:i') }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="small text-muted">
|
||||
Never synced
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Sync Progress (hidden by default) -->
|
||||
<div id="sync-progress-{{ source.id }}" class="d-none mt-2">
|
||||
<div class="progress">
|
||||
<div id="sync-progress-bar-{{ source.id }}"
|
||||
class="progress-bar bg-primary"
|
||||
role="progressbar"
|
||||
style="width: 0%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sync-status-{{ source.id }}" class="small text-muted mt-1">
|
||||
Preparing sync...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Sync Activity -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="h5 mb-0">Recent Sync Activity</h2>
|
||||
<p class="text-muted mb-0">Latest synchronization logs and status</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Progress</th>
|
||||
<th>Started</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for sync in recent_syncs %}
|
||||
<tr>
|
||||
<td class="fw-medium">{{ sync.source_name }}</td>
|
||||
<td>{{ sync.sync_type|title }}</td>
|
||||
<td>
|
||||
{% if sync.status == 'completed' %}
|
||||
<span class="badge bg-success">Completed</span>
|
||||
{% elseif sync.status == 'failed' %}
|
||||
<span class="badge bg-danger">Failed</span>
|
||||
{% elseif sync.status == 'running' %}
|
||||
<span class="badge bg-warning text-dark">Running</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ sync.status|title }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if sync.total_items > 0 %}
|
||||
{{ sync.processed_items }} / {{ sync.total_items }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if sync.started_at %}
|
||||
{{ sync.started_at|date('M j, H:i') }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if sync.started_at and sync.completed_at %}
|
||||
{% set duration = sync.completed_at|date('U') - sync.started_at|date('U') %}
|
||||
{% if duration < 60 %}
|
||||
{{ duration }}s
|
||||
{% elseif duration < 3600 %}
|
||||
{{ (duration / 60)|round }}m
|
||||
{% else %}
|
||||
{{ (duration / 3600)|round }}h
|
||||
{% endif %}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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('d-none');
|
||||
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('d-none');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
statusDiv.textContent = 'Error: ' + error.message;
|
||||
progressDiv.classList.add('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
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('d-none');
|
||||
// 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 %}
|
||||
Reference in New Issue
Block a user