Add custom pool upload page

This commit is contained in:
Eli Ribble 2026-04-15 18:25:12 +00:00
parent f4d0ce015d
commit 1097004245
No known key found for this signature in database
5 changed files with 143 additions and 3 deletions

View file

@ -23,7 +23,12 @@
{{ req.field }}
</td>
<td>{{ req.description }}</td>
<td>{{ req.format }}</td>
<td v-if="req.format == 'e164'">
<a href="https://www.twilio.com/docs/glossary/what-e164"
>E164 format</a
>, or enough digits to be a valid phone number
</td>
<td v-else>{{ req.format }}</td>
<td>{{ req.example }}</td>
</tr>
</tbody>

View file

@ -12,6 +12,7 @@ import ConfigurationRoot from "./view/configuration/Root.vue";
import ConfigurationUpload from "./view/configuration/Upload.vue";
import ConfigurationUploadDetail from "./view/configuration/UploadDetail.vue";
import ConfigurationUploadPool from "./view/configuration/UploadPool.vue";
import ConfigurationUploadPoolCustom from "./view/configuration/UploadPoolCustom.vue";
import ConfigurationUploadPoolFlyover from "./view/configuration/UploadPoolFlyover.vue";
import ConfigurationUser from "./view/configuration/User.vue";
import ConfigurationUserAdd from "./view/configuration/UserAdd.vue";
@ -95,6 +96,12 @@ const routes: RouteRecordRaw[] = [
component: ConfigurationUploadPool,
meta: { requiresAuth: true, showSidebar: true },
},
{
path: "/_/configuration/upload/pool/custom",
name: "Custom Pool Upload",
component: ConfigurationUploadPoolCustom,
meta: { requiresAuth: true, showSidebar: true },
},
{
path: "/_/configuration/upload/pool/flyover",
name: "Flyover Upload",

View file

@ -0,0 +1,128 @@
<template>
<!-- Main Content -->
<div class="container mt-4 upload-container">
<h2 class="mb-4">Upload Pool Custom Data</h2>
<div class="card mb-4">
<TableUploadRequirements :requirements="requirements" />
</div>
<div class="card">
<div class="card-header bg-light">
<h5 class="mb-0">Upload Data</h5>
</div>
<div class="card-body">
<CSVUpload
upload-url="/api/upload/pool/custom"
@doError="onError"
@doFileSelected="onFileSelected"
@doSuccess="onUploadSuccess"
/>
</div>
</div>
<div class="text-muted text-center mt-4">
<small
>Need assistance? Contact
<a href="mailto:support@example.com">support@example.com</a></small
>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CSVUpload from "@/components/CSVUpload.vue";
import TableUploadRequirements, {
UploadRequirement,
} from "@/components/TableUploadRequirements.vue";
import { router } from "@/router";
const requirements = ref<UploadRequirement[]>([
{
field: "Street Address",
description: "Street number and name of the address of the pool",
format: "Text",
example: "123 Main St.",
is_required: true,
},
{
field: "City",
description: "The city portion of the pool's address",
format: "Text",
example: "Visalia",
is_required: true,
},
{
field: "Notes",
description:
" Any notes from the district to include with the pool record ",
format: "Text",
example: '"Collects rain water when empty"',
is_required: false,
},
{
field: "Postal Code",
description: "Postal (Zip) Code of the pool's address",
format: "numbers and optional hypen",
example: "81234 or 91234-5678",
is_required: true,
},
{
field: "Pool Condition",
description: "The condition of the pool when it was last inspected",
format: "Text",
example: '"blue", "dry", "false pool", "green", or "murky"',
is_required: false,
},
{
field: "Property Owner Name",
description: "Name of the person or entity that owns the property",
format: "Text",
example: "No",
is_required: false,
},
{
field: "Property Owner Phone",
description: "Phone number of the person or entity that owns the property",
format: "e164",
example:
'"+14155552671" or "1-(901)-555-1234" or "9015551234" or "1901-555-12-34"',
is_required: false,
},
{
field: "Resident Owned",
description:
" Whether or not the current resident of the property is also the owner ",
format: "Yes, No, or empty",
example: '"Yes" or "No" or ""',
is_required: false,
},
{
field: "Resident Phone",
description: "Phone number of the resident",
format: "e164",
example:
'"+14155552671" or "1-(901)-555-1234" or "9015551234" or "1901-555-12-34"',
is_required: false,
},
{
field: "Tags",
description:
" Any additional columns in the file will be treated as tags and attached to the record ",
format: "Text",
example: '"Hostile" or "Unresponsive" or "Dog"',
is_required: false,
},
]);
function onError(err: Error) {
console.error("CSV upload error", err);
}
function onFileSelected(file: File) {
console.log("file selected", file);
}
function onUploadSuccess(data: any) {
console.log("upload success", data);
router.push("/_" + data.uri);
}
</script>

View file

@ -1,7 +1,7 @@
<template>
<!-- Main Content -->
<div class="container mt-4 upload-container">
<h2 class="mb-4">Upload Pool Data</h2>
<h2 class="mb-4">Upload Pool Flyover Data</h2>
<div class="card mb-4">
<TableUploadRequirements :requirements="requirements" />