fix: separate set active database

Author: pepperoni505

examples/gauge/Components/InterfaceSample.tsx

@@ -22,6 +22,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly dropdownRef = FSComponent.createRef<Dropdown>()
   private readonly downloadButtonRef = FSComponent.createRef<HTMLButtonElement>()
   private readonly executeButtonRef = FSComponent.createRef<HTMLButtonElement>()
+  private readonly setActiveButtonRef = FSComponent.createRef<HTMLButtonElement>()
   private readonly inputRef = FSComponent.createRef<HTMLInputElement>()
 
   private cancelSource = CancelToken.source()
@@ -33,13 +34,6 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
 
     this.navigationDataInterface = new NavigraphNavigationDataInterface()
 
-    this.navigationDataInterface.onReady(() => {
-      this.navigationDataInterface
-        .set_active_database("avionics_v2")
-        .then(() => console.info("WASM set active database"))
-        .catch(err => this.displayError(String(err)))
-    })
-
     this.navigationDataInterface.onEvent(NavigraphEventType.DownloadProgress, data => {
       switch (data.phase) {
         case DownloadProgressPhase.Downloading:
@@ -75,6 +69,9 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
             <div ref={this.downloadButtonRef} class="button">
               Download
             </div>
+            <div ref={this.setActiveButtonRef} class="button">
+              Set as Active
+            </div>
             <input ref={this.inputRef} type="text" id="sql" name="sql" value="ESSA" class="text-field" />
             <div ref={this.executeButtonRef} class="button">
               Execute SQL
@@ -106,6 +103,16 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
         .catch(e => console.error(e))
     })
 
+    this.setActiveButtonRef.instance.addEventListener("click", () => {
+      const format = this.dropdownRef.instance.getNavigationDataFormat()
+      if (!format) return
+      // This will only work if the database specified is a SQLite database
+      this.navigationDataInterface
+        .set_active_database(format)
+        .then(() => console.info("WASM set active database"))
+        .catch(err => this.displayError(String(err)))
+    })
+
     AuthService.user.sub(user => {
       if (user) {
         this.qrCodeRef.instance.src = ""
@@ -168,10 +175,6 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
       // Download navigation data to work dir
       await this.navigationDataInterface.download_navigation_data(pkg.file.url, pkg.format)
       this.displayMessage("Navigation data downloaded")
-
-      // Set active database to recently downloaded package
-      await this.navigationDataInterface.set_active_database(pkg.format)
-      console.info("WASM set active database")
     } catch (err) {
       if (err instanceof Error) this.displayError(err.message)
       else this.displayError(`Unknown error: ${String(err)}`)