[desktop]: Add auxiliary button to Home

tiagohm · Aug 28, 2024 · 1666fe1 · 1666fe1
1 parent 55d0f80
commit 1666fe1
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 27 deletions.
diff --git a/desktop/home.png b/desktop/home.png
diff --git a/desktop/src/app/about/about.component.ts b/desktop/src/app/about/about.component.ts
@@ -49,6 +49,7 @@ export class AboutComponent {
 		this.icons.push({ link: `${FLAT_ICON_URL}/calibration_2364169`, name: 'Calibration', author: 'Freepik - Flaticon' })
 		this.icons.push({ link: `${FLAT_ICON_URL}/idea_3351801`, name: 'Bulb', author: 'Good Ware - Flaticon' })
 		this.icons.push({ link: `${FLAT_ICON_URL}/lid_7558659`, name: 'Lid', author: 'Nikita Golubev - Flaticon' })
+		this.icons.push({ link: `${FLAT_ICON_URL}/toolkit_4229807`, name: 'Toolkit', author: 'Freepik - Flaticon' })
 	}
 
 	private mapDependencies() {

diff --git a/desktop/src/app/home/home.component.html b/desktop/src/app/home/home.component.html
@@ -175,32 +175,44 @@
 		<div class="col-4 p-1">
 			<p-button
 				[text]="true"
-				[disabled]="!connected || !hasSwitch"
+				[disabled]="!connected || !hasAuxiliary"
+				(onClick)="toggleAuxiliary()"
 				styleClass="min-w-full w-full px-1 py-2 flex-column">
-				<img src="assets/icons/switch.png" />
-				<div class="mt-1 text-sm">Switch</div>
-			</p-button>
-		</div>
-		<div class="col-4 p-1">
-			<p-button
-				[text]="true"
-				[disabled]="!connected || !hasLightBox"
-				(onClick)="open('LIGHT_BOX')"
-				styleClass="min-w-full w-full px-1 py-2 flex-column">
-				<img src="assets/icons/light.png" />
-				<div class="mt-1 text-sm">Light Box</div>
-			</p-button>
-		</div>
-		<div class="col-4 p-1">
-			<p-button
-				[text]="true"
-				[disabled]="!connected || !hasDustCap"
-				(onClick)="open('DUST_CAP')"
-				styleClass="min-w-full w-full px-1 py-2 flex-column">
-				<img src="assets/icons/lid.png" />
-				<div class="mt-1 text-sm">Dust Cap</div>
+				<img src="assets/icons/toolkit.png" />
+				<div class="mt-1 text-sm">Auxiliary</div>
 			</p-button>
 		</div>
+		@if (preference.showAuxiliary && hasAuxiliary) {
+			<div class="col-4 p-1">
+				<p-button
+					[text]="true"
+					[disabled]="!connected || !hasSwitch"
+					styleClass="min-w-full w-full px-1 py-2 flex-column">
+					<img src="assets/icons/switch.png" />
+					<div class="mt-1 text-sm">Switch</div>
+				</p-button>
+			</div>
+			<div class="col-4 p-1">
+				<p-button
+					[text]="true"
+					[disabled]="!connected || !hasLightBox"
+					(onClick)="open('LIGHT_BOX')"
+					styleClass="min-w-full w-full px-1 py-2 flex-column">
+					<img src="assets/icons/light.png" />
+					<div class="mt-1 text-sm">Light Box</div>
+				</p-button>
+			</div>
+			<div class="col-4 p-1">
+				<p-button
+					[text]="true"
+					[disabled]="!connected || !hasDustCap"
+					(onClick)="open('DUST_CAP')"
+					styleClass="min-w-full w-full px-1 py-2 flex-column">
+					<img src="assets/icons/lid.png" />
+					<div class="mt-1 text-sm">Dust Cap</div>
+				</p-button>
+			</div>
+		}
 		<div class="col-4 p-1">
 			<p-button
 				[text]="true"

diff --git a/desktop/src/app/home/home.component.ts b/desktop/src/app/home/home.component.ts
@@ -106,10 +106,6 @@ export class HomeComponent implements AfterContentInit {
 		return this.domes.length > 0
 	}
 
-	get hasSwitch() {
-		return this.switches.length > 0
-	}
-
 	get hasRotator() {
 		return this.rotators.length > 0
 	}
@@ -118,6 +114,10 @@ export class HomeComponent implements AfterContentInit {
 		return this.guideOutputs.length > 0
 	}
 
+	get hasSwitch() {
+		return this.switches.length > 0
+	}
+
 	get hasLightBox() {
 		return this.lightBoxes.length > 0
 	}
@@ -126,6 +126,10 @@ export class HomeComponent implements AfterContentInit {
 		return this.dustCaps.length > 0
 	}
 
+	get hasAuxiliary() {
+		return this.hasSwitch || this.hasLightBox || this.hasDustCap
+	}
+
 	get hasGuider() {
 		return (this.hasCamera && this.hasMount) || this.hasGuideOutput
 	}
@@ -493,6 +497,11 @@ export class HomeComponent implements AfterContentInit {
 		return DeviceChooserComponent.handleDisconnectDevice(this.api, event.device, event.item)
 	}
 
+	protected toggleAuxiliary() {
+		this.preference.showAuxiliary = !this.preference.showAuxiliary
+		this.savePreference()
+	}
+
 	private async openDevice(type: DeviceType) {
 		this.deviceModel.length = 0
 

diff --git a/desktop/src/assets/icons/toolkit.png b/desktop/src/assets/icons/toolkit.png
diff --git a/desktop/src/shared/types/home.types.ts b/desktop/src/shared/types/home.types.ts
@@ -24,6 +24,7 @@ export interface ConnectionClosed {
 export interface HomePreference {
 	connections: ConnectionDetails[]
 	imagePath?: string
+	showAuxiliary: boolean
 }
 
 export interface HomeConnectionDialog {
@@ -52,6 +53,7 @@ export const DEFAULT_CONNECTION_DETAILS: ConnectionDetails = {
 
 export const DEFAULT_HOME_PREFERENCE: HomePreference = {
 	connections: [],
+	showAuxiliary: false,
 }
 
 export const DEFAULT_HOME_CONNECTION_DIALOG: HomeConnectionDialog = {