Michael Chus
ec3c16f3fc
- Create htmx-powered partial template for sync status display - Show Online/Offline indicator with color coding (green/red) - Display pending changes count badge when there are unsynced items - Add Sync button to push pending changes (appears only when needed) - Auto-refresh every 30 seconds via htmx polling - Replace JavaScript-based sync indicator with server-rendered partial - Integrate SyncStatusPartial handler with template rendering Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
{{define "sync_status"}}
|
|
<div class="flex items-center gap-2">
|
|
{{if .IsOffline}}
|
|
<span class="flex items-center gap-1 text-red-600" title="Offline">
|
|
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
|
|
<span class="text-xs">Offline</span>
|
|
</span>
|
|
{{else}}
|
|
<span class="flex items-center gap-1 text-green-600" title="Online">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
|
<span class="text-xs">Online</span>
|
|
</span>
|
|
{{end}}
|
|
|
|
{{if gt .PendingCount 0}}
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium">
|
|
{{.PendingCount}} pending
|
|
</span>
|
|
<button hx-post="/api/sync/push"
|
|
hx-swap="none"
|
|
hx-on::after-request="
|
|
if(event.detail.successful) {
|
|
const resp = JSON.parse(event.detail.xhr.response);
|
|
if(resp.success) {
|
|
showToast('Синхронизировано: ' + resp.synced + ' изменений', 'success');
|
|
} else {
|
|
showToast('Ошибка: ' + (resp.error || 'неизвестная ошибка'), 'error');
|
|
}
|
|
htmx.trigger('#sync-status', 'refresh');
|
|
}
|
|
"
|
|
class="text-blue-600 hover:text-blue-800 text-xs underline cursor-pointer">
|
|
Sync
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|