From abbfdd9d2116713fef61166af0c75fbc8da6b68b Mon Sep 17 00:00:00 2001 From: itskovacs Date: Wed, 6 Aug 2025 20:23:29 +0200 Subject: [PATCH] :zap: Minor optimizations --- .../category-create-modal.component.ts | 11 ++- .../place-create-modal.component.ts | 65 +++++++------- .../trip-create-day-item-modal.component.ts | 85 +++++++++++-------- src/src/app/shared/latlng-parser.ts | 8 +- 4 files changed, 90 insertions(+), 79 deletions(-) diff --git a/src/src/app/modals/category-create-modal/category-create-modal.component.ts b/src/src/app/modals/category-create-modal/category-create-modal.component.ts index 9a196e7..c479335 100644 --- a/src/src/app/modals/category-create-modal/category-create-modal.component.ts +++ b/src/src/app/modals/category-create-modal/category-create-modal.component.ts @@ -11,6 +11,7 @@ import { FloatLabelModule } from "primeng/floatlabel"; import { InputTextModule } from "primeng/inputtext"; import { FocusTrapModule } from "primeng/focustrap"; import { ColorPickerModule } from "primeng/colorpicker"; +import { Category } from "../../types/poi"; @Component({ selector: "app-category-create-modal", @@ -28,7 +29,6 @@ import { ColorPickerModule } from "primeng/colorpicker"; }) export class CategoryCreateModalComponent { categoryForm: FormGroup; - previous_image: string | null = null; updatedImage = false; constructor( @@ -51,10 +51,8 @@ export class CategoryCreateModalComponent { image: null, }); - if (this.config.data) { - let patchValue = this.config.data.category; - this.categoryForm.patchValue(patchValue); - } + const patchValue = this.config.data?.category as Category | undefined; + if (patchValue) this.categoryForm.patchValue(patchValue); } closeDialog() { @@ -67,7 +65,7 @@ export class CategoryCreateModalComponent { onFileSelected(event: Event) { const input = event.target as HTMLInputElement; - if (input.files && input.files.length > 0) { + if (input.files?.length) { const file = input.files[0]; const reader = new FileReader(); @@ -83,5 +81,6 @@ export class CategoryCreateModalComponent { clearImage() { this.categoryForm.get("image")?.setValue(null); + this.updatedImage = false; } } 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 80f05ac..2c3a0ba 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,4 +1,5 @@ import { Component } from "@angular/core"; +import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { FormBuilder, FormGroup, @@ -97,37 +98,41 @@ export class PlaceCreateModalComponent { gpx: null, }); - if (this.config.data) { - let patchValue: Place = this.config.data.place; - this.placeForm.patchValue(patchValue); - } + const patchValue = this.config.data?.place as Place | undefined; + if (patchValue) this.placeForm.patchValue(patchValue); - this.placeForm.get("place")?.valueChanges.subscribe({ - next: (value: string) => { - const isGoogleMapsURL = - /^(https?:\/\/)?(www\.)?google\.[a-z.]+\/maps/.test(value); - if (isGoogleMapsURL) { - this.parseGoogleMapsUrl(value); - } - }, - }); + this.placeForm + .get("place") + ?.valueChanges.pipe(takeUntilDestroyed()) + .subscribe({ + next: (value: string) => { + const isGoogleMapsURL = + /^(https?:\/\/)?(www\.)?google\.[a-z.]+\/maps/.test(value); + if (isGoogleMapsURL) { + this.parseGoogleMapsUrl(value); + } + }, + }); - this.placeForm.get("lat")?.valueChanges.subscribe({ - next: (value: string) => { - const result = checkAndParseLatLng(value); - if (!result) return; - const [lat, lng] = result; + this.placeForm + .get("lat") + ?.valueChanges.pipe(takeUntilDestroyed()) + .subscribe({ + next: (value: string) => { + const result = checkAndParseLatLng(value); + if (!result) return; + const [lat, lng] = result; - const latControl = this.placeForm.get("lat"); - const lngControl = this.placeForm.get("lng"); + const latControl = this.placeForm.get("lat"); + const lngControl = this.placeForm.get("lng"); - latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false }); - lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false }); + latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false }); + lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false }); - lngControl?.markAsDirty(); - lngControl?.updateValueAndValidity(); - }, - }); + lngControl?.markAsDirty(); + lngControl?.updateValueAndValidity(); + }, + }); } closeDialog() { @@ -135,8 +140,6 @@ export class PlaceCreateModalComponent { let ret = this.placeForm.value; ret["category_id"] = ret["category"]; delete ret["category"]; - if (!ret["price"]) ret["price"] = null; - if (!ret["duration"]) ret["duration"] = null; if (ret["image_id"]) { delete ret["image"]; delete ret["image_id"]; @@ -148,9 +151,7 @@ export class PlaceCreateModalComponent { parseGoogleMapsUrl(url: string): void { const [place, latlng] = this.utilsService.parseGoogleMapsUrl(url); - if (!place || !latlng) { - return; - } + if (!place || !latlng) return; const [lat, lng] = latlng.split(","); this.placeForm.get("place")?.setValue(place); @@ -163,7 +164,7 @@ export class PlaceCreateModalComponent { onImageSelected(event: Event) { const input = event.target as HTMLInputElement; - if (input.files && input.files.length > 0) { + if (input.files?.length) { const file = input.files[0]; const reader = new FileReader(); diff --git a/src/src/app/modals/trip-create-day-item-modal/trip-create-day-item-modal.component.ts b/src/src/app/modals/trip-create-day-item-modal/trip-create-day-item-modal.component.ts index 0e04616..9facc19 100644 --- a/src/src/app/modals/trip-create-day-item-modal/trip-create-day-item-modal.component.ts +++ b/src/src/app/modals/trip-create-day-item-modal/trip-create-day-item-modal.component.ts @@ -16,6 +16,7 @@ import { TextareaModule } from "primeng/textarea"; import { InputMaskModule } from "primeng/inputmask"; import { UtilsService } from "../../services/utils.service"; import { checkAndParseLatLng, formatLatLng } from "../../shared/latlng-parser"; +import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; @Component({ selector: "app-trip-create-day-item-modal", @@ -84,50 +85,62 @@ export class TripCreateDayItemModalComponent { ], }); - if (this.config.data) { - const item = this.config.data.item; - if (item) - this.itemForm.patchValue({ ...item, place: item.place?.id || null }); + const data = this.config.data; + if (data) { + this.places = data.places ?? []; + this.days = data.days ?? []; - this.places = this.config.data.places; - this.days = this.config.data.days; - if (this.config.data.selectedDay) - this.itemForm.get("day_id")?.setValue(this.config.data.selectedDay); + if (data.item) + this.itemForm.patchValue({ + ...data.item, + place: data.item.place?.id ?? null, + }); + + if (data.selectedDay) + this.itemForm.get("day_id")?.setValue(data.selectedDay); } - this.itemForm.get("place")?.valueChanges.subscribe({ - next: (value?: number) => { - if (!value) { - this.itemForm.get("lat")?.setValue(""); - this.itemForm.get("lng")?.setValue(""); - } - if (value) { + this.itemForm + .get("place") + ?.valueChanges.pipe(takeUntilDestroyed()) + .subscribe({ + next: (value?: number) => { + if (!value) { + this.itemForm.get("lat")?.setValue(""); + this.itemForm.get("lng")?.setValue(""); + return; + } + const p: Place = this.places.find((p) => p.id === value) as Place; - this.itemForm.get("lat")?.setValue(p.lat); - this.itemForm.get("lng")?.setValue(p.lng); - this.itemForm.get("price")?.setValue(p.price || 0); - if (!this.itemForm.get("text")?.value) - this.itemForm.get("text")?.setValue(p.name); - } - }, - }); + if (p) { + this.itemForm.get("lat")?.setValue(p.lat); + this.itemForm.get("lng")?.setValue(p.lng); + this.itemForm.get("price")?.setValue(p.price || 0); + if (!this.itemForm.get("text")?.value) + this.itemForm.get("text")?.setValue(p.name); + } + }, + }); - this.itemForm.get("lat")?.valueChanges.subscribe({ - next: (value: string) => { - const result = checkAndParseLatLng(value); - if (!result) return; + this.itemForm + .get("lat") + ?.valueChanges.pipe(takeUntilDestroyed()) + .subscribe({ + next: (value: string) => { + const result = checkAndParseLatLng(value); + if (!result) return; - const [lat, lng] = result; - const latControl = this.itemForm.get("lat"); - const lngControl = this.itemForm.get("lng"); + const [lat, lng] = result; + const latControl = this.itemForm.get("lat"); + const lngControl = this.itemForm.get("lng"); - latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false }); - lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false }); + latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false }); + lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false }); - lngControl?.markAsDirty(); - lngControl?.updateValueAndValidity(); - }, - }); + lngControl?.markAsDirty(); + lngControl?.updateValueAndValidity(); + }, + }); } closeDialog() { diff --git a/src/src/app/shared/latlng-parser.ts b/src/src/app/shared/latlng-parser.ts index 8ade3a6..29f500d 100644 --- a/src/src/app/shared/latlng-parser.ts +++ b/src/src/app/shared/latlng-parser.ts @@ -14,12 +14,12 @@ function _dmsToDecimal( sec: number, dir: string, ): number { - let dec = deg + min / 60 + sec / 3600; + const dec = deg + min / 60 + sec / 3600; return /[SW]/i.test(dir) ? -dec : dec; } function _dmmToDecimal(deg: number, min: number, dir: string): number { - let dec = deg + min / 60; + const dec = deg + min / 60; return /[SW]/i.test(dir) ? -dec : dec; } @@ -31,9 +31,7 @@ export function formatLatLng(num: number): string { export function checkAndParseLatLng( value: string | number, ): [number, number] | undefined { - if (value.constructor != String) { - return; - } + if (typeof value !== "string") return undefined; // Parse PlusCode if (OpenLocationCode.isValid(value)) {