feat: test page works

Author: ZigTag

examples/gauge/Components/Input.tsx

@@ -1,7 +1,18 @@
-import { ComponentProps, DisplayComponent, FSComponent, Subscribable, UUID, VNode } from "@microsoft/msfs-sdk"
+import {
+  ComponentProps,
+  DisplayComponent,
+  FSComponent,
+  Subscribable,
+  SubscribableUtils,
+  UUID,
+  VNode,
+} from "@microsoft/msfs-sdk"
+import { Button, InterfaceNavbarItemV2 } from "./Utils"
 
 interface InputProps extends ComponentProps {
-  value?: string
+  value: Subscribable<string>
+  setValue: (value: string) => void
+  default?: Subscribable<string> | string
   class?: string | Subscribable<string>
   textarea?: boolean
 }
@@ -10,13 +21,16 @@ export class Input extends DisplayComponent<InputProps> {
   private readonly inputId = UUID.GenerateUuid()
   private readonly inputRef = FSComponent.createRef<HTMLInputElement>()
 
-  get value() {
-    return this.inputRef.instance.value
-  }
-
   onAfterRender(node: VNode): void {
     super.onAfterRender(node)
 
+    this.props.value.map(val => (this.inputRef.instance.value = val))
+    SubscribableUtils.toSubscribable(this.props.default ?? "", true).map(val => {
+      this.inputRef.instance.placeholder = val
+    })
+
+    this.inputRef.instance.addEventListener("input", () => this.props.setValue(this.inputRef.instance.value ?? ""))
+
     this.inputRef.instance.onfocus = this.onInputFocus
     this.inputRef.instance.onblur = this.onInputBlur
   }
@@ -54,3 +68,32 @@ export class Input extends DisplayComponent<InputProps> {
     return <input ref={this.inputRef} {...this.getInputProps()} />
   }
 }
+
+interface CheckboxProps extends ComponentProps {
+  value: Subscribable<string>
+  setValue: (value: string) => void
+  default?: Subscribable<string> | string
+  class?: string
+}
+
+export class Checkbox extends DisplayComponent<CheckboxProps> {
+  private readonly isActive = this.props.value.map(val => (val == "true" ? true : false))
+
+  private onClick = () => {
+    this.props.setValue(this.isActive.get() ? "false" : "true")
+  }
+
+  render(): VNode {
+    return (
+      <InterfaceNavbarItemV2
+        content={""}
+        active={this.isActive}
+        class={`h-full flex-grow bg-white text-black flex items-center justify-center ${this.props.class ?? ""}`}
+        activeClass="!bg-green-400 !text-white"
+        setActive={() => this.onClick()}
+      >
+        <span class="text-4xl">{this.isActive.map(val => (val ? "✔" : "X"))}</span>
+      </InterfaceNavbarItemV2>
+    )
+  }
+}

examples/gauge/Components/InterfaceSample.tsx

@@ -72,7 +72,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
                     interface={this.navigationDataInterface}
                   />,
                 ],
-                [1, <TestPage />],
+                [1, <TestPage interface={this.navigationDataInterface} />],
                 [
                   2,
                   <AuthPage

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

@@ -71,7 +71,7 @@ export class Dashboard extends DisplayComponent<DashboardProps> {
           <div class="w-1/3 flex flex-col">
             <p class="ml-2 text-3xl mb-4">Databases</p>
             <div class="mt-2 flex-grow bg-ng-background-500 shadow-inner">
-              <div class="flex flex-col space-y-2">
+              <div class="flex flex-col space-y-2 overflow-auto">
                 <List
                   data={this.props.databases}
                   renderItem={(data, index) => this.displayItems(data as PackageInfo, index)}

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

@@ -8,7 +8,8 @@ import {
   VNode,
 } from "@microsoft/msfs-sdk"
 import { NavigraphNavigationDataInterface } from "@navigraph/msfs-navigation-data-interface"
-import { InterfaceNavbarItemV2, InterfaceSwitch } from "../../Utils"
+import { Checkbox, Input } from "../../Input"
+import { Button, InterfaceNavbarItemV2, InterfaceSwitch } from "../../Utils"
 
 interface TestPageProps extends ComponentProps {
   interface: NavigraphNavigationDataInterface
@@ -18,12 +19,13 @@ interface FunctionDescriptor {
   index: number
   arguments: string[]
   name: string
-  functionCallback: (input?: string, inputAlt?: string) => unknown
+  functionCallback: (input?: string, inputAlt?: string) => Promise<unknown>
 }
 
 interface InputState {
   active: boolean
   type: InputStateType
+  hint: string
 }
 
 enum InputStateType {
@@ -32,24 +34,10 @@ enum InputStateType {
 }
 
 export class TestPage extends DisplayComponent<TestPageProps> {
-  private readonly selectedFunction = Subject.create(0)
-  private readonly input1State = ObjectSubject.create<InputState>({
-    active: false,
-    type: InputStateType.String,
-  })
-  private readonly input2State = ObjectSubject.create<InputState>({
-    active: false,
-    type: InputStateType.String,
-  })
-
-  private strToBool(input?: string): boolean {
-    return input == "true" ? true : false
-  }
-
   private readonly functionList: FunctionDescriptor[] = [
     {
       index: 0,
-      arguments: ["url: string"],
+      arguments: ["url: string", "activate: bool"],
       name: "DownloadNavigationData",
       functionCallback: input => this.props.interface.download_navigation_data(input ?? ""),
     },
@@ -74,50 +62,101 @@ export class TestPage extends DisplayComponent<TestPageProps> {
     },
   ]
 
-  private readonly _generateInputs = this.selectedFunction.map(selectedFunction => {
-    const functionObj = this.functionList[selectedFunction]
+  private readonly input1 = Subject.create("")
+  private readonly input2 = Subject.create("")
+  private readonly output = Subject.create("")
+  private readonly selectedFunction = Subject.create(0)
+  private readonly selectedFunctionObj = this.selectedFunction.map(index => this.functionList[index])
+  private readonly input1State = ObjectSubject.create<InputState>({
+    active: false,
+    type: InputStateType.String,
+    hint: this.functionList[this.selectedFunction.get()].arguments[0] ?? "",
+  })
+  private readonly input2State = ObjectSubject.create<InputState>({
+    active: false,
+    type: InputStateType.String,
+    hint: this.functionList[this.selectedFunction.get()].arguments[1] ?? "",
+  })
 
-    const functionArgCount = functionObj.arguments.length
+  private doubleInputCss = MappedSubject.create(
+    ([input1, input2]) =>
+      `flex flex-row h-16 bg-ng-background-500 items-center p-2 ${input1.active && input2.active ? "space-x-2" : ""}`,
+    this.input1State,
+    this.input2State,
+  )
 
-    switch (functionArgCount) {
-      case 1: {
-        this.input1State.set("active", true)
-        this.input2State.set("active", false)
-        break
-      }
-      case 2: {
-        this.input1State.set("active", true)
-        this.input2State.set("active", true)
-        break
-      }
-      default: {
-        this.input1State.set("active", false)
-        this.input2State.set("active", false)
-        break
-      }
-    }
+  private strToBool(input?: string): boolean {
+    return input == "true" ? true : false
+  }
+
+  private handleFunction = () => {
+    const functionObj = this.selectedFunctionObj.get()
+    const input1 = this.input1.get()
+    const input2 = this.input2.get()
+
+    functionObj
+      .functionCallback(input1, input2)
+      .then(obj => this.output.set(JSON.stringify(obj, null, 2)))
+      .catch(err => this.output.set(JSON.stringify(err, null, 2)))
+  }
+
+  onAfterRender(node: VNode): void {
+    super.onAfterRender(node)
 
-    functionObj.arguments.forEach((value, index) => {
-      const argumentType = value.includes("bool") ? InputStateType.Bool : InputStateType.String
+    this.selectedFunctionObj.map(functionObj => {
+      const functionArgCount = functionObj.arguments.length
 
-      switch (index) {
+      switch (functionArgCount) {
         case 1: {
-          this.input2State.set("type", argumentType)
+          this.input1State.set("active", true)
+          this.input2State.set("active", false)
+          break
+        }
+        case 2: {
+          this.input1State.set("active", true)
+          this.input2State.set("active", true)
           break
         }
         default: {
-          this.input1State.set("type", argumentType)
+          this.input1State.set("active", false)
+          this.input2State.set("active", false)
           break
         }
       }
+
+      this.input1.set("")
+      this.input2.set("")
+
+      functionObj.arguments.forEach((value, index) => {
+        const argumentType = value.includes("bool") ? InputStateType.Bool : InputStateType.String
+
+        switch (index) {
+          case 1: {
+            this.input2State.set("type", argumentType)
+            this.input2State.set("hint", functionObj.arguments[1])
+            if (argumentType === InputStateType.Bool) {
+              this.input2.set("false")
+            }
+            break
+          }
+          default: {
+            this.input1State.set("type", argumentType)
+            this.input1State.set("hint", functionObj.arguments[0])
+            if (argumentType === InputStateType.Bool) {
+              this.input1.set("false")
+            }
+            break
+          }
+        }
+      })
     })
-  })
+  }
 
   render(): VNode {
     return (
       <div class="size-full flex flex-col">
         <p class="mb-8 text-4xl">Test</p>
-        <div class="flex flex-row">
+        <div class="size-full flex flex-row flex-grow">
           <div class="w-1/3 flex flex-col">
             <div class="overflow-scroll flex-grow bg-ng-background-500">
               {this.functionList.map(obj => (
@@ -133,30 +172,94 @@ export class TestPage extends DisplayComponent<TestPageProps> {
                 </InterfaceNavbarItemV2>
               ))}
             </div>
-            <div class="flex flex-row">
+            <div class={this.doubleInputCss}>
               <InterfaceSwitch
-                active={this.input1State.map(obj => {
-                  return obj.active ? (obj.type === InputStateType.String ? 0 : 1) : 2
-                })}
+                intoNoTheming
+                class="flex content-center"
+                intoClass="flex-grow flex"
+                active={this.input1State.map(obj => (obj.active ? (obj.type === InputStateType.String ? 0 : 1) : 2))}
                 pages={[
-                  [0, <p class="text-xl">String</p>],
-                  [1, <p class="text-xl">Bool</p>],
-                  [2, <p class="text-xl">None</p>],
+                  [
+                    0,
+                    <Input
+                      class="text-xl text-black px-1 size-full"
+                      value={this.input1}
+                      setValue={value => this.input1.set(value)}
+                      default={this.input1State.map(obj => obj.hint)}
+                    />,
+                  ],
+                  [
+                    1,
+                    <div class="flex-grow flex flex-row space-x-2 items-center justify-center">
+                      <p class="text-2xl">{this.input1State.map(obj => obj.hint.split(":")[0] + ":")}</p>
+                      <Checkbox value={this.input1} setValue={value => this.input1.set(value)} />
+                    </div>,
+                  ],
+                  [
+                    2,
+                    <div class="flex-grow flex items-center justify-center">
+                      <span class="text-2xl">No Inputs</span>
+                    </div>,
+                  ],
                 ]}
               />
               <InterfaceSwitch
-                active={this.input2State.map(obj => {
-                  return obj.active ? (obj.type === InputStateType.String ? 0 : 1) : 2
-                })}
+                noTheming
+                intoNoTheming
+                hideLast
+                class={this.input2State.map(obj => (obj.active ? "size-full flex content-center" : ""))}
+                intoClass="flex-grow flex content-center"
+                active={this.input2State.map(obj => (obj.active ? (obj.type === InputStateType.String ? 0 : 1) : 2))}
                 pages={[
-                  [0, <p class="text-xl">String</p>],
-                  [1, <p class="text-xl">Bool</p>],
-                  [2, <p class="text-xl">None</p>],
+                  [
+                    0,
+                    <Input
+                      class="text-xl text-black px-1"
+                      value={this.input2}
+                      setValue={value => this.input2.set(value)}
+                      default={this.input2State.map(obj => obj.hint)}
+                    />,
+                  ],
+                  [
+                    1,
+                    <div class="flex-grow flex flex-row space-x-2 items-center justify-center">
+                      <p class="text-2xl">{this.input2State.map(obj => obj.hint.split(":")[0] + ":")}</p>
+                      <Checkbox value={this.input2} setValue={value => this.input2.set(value)} />
+                    </div>,
+                  ],
+                  [2, <></>],
                 ]}
               />
             </div>
           </div>
-          <div class="w-2/3 bg-ng-background-700"></div>
+          <div class="w-2/3 bg-ng-background-700 flex flex-col">
+            <div class="size-full p-2 flex-grow overflow-auto">
+              <p class="text-xl whitespace-pre">{this.output}</p>
+            </div>
+            <Button
+              class="h-16 flex flex-row items-center pl-4 bg-blue-400 overflow-auto"
+              onClick={() => this.handleFunction()}
+            >
+              <span class="text-3xl">Try:</span>
+              <span class="text-2xl pl-4 whitespace-pre">
+                {MappedSubject.create(
+                  ([obj, input1, input2, input1State, input2State]) =>
+                    `${obj.name}(${
+                      input1State.active ? (input1State.type === InputStateType.String ? `"${input1}"` : input1) : ""
+                    }${
+                      input2State.active
+                        ? `, ${input2State.type === InputStateType.String ? `"${input2}"` : input2}`
+                        : ""
+                    })`,
+                  this.selectedFunctionObj,
+                  this.input1,
+                  this.input2,
+                  this.input1State,
+                  this.input2State,
+                )}
+              </span>
+            </Button>
+          </div>
         </div>
       </div>
     )