diff --git a/src/main.tsx b/src/main.tsx index 8b2573d0..4e38f986 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -16,7 +16,7 @@ dayjs.extend(localizedFormat) const CellHeightPx = 16; const CellWidthPx = 8; -const RemotePtyRows = 10; +const RemotePtyRows = 8; const RemotePtyCols = 80; type InterObsValue = { @@ -700,7 +700,16 @@ class InfoMsg extends React.Component<{}, {}> { disconnectRemote(remoteId : string) { GlobalCommandRunner.disconnectRemote(remoteId); } - + + renderConnectButton(remote : RemoteType) : any { + if (remote.status == "connected") { + return
this.disconnectRemote(remote.remoteid)} className="text-button disconnect-button">[disconnect remote]
+ } + else { + return
this.connectRemote(remote.remoteid)} className="text-button connect-button">[connect remote]
+ } + } + render() { let model = GlobalModel; let inputModel = model.inputModel; @@ -735,12 +744,36 @@ class InfoMsg extends React.Component<{}, {}> { -
- -
this.connectRemote(ptyRemoteId)} className="button is-small is-success">Connect
-
- -
this.disconnectRemote(ptyRemoteId)} className="button is-small is-danger">Disconnect
+
+
+
remoteid
+
{remote.remoteid}
+
+
+
type
+
{remote.remotetype}
+
+
+
alias
+
{isBlank(remote.alias) ? "-" : remote.alias}
+
+
+
canonicalname
+
{remote.remotecanonicalname}
+
+
+
connectmode
+
{remote.connectmode}
+
+
+
status
+
{remote.status} | {this.renderConnectButton(remote)}
+
+ +
+
error
+
{remote.errorstr}
+
diff --git a/src/model.ts b/src/model.ts index bc7ab197..0010b7d0 100644 --- a/src/model.ts +++ b/src/model.ts @@ -11,7 +11,7 @@ import {WSControl} from "./ws"; var GlobalUser = "sawka"; const DefaultCellWidth = 8; const DefaultCellHeight = 16; -const RemotePtyRows = 10; // also in main.tsx +const RemotePtyRows = 8; // also in main.tsx const RemotePtyCols = 80; function widthToCols(width : number) : number { @@ -154,7 +154,6 @@ class Cmd { if (!this.isRunning()) { return; } - let data = this.data.get(); let inputPacket : FeInputPacketType = { type: "feinput", ck: this.sessionId + "/" + this.cmdId, @@ -1108,8 +1107,13 @@ class InputModel { })(); } - termKeyHandler(e : any) : void { - console.log("term-remote key", e); + termKeyHandler(remoteId : string, event : any) : void { + let inputPacket : RemoteInputPacketType = { + type: "remoteinput", + remoteid: remoteId, + inputdata64: btoa(event.key), + }; + GlobalModel.sendInputPacket(inputPacket); } syncTermWrap() : void { @@ -1131,7 +1135,7 @@ class InputModel { } else { let termOpts = {rows: RemotePtyRows, cols: RemotePtyCols, flexrows: false, maxptysize: 64*1024}; - this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, this.termKeyHandler.bind(this)); + this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, (e) => { this.termKeyHandler(remoteId, e)}); console.log("make termwrap", this.remoteTermWrap); } } diff --git a/src/sh2.less b/src/sh2.less index e59abe8c..e6fa2d61 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -813,6 +813,44 @@ body .xterm .xterm-viewport { color: #cc0000; padding-bottom: 2px; } + + .info-remote { + color: #d3d7cf; + font-size: 12px; + font-family: 'JetBrains Mono', monospace; + + .remote-field { + display: flex; + flex-direction: row; + + .remote-field-def { + white-space: pre; + width: 120px; + } + + .remote-field-val { + white-space: pre; + display: flex; + flex-direction: row; + } + } + } + + .text-button { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 12px; + color: @term-white; + cursor: pointer; + + &.connect-button { + color: @term-green; + } + + &.disconnect-button { + color: @term-red; + } + } } } diff --git a/src/types.ts b/src/types.ts index e826ae4e..4a02c278 100644 --- a/src/types.ts +++ b/src/types.ts @@ -77,6 +77,7 @@ type RemoteType = { remotecanonicalname : string, remotevars : Record, status : string, + errorstr : string, defaultstate : RemoteStateType, connectmode : string, remoteidx : number, @@ -175,6 +176,12 @@ type FeInputPacketType = { winsize? : TermWinSize, }; +type RemoteInputPacketType = { + type : string, + remoteid : string, + inputdata64 : string, +}; + type WatchScreenPacketType = { type : string, sessionid : string,