Eli Ribble
4c23eba5d7
That way I can separate out HTML for the public-facing report system and Nidus sync.
200 lines
6.1 KiB
HTML
200 lines
6.1 KiB
HTML
{{template "base.html" .}}
|
|
|
|
{{define "title"}}Data Entry{{end}}
|
|
{{define "extraheader"}}
|
|
<style>
|
|
.results-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.error-code {
|
|
font-family: monospace;
|
|
padding: 0.2rem 0.4rem;
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
border-radius: 0.2rem;
|
|
color: #dc3545;
|
|
}
|
|
.error-table {
|
|
font-size: 0.9rem;
|
|
}
|
|
.error-suggestions {
|
|
color: #495057;
|
|
}
|
|
.table-header-error {
|
|
width: 40%;
|
|
}
|
|
.table-header-suggestion {
|
|
width: 40%;
|
|
}
|
|
.table-header-line {
|
|
width: 20%;
|
|
}
|
|
</style>
|
|
{{end}}
|
|
{{define "content"}}
|
|
<div class="container mt-4 results-container mb-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>Upload Failed: pools-data-2023.csv</h2>
|
|
<span class="badge bg-danger rounded-pill">
|
|
<i class="bi bi-x-circle me-1"></i> Validation Errors
|
|
</span>
|
|
</div>
|
|
|
|
<div class="alert alert-danger" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<i class="bi bi-exclamation-triangle-fill" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="alert-heading">CSV Upload Failed</h4>
|
|
<p class="mb-0">Your file contains several errors that must be fixed before it can be processed. Details are provided below.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Error Summary</h5>
|
|
<a href="#" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-download me-1"></i> Download Error Log
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>We found <strong>12 errors</strong> in your CSV file. The most common issues are:</p>
|
|
<ul>
|
|
<li><strong>Missing required column:</strong> The "Latitude" column is not present in your file</li>
|
|
<li><strong>Invalid data format:</strong> 8 GPS coordinates contain non-numeric values</li>
|
|
<li><strong>Empty required fields:</strong> 3 records are missing Plat ID values</li>
|
|
</ul>
|
|
|
|
<div class="alert alert-info" role="alert">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<strong>Tip:</strong> Make sure your column names exactly match the required format. Column names are case-sensitive.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0">Detailed Error Report</h5>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped error-table mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="table-header-line">Line Number</th>
|
|
<th class="table-header-error">Error</th>
|
|
<th class="table-header-suggestion">Suggestion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-bold text-center">1</td>
|
|
<td>
|
|
<span class="error-code">MISSING_COLUMN</span><br>
|
|
Required column "Latitude" is missing from the header row
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Add a "Latitude" column to your CSV file. Make sure the spelling and capitalization match exactly.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold text-center">5</td>
|
|
<td>
|
|
<span class="error-code">INVALID_DATA_FORMAT</span><br>
|
|
GPS coordinate "37.45N" is not a valid decimal number
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Change "37.45N" to a decimal format (e.g., "37.45"). Remove any non-numeric characters except for the decimal point.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold text-center">8</td>
|
|
<td>
|
|
<span class="error-code">EMPTY_REQUIRED_FIELD</span><br>
|
|
Plat ID is empty or missing
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Add a Plat ID value for this record. Each pool must have a unique identifier.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold text-center">12</td>
|
|
<td>
|
|
<span class="error-code">INVALID_DATA_FORMAT</span><br>
|
|
GPS coordinate "unknown" is not a valid decimal number
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Replace "unknown" with the actual longitude value in decimal format (e.g., "-122.4194").
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold text-center">17</td>
|
|
<td>
|
|
<span class="error-code">INVALID_DATA_FORMAT</span><br>
|
|
GPS coordinate "N/A" is not a valid decimal number
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Replace "N/A" with the actual latitude value in decimal format (e.g., "37.7749").
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold text-center">21</td>
|
|
<td>
|
|
<span class="error-code">EMPTY_REQUIRED_FIELD</span><br>
|
|
Plat ID is empty or missing
|
|
</td>
|
|
<td class="error-suggestions">
|
|
Add a Plat ID value for this record. Each pool must have a unique identifier.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer bg-white">
|
|
<nav aria-label="Error pagination">
|
|
<ul class="pagination justify-content-center m-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0">Next Steps</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ol>
|
|
<li>Download the error log for a complete list of issues (optional)</li>
|
|
<li>Fix the errors in your CSV file</li>
|
|
<li>Re-upload the corrected file using the button below</li>
|
|
</ol>
|
|
|
|
<div class="alert alert-warning" role="alert">
|
|
<i class="bi bi-lightbulb me-2"></i>
|
|
<strong>Recommendation:</strong> Review our <a href="#" class="alert-link">CSV formatting guide</a> to ensure your file meets all requirements.
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<button class="btn btn-primary btn-lg" id="uploadNewBtn">
|
|
<i class="bi bi-arrow-repeat me-2"></i> Upload Corrected File
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<a href="#" class="text-muted">
|
|
<i class="bi bi-question-circle me-1"></i> Need help? Contact support
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{end}}
|