You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
7.3 KiB
163 lines
7.3 KiB
{{define "document_upload"}}
|
|
<h2>Document Uploads</h2>
|
|
|
|
<form id="upload-form" hx-post="/upload-documents" hx-encoding="multipart/form-data" hx-target="#upload-results"
|
|
hx-indicator=".upload-overlay">
|
|
|
|
<div class="upload-container">
|
|
<!-- Upload overlay -->
|
|
<div class="upload-overlay htmx-indicator">
|
|
<div class="upload-overlay-content">
|
|
<div class="overlay-spinner"></div>
|
|
<h3>Uploading Documents</h3>
|
|
<p>Please wait while your documents are being uploaded...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Job numbers will be added here by the CSV process -->
|
|
<div id="job-ids-container" style="display: none;">
|
|
<!-- Hidden input placeholder for job IDs -->
|
|
</div>
|
|
|
|
<!-- Step 1: CSV Upload -->
|
|
<div id="step1" class="content">
|
|
<h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3>
|
|
<div>
|
|
<label>Select CSV file with job IDs:</label>
|
|
<input class="card-input" type="file" id="csv-file" name="csvFile" accept=".csv" required>
|
|
|
|
<button type="button" class="btn-primary" hx-post="/process-csv" hx-target="#job-ids-container"
|
|
hx-encoding="multipart/form-data" hx-include="#csv-file" hx-indicator="#csv-loading-indicator"
|
|
hx-on::after-request="if(event.detail.successful) { document.getElementById('step2').style.display = 'block'; }">
|
|
Upload CSV
|
|
</button>
|
|
|
|
<div id="csv-loading-indicator" class="htmx-indicator" style="display: none;">
|
|
<span>Processing CSV...</span>
|
|
<div class="loading-indicator"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="csv-preview" class="fade-me-out" style="display: none; margin-top: 1rem;">
|
|
<h4>Detected Jobs</h4>
|
|
<div id="csv-preview-content" class="job-list">
|
|
<!-- Job numbers will be displayed here -->
|
|
<p>No jobs loaded yet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Document Upload -->
|
|
<div id="step2" class="content" style="display: none;">
|
|
<h3 class="submenu-header">Step 2: Upload Documents</h3>
|
|
<div id="document-upload-container">
|
|
<div class="document-row" id="document-row-1">
|
|
<div class="document-field">
|
|
<label>Select Document:</label>
|
|
<input class="card-input" type="file" id="document-file-1" name="document-file-1">
|
|
</div>
|
|
|
|
<div class="document-field-row">
|
|
<div class="document-field document-name-field">
|
|
<label>Document Name (optional):</label>
|
|
<input class="card-input" type="text" id="document-name-1" name="document-name-1"
|
|
placeholder="Document Name">
|
|
</div>
|
|
|
|
<div class="document-field document-type-field">
|
|
<label>Document Type:</label>
|
|
<select class="card-input" id="document-type-1" name="document-type-1">
|
|
<option value="">Select Document Type</option>
|
|
<option value="1" selected>Job Paperwork</option>
|
|
<option value="2">Job Vendor Bill</option>
|
|
<option value="4">Generic Attachment</option>
|
|
<option value="7">Blank Paperwork</option>
|
|
<option value="14">Job Invoice</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="remove-document warning-button" hx-get="/document-field-remove?id=1"
|
|
hx-target="#document-row-1" hx-swap="outerHTML" style="display: none;">Remove</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="add-document" class="caution-button" hx-get="/document-field-add"
|
|
hx-target="#document-upload-container" hx-swap="beforeend">Add Another Document</button>
|
|
|
|
<button type="button" class="btn-primary"
|
|
onclick="document.getElementById('step3').style.display = 'block';">
|
|
Continue to Step 3
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Step 3: Submit -->
|
|
<div id="step3" class="content" style="display: none;">
|
|
<h3 class="submenu-header">Step 3: Submit Uploads</h3>
|
|
<div>
|
|
<button type="submit" class="success-button" id="submit-button">Upload Documents to Jobs</button>
|
|
|
|
<div id="upload-loading-indicator" class="htmx-indicator">
|
|
<span>Uploading...</span>
|
|
<div class="loading-indicator"></div>
|
|
</div>
|
|
|
|
<div id="upload-results" class="upload-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Restart Button (initially hidden) -->
|
|
<div id="restart-section" class="content" style="display: none;">
|
|
<h3 class="submenu-header">Upload Complete</h3>
|
|
<button type="button" class="btn-primary" onclick="restartUpload()">Start New Upload</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
// Function to restart the upload process
|
|
function restartUpload() {
|
|
// Reset form
|
|
document.getElementById('upload-form').reset();
|
|
|
|
// Hide all sections except step 1
|
|
document.getElementById('step2').style.display = 'none';
|
|
document.getElementById('step3').style.display = 'none';
|
|
document.getElementById('restart-section').style.display = 'none';
|
|
|
|
// Clear results
|
|
document.getElementById('upload-results').innerHTML = '';
|
|
document.getElementById('csv-preview-content').innerHTML = '<p>No jobs loaded yet</p>';
|
|
|
|
// Reset job IDs container
|
|
document.getElementById('job-ids-container').innerHTML = '';
|
|
|
|
// Show step 1
|
|
document.getElementById('step1').style.display = 'block';
|
|
}
|
|
|
|
// Add event listener for form submission
|
|
document.getElementById('upload-form').addEventListener('htmx:beforeRequest', function (evt) {
|
|
// Only show the overlay for document uploads, not CSV processing
|
|
if (evt.detail.pathInfo.requestPath === '/upload-documents') {
|
|
document.querySelector('.upload-overlay').style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
document.getElementById('upload-form').addEventListener('htmx:afterRequest', function (evt) {
|
|
if (evt.detail.pathInfo.requestPath === '/upload-documents') {
|
|
if (evt.detail.successful) {
|
|
// Show restart section after successful upload
|
|
document.getElementById('restart-section').style.display = 'block';
|
|
}
|
|
// Hide the overlay after the request completes
|
|
document.querySelector('.upload-overlay').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Add event listener for HTMX errors
|
|
document.getElementById('upload-form').addEventListener('htmx:error', function (evt) {
|
|
// Hide the overlay if there's an error
|
|
document.querySelector('.upload-overlay').style.display = 'none';
|
|
});
|
|
</script>
|
|
{{end}}
|