Track user location with map and address data
This is useful because everywhere that we use the AddressAndMapLocator component we also want to use the user's location and we want to zoom the map based on their location. Instead of tracking this externally in 3 places we just pull it into the component.
This commit is contained in:
parent
3867737fcc
commit
a2b8527d91
6 changed files with 113 additions and 90 deletions
|
|
@ -210,7 +210,7 @@ select.tall {
|
|||
<p class="small text-muted mb-2">
|
||||
You can also click on the map to mark the location precisely
|
||||
</p>
|
||||
<AddressAndMapLocator v-model="address" />
|
||||
<AddressAndMapLocator v-model="locator" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
|
@ -595,15 +595,13 @@ import { useStoreLocation } from "@/store/location";
|
|||
import { useStorePublicReport } from "@/store/publicreport";
|
||||
import type { Marker } from "@/types";
|
||||
import {
|
||||
Address,
|
||||
type Geocode,
|
||||
type GeocodeSuggestion,
|
||||
type Location,
|
||||
type PublicReport,
|
||||
} from "@/type/api";
|
||||
import type { Camera } from "@/type/map";
|
||||
import { type Camera, Locator } from "@/type/map";
|
||||
|
||||
const address = ref<Address>(new Address());
|
||||
const currentCamera = ref<Camera | null>(null);
|
||||
const currentLocation = ref<Location | null>(null);
|
||||
const errorMessage = ref("");
|
||||
|
|
@ -611,6 +609,7 @@ const formElement = ref<HTMLFormElement | null>(null);
|
|||
const geocode = useStoreGeocode();
|
||||
const images = ref<Image[]>([]);
|
||||
const isSubmitting = ref(false);
|
||||
const locator = ref<Locator>(new Locator());
|
||||
const marker = ref<Marker | null>(null);
|
||||
const markers = computed((): Marker[] => {
|
||||
if (marker.value) {
|
||||
|
|
@ -633,31 +632,29 @@ async function doSubmit() {
|
|||
const client_id = storeLocal.getClientID();
|
||||
const formData = new FormData(formElement.value);
|
||||
formData.append("client_id", client_id);
|
||||
if (address.value) {
|
||||
formData.append("address.gid", address.value.gid);
|
||||
formData.append("address.raw", address.value.raw);
|
||||
if (address.value.location) {
|
||||
formData.append(
|
||||
"address.location.latitude",
|
||||
address.value.location.latitude.toString(),
|
||||
);
|
||||
formData.append(
|
||||
"address.location.longitude",
|
||||
address.value.location.longitude.toString(),
|
||||
);
|
||||
}
|
||||
formData.append("address.gid", locator.value.address.gid);
|
||||
formData.append("address.raw", locator.value.address.raw);
|
||||
if (locator.value.address.location) {
|
||||
formData.append(
|
||||
"address.location.latitude",
|
||||
locator.value.address.location.latitude.toString(),
|
||||
);
|
||||
formData.append(
|
||||
"address.location.longitude",
|
||||
locator.value.address.location.longitude.toString(),
|
||||
);
|
||||
}
|
||||
formData.append(
|
||||
"location.accuracy",
|
||||
currentLocation.value?.accuracy?.toString() ?? "0",
|
||||
locator.value.location?.accuracy?.toString() ?? "0",
|
||||
);
|
||||
formData.append(
|
||||
"location.latitude",
|
||||
currentLocation.value?.latitude.toString() ?? "0",
|
||||
locator.value.location?.latitude?.toString() ?? "0",
|
||||
);
|
||||
formData.append(
|
||||
"location.longitude",
|
||||
currentLocation.value?.longitude.toString() ?? "0",
|
||||
locator.value.location?.longitude?.toString() ?? "0",
|
||||
);
|
||||
images.value.forEach((image, index) => {
|
||||
formData.append(`image[${index}]`, image.file, image.name);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue