.p-tooltip-text {
+ width: 350px !important;
+ background: red;
+}
diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.ts b/src/src/app/modals/place-create-modal/place-create-modal.component.ts
index b48f71e..8b3e705 100644
--- a/src/src/app/modals/place-create-modal/place-create-modal.component.ts
+++ b/src/src/app/modals/place-create-modal/place-create-modal.component.ts
@@ -1,5 +1,10 @@
import { Component } from "@angular/core";
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import {
+ FormBuilder,
+ FormGroup,
+ ReactiveFormsModule,
+ Validators,
+} from "@angular/forms";
import { ButtonModule } from "primeng/button";
import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
import { FloatLabelModule } from "primeng/floatlabel";
@@ -8,11 +13,14 @@ import { SelectModule } from "primeng/select";
import { TextareaModule } from "primeng/textarea";
import { Observable } from "rxjs";
import { AsyncPipe } from "@angular/common";
+import { InputGroupModule } from "primeng/inputgroup";
+import { InputGroupAddonModule } from "primeng/inputgroupaddon";
import { ApiService } from "../../services/api.service";
import { UtilsService } from "../../services/utils.service";
import { FocusTrapModule } from "primeng/focustrap";
import { Category, Place } from "../../types/poi";
import { CheckboxModule } from "primeng/checkbox";
+import { TooltipModule } from "primeng/tooltip";
@Component({
selector: "app-place-create-modal",
@@ -23,6 +31,9 @@ import { CheckboxModule } from "primeng/checkbox";
SelectModule,
ReactiveFormsModule,
TextareaModule,
+ InputGroupModule,
+ InputGroupAddonModule,
+ TooltipModule,
CheckboxModule,
AsyncPipe,
FocusTrapModule,
@@ -37,12 +48,15 @@ export class PlaceCreateModalComponent {
previous_image_id: number | null = null;
previous_image: string | null = null;
+ placeInputTooltip: string =
+ "You can paste a Google Maps Place link to fill Name, Place, Lat, Lng.
\nhttps://google.com/maps/place/XXX
\nEither « click » on a point of interest or « search » for it (eg: British Museum) and copy the URL
\nWarning: there is often a slight offset from the actual coordinates.
";
+
constructor(
private ref: DynamicDialogRef,
private apiService: ApiService,
private utilsService: UtilsService,
private fb: FormBuilder,
- private config: DynamicDialogConfig
+ private config: DynamicDialogConfig,
) {
this.categories$ = this.apiService.getCategories();
@@ -50,11 +64,25 @@ export class PlaceCreateModalComponent {
id: -1,
name: ["", Validators.required],
place: ["", { validators: Validators.required, updateOn: "blur" }],
- lat: ["", { validators: [Validators.required, Validators.pattern("-?(90(\\.0+)?|[1-8]?\\d(\\.\\d+)?)")] }],
+ lat: [
+ "",
+ {
+ validators: [
+ Validators.required,
+ Validators.pattern("-?(90(\\.0+)?|[1-8]?\\d(\\.\\d+)?)"),
+ ],
+ updateOn: "blur",
+ },
+ ],
lng: [
"",
{
- validators: [Validators.required, Validators.pattern("-?(180(\\.0+)?|1[0-7]\\d(\\.\\d+)?|[1-9]?\\d(\\.\\d+)?)")],
+ validators: [
+ Validators.required,
+ Validators.pattern(
+ "-?(180(\\.0+)?|1[0-7]\\d(\\.\\d+)?|[1-9]?\\d(\\.\\d+)?)",
+ ),
+ ],
},
],
category: [null, Validators.required],
@@ -85,8 +113,27 @@ export class PlaceCreateModalComponent {
next: (value: string) => {
if (/\-?\d+\.\d+,\s\-?\d+\.\d+/.test(value)) {
let [lat, lng] = value.split(", ");
- this.placeForm.get("lat")?.setValue(parseFloat(lat).toFixed(5));
- this.placeForm.get("lng")?.setValue(parseFloat(lng).toFixed(5));
+ const latLength = lat.split(".")[1].length;
+ const lngLength = lng.split(".")[1].length;
+
+ const latControl = this.placeForm.get("lat");
+ const lngControl = this.placeForm.get("lng");
+
+ latControl?.setValue(
+ parseFloat(lat).toFixed(latLength > 5 ? 5 : latLength),
+ {
+ emitEvent: false,
+ },
+ );
+ lngControl?.setValue(
+ parseFloat(lng).toFixed(lngLength > 5 ? 5 : lngLength),
+ {
+ emitEvent: false,
+ },
+ );
+
+ lngControl?.markAsDirty();
+ lngControl?.updateValueAndValidity();
}
},
});
@@ -119,7 +166,8 @@ export class PlaceCreateModalComponent {
this.placeForm.get("lat")?.setValue(lat);
this.placeForm.get("lng")?.setValue(lng);
- if (!this.placeForm.get("name")?.value) this.placeForm.get("name")?.setValue(place);
+ if (!this.placeForm.get("name")?.value)
+ this.placeForm.get("name")?.setValue(place);
}
onFileSelected(event: Event) {