[desktop]: Support Mount site setting

desktop/src/app/mount/mount.component.html

@@ -24,6 +24,11 @@
 				(action)="showRemoteControlDialog()"
 				icon="mdi mdi-remote-tv"
 				tooltip="Remote Control" />
+			<neb-button
+				[disabled]="!mount.connected"
+				(action)="showSiteDialog()"
+				icon="mdi mdi-earth"
+				tooltip="Site" />
 			<neb-button
 				[disabled]="!mount.connected"
 				(action)="showTimeDialog()"
@@ -386,6 +391,29 @@
 	</div>
 </p-dialog>
 
+<p-dialog
+	header="Site"
+	[modal]="true"
+	[draggable]="false"
+	[(visible)]="site.showDialog"
+	[style]="{ maxWidth: '82vw' }">
+	<div class="grid p-2">
+		<div class="col-12">
+			@if (site.showDialog) {
+				<neb-location
+					[location]="site.location"
+					[showNameAndOffset]="false" />
+			}
+		</div>
+	</div>
+	<ng-template pTemplate="footer">
+		<neb-button
+			icon="mdi mdi-check"
+			label="Apply"
+			(action)="siteApply()" />
+	</ng-template>
+</p-dialog>
+
 <p-dialog
 	header="Time (UTC)"
 	[modal]="true"

desktop/src/app/mount/mount.component.ts

@@ -10,7 +10,7 @@ import { ElectronService } from '../../shared/services/electron.service'
 import { PreferenceService } from '../../shared/services/preference.service'
 import { Tickable, Ticker } from '../../shared/services/ticker.service'
 import { BodyTabType, ComputedLocation, DEFAULT_COMPUTED_LOCATION } from '../../shared/types/atlas.types'
-import { DEFAULT_MOUNT, DEFAULT_MOUNT_PREFERENCE, DEFAULT_MOUNT_REMOTE_CONTROL_DIALOG, DEFAULT_MOUNT_TIME_DIALOG, Mount, MountRemoteControlProtocol, MountSlewDirection, TrackMode } from '../../shared/types/mount.types'
+import { DEFAULT_MOUNT, DEFAULT_MOUNT_PREFERENCE, DEFAULT_MOUNT_REMOTE_CONTROL_DIALOG, DEFAULT_MOUNT_SITE_DIALOG, DEFAULT_MOUNT_TIME_DIALOG, Mount, MountRemoteControlProtocol, MountSlewDirection, TrackMode } from '../../shared/types/mount.types'
 import { AppComponent } from '../app.component'
 
 @Component({
@@ -30,6 +30,7 @@ export class MountComponent implements AfterContentInit, OnDestroy, Tickable {
 	protected readonly preference = structuredClone(DEFAULT_MOUNT_PREFERENCE)
 	protected readonly currentComputedLocation = structuredClone(DEFAULT_COMPUTED_LOCATION)
 	protected readonly targetComputedLocation = structuredClone(DEFAULT_COMPUTED_LOCATION)
+	protected readonly site = structuredClone(DEFAULT_MOUNT_SITE_DIALOG)
 	protected readonly time = structuredClone(DEFAULT_MOUNT_TIME_DIALOG)
 
 	private readonly computeCoordinatePublisher = new Subject<void>()
@@ -337,6 +338,12 @@ export class MountComponent implements AfterContentInit, OnDestroy, Tickable {
 		this.remoteControl.showDialog = true
 	}
 
+	protected showSiteDialog() {
+		const { longitude, latitude, elevation } = this.mount
+		this.site.location = { ...this.site.location, longitude, latitude, elevation }
+		this.site.showDialog = true
+	}
+
 	protected showTimeDialog() {
 		const now = new Date()
 		this.time.offsetInMinutes = this.mount.offsetInMinutes
@@ -353,6 +360,10 @@ export class MountComponent implements AfterContentInit, OnDestroy, Tickable {
 		return this.api.mountTime(this.mount, this.time.dateTime, this.time.offsetInMinutes)
 	}
 
+	protected siteApply() {
+		return this.api.mountCoordinates(this.mount, this.site.location)
+	}
+
 	protected async startRemoteControl() {
 		await this.api.mountRemoteControlStart(this.mount, this.remoteControl.protocol, this.remoteControl.host, this.remoteControl.port)
 		this.remoteControl.controls = await this.api.mountRemoteControlList(this.mount)

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

@@ -8,40 +8,42 @@ import { MapComponent } from './map.component'
 		@let mLocation = location();
 
 		<div class="grid pt-2">
-			<div class="col-12">
-				<neb-input-text
-					label="Name"
-					[(value)]="mLocation.name"
-					(valueChange)="locationUpdated()" />
-			</div>
-			<div class="col-6">
-				<neb-input-number
-					label="UTC Offset (min)"
-					[min]="-720"
-					[max]="720"
-					[(value)]="mLocation.offsetInMinutes"
-					(valueChange)="locationUpdated()" />
-			</div>
-			<div class="col-6">
+			@if (showNameAndOffset()) {
+				<div class="col-7">
+					<neb-input-text
+						label="Name"
+						[(value)]="mLocation.name"
+						(valueChange)="locationUpdated()" />
+				</div>
+				<div class="col-5">
+					<neb-input-number
+						label="UTC Offset (min)"
+						[min]="-720"
+						[max]="720"
+						[(value)]="mLocation.offsetInMinutes"
+						(valueChange)="locationUpdated()" />
+				</div>
+			}
+			<div class="col-4">
 				<neb-input-number
-					label="Elevation (m)"
+					label="Elev. (m)"
 					[min]="-1000"
 					[max]="10000"
 					[(value)]="mLocation.elevation"
 					(valueChange)="locationUpdated()" />
 			</div>
-			<div class="col-6">
+			<div class="col-4">
 				<neb-input-number
-					label="Latitude"
+					label="Lat. (°)"
 					[min]="-90"
 					[max]="90"
 					[fractionDigits]="5"
 					[(value)]="mLocation.latitude"
 					(valueChange)="locationUpdated()" />
 			</div>
-			<div class="col-6">
+			<div class="col-4">
 				<neb-input-number
-					label="Longitude"
+					label="Long. (°)"
 					[min]="-180"
 					[max]="180"
 					[fractionDigits]="5"
@@ -61,11 +63,16 @@ import { MapComponent } from './map.component'
 })
 export class LocationComponent implements AfterViewInit {
 	readonly location = input.required<Location>()
+	readonly showNameAndOffset = input(true)
 	readonly update = output()
 
 	readonly map = viewChild.required<MapComponent>('map')
 
 	ngAfterViewInit() {
+		this.refreshMap()
+	}
+
+	refreshMap() {
 		this.map().refresh()
 	}
 

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnChanges, ViewEncapsulation, model, viewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, OnChanges, OnDestroy, ViewEncapsulation, model, viewChild } from '@angular/core'
 import * as L from 'leaflet'
 
 @Component({
@@ -17,11 +17,12 @@ import * as L from 'leaflet'
 	`,
 	encapsulation: ViewEncapsulation.None,
 })
-export class MapComponent implements AfterViewInit, OnChanges {
+export class MapComponent implements AfterViewInit, OnDestroy, OnChanges {
 	readonly latitude = model(0)
 	readonly longitude = model(0)
 
 	private readonly mapRef = viewChild.required<ElementRef<HTMLDivElement>>('map')
+	private resizeObserver?: ResizeObserver
 
 	private map?: L.Map
 	private marker?: L.Marker
@@ -36,7 +37,9 @@ export class MapComponent implements AfterViewInit, OnChanges {
 	})
 
 	ngAfterViewInit() {
-		this.map = L.map(this.mapRef().nativeElement, {
+		const hostElement = this.mapRef().nativeElement
+
+		this.map = L.map(hostElement, {
 			center: { lat: this.latitude(), lng: this.longitude() },
 			zoom: 5,
 			doubleClickZoom: false,
@@ -57,6 +60,17 @@ export class MapComponent implements AfterViewInit, OnChanges {
 		})
 
 		tiles.addTo(this.map)
+
+		this.resizeObserver = new ResizeObserver(() => {
+			this.refresh()
+		})
+
+		this.resizeObserver.observe(hostElement)
+	}
+
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect()
+		this.resizeObserver = undefined
 	}
 
 	ngOnChanges() {

desktop/src/shared/services/api.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core'
 import { DARVStart, TPPAStart } from '../types/alignment.types'
 import { extractDate, extractDateTime } from '../types/angular.types'
-import { Angle, BodyPosition, CloseApproach, ComputedLocation, DeepSkyObject, EarthSeasonDateTime, Location, MinorPlanet, MoonPhases, Satellite, SatelliteGroupType, SkyObjectSearchFilter, SkyObjectType, Twilight } from '../types/atlas.types'
+import { Angle, BodyPosition, CloseApproach, ComputedLocation, DeepSkyObject, EarthSeasonDateTime, GeographicCoordinate, Location, MinorPlanet, MoonPhases, Satellite, SatelliteGroupType, SkyObjectSearchFilter, SkyObjectType, Twilight } from '../types/atlas.types'
 import { AutoFocusRequest } from '../types/autofocus.type'
 import { CalibrationFrame } from '../types/calibration.types'
 import { Camera, CameraStartCapture } from '../types/camera.types'
@@ -186,6 +186,11 @@ export class ApiService {
 		return this.http.put<never>(`mounts/${mount.id}/datetime?${query}`)
 	}
 
+	mountCoordinates(mount: Mount, coordinate: GeographicCoordinate) {
+		const query = this.http.query({ ...coordinate })
+		return this.http.put<never>(`mounts/${mount.id}/coordinates?${query}`)
+	}
+
 	mountRemoteControlStart(mount: Mount, protocol: MountRemoteControlProtocol, host: string, port: number) {
 		const query = this.http.query({ protocol, host, port })
 		return this.http.put<never>(`mounts/${mount.id}/remote-control/start?${query}`)

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

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

desktop/src/shared/types/mount.types.ts

@@ -1,5 +1,5 @@
 import type { DropdownItem } from '../components/dropdown.component'
-import type { Angle, EquatorialCoordinate, GeographicCoordinate } from './atlas.types'
+import { DEFAULT_LOCATION, type Angle, type EquatorialCoordinate, type Location } from './atlas.types'
 import type { Device } from './device.types'
 import type { GPS } from './gps.types'
 import type { GuideOutput } from './guider.types'
@@ -67,8 +67,9 @@ export interface MountRemoteControlDialog {
 	controls: MountRemoteControl[]
 }
 
-export interface MountCoordinateDialog extends GeographicCoordinate<number> {
+export interface MountSiteDialog {
 	showDialog: boolean
+	location: Location
 }
 
 export interface MountTimeDialog {
@@ -133,6 +134,11 @@ export const DEFAULT_MOUNT_TIME_DIALOG: MountTimeDialog = {
 	offsetInMinutes: 0,
 }
 
+export const DEFAULT_MOUNT_SITE_DIALOG: MountSiteDialog = {
+	showDialog: false,
+	location: DEFAULT_LOCATION,
+}
+
 export const DEFAULT_MOUNT_PREFERENCE: MountPreference = {
 	targetCoordinateType: 'JNOW',
 	targetRightAscension: '00h00m00s',