feat(cherrypick): dfdv2 support

Author: ZigTag

examples/aircraft/PackageSources/NavigationData/cycle.json

@@ -1 +1 @@
-{"cycle":"2101","revision":"1","name":"Navigraph Avionics", "format": "dfd", "validityPeriod": "2021-01-25/2021-02-20"}
+{"cycle":"2401","revision":"1","name":"Navigraph Avionics", "format": "dfdv2", "validityPeriod": "2024-01-25/2024-02-21"}

examples/aircraft/PackageSources/NavigationData/e_dfd_2101.s3db

@@ -23,12 +23,8 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly loadingRef = FSComponent.createRef<HTMLDivElement>()
   private readonly authContainerRef = FSComponent.createRef<HTMLDivElement>()
 
-  private readonly activeDatabase = Subject.create<null>(null)
-  // private readonly databases = ArraySubject.create<PackageInfo>([])
-  // private readonly resetPackageList = Subject.create<boolean>(false)
   private readonly mainPageIndex = Subject.create(0)
-  // private readonly selectedDatabaseIndex = Subject.create(0)
-  private readonly selectedDatabase = Subject.create<NavigationDataStatus | null>(null)
+  private readonly databaseInfo = Subject.create<NavigationDataStatus | null>(null)
 
   private navigationDataInterface: NavigraphNavigationDataInterface
 
@@ -62,9 +58,15 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
               class="bg-ng-background-400"
               active={this.mainPageIndex}
               pages={[
-                [0, <Dashboard selectedDatabase={this.selectedDatabase} interface={this.navigationDataInterface} />],
+                [0, <Dashboard databaseInfo={this.databaseInfo} interface={this.navigationDataInterface} />],
                 [1, <TestPage interface={this.navigationDataInterface} />],
-                [2, <AuthPage navigationDataInterface={this.navigationDataInterface} />],
+                [
+                  2,
+                  <AuthPage
+                    navigationDataInterface={this.navigationDataInterface}
+                    setDatabaseInfo={value => this.databaseInfo.set(value)}
+                  />,
+                ],
               ]}
             />
           </div>
@@ -80,7 +82,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
     this.navigationDataInterface.onReady(async () => {
       const activePackage = await this.navigationDataInterface.get_navigation_data_install_status()
 
-      this.selectedDatabase.set(activePackage)
+      this.databaseInfo.set(activePackage)
 
       // show the auth container
       this.authContainerRef.instance.style.display = "block"

examples/aircraft/PackageSources/NavigationData/foo.txt

@@ -1,6 +1,7 @@
 import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk"
 import {
   DownloadProgressPhase,
+  NavigationDataStatus,
   NavigraphEventType,
   NavigraphNavigationDataInterface,
 } from "@navigraph/msfs-navigation-data-interface"
@@ -10,6 +11,7 @@ import { AuthService } from "../../../Services/AuthService"
 import { Dropdown } from "../../Dropdown"
 
 interface AuthPageProps extends ComponentProps {
+  setDatabaseInfo: (value: NavigationDataStatus) => void
   navigationDataInterface: NavigraphNavigationDataInterface
 }
 
@@ -119,7 +121,7 @@ export class AuthPage extends DisplayComponent<AuthPageProps> {
       await this.props.navigationDataInterface.download_navigation_data(pkg.file.url)
 
       // Update navigation data status
-      // this.props.setActiveDatabase(await this.props.navigationDataInterface.get_active_package())
+      this.props.setDatabaseInfo(await this.props.navigationDataInterface.get_navigation_data_install_status())
 
       this.displayMessage("Navigation data downloaded")
     } catch (err) {

examples/aircraft/PackageSources/NavigationData/ng_jeppesen_fwdfd_2401.s3db

@@ -2,7 +2,7 @@ import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } fr
 import { NavigationDataStatus, NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface"
 
 interface DashboardProps extends ComponentProps {
-  selectedDatabase: Subscribable<NavigationDataStatus | null>
+  databaseInfo: Subscribable<NavigationDataStatus | null>
   interface: NavigraphNavigationDataInterface
 }
 
@@ -12,15 +12,15 @@ export class Dashboard extends DisplayComponent<DashboardProps> {
       <div class="size-full flex flex-col">
         <p class="ml-2 mb-8 text-4xl">Dashboard</p>
         <div class="flex flex-row flex-grow flex-auto">
-          <ActiveDatabase selectedDatabase={this.props.selectedDatabase} />
+          <ActiveDatabase databaseInfo={this.props.databaseInfo} />
         </div>
       </div>
     )
   }
 }
 
 interface ActiveDatabaseProps extends ComponentProps {
-  selectedDatabase: Subscribable<NavigationDataStatus | null>
+  databaseInfo: Subscribable<NavigationDataStatus | null>
   // : MappedSubscribable<boolean>
 }
 
@@ -33,31 +33,31 @@ class ActiveDatabase extends DisplayComponent<ActiveDatabaseProps> {
           <div class="p-4 flex flex-col align-middle items-start flex-start space-y-6 vertical">
             <div class="flex flex-row space-x-2">
               <span class="text-2xl">Latest Cycle:</span>
-              <span class="text-xl text-gray-400">{this.props.selectedDatabase.map(s => s?.latestCycle ?? "N/A")}</span>
+              <span class="text-xl text-gray-400">{this.props.databaseInfo.map(s => s?.latestCycle ?? "N/A")}</span>
             </div>
             <div class="flex flex-col space-y-2">
               <p class="text-3xl">Bundled</p>
-              <p class="text-2xl text-gray-400">{this.props.selectedDatabase.map(s => s?.status ?? "N/A")}</p>
+              <p class="text-2xl text-gray-400">{this.props.databaseInfo.map(s => s?.status ?? "N/A")}</p>
             </div>
             <div class="flex flex-col space-y-2">
               <p class="text-3xl">Installed format</p>
               <p class="text-2xl text-gray-400">
-                {this.props.selectedDatabase.map(
+                {this.props.databaseInfo.map(
                   s => `${s?.installedFormat ?? "N/A"} revision ${s?.installedRevision ?? "N/A"}`,
                 )}
               </p>
             </div>
             <div class="flex flex-col space-y-2">
               <p class="text-3xl">Active path</p>
-              <p class="text-2xl text-gray-400">{this.props.selectedDatabase.map(s => s?.installedPath ?? "N/A")}</p>
+              <p class="text-2xl text-gray-400">{this.props.databaseInfo.map(s => s?.installedPath ?? "N/A")}</p>
             </div>
             <div class="flex flex-col space-y-2">
               <p class="text-3xl">Active cycle</p>
-              <p class="text-2xl text-gray-400">{this.props.selectedDatabase.map(s => s?.installedCycle ?? "N/A")}</p>
+              <p class="text-2xl text-gray-400">{this.props.databaseInfo.map(s => s?.installedCycle ?? "N/A")}</p>
             </div>
             <div class="flex flex-col space-y-2">
               <p class="text-3xl">Validity period</p>
-              <p class="text-2xl text-gray-400">{this.props.selectedDatabase.map(s => s?.validityPeriod ?? "N/A")}</p>
+              <p class="text-2xl text-gray-400">{this.props.databaseInfo.map(s => s?.validityPeriod ?? "N/A")}</p>
             </div>
           </div>
         </div>