Skip to content

Commit

Permalink
autopilot console alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@panaaj
panaaj committed Jan 9, 2025
1 parent 3e6e1ca commit 5d1a182
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 32 deletions.
3 changes: 2 additions & 1 deletion src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,7 +734,8 @@
</div>

<!-- Autopilot console-->
@if(app.data.autopilot.hasApi) {
@if(app.data.autopilot.hasApi &&
app.data.vessels.self.autopilot.default) {
<div class="buttonPanelItem">
<button
mat-mini-fab
Expand Down
3 changes: 2 additions & 1 deletion src/app/modules/autopilot/autopilot.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
.autopilot-console .content .lcd{
padding: 5px 0;
color:black;
margin: 0 15px;
}

.autopilot-console .content .dial-text {
Expand All @@ -51,7 +52,7 @@
}

.autopilot-console .content .dial-text-value {
font-size: 40pt;
font-size: 37pt;
font-weight: 500;
}

Expand Down
153 changes: 123 additions & 30 deletions src/app/modules/autopilot/autopilot.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,44 @@ import { SKStreamFacade } from 'src/app/modules';
</div>
<div class="lcd">
<div style="padding: 5px 0;display: flex;">
<div class="dial-text-title">Target</div>
<div class="dial-text-title">
@if(app.data.vessels.self.autopilot.default) {
<span>Target</span>
} @else {
<span>No Pilot</span>
}
</div>
</div>
<div class="dial-text">
<div class="dial-text-value">
{{
@if(app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line') {
<span>{{
formatTargetValue(app.data.vessels.self.autopilot.target)
}}&deg;
}}</span>
} @else {
<span>--</span>
} &deg;
</div>
</div>
<div style="padding: 10px 0;display: flex;">
<div class="dial-text-title">
{{ app.data.vessels.self.autopilot.mode }}
@if(app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line') {
<span>{{ app.data.vessels.self.autopilot.state }}</span>
} @else {
<span>--</span>
}
</div>
<div class="dial-text-title">
{{ app.data.vessels.self.autopilot.state }}
@if(app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line') {
<span>{{ app.data.vessels.self.autopilot.mode }}</span>
} @else {
<span>--</span>
}
</div>
</div>
</div>
Expand All @@ -96,13 +117,21 @@ import { SKStreamFacade } from 'src/app/modules';
<button
class="button-secondary"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="dodgeAdjust(-10)"
>
&lt;&lt;</button
>&nbsp;
<button
class="button-toolbar"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="dodgeAdjust(-1)"
>
&lt;
Expand All @@ -113,13 +142,21 @@ import { SKStreamFacade } from 'src/app/modules';
<button
class="button-toolbar"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="dodgeAdjust(1)"
>
&gt;</button
>&nbsp;
<button
class="button-secondary"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="dodgeAdjust(10)"
>
&gt;&gt;
Expand All @@ -132,13 +169,21 @@ import { SKStreamFacade } from 'src/app/modules';
<button
class="button-secondary"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="targetAdjust(-10)"
>
-10</button
>&nbsp;
<button
class="button-toolbar"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="targetAdjust(-1)"
>
-1
Expand All @@ -149,13 +194,21 @@ import { SKStreamFacade } from 'src/app/modules';
<button
class="button-toolbar"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="targetAdjust(1)"
>
+1</button
>&nbsp;
<button
class="button-secondary"
mat-mini-fab
[disabled]="
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line'
"
(click)="targetAdjust(10)"
>
+10
Expand All @@ -172,7 +225,8 @@ import { SKStreamFacade } from 'src/app/modules';
(click)="toggleEngaged()"
[disabled]="
!app.data.autopilot.hasApi ||
app.data.vessels.self.autopilot.state === 'offline' ||
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line' ||
!app.data.vessels.self.autopilot.state
"
[ngClass]="{
Expand All @@ -191,7 +245,8 @@ import { SKStreamFacade } from 'src/app/modules';
[matMenuTriggerFor]="modemenu"
[disabled]="
!app.data.autopilot.hasApi ||
app.data.vessels.self.autopilot.state === 'offline' ||
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line' ||
!app.data.vessels.self.autopilot.state
"
>
Expand All @@ -210,7 +265,8 @@ import { SKStreamFacade } from 'src/app/modules';
}"
[disabled]="
!app.data.autopilot.hasApi ||
app.data.vessels.self.autopilot.state === 'offline' ||
!app.data.vessels.self.autopilot.default ||
app.data.vessels.self.autopilot.state === 'off-line' ||
!app.data.vessels.self.autopilot.state
"
mat-raised-button
Expand Down Expand Up @@ -271,6 +327,7 @@ export class AutopilotComponent {
() => {
this.autopilotOptions = { modes: [], states: [] };
this.app.data.autopilot.hasApi = false;
this.app.showMessage('No autopilot providers found!');
}
);
}
Expand All @@ -289,8 +346,12 @@ export class AutopilotComponent {
let msg = `Error setting Autopilot state!\n`;
if (error.status === 403) {
msg += 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
this.app.showAlert(`Error (${error.status}):`, msg);
}
);
}
Expand All @@ -308,8 +369,15 @@ export class AutopilotComponent {
() => {
this.app.debug(`Target adjusted: ${value} deg.`);
},
(err: HttpErrorResponse) => {
this.app.debug(err);
(error: HttpErrorResponse) => {
if (error.status === 403) {
const msg = 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
}
);
}
Expand All @@ -322,8 +390,15 @@ export class AutopilotComponent {
() => {
this.app.debug(`Set dodge mode.`);
},
(err: HttpErrorResponse) => {
this.app.debug(err);
(error: HttpErrorResponse) => {
if (error.status === 403) {
const msg = 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
}
);
} else {
Expand All @@ -333,8 +408,15 @@ export class AutopilotComponent {
() => {
this.app.debug(`Clear dodge mode.`);
},
(err: HttpErrorResponse) => {
this.app.debug(err);
(error: HttpErrorResponse) => {
if (error.status === 403) {
const msg = 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
}
);
}
Expand All @@ -353,24 +435,19 @@ export class AutopilotComponent {
() => {
this.app.debug(`Dodge port / starboard: ${value} deg.`);
},
(err: HttpErrorResponse) => {
this.app.debug(err);
(error: HttpErrorResponse) => {
if (error.status === 403) {
const msg = 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
}
);
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
dragEventHandler(e: any, type: string) {
this.app.debug(
'e:',
e,
'type:',
type,
e.event.srcElement.clientLeft,
e.event.srcElement.clientTop
);
}

setMode(mode: string) {
if (mode) {
// autopilot mode
Expand All @@ -384,13 +461,29 @@ export class AutopilotComponent {
let msg = `Error setting Autopilot mode!\n`;
if (error.status === 403) {
msg += 'Unauthorised: Please login.';
this.app.showAlert(`Error (${error.status}):`, msg);
} else {
this.app.showMessage(
error.error?.message ?? 'Device returned an error!'
);
}
this.app.showAlert(`Error (${error.status}):`, msg);
}
);
}
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
dragEventHandler(e: any, type: string) {
this.app.debug(
'e:',
e,
'type:',
type,
e.event.srcElement.clientLeft,
e.event.srcElement.clientTop
);
}

formatTargetValue(value: number) {
if (typeof value === 'number') {
return Convert.radiansToDegrees(value)?.toFixed(1);
Expand Down

0 comments on commit 5d1a182

Please sign in to comment.