feat(cherrypick): new testing ui

Author: ZigTag

examples/gauge/Components/Dropdown.css

@@ -24,6 +24,8 @@
   padding: 0;
   margin: 0;
   width: 100%;
+  height: 500px;
+  overflow-y: scroll;
 }
 
 .dropdown-menu li {

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 { 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,34 @@ 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 hover:bg-gray-400 ${
+          this.props.class ?? ""
+        }`}
+        activeClass="hover:!bg-green-700 !bg-green-500 !text-white"
+        setActive={() => this.onClick()}
+      >
+        <span class="text-4xl">{this.isActive.map(val => (val ? "✔" : "X"))}</span>
+      </InterfaceNavbarItemV2>
+    )
+  }
+}

examples/gauge/Components/InterfaceSample.css

@@ -45,13 +45,25 @@
   padding: 2rem;
 }
 
+.horizontal-no-pad {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: flex-start;
+}
+
 .vertical {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
+.scrollable {
+  overflow: scroll;
+  height: 400px;
+}
+
 .text-field {
   width: fit-content;
   height: 50px;