source code

src/ui/port_forward.tis

@@ -0,0 +1,77 @@
+class PortForward: Reactor.Component {
+    function render() {
+      var args = handler.get_args();
+      var is_rdp = handler.is_rdp();
+      if (is_rdp) {
+        this.pfs = [["", "", "RDP"]];
+        args = ["rdp"];
+      } else if (args.length) {
+        this.pfs = [args];
+      } else {
+        this.pfs = handler.get_port_forwards();
+      }
+      var pfs =  this.pfs.map(function(pf, i) {
+        return <tr key={i} .value>
+            <td>{is_rdp ? <button .button #new-rdp>New RDP</button> : pf[0]}</td>
+            <td .right-arrow style="text-align: center; padding-left: 0">{args.length ? svg_arrow : ""}</td>
+            <td>{pf[1] || "localhost"}</td>
+            <td>{pf[2]}</td>
+            {args.length ? "" : <td .remove>{svg_cancel}</td>}
+        </tr>;
+      });
+      return <div #file-transfer><section>
+        {pfs.length ? <div style="background: green; color: white; text-align: center; padding: 0.5em;">
+          <span style="font-size: 1.2em">Listenning ...</span><br/>
+          <span style="font-size: 0.8em; color: #ddd">Don't close this window while your are using tunnel</span>
+        </div> : ""}
+        <table #port-forward>    
+        <thead>    
+          <tr>
+            <th>Local Port</th>
+            <th style="width: 1em" />
+            <th>Remote Host</th>
+            <th>Remote Port</th>
+            {args.length ? "" : <th style="width: 6em">Action</th>}
+          </tr>    
+        </thead>      
+        <tbody key={pfs.length}> 
+            {args.length ? "" : 
+            <tr>
+                <td><input|number #port /></td>
+                <td .right-arrow style="text-align: center">{svg_arrow}</td>
+                <td><input|text #remote-host novalue="localhost" /></td>
+                <td><input|number #remote-port /></td>
+                <td style="margin:0;"><button .button #add>Add</button></td>
+            </tr>
+            }
+            {pfs}
+        </tbody>
+      </table></section></div>;
+    }
+    
+    event click $(#add) () {
+      var port = ($(#port).value || "").toInteger() || 0;
+      var remote_host = $(#remote-host).value || "";
+      var remote_port = ($(#remote-port).value || "").toInteger() || 0;
+      if (port <= 0 || remote_port <= 0) return;
+      handler.add_port_forward(port, remote_host, remote_port);
+      this.update();
+    }
+
+    event click $(#new-rdp) {
+      handler.new_rdp();
+    }
+
+    event click $(.remove svg) (_, me) {
+      var pf = this.pfs[me.parent.parent.index - 1];
+      handler.remove_port_forward(pf[0]);
+      this.update();
+    }
+}
+
+function initializePortForward() 
+{
+    $(#file-transfer-wrapper).content(<PortForward />);
+    $(#video-wrapper).style.set { visibility: "hidden", position: "absolute" };
+    $(#file-transfer-wrapper).style.set { display: "block" };
+}