Files
decypharr/pkg/web/templates/repair.html
Mukhtar Akere afe577bf2f - Fix repair bugs
- Minor html/js bugs from new template
- Other minor issues
2025-07-13 06:30:02 +01:00

334 lines
16 KiB
HTML

{{ define "repair" }}
<div class="space-y-6">
<!-- Repair Form -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-6">
<i class="bi bi-plus-circle mr-2 text-primary"></i>Start New Repair
</h2>
<form id="repairForm" class="space-y-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Left Column -->
<div class="space-y-4">
<div class="form-control">
<label class="label" for="arrSelect">
<span class="label-text font-semibold">
<i class="bi bi-collection mr-2 text-secondary"></i>Arr Instance
</span>
</label>
<select class="select select-bordered" id="arrSelect">
<option value="">Select an Arr instance</option>
</select>
<div class="label">
<span class="label-text-alt">Choose which Arr service to repair</span>
</div>
</div>
<div class="form-control">
<label class="label" for="mediaIds">
<span class="label-text font-semibold">
<i class="bi bi-hash mr-2 text-accent"></i>Media IDs
</span>
<span class="label-text-alt">Optional</span>
</label>
<input type="text"
class="input input-bordered"
id="mediaIds"
placeholder="123, 456, 789">
<div class="label">
<span class="label-text-alt">
Enter specific TV DB IDs (Sonarr) or TM DB IDs (Radarr), comma-separated. Leave empty for all media.
</span>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-4">
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">
<i class="bi bi-sliders mr-2 text-info"></i>Repair Options
</span>
</label>
<div class="space-y-3">
<div class="form-control">
<label class="label cursor-pointer justify-start gap-3">
<input type="checkbox" class="checkbox checkbox-lg" id="isAsync" checked>
<div>
<span class="label-text font-medium">Run in Background</span>
<div class="label-text-alt">Process repair job asynchronously</div>
</div>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer justify-start gap-3">
<input type="checkbox" class="checkbox checkbox-lg" id="autoProcess">
<div>
<span class="label-text font-medium">Auto Process</span>
<div class="label-text-alt text-warning">
<i class="bi bi-exclamation-triangle mr-1"></i>
Automatically delete broken symlinks and re-search media
</div>
</div>
</label>
</div>
</div>
</div>
<div class="form-control">
<button type="submit" class="btn btn-primary btn-lg" id="submitRepair">
<i class="bi bi-wrench mr-2"></i>Start Repair
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Jobs Table -->
<div class="card bg-base-100 shadow-xl">
<div class="card-header">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-6 border-b border-base-200">
<h2 class="card-title text-xl">
<i class="bi bi-list-task mr-2"></i>Repair Jobs
</h2>
<div class="flex flex-wrap gap-2">
<button id="deleteSelectedJobs" class="btn btn-error btn-sm" disabled>
<i class="bi bi-trash mr-1"></i>Delete Selected
</button>
<button id="refreshJobs" class="btn btn-outline btn-sm">
<i class="bi bi-arrow-clockwise mr-1"></i>Refresh
</button>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="overflow-x-auto">
<table class="table table-hover" id="jobsTable">
<thead class="bg-base-200">
<tr>
<th class="w-12">
<label class="cursor-pointer">
<input type="checkbox" class="checkbox checkbox-sm" id="selectAllJobs">
</label>
</th>
<th class="font-semibold">
<i class="bi bi-hash mr-2"></i>Job ID
</th>
<th class="font-semibold">
<i class="bi bi-collection mr-2"></i>Arr Instances
</th>
<th class="font-semibold">
<i class="bi bi-calendar mr-2"></i>Started
</th>
<th class="font-semibold">
<i class="bi bi-activity mr-2"></i>Status
</th>
<th class="font-semibold">
<i class="bi bi-exclamation-triangle mr-2"></i>Broken Items
</th>
<th class="font-semibold w-32">Actions</th>
</tr>
</thead>
<tbody id="jobsTableBody">
<!-- Dynamic content will be loaded here -->
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex justify-center p-6 border-t border-base-200">
<div class="join" id="jobsPagination">
<!-- Pagination will be generated here -->
</div>
</div>
<!-- No Jobs Message -->
<div id="noJobsMessage" class="text-center py-16 hidden">
<div class="text-6xl text-base-content/30 mb-4">
<i class="bi bi-clipboard-check"></i>
</div>
<h3 class="text-2xl font-bold mb-2">No Repair Jobs</h3>
<p class="text-base-content/70 mb-6">You haven't run any repair jobs yet. Start your first repair above!</p>
</div>
</div>
</div>
</div>
<!-- Job Details Modal -->
<dialog id="jobDetailsModal" class="modal">
<div class="modal-box max-w-6xl max-h-[90vh]">
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
</form>
<div class="flex justify-between items-start mb-6">
<h3 class="font-bold text-2xl">
<i class="bi bi-info-circle mr-2 text-primary"></i>Job Details
</h3>
</div>
<div class="space-y-6">
<!-- Job Information -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="card bg-base-200">
<div class="card-body">
<h4 class="card-title text-lg mb-4">Job Information</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span class="font-medium">Job ID:</span>
<span class="font-mono" id="modalJobId">-</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Status:</span>
<span id="modalJobStatus">-</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Started:</span>
<span id="modalJobStarted">-</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Completed:</span>
<span id="modalJobCompleted">-</span>
</div>
</div>
</div>
</div>
<div class="card bg-base-200">
<div class="card-body">
<h4 class="card-title text-lg mb-4">Configuration</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span class="font-medium">Arr Services:</span>
<span id="modalJobArrs">-</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Media IDs:</span>
<span id="modalJobMediaIds">-</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Auto Process:</span>
<span id="modalJobAutoProcess">-</span>
</div>
</div>
</div>
</div>
</div>
<!-- Error Message -->
<div id="errorContainer" class="alert alert-error hidden">
<i class="bi bi-exclamation-triangle"></i>
<div>
<strong>Error:</strong>
<span id="modalJobError">-</span>
</div>
</div>
<!-- Broken Items Section -->
<div class="card bg-base-200">
<div class="card-body">
<div class="flex justify-between items-center mb-4">
<h4 class="card-title text-lg">
Broken Items
<div class="badge badge-secondary" id="totalItemsCount">0</div>
</h4>
</div>
<!-- Filters -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
<div class="form-control">
<input type="text"
class="input input-bordered input-sm"
id="itemSearchInput"
placeholder="Search by path...">
</div>
<div class="form-control">
<select class="select select-bordered select-sm" id="arrFilterSelect">
<option value="">All Arrs</option>
</select>
</div>
<div class="form-control">
<select class="select select-bordered select-sm" id="pathFilterSelect">
<option value="">All Types</option>
<option value="movie">Movies</option>
<option value="tv">TV Shows</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<button class="btn btn-outline btn-sm w-full" id="clearFiltersBtn">
<i class="bi bi-x-circle mr-1"></i>Clear
</button>
</div>
</div>
<!-- Items Table -->
<div class="overflow-x-auto max-h-96 border border-base-300 rounded-lg">
<table class="table table-sm table-hover">
<thead class="sticky top-0 bg-base-300">
<tr>
<th class="font-semibold">Arr</th>
<th class="font-semibold">Path</th>
<th class="font-semibold w-20">Type</th>
<th class="font-semibold w-24">Size</th>
</tr>
</thead>
<tbody id="brokenItemsTableBody">
<!-- Broken items will be loaded here -->
</tbody>
</table>
</div>
<!-- Items Pagination -->
<div class="flex justify-center mt-4">
<div class="join" id="itemsPagination">
<!-- Pagination will be generated here -->
</div>
</div>
<!-- No Items Messages -->
<div id="noBrokenItemsMessage" class="text-center py-8 hidden">
<div class="text-4xl text-base-content/30 mb-2">
<i class="bi bi-check-circle"></i>
</div>
<p class="text-base-content/70">No broken items found</p>
</div>
<div id="noFilteredItemsMessage" class="text-center py-8 hidden">
<div class="text-4xl text-base-content/30 mb-2">
<i class="bi bi-funnel"></i>
</div>
<p class="text-base-content/70">No items match the current filters</p>
</div>
</div>
</div>
</div>
<div class="modal-action">
<div class="flex-1">
<small class="text-base-content/60" id="modalFooterStats">-</small>
</div>
<div class="flex gap-2">
<button type="button" class="btn btn-primary btn-sm hidden" id="processJobBtn">
<i class="bi bi-play-fill mr-1"></i>Process
</button>
<button type="button" class="btn btn-warning btn-sm hidden" id="stopJobBtn">
<i class="bi bi-stop-fill mr-1"></i>Stop
</button>
</div>
</div>
</div>
</dialog>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.repairManager = new RepairManager();
window.RepairUtils = RepairUtils;
});
</script>
{{ end }}