[desktop]: Improve Settings layout

desktop/src/app/filterwheel/filterwheel.component.ts

@@ -56,8 +56,8 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Pingab
 		return this.filters[this.position - 1]
 	}
 
-	private readonly filterChangedPublisher = new Subject<FilterSlot>()
-	private readonly subscription?: Subscription
+	private readonly filterChangePublisher = new Subject<FilterSlot>()
+	private readonly filterChangeSubscription?: Subscription
 
 	constructor(
 		private readonly app: AppComponent,
@@ -112,7 +112,7 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Pingab
 			}
 		})
 
-		this.subscription = this.filterChangedPublisher.pipe(debounceTime(1500)).subscribe(async (filter) => {
+		this.filterChangeSubscription = this.filterChangePublisher.pipe(debounceTime(1500)).subscribe(async (filter) => {
 			this.savePreference()
 
 			const names = this.filters.map((e) => e.name)
@@ -197,7 +197,7 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Pingab
 	@HostListener('window:unload')
 	ngOnDestroy() {
 		this.pinger.unregister(this)
-		this.subscription?.unsubscribe()
+		this.filterChangeSubscription?.unsubscribe()
 	}
 
 	async ping() {
@@ -300,12 +300,12 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Pingab
 
 	shutterToggled(filter: FilterSlot, event: CheckboxChangeEvent) {
 		this.filters.forEach((e) => (e.dark = !!event.checked && e === filter))
-		this.filterChangedPublisher.next(structuredClone(filter))
+		this.filterChangePublisher.next(structuredClone(filter))
 	}
 
 	filterNameChanged(filter: FilterSlot) {
 		if (filter.name) {
-			this.filterChangedPublisher.next(structuredClone(filter))
+			this.filterChangePublisher.next(structuredClone(filter))
 		}
 	}
 

desktop/src/app/settings/settings.component.html

@@ -25,7 +25,13 @@
 						dataKey="id"
 						styleClass="p-inputtext-sm border-0"
 						emptyMessage="No location found"
-						[autoDisplayFirst]="false" />
+						[autoDisplayFirst]="false">
+						<ng-template pTemplate="selectedItem">
+							<div class="flex align-items-center gap-2">
+								<span>{{ location.name || '?' }}</span>
+							</div>
+						</ng-template>
+					</p-dropdown>
 					<label>Location</label>
 				</p-floatLabel>
 				<div class="flex gap-1">
@@ -37,14 +43,6 @@
 						pTooltip="New"
 						tooltipPosition="bottom"
 						(onClick)="addLocation()" />
-					<p-button
-						icon="mdi mdi-pencil"
-						size="small"
-						severity="info"
-						[text]="true"
-						pTooltip="Edit"
-						tooltipPosition="bottom"
-						(onClick)="editLocation()" />
 					<p-button
 						[disabled]="locations.length <= 1"
 						icon="mdi mdi-delete"
@@ -56,6 +54,11 @@
 						(onClick)="deleteLocation()" />
 				</div>
 			</div>
+			<div class="col-12">
+				<neb-location
+					[location]="location"
+					(locationChange)="locationChanged()" />
+			</div>
 		</div>
 	</div>
 	<div

desktop/src/app/settings/settings.component.ts

@@ -1,9 +1,8 @@
-import { Component } from '@angular/core'
-import { LocationDialog } from '../../shared/dialogs/location/location.dialog'
+import { Component, OnDestroy } from '@angular/core'
+import { debounceTime, Subject, Subscription } from 'rxjs'
 import { DropdownOptionsPipe } from '../../shared/pipes/dropdown-options.pipe'
 import { ElectronService } from '../../shared/services/electron.service'
 import { PreferenceService } from '../../shared/services/preference.service'
-import { PrimeService } from '../../shared/services/prime.service'
 import { EMPTY_LOCATION, Location } from '../../shared/types/atlas.types'
 import { FrameType, LiveStackerType, LiveStackingRequest } from '../../shared/types/camera.types'
 import { PlateSolverRequest, PlateSolverType } from '../../shared/types/platesolver.types'
@@ -16,7 +15,7 @@ import { AppComponent } from '../app.component'
 	selector: 'neb-settings',
 	templateUrl: './settings.component.html',
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnDestroy {
 	tab: SettingsTabKey = 'LOCATION'
 	readonly tabs: SettingsTabKey[] = ['LOCATION', 'PLATE_SOLVER', 'STAR_DETECTOR', 'LIVE_STACKER', 'STACKER', 'CAPTURE_NAMING_FORMAT']
 
@@ -37,17 +36,20 @@ export class SettingsComponent {
 
 	readonly cameraCaptureNamingFormat = structuredClone(DEFAULT_CAMERA_CAPTURE_NAMING_FORMAT)
 
+	private readonly locationChangePublisher = new Subject<Location>()
+	private readonly locationChangeSubscription?: Subscription
+
 	constructor(
 		app: AppComponent,
 		private readonly preference: PreferenceService,
 		private readonly electron: ElectronService,
-		private readonly prime: PrimeService,
 		private readonly dropdownOptions: DropdownOptionsPipe,
 	) {
 		app.title = 'Settings'
 
 		this.locations = preference.locations.get()
-		this.location = preference.selectedLocation.get(this.locations[0])
+		const selectedLocation = preference.selectedLocation.get(this.locations[0])
+		this.location = this.locations.find(e => e.id === selectedLocation.id) ?? this.locations[0]
 
 		for (const type of dropdownOptions.transform('PLATE_SOLVER')) {
 			this.plateSolvers.set(type, preference.plateSolverRequest(type).get())
@@ -63,60 +65,43 @@ export class SettingsComponent {
 		}
 
 		Object.assign(this.cameraCaptureNamingFormat, preference.cameraCaptureNamingFormatPreference.get(this.cameraCaptureNamingFormat))
-	}
 
-	addLocation() {
-		return this.showLocation(structuredClone(EMPTY_LOCATION))
+		this.locationChangeSubscription = this.locationChangePublisher.pipe(debounceTime(2000)).subscribe((location) => {
+			return this.electron.send('LOCATION.CHANGED', location)
+		})
 	}
 
-	editLocation() {
-		return this.showLocation(this.location)
+	ngOnDestroy() {
+		this.locationChangeSubscription?.unsubscribe()
 	}
 
-	private async showLocation(location: Location) {
-		const result = await this.prime.open(LocationDialog, { header: 'Location', data: location })
-
-		if (result) {
-			const index = this.locations.findIndex((e) => e.id === result.id)
-
-			if (result.id === 0) {
-				result.id = Date.now()
-			}
-
-			if (index >= 0) {
-				Object.assign(this.locations[index], result)
-				this.location = this.locations[index]
-			} else {
-				this.locations.push(result)
-				this.location = result
-			}
-
-			this.preference.locations.set(this.locations)
-			this.preference.selectedLocation.set(this.location)
-
-			await this.electron.send('LOCATION.CHANGED', this.location)
-		}
+	addLocation() {
+		const location = structuredClone(EMPTY_LOCATION)
+		location.id = +new Date()
+		this.locations.push(location)
+		this.location = location
+		this.save()
+		this.locationChangePublisher.next(this.location)
 	}
 
-	async deleteLocation() {
+	deleteLocation() {
 		if (this.locations.length > 1) {
 			const index = this.locations.findIndex((e) => e.id === this.location.id)
 
 			if (index >= 0) {
 				this.locations.splice(index, 1)
 				this.location = this.locations[0]!
 
-				this.preference.locations.set(this.locations)
-				this.preference.selectedLocation.set(this.location)
-
-				await this.electron.send('LOCATION.CHANGED', this.location)
+				this.save()
+				this.locationChangePublisher.next(this.location)
 			}
 		}
 	}
 
 	locationChanged() {
-		this.preference.selectedLocation.set(this.location)
-		return this.electron.send('LOCATION.CHANGED', this.location)
+		console.log(this.locations)
+		this.save()
+		this.locationChangePublisher.next(this.location)
 	}
 
 	resetCameraCaptureNamingFormat(type: FrameType) {
@@ -125,6 +110,11 @@ export class SettingsComponent {
 	}
 
 	save() {
+		if (this.location.name) {
+			this.preference.locations.set(this.locations)
+			this.preference.selectedLocation.set(this.location)
+		}
+
 		for (const type of this.dropdownOptions.transform('PLATE_SOLVER')) {
 			this.preference.plateSolverRequest(type).set(this.plateSolvers.get(type))
 		}

desktop/src/shared/components/map/map.component.ts

@@ -22,7 +22,7 @@ export class MapComponent implements AfterViewInit, OnChanges {
 	@Output()
 	readonly longitudeChange = new EventEmitter<number>()
 
-	private map!: L.Map
+	private map?: L.Map
 	private marker?: L.Marker
 
 	private readonly markerIcon = L.icon({
@@ -59,17 +59,21 @@ export class MapComponent implements AfterViewInit, OnChanges {
 	}
 
 	ngOnChanges() {
-		const coordinate: L.LatLngLiteral = { lat: this.latitude, lng: this.longitude }
-		this.map.setView(coordinate)
-		this.updateMarker(coordinate)
+		if (this.map) {
+			const coordinate: L.LatLngLiteral = { lat: this.latitude, lng: this.longitude }
+			this.map.setView(coordinate)
+			this.updateMarker(coordinate)
+		}
 	}
 
 	refresh() {
-		this.map.invalidateSize()
+		this.map?.invalidateSize()
 	}
 
 	private updateMarker(coordinate: L.LatLngExpression) {
-		this.marker?.remove()
-		this.marker = new L.Marker(coordinate, { icon: this.markerIcon }).addTo(this.map)
+		if (this.map) {
+			this.marker?.remove()
+			this.marker = new L.Marker(coordinate, { icon: this.markerIcon }).addTo(this.map)
+		}
 	}
 }

desktop/src/shared/dialogs/location/location.dialog.html

@@ -4,7 +4,8 @@
 			<input
 				pInputText
 				class="p-inputtext-sm border-0 w-full"
-				[(ngModel)]="location.name" />
+				[(ngModel)]="location.name"
+				(ngModelChange)="locationChanged()" />
 			<label>Name</label>
 		</p-floatLabel>
 	</div>
@@ -17,6 +18,7 @@
 				[min]="-720"
 				[max]="720"
 				[(ngModel)]="location.offsetInMinutes"
+				(ngModelChange)="locationChanged()"
 				[showButtons]="true"
 				[allowEmpty]="false"
 				scrollableNumber />
@@ -32,6 +34,7 @@
 				[min]="-1000"
 				[max]="10000"
 				[(ngModel)]="location.elevation"
+				(ngModelChange)="locationChanged()"
 				[showButtons]="true"
 				[allowEmpty]="false"
 				scrollableNumber />
@@ -47,6 +50,7 @@
 				[max]="90"
 				[maxFractionDigits]="5"
 				[(ngModel)]="location.latitude"
+				(ngModelChange)="locationChanged()"
 				[allowEmpty]="false"
 				scrollableNumber />
 			<label>Latitude</label>
@@ -61,6 +65,7 @@
 				[max]="180"
 				[maxFractionDigits]="5"
 				[(ngModel)]="location.longitude"
+				(ngModelChange)="locationChanged()"
 				[allowEmpty]="false"
 				scrollableNumber />
 			<label>Longitude</label>
@@ -70,10 +75,14 @@
 		<neb-map
 			#map
 			[(latitude)]="location.latitude"
-			[(longitude)]="location.longitude" />
+			(latitudeChange)="locationChanged()"
+			[(longitude)]="location.longitude"
+			(longitudeChange)="locationChanged()" />
 	</div>
 </div>
-<div class="p-dialog-footer px-0">
+<div
+	*ngIf="isDialog"
+	class="p-dialog-footer px-0">
 	<p-button
 		[disabled]="!location.name"
 		icon="mdi mdi-check"

desktop/src/shared/dialogs/location/location.dialog.ts

@@ -1,30 +1,47 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, Input, Optional, Output, ViewChild } from '@angular/core'
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'
 import { MapComponent } from '../../components/map/map.component'
 import { EMPTY_LOCATION, Location } from '../../types/atlas.types'
 
 @Component({
+	selector: 'neb-location',
 	templateUrl: './location.dialog.html',
 	styleUrls: ['./location.dialog.scss'],
 })
 export class LocationDialog implements AfterViewInit {
 	@ViewChild('map')
 	private readonly map!: MapComponent
 
-	readonly location: Location
+	@Input()
+	readonly location!: Location
+
+	@Output()
+	readonly locationChange = new EventEmitter<Location>()
+
+	get isDialog() {
+		return !!this.dialogRef
+	}
 
 	constructor(
-		private readonly dialogRef: DynamicDialogRef,
-		config: DynamicDialogConfig<Location>,
+		@Optional() private readonly dialogRef?: DynamicDialogRef,
+		@Optional() config?: DynamicDialogConfig<Location>,
 	) {
-		this.location = config.data ?? structuredClone(EMPTY_LOCATION)
+		if (config) {
+			this.location = config.data ?? structuredClone(EMPTY_LOCATION)
+		}
 	}
 
 	ngAfterViewInit() {
 		this.map.refresh()
 	}
 
 	save() {
-		this.dialogRef.close(this.location)
+		this.dialogRef?.close(this.location)
+	}
+
+	locationChanged() {
+		if (!this.isDialog) {
+			this.locationChange.emit(this.location)
+		}
 	}
 }

desktop/src/shared/services/browser-window.service.ts

@@ -129,7 +129,7 @@ export class BrowserWindowService {
 	}
 
 	openSettings(preference: WindowPreference = {}) {
-		Object.assign(preference, { icon: 'settings', width: 350, height: 450, autoResizable: false })
+		Object.assign(preference, { icon: 'settings', width: 320, height: 450, minHeight: 350 })
 		return this.openWindow({ preference, id: 'settings', path: 'settings' })
 	}