Gleipnir/nidus-sync
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Add loading indicator when checking for previous report data

Browse source
This commit is contained in:
Eli Ribble 2026-04-10 15:38:31 +00:00
parent b23fc6edc5
commit 14c0d453e9
No known key found for this signature in database
4 changed files with 158 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

116
ts/rmo/view/Compliance.vue
View file

@ -18,15 +18,20 @@ body > .container-fluid {
<template>
<template v-if="district">
<router-view v-slot="{ Component }">
<component
:is="Component"
:district="district"
@doEvidence="doEvidence"
@doContact="doContact"
@doLocator="doLocator"
@doPermission="doPermission"
v-model="compliance"
/>
<LoadingOverlay
:is-loading="isLoading"
loading-text="Loading previous data"
>
<component
:is="Component"
:district="district"
@doEvidence="doEvidence"
@doContact="doContact"
@doLocator="doLocator"
@doPermission="doPermission"
v-model="compliance"
/>
</LoadingOverlay>
</router-view>
</template>
<template v-else>
@ -43,8 +48,9 @@ import { useStoreDistrict } from "@/rmo/store/district";
import { useStoreLocal } from "@/store/local";
import { useStoreLocation } from "@/store/location";
import Intro from "@/rmo/content/compliance/Intro.vue";
import type { District, Location, PublicReport } from "@/type/api";
import { PermissionAccess } from "@/type/api";
import LoadingOverlay from "@/components/LoadingOverlay.vue";
import type { District, PublicReport } from "@/type/api";
import { Address, Location, PermissionAccess } from "@/type/api";
import { Locator } from "@/type/map";
import { type Contact } from "@/rmo/content/compliance/Contact.vue";
import { type Permission } from "@/rmo/content/compliance/Permission.vue";
@ -52,10 +58,12 @@ import { type Permission } from "@/rmo/content/compliance/Permission.vue";
export interface Compliance {
comments: string;
contact: Contact;
id: string;
images: Image[];
location: Location;
locator: Locator;
images: Image[];
permission: Permission;
uri: string;
}
interface Props {
slug: string;
@ -71,27 +79,15 @@ const compliance = ref<Compliance>({
can_text: true,
email: "",
},
id: "",
images: [],
location: {
latitude: 0,
longitude: 0,
},
locator: {
address: {
country: "",
gid: "",
locality: "",
number: "",
postal_code: "",
raw: "",
region: "",
street: "",
unit: "",
},
location: {
latitude: 0,
longitude: 0,
},
address: new Address(),
location: new Location(),
},
permission: {
access: PermissionAccess.UNSELECTED,
@ -101,7 +97,9 @@ const compliance = ref<Compliance>({
has_dog: false,
wants_scheduled: false,
},
uri: "",
});
const isLoading = ref<boolean>(true);
const props = defineProps<Props>();
const report = ref<PublicReport | null>();
const district = computedAsync(async (): Promise<District | undefined> => {
@ -110,21 +108,18 @@ const district = computedAsync(async (): Promise<District | undefined> => {
});
const storeLocal = useStoreLocal();
const storeLocation = useStoreLocation();
function doEvidence() {
console.log("evidence", compliance.value);
}
function doContact() {
console.log("contact", compliance.value.contact);
}
function doLocator() {
console.log("locator done", compliance.value.locator);
}
function doPermission() {
console.log("permission", compliance.value.permission);
}
async function createReport(report_id: string, loc?: GeolocationPosition) {
async function createReport(client_id: string, loc?: GeolocationPosition) {
const formData = new FormData();
formData.append;
formData.append("client_id", client_id);
if (loc) {
formData.append("location.accuracy", loc.coords.accuracy.toString());
formData.append("location.latitude", loc.coords.latitude.toString());
formData.append("location.longitude", loc.coords.longitude.toString());
} else {
formData.append("location.accuracy", "0");
formData.append("location.latitude", "0");
formData.append("longitude", "0");
}
const resp = await fetch("/api/rmo/compliance", {
method: "POST",
body: formData,
@ -133,19 +128,52 @@ async function createReport(report_id: string, loc?: GeolocationPosition) {
if (!resp.ok) {
const content = await resp.text();
console.error("Failed to create compliance report", resp.status, content);
return;
}
}
function doEvidence() {
console.log("evidence", compliance.value);
}
function doContact() {
console.log("contact", compliance.value.contact);
}
function doLocator() {
console.log("locator done", compliance.value.locator);
updateReport({
locator: compliance.value.locator,
});
}
function doPermission() {
console.log("permission", compliance.value.permission);
}
interface ComplianceUpdate {
locator?: Locator;
}
async function updateReport(updates: ComplianceUpdate) {
const resp = await fetch(compliance.value.uri, {
method: "PUT",
body: JSON.stringify(updates),
headers: {
"Content-Type": "application/json",
},
});
if (!resp.ok) {
const content = await resp.text();
console.error("Failed to update compliance", resp.status, content);
return;
}
}
onMounted(() => {
const session_id = storeLocal.getSessionID();
const client_id = storeLocal.getClientID();
storeLocation
.get()
.then((loc: GeolocationPosition) => {
compliance.value.location = loc.coords;
createReport(session_id, loc);
createReport(client_id, loc);
})
.catch((e) => {
console.log("failed to get location", e);
createReport(session_id);
createReport(client_id);
});
});
</script>