feat: made theming nicer, trying to work out why the database won't show

Author: ZigTag

examples/gauge/Components/InterfaceSample.tsx

@@ -1,4 +1,5 @@
 import {
+  ArraySubject,
   ComponentProps,
   DisplayComponent,
   EventBus,
@@ -19,8 +20,10 @@ import { AuthService } from "../Services/AuthService"
 import { Dropdown } from "./Dropdown"
 import { Input } from "./Input"
 import "./InterfaceSample.css"
+import { AuthPage } from "./Pages/Auth/Auth"
 import { Dashboard } from "./Pages/Dashboard/Dashboard"
-import { Button, InterfaceNavbar, InterfaceSwitch } from "./Utils"
+import { TestPage } from "./Pages/Test/Test"
+import { InterfaceNavbar, InterfaceSwitch } from "./Utils"
 
 interface InterfaceSampleProps extends ComponentProps {
   bus: EventBus
@@ -43,6 +46,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly authContainerRef = FSComponent.createRef<HTMLDivElement>()
 
   private readonly activeDatabase = Subject.create<PackageInfo | null>(null)
+  private readonly databases = Subject.create<PackageInfo[]>([])
   private readonly mainPageIndex = Subject.create(0)
 
   private cancelSource = CancelToken.source()
@@ -94,12 +98,6 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
     )
   }
 
-  private readonly buttons: [number, string][] = [
-    [0, "Page 1"],
-    [1, "Page 2"],
-    [2, "Page 3"],
-  ]
-
   public render(): VNode {
     return (
       <>
@@ -112,9 +110,9 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
             <div class="h-full w-[7rem]">
               <InterfaceNavbar
                 tabs={[
-                  [0, "Page 1"],
-                  [1, "Page 2"],
-                  [2, "Page 3"],
+                  [0, "Dash"],
+                  [1, "Test"],
+                  [2, "Auth"],
                 ]}
                 setActive={pageNumber => this.mainPageIndex.set(pageNumber)}
                 active={this.mainPageIndex}
@@ -124,9 +122,9 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
               class="bg-ng-background-400"
               active={this.mainPageIndex}
               pages={[
-                [0, <Dashboard />],
-                [1, <p class="text-xl">Hi2</p>],
-                [2, <p class="text-xl">Hi3</p>],
+                [0, <Dashboard databases={this.databases} />],
+                [1, <TestPage />],
+                [2, <AuthPage />],
               ]}
             />
           </div>
@@ -189,6 +187,13 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
     // Populate status when ready
     this.navigationDataInterface.onReady(async () => {
       this.activeDatabase.set(await this.navigationDataInterface.get_active_package())
+      this.navigationDataInterface
+        .list_available_packages(true)
+        .then(pkgs => {
+          this.databases.set(pkgs)
+        })
+        .catch(err => console.error(`Error setting databases: ${err}`))
+
       // show the auth container
       this.authContainerRef.instance.style.display = "block"
       this.loadingRef.instance.style.display = "none"

examples/gauge/Components/Pages/Auth/Auth.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps, DisplayComponent, FSComponent, VNode } from "@microsoft/msfs-sdk"
+
+interface AuthPageProps extends ComponentProps {}
+
+export class AuthPage extends DisplayComponent<AuthPageProps> {
+  render(): VNode {
+    return (
+      <div class="size-full flex flex-col">
+        <p class="mb-8 text-4xl">Authentication</p>
+      </div>
+    )
+  }
+}

examples/gauge/Components/Pages/Dashboard/Dashboard.tsx

@@ -1,9 +1,36 @@
 import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from "@microsoft/msfs-sdk"
+import { PackageInfo } from "@navigraph/msfs-navigation-data-interface"
 
-interface DashboardProps extends ComponentProps {}
+interface DashboardProps extends ComponentProps {
+  databases: Subscribable<PackageInfo[]>
+}
 
 export class Dashboard extends DisplayComponent<DashboardProps> {
   render(): VNode {
-    return <p class="text-3xl">Dashboard</p>
+    return (
+      <div class="size-full flex flex-col">
+        <p class="mb-8 text-4xl">Dashboard</p>
+        <div class="flex flex-row flex-grow flex-auto space-x-4">
+          <div class="w-1/3 flex flex-col">
+            <p class="text-2xl mb-4">Databases</p>
+            <div class="mt-2 flex-grow rounded-xl bg-ng-background-500">
+              {this.props.databases.map(val =>
+                val.map(pkgs => (
+                  <div class="p-2">
+                    <p class="text-lg">
+                      {pkgs.cycle.cycle} - {pkgs.cycle.format}
+                    </p>
+                  </div>
+                )),
+              )}
+            </div>
+          </div>
+          <div class="flex flex-col flex-grow">
+            <p class="text-2xl mb-4">Info</p>
+            <div class="mt-2 flex-grow rounded-xl bg-ng-background-500"></div>
+          </div>
+        </div>
+      </div>
+    )
   }
 }

examples/gauge/Components/Pages/Test/Test.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps, DisplayComponent, FSComponent, VNode } from "@microsoft/msfs-sdk"
+
+interface TestPageProps extends ComponentProps {}
+
+export class TestPage extends DisplayComponent<TestPageProps> {
+  render(): VNode {
+    return (
+      <div class="size-full flex flex-col">
+        <p class="mb-8 text-4xl">Test</p>
+      </div>
+    )
+  }
+}