mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-04 14:25:08 +00:00
ChuckandClaude Opus 5.5
a7b3f33952
Rotation, Operation History, Config Editor and Backup & Restore become ES-module pages (stage 2): no inline scripts or onclick in the four partials, delegated data-action listeners, reads cancelled on swap-out, old globals kept as deprecated aliases through window.LEDMatrix, and four new DOM suites. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
96 lines
5.0 KiB
HTML
96 lines
5.0 KiB
HTML
{# No inline script: static/v3/js/pages/operation-history.js runs this page.
|
|
The page registry (static/v3/js/core/registry.js) starts it when this root
|
|
appears and stops it when the partial is swapped away. #}
|
|
<div class="bg-white rounded-lg shadow p-6" data-page="operation-history">
|
|
<div class="border-b border-gray-200 pb-4 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900">Operation History</h2>
|
|
<p class="mt-1 text-sm text-gray-600">View history of plugin operations and configuration changes for debugging and auditing.</p>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
|
<div class="flex items-center space-x-4">
|
|
<!-- Filter by Plugin -->
|
|
<select id="history-plugin-filter" class="form-control text-sm" aria-label="Filter by plugin">
|
|
<option value="">All Plugins</option>
|
|
</select>
|
|
|
|
<!-- Filter by Operation Type -->
|
|
<select id="history-type-filter" class="form-control text-sm" aria-label="Filter by operation type">
|
|
<option value="">All Operations</option>
|
|
<option value="install">Install</option>
|
|
<option value="update">Update</option>
|
|
<option value="uninstall">Uninstall</option>
|
|
<option value="enable">Enable</option>
|
|
<option value="disable">Disable</option>
|
|
<option value="configure">Configure</option>
|
|
</select>
|
|
|
|
<!-- Filter by Status -->
|
|
<select id="history-status-filter" class="form-control text-sm" aria-label="Filter by status">
|
|
<option value="">All Statuses</option>
|
|
<option value="success">Success</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
|
|
<!-- Search -->
|
|
<div class="relative">
|
|
<input type="text" id="history-search" placeholder="Search operations..." aria-label="Search operations" class="form-control text-sm pl-8 pr-4 py-1 w-48">
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<!-- Refresh -->
|
|
<button type="button" id="refresh-history-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
|
|
<i class="fas fa-sync-alt mr-1"></i>Refresh
|
|
</button>
|
|
|
|
<!-- Clear History -->
|
|
<button type="button" id="clear-history-btn" class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
|
|
<i class="fas fa-trash mr-1"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Table -->
|
|
<div class="overflow-x-auto">
|
|
<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">Timestamp</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plugin</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">User</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-4 text-center text-gray-500">
|
|
<div class="animate-pulse">
|
|
<div class="h-4 bg-gray-200 rounded w-1/4 mx-auto"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div class="text-sm text-gray-700">
|
|
Showing <span id="history-start">0</span> to <span id="history-end">0</span> of <span id="history-total">0</span> operations
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button type="button" id="history-prev-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
|
|
<i class="fas fa-chevron-left mr-1"></i>Previous
|
|
</button>
|
|
<button type="button" id="history-next-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
|
|
Next<i class="fas fa-chevron-right ml-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|