feat: support raw SQL input

Author: SkySails

examples/gauge/Components/Input.tsx

@@ -1,10 +1,9 @@
 import { ComponentProps, DisplayComponent, FSComponent, Subscribable, UUID, VNode } from "@microsoft/msfs-sdk"
 
 interface InputProps extends ComponentProps {
-  type: HTMLInputElement["type"]
-  name?: string
   value?: string
   class?: string | Subscribable<string>
+  textarea?: boolean
 }
 
 export class Input extends DisplayComponent<InputProps> {
@@ -23,7 +22,7 @@ export class Input extends DisplayComponent<InputProps> {
   }
 
   private getInputProps() {
-    return { name: this.props.name, value: this.props.value, class: this.props.class }
+    return { value: this.props.value, class: this.props.class }
   }
 
   /**
@@ -46,6 +45,12 @@ export class Input extends DisplayComponent<InputProps> {
   }
 
   render() {
+    if (this.props.textarea)
+      return (
+        <textarea style="width:350px;height:180px;" ref={this.inputRef} {...this.getInputProps()}>
+          {this.props.value}
+        </textarea>
+      )
     return <input ref={this.inputRef} {...this.getInputProps()} />
   }
 }

examples/gauge/Components/InterfaceSample.tsx

@@ -22,8 +22,10 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>()
   private readonly dropdownRef = FSComponent.createRef<Dropdown>()
   private readonly downloadButtonRef = FSComponent.createRef<HTMLButtonElement>()
-  private readonly executeButtonRef = FSComponent.createRef<HTMLButtonElement>()
-  private readonly inputRef = FSComponent.createRef<Input>()
+  private readonly icaoInputRef = FSComponent.createRef<Input>()
+  private readonly executeIcaoButtonRef = FSComponent.createRef<HTMLButtonElement>()
+  private readonly sqlInputRef = FSComponent.createRef<Input>()
+  private readonly executeSqlButtonRef = FSComponent.createRef<HTMLButtonElement>()
   private readonly outputRef = FSComponent.createRef<HTMLPreElement>()
 
   private cancelSource = CancelToken.source()
@@ -78,10 +80,20 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
         <h4 style="text-align: center;">Step 3 - Query the database</h4>
         <div class="horizontal">
           <div class="vertical">
-            <Input ref={this.inputRef} type="text" value="ESSA" class="text-field" />
-            <div ref={this.executeButtonRef} class="button">
+            <Input ref={this.icaoInputRef} value="ESSA" class="text-field" />
+            <div ref={this.executeIcaoButtonRef} class="button">
               Fetch Airport
             </div>
+            <div style="height:30px;"></div>
+            <Input
+              ref={this.sqlInputRef}
+              textarea
+              value="SELECT airport_name FROM tbl_airports WHERE airport_identifier = 'ESSA'"
+              class="text-field"
+            />
+            <div ref={this.executeSqlButtonRef} class="button">
+              Execute SQL
+            </div>
           </div>
           <pre ref={this.outputRef} id="output">
             The output of the query will show up here
@@ -97,19 +109,30 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
     this.loginButtonRef.instance.addEventListener("click", () => this.handleClick())
     this.downloadButtonRef.instance.addEventListener("click", () => this.handleDownloadClick())
 
-    this.executeButtonRef.instance.addEventListener("click", () => {
+    this.executeIcaoButtonRef.instance.addEventListener("click", () => {
       console.time("query")
       this.navigationDataInterface
-        .get_airport(this.inputRef.instance.value)
+        .get_airport(this.icaoInputRef.instance.value)
         .then(airport => {
           console.info(airport)
-
           this.outputRef.instance.textContent = JSON.stringify(airport, null, 2)
         })
         .catch(e => console.error(e))
         .finally(() => console.timeEnd("query"))
     })
 
+    this.executeSqlButtonRef.instance.addEventListener("click", () => {
+      console.time("query")
+      this.navigationDataInterface
+        .execute_sql(this.sqlInputRef.instance.value, [])
+        .then(result => {
+          console.info(result)
+          this.outputRef.instance.textContent = JSON.stringify(result, null, 2)
+        })
+        .catch(e => console.error(e))
+        .finally(() => console.timeEnd("query"))
+    })
+
     AuthService.user.sub(user => {
       if (user) {
         this.qrCodeRef.instance.src = ""