Skip to content

Commit 7b10c9f

Browse files
SkySailsSkySails
committed
style: format example
1 parent bba03cc commit 7b10c9f

File tree

5 files changed

+153
-152
lines changed

5 files changed

+153
-152
lines changed

‎example/gauge/Components/InterfaceSample.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,32 @@ import {
66
FSComponent,
77
Subject,
88
VNode,
9-
} from "@microsoft/msfs-sdk"
10-
import { NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface"
11-
import "./InterfaceSample.css"
12-
import { NavigationDataStatus } from "@navigraph/msfs-navigation-data-interface"
13-
import { AuthPage } from "./Pages/Auth/Auth"
14-
import { Dashboard } from "./Pages/Dashboard/Dashboard"
15-
import { TestPage } from "./Pages/Test/Test"
16-
import { InterfaceNavbar, InterfaceSwitch } from "./Utils"
9+
} from "@microsoft/msfs-sdk";
10+
import { NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface";
11+
import "./InterfaceSample.css";
12+
import { NavigationDataStatus } from "@navigraph/msfs-navigation-data-interface";
13+
import { AuthPage } from "./Pages/Auth/Auth";
14+
import { Dashboard } from "./Pages/Dashboard/Dashboard";
15+
import { TestPage } from "./Pages/Test/Test";
16+
import { InterfaceNavbar, InterfaceSwitch } from "./Utils";
1717

1818
interface InterfaceSampleProps extends ComponentProps {
19-
bus: EventBus
19+
bus: EventBus;
2020
}
2121

2222
export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
23-
private readonly loadingRef = FSComponent.createRef<HTMLDivElement>()
24-
private readonly authContainerRef = FSComponent.createRef<HTMLDivElement>()
23+
private readonly loadingRef = FSComponent.createRef<HTMLDivElement>();
24+
private readonly authContainerRef = FSComponent.createRef<HTMLDivElement>();
2525

26-
private readonly mainPageIndex = Subject.create(0)
27-
private readonly databaseInfo = Subject.create<NavigationDataStatus | null>(null)
26+
private readonly mainPageIndex = Subject.create(0);
27+
private readonly databaseInfo = Subject.create<NavigationDataStatus | null>(null);
2828

29-
private navigationDataInterface: NavigraphNavigationDataInterface
29+
private navigationDataInterface: NavigraphNavigationDataInterface;
3030

3131
constructor(props: InterfaceSampleProps) {
32-
super(props)
32+
super(props);
3333

34-
this.navigationDataInterface = new NavigraphNavigationDataInterface()
34+
this.navigationDataInterface = new NavigraphNavigationDataInterface();
3535
}
3636

3737
public render(): VNode {
@@ -72,21 +72,21 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
7272
</div>
7373
</div>
7474
</>
75-
)
75+
);
7676
}
7777

7878
public onAfterRender(node: VNode): void {
79-
super.onAfterRender(node)
79+
super.onAfterRender(node);
8080

8181
// Populate status when ready
8282
this.navigationDataInterface.onReady(async () => {
83-
const activePackage = await this.navigationDataInterface.get_navigation_data_install_status()
83+
const activePackage = await this.navigationDataInterface.get_navigation_data_install_status();
8484

85-
this.databaseInfo.set(activePackage)
85+
this.databaseInfo.set(activePackage);
8686

8787
// show the auth container
88-
this.authContainerRef.instance.style.display = "block"
89-
this.loadingRef.instance.style.display = "none"
90-
})
88+
this.authContainerRef.instance.style.display = "block";
89+
this.loadingRef.instance.style.display = "none";
90+
});
9191
}
9292
}

‎example/gauge/Components/Pages/Auth/Auth.tsx‎

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,96 @@
1-
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk"
1+
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk";
22
import {
33
DownloadProgressPhase,
44
NavigationDataStatus,
55
NavigraphEventType,
66
NavigraphNavigationDataInterface,
7-
} from "@navigraph/msfs-navigation-data-interface"
8-
import { CancelToken } from "navigraph/auth"
9-
import { packages } from "../../../Lib/navigraph"
10-
import { AuthService } from "../../../Services/AuthService"
11-
import { Dropdown } from "../../Dropdown"
7+
} from "@navigraph/msfs-navigation-data-interface";
8+
import { CancelToken } from "navigraph/auth";
9+
import { packages } from "../../../Lib/navigraph";
10+
import { AuthService } from "../../../Services/AuthService";
11+
import { Dropdown } from "../../Dropdown";
1212

1313
interface AuthPageProps extends ComponentProps {
14-
setDatabaseInfo: (value: NavigationDataStatus) => void
15-
navigationDataInterface: NavigraphNavigationDataInterface
14+
setDatabaseInfo: (value: NavigationDataStatus) => void;
15+
navigationDataInterface: NavigraphNavigationDataInterface;
1616
}
1717

1818
export class AuthPage extends DisplayComponent<AuthPageProps> {
19-
private readonly textRef = FSComponent.createRef<HTMLDivElement>()
20-
private readonly loginButtonRef = FSComponent.createRef<HTMLButtonElement>()
21-
private readonly navigationDataTextRef = FSComponent.createRef<HTMLDivElement>()
22-
private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>()
23-
private readonly dropdownRef = FSComponent.createRef<Dropdown>()
24-
private readonly downloadButtonRef = FSComponent.createRef<HTMLButtonElement>()
19+
private readonly textRef = FSComponent.createRef<HTMLDivElement>();
20+
private readonly loginButtonRef = FSComponent.createRef<HTMLButtonElement>();
21+
private readonly navigationDataTextRef = FSComponent.createRef<HTMLDivElement>();
22+
private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>();
23+
private readonly dropdownRef = FSComponent.createRef<Dropdown>();
24+
private readonly downloadButtonRef = FSComponent.createRef<HTMLButtonElement>();
2525

26-
private cancelSource = CancelToken.source()
26+
private cancelSource = CancelToken.source();
2727

2828
constructor(props: AuthPageProps) {
29-
super(props)
29+
super(props);
3030

3131
this.props.navigationDataInterface.onEvent(NavigraphEventType.DownloadProgress, data => {
3232
switch (data.phase) {
3333
case DownloadProgressPhase.Downloading:
34-
this.displayMessage("Downloading navigation data...")
35-
break
34+
this.displayMessage("Downloading navigation data...");
35+
break;
3636
case DownloadProgressPhase.Cleaning:
37-
if (!data.deleted) return
38-
this.displayMessage(`Cleaning destination directory. ${data.deleted} files deleted so far`)
39-
break
37+
if (!data.deleted) return;
38+
this.displayMessage(`Cleaning destination directory. ${data.deleted} files deleted so far`);
39+
break;
4040
case DownloadProgressPhase.Extracting: {
4141
// Ensure non-null
42-
if (!data.unzipped || !data.total_to_unzip) return
43-
const percent = Math.round((data.unzipped / data.total_to_unzip) * 100)
44-
this.displayMessage(`Unzipping files... ${percent}% complete`)
45-
break
42+
if (!data.unzipped || !data.total_to_unzip) return;
43+
const percent = Math.round((data.unzipped / data.total_to_unzip) * 100);
44+
this.displayMessage(`Unzipping files... ${percent}% complete`);
45+
break;
4646
}
4747
}
48-
})
48+
});
4949
}
5050

5151
onAfterRender(node: VNode): void {
52-
super.onAfterRender(node)
52+
super.onAfterRender(node);
5353

54-
this.loginButtonRef.instance.addEventListener("click", () => this.handleClick())
55-
this.downloadButtonRef.instance.addEventListener("click", () => this.handleDownloadClick())
54+
this.loginButtonRef.instance.addEventListener("click", () => this.handleClick());
55+
this.downloadButtonRef.instance.addEventListener("click", () => this.handleDownloadClick());
5656

5757
AuthService.user.sub(user => {
5858
if (user) {
59-
this.qrCodeRef.instance.src = ""
60-
this.qrCodeRef.instance.style.display = "none"
61-
this.loginButtonRef.instance.textContent = "Log out"
62-
this.textRef.instance.textContent = `Welcome, ${user.preferred_username}`
63-
this.displayMessage("")
59+
this.qrCodeRef.instance.src = "";
60+
this.qrCodeRef.instance.style.display = "none";
61+
this.loginButtonRef.instance.textContent = "Log out";
62+
this.textRef.instance.textContent = `Welcome, ${user.preferred_username}`;
63+
this.displayMessage("");
6464

65-
this.handleLogin()
65+
this.handleLogin();
6666
} else {
67-
this.loginButtonRef.instance.textContent = "Sign in"
68-
this.textRef.instance.textContent = "Not logged in"
67+
this.loginButtonRef.instance.textContent = "Sign in";
68+
this.textRef.instance.textContent = "Not logged in";
6969
}
70-
}, true)
70+
}, true);
7171
}
7272

7373
private async handleClick() {
7474
try {
7575
if (AuthService.getUser()) {
76-
await AuthService.signOut()
76+
await AuthService.signOut();
7777
} else {
78-
this.cancelSource = CancelToken.source() // Reset any previous cancellations
79-
this.displayMessage("Authenticating.. Scan code (or click it) to sign in")
78+
this.cancelSource = CancelToken.source(); // Reset any previous cancellations
79+
this.displayMessage("Authenticating.. Scan code (or click it) to sign in");
8080
await AuthService.signIn(p => {
8181
if (p) {
82-
this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${p.verification_uri_complete}`
83-
this.qrCodeRef.instance.style.display = "block"
82+
this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${p.verification_uri_complete}`;
83+
this.qrCodeRef.instance.style.display = "block";
8484
this.qrCodeRef.instance.onclick = () => {
85-
OpenBrowser(p.verification_uri_complete)
86-
}
85+
OpenBrowser(p.verification_uri_complete);
86+
};
8787
}
88-
}, this.cancelSource.token)
88+
}, this.cancelSource.token);
8989
}
9090
} catch (err) {
91-
this.qrCodeRef.instance.style.display = "none"
92-
if (err instanceof Error) this.displayError(err.message)
93-
else this.displayError(`Unknown error: ${String(err)}`)
91+
this.qrCodeRef.instance.style.display = "none";
92+
if (err instanceof Error) this.displayError(err.message);
93+
else this.displayError(`Unknown error: ${String(err)}`);
9494
}
9595
}
9696

@@ -100,44 +100,44 @@ export class AuthPage extends DisplayComponent<AuthPageProps> {
100100
.listPackages()
101101
.then(pkgs => {
102102
for (const pkg of pkgs) {
103-
this.dropdownRef.instance.addDropdownItem(pkg.format, pkg.format)
103+
this.dropdownRef.instance.addDropdownItem(pkg.format, pkg.format);
104104
}
105105
})
106-
.catch(e => console.error(e))
106+
.catch(e => console.error(e));
107107
}
108108

109109
private async handleDownloadClick() {
110110
try {
111111
if (!this.props.navigationDataInterface.getIsInitialized())
112-
throw new Error("Navigation data interface not initialized")
112+
throw new Error("Navigation data interface not initialized");
113113

114-
const format = this.dropdownRef.instance.getNavigationDataFormat()
115-
if (!format) throw new Error("Unable to fetch package: No navigation data format has been selected")
114+
const format = this.dropdownRef.instance.getNavigationDataFormat();
115+
if (!format) throw new Error("Unable to fetch package: No navigation data format has been selected");
116116

117117
// Get default package for client
118-
const pkg = await packages.getPackage(format)
118+
const pkg = await packages.getPackage(format);
119119

120120
// Download navigation data to work dir and set active
121-
await this.props.navigationDataInterface.download_navigation_data(pkg.file.url)
121+
await this.props.navigationDataInterface.download_navigation_data(pkg.file.url);
122122

123123
// Update navigation data status
124-
this.props.setDatabaseInfo(await this.props.navigationDataInterface.get_navigation_data_install_status())
124+
this.props.setDatabaseInfo(await this.props.navigationDataInterface.get_navigation_data_install_status());
125125

126-
this.displayMessage("Navigation data downloaded")
126+
this.displayMessage("Navigation data downloaded");
127127
} catch (err) {
128-
if (err instanceof Error) this.displayError(err.message)
129-
else this.displayError(`Unknown error: ${String(err)}`)
128+
if (err instanceof Error) this.displayError(err.message);
129+
else this.displayError(`Unknown error: ${String(err)}`);
130130
}
131131
}
132132

133133
private displayMessage(message: string) {
134-
this.navigationDataTextRef.instance.textContent = message
135-
this.navigationDataTextRef.instance.style.color = "white"
134+
this.navigationDataTextRef.instance.textContent = message;
135+
this.navigationDataTextRef.instance.style.color = "white";
136136
}
137137

138138
private displayError(error: string) {
139-
this.navigationDataTextRef.instance.textContent = error
140-
this.navigationDataTextRef.instance.style.color = "red"
139+
this.navigationDataTextRef.instance.textContent = error;
140+
this.navigationDataTextRef.instance.style.color = "red";
141141
}
142142

143143
render(): VNode {
@@ -161,6 +161,6 @@ export class AuthPage extends DisplayComponent<AuthPageProps> {
161161
</div>
162162
</div>
163163
</div>
164-
)
164+
);
165165
}
166166
}

‎example/gauge/Components/Pages/Dashboard/Dashboard.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk"
2-
import { NavigationDataStatus, NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface"
1+
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk";
2+
import { NavigationDataStatus, NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface";
33

44
interface DashboardProps extends ComponentProps {
5-
databaseInfo: Subscribable<NavigationDataStatus | null>
6-
interface: NavigraphNavigationDataInterface
5+
databaseInfo: Subscribable<NavigationDataStatus | null>;
6+
interface: NavigraphNavigationDataInterface;
77
}
88

99
export class Dashboard extends DisplayComponent<DashboardProps> {
@@ -15,12 +15,12 @@ export class Dashboard extends DisplayComponent<DashboardProps> {
1515
<ActiveDatabase databaseInfo={this.props.databaseInfo} />
1616
</div>
1717
</div>
18-
)
18+
);
1919
}
2020
}
2121

2222
interface ActiveDatabaseProps extends ComponentProps {
23-
databaseInfo: Subscribable<NavigationDataStatus | null>
23+
databaseInfo: Subscribable<NavigationDataStatus | null>;
2424
// : MappedSubscribable<boolean>
2525
}
2626

@@ -62,6 +62,6 @@ class ActiveDatabase extends DisplayComponent<ActiveDatabaseProps> {
6262
</div>
6363
</div>
6464
</div>
65-
)
65+
);
6666
}
6767
}

0 commit comments

Comments
 (0)