Split upload requirements table into its own component

This commit is contained in:
Eli Ribble 2026-04-15 17:27:22 +00:00
parent 388801fd09
commit adcff5c5c8
No known key found for this signature in database
2 changed files with 74 additions and 70 deletions

View file

@ -0,0 +1,72 @@
<template>
<div class="card-header bg-light">
<h5 class="mb-0">CSV Upload Requirements</h5>
</div>
<div class="card-body">
<p>
Your CSV file must contain the following columns in any order. Please
ensure your data matches the required format.
</p>
<table class="table table-bordered schema-table">
<thead class="table-light">
<tr>
<th>Field</th>
<th>Description</th>
<th>Format</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td class="required-field">City</td>
<td>The city portion of the address</td>
<td>Text</td>
<td>Visalia</td>
</tr>
<tr>
<td class="required-field">Comment</td>
<td>The condition of the pool</td>
<td>Text</td>
<td>"blue", "dry", "false pool", "green", or "murky"</td>
</tr>
<tr>
<td class="required-field">HouseNo</td>
<td>The house number portion of the address</td>
<td>Text</td>
<td>123</td>
</tr>
<tr>
<td class="required-field">State</td>
<td>The state portion of the address</td>
<td>Text</td>
<td>California</td>
</tr>
<tr>
<td class="required-field">Street</td>
<td>The street portion of the address</td>
<td>Text</td>
<td>Main St</td>
</tr>
<tr>
<td class="required-field">TargetLat</td>
<td>The latitude of the target location</td>
<td>Decimal Number</td>
<td>36.56245379</td>
</tr>
<tr>
<td class="required-field">TargetLon</td>
<td>The longitude of the target location</td>
<td>Decimal Number</td>
<td>-119.3948222</td>
</tr>
<tr>
<td class="required-field">ZIP</td>
<td>The postal code (ZIP) portion of the address</td>
<td>Text</td>
<td>93681</td>
</tr>
</tbody>
</table>
</div>
</template>

View file

@ -4,76 +4,7 @@
<h2 class="mb-4">Upload Pool Data</h2>
<div class="card mb-4">
<div class="card-header bg-light">
<h5 class="mb-0">CSV Upload Requirements</h5>
</div>
<div class="card-body">
<p>
Your CSV file must contain the following columns in any order. Please
ensure your data matches the required format.
</p>
<table class="table table-bordered schema-table">
<thead class="table-light">
<tr>
<th>Field</th>
<th>Description</th>
<th>Format</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td class="required-field">City</td>
<td>The city portion of the address</td>
<td>Text</td>
<td>Visalia</td>
</tr>
<tr>
<td class="required-field">Comment</td>
<td>The condition of the pool</td>
<td>Text</td>
<td>"blue", "dry", "false pool", "green", or "murky"</td>
</tr>
<tr>
<td class="required-field">HouseNo</td>
<td>The house number portion of the address</td>
<td>Text</td>
<td>123</td>
</tr>
<tr>
<td class="required-field">State</td>
<td>The state portion of the address</td>
<td>Text</td>
<td>California</td>
</tr>
<tr>
<td class="required-field">Street</td>
<td>The street portion of the address</td>
<td>Text</td>
<td>Main St</td>
</tr>
<tr>
<td class="required-field">TargetLat</td>
<td>The latitude of the target location</td>
<td>Decimal Number</td>
<td>36.56245379</td>
</tr>
<tr>
<td class="required-field">TargetLon</td>
<td>The longitude of the target location</td>
<td>Decimal Number</td>
<td>-119.3948222</td>
</tr>
<tr>
<td class="required-field">ZIP</td>
<td>The postal code (ZIP) portion of the address</td>
<td>Text</td>
<td>93681</td>
</tr>
</tbody>
</table>
</div>
<TableUploadRequirements />
</div>
<div class="card">
@ -100,6 +31,7 @@
</template>
<script setup lang="ts">
import CSVUpload from "@/components/CSVUpload.vue";
import TableUploadRequirements from "@/components/TableUploadRequirements.vue";
import { router } from "@/router";
function onError(err: Error) {