Properly handle the console when the socket disconnects/reconnects
This commit is contained in:
Dane Everitt
parent
f20d40460e
commit
00a3d7df87
|
|
@ -2,10 +2,10 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="text-xs font-mono">
|
<div class="text-xs font-mono">
|
||||||
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
|
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
|
||||||
<div v-if="!connected">
|
<div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
|
||||||
|
<div v-else>
|
||||||
<div class="spinner spinner-xl mt-24"></div>
|
<div class="spinner spinner-xl mt-24"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2 text-grey-light" ref="terminal"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rounded-b bg-grey-darkest text-white flex">
|
<div class="rounded-b bg-grey-darkest text-white flex">
|
||||||
<div class="flex-no-shrink p-2">
|
<div class="flex-no-shrink p-2">
|
||||||
|
|
@ -45,13 +45,11 @@
|
||||||
*/
|
*/
|
||||||
connected: function (state) {
|
connected: function (state) {
|
||||||
if (state) {
|
if (state) {
|
||||||
this.terminal.open(this.$refs.terminal);
|
this.$nextTick(() => {
|
||||||
this.terminal.fit();
|
this.mountTerminal();
|
||||||
this.terminal.clear();
|
});
|
||||||
|
|
||||||
this.$socket.emit('send server log');
|
|
||||||
} else {
|
} else {
|
||||||
this.terminal.dispose();
|
this.terminal.clear();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -80,41 +78,13 @@
|
||||||
*/
|
*/
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
if (this.connected) {
|
if (this.connected) {
|
||||||
this.$socket.emit('send server log');
|
this.mountTerminal();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
terminal: new Terminal({
|
terminal: this._terminalInstance(),
|
||||||
disableStdin: true,
|
|
||||||
cursorStyle: 'underline',
|
|
||||||
allowTransparency: true,
|
|
||||||
fontSize: 12,
|
|
||||||
fontFamily: 'Menlo,Monaco,Consolas,monospace',
|
|
||||||
rows: 30,
|
|
||||||
theme: {
|
|
||||||
background: 'transparent',
|
|
||||||
cursor: 'transparent',
|
|
||||||
black: '#000000',
|
|
||||||
red: '#E54B4B',
|
|
||||||
green: '#9ECE58',
|
|
||||||
yellow: '#FAED70',
|
|
||||||
blue: '#396FE2',
|
|
||||||
magenta: '#BB80B3',
|
|
||||||
cyan: '#2DDAFD',
|
|
||||||
white: '#d0d0d0',
|
|
||||||
brightBlack: 'rgba(255, 255, 255, 0.2)',
|
|
||||||
brightRed: '#FF5370',
|
|
||||||
brightGreen: '#C3E88D',
|
|
||||||
brightYellow: '#FFCB6B',
|
|
||||||
brightBlue: '#82AAFF',
|
|
||||||
brightMagenta: '#C792EA',
|
|
||||||
brightCyan: '#89DDFF',
|
|
||||||
brightWhite: '#ffffff',
|
|
||||||
},
|
|
||||||
|
|
||||||
}),
|
|
||||||
command: '',
|
command: '',
|
||||||
commandHistory: [],
|
commandHistory: [],
|
||||||
commandHistoryIndex: -1,
|
commandHistoryIndex: -1,
|
||||||
|
|
@ -122,6 +92,20 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* Mount the terminal and grab the most recent server logs.
|
||||||
|
*/
|
||||||
|
mountTerminal: function () {
|
||||||
|
// Get a new instance of the terminal setup.
|
||||||
|
this.terminal = this._terminalInstance();
|
||||||
|
|
||||||
|
this.terminal.open(this.$refs.terminal);
|
||||||
|
this.terminal.fit();
|
||||||
|
this.terminal.clear();
|
||||||
|
|
||||||
|
this.$socket.emit('send server log');
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Send a command to the server using the configured websocket.
|
* Send a command to the server using the configured websocket.
|
||||||
*/
|
*/
|
||||||
|
|
@ -152,6 +136,43 @@
|
||||||
|
|
||||||
this.commandHistoryIndex += (e.key === 'ArrowUp') ? 1 : -1;
|
this.commandHistoryIndex += (e.key === 'ArrowUp') ? 1 : -1;
|
||||||
this.command = this.commandHistoryIndex < 0 ? '' : this.commandHistory[this.commandHistoryIndex];
|
this.command = this.commandHistoryIndex < 0 ? '' : this.commandHistory[this.commandHistoryIndex];
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a new instance of the terminal to be used.
|
||||||
|
*
|
||||||
|
* @return {module:xterm.Terminal}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_terminalInstance() {
|
||||||
|
return new Terminal({
|
||||||
|
disableStdin: true,
|
||||||
|
cursorStyle: 'underline',
|
||||||
|
allowTransparency: true,
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'Menlo, Monaco, Consolas, monospace',
|
||||||
|
rows: 30,
|
||||||
|
theme: {
|
||||||
|
background: 'transparent',
|
||||||
|
cursor: 'transparent',
|
||||||
|
black: '#000000',
|
||||||
|
red: '#E54B4B',
|
||||||
|
green: '#9ECE58',
|
||||||
|
yellow: '#FAED70',
|
||||||
|
blue: '#396FE2',
|
||||||
|
magenta: '#BB80B3',
|
||||||
|
cyan: '#2DDAFD',
|
||||||
|
white: '#d0d0d0',
|
||||||
|
brightBlack: 'rgba(255, 255, 255, 0.2)',
|
||||||
|
brightRed: '#FF5370',
|
||||||
|
brightGreen: '#C3E88D',
|
||||||
|
brightYellow: '#FFCB6B',
|
||||||
|
brightBlue: '#82AAFF',
|
||||||
|
brightMagenta: '#C792EA',
|
||||||
|
brightCyan: '#89DDFF',
|
||||||
|
brightWhite: '#ffffff',
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue