StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add xterm for console support (holy shit this is speedy)

Browse source
This commit is contained in:
Dane Everitt 2018-07-21 15:20:37 -07:00
parent c2ebf1cbcd
commit a94c6d80f5
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 576 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/assets/scripts/components/server/subpages/ConsolePage.vue
View file

@ -1,17 +1,19 @@
<template>
<div>
<div class="text-xs font-mono">
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:32rem;">
<div class="mb-2">
<span class="block text-grey-light" v-for="line in console" v-text="line"></span>
</div>
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
<div class="mb-2 text-grey-light" ref="terminal"></div>
</div>
<div class="rounded-b bg-grey-darkest text-white flex">
<div class="flex-no-shrink p-2">
<span class="font-bold">$</span>
</div>
<div class="w-full">
<input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send">
<input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send"
ref="command"
v-model="command"
v-on:keyup.enter="sendCommand"
>
</div>
</div>
</div>
@ -19,13 +21,48 @@
</template>
<script>
import {mapState} from 'vuex';
import { Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit';
Terminal.applyAddon(TerminalFit);
export default {
name: 'console-page',
computed: {
...mapState('server', ['console']),
mounted: function () {
this.terminal.open(this.$refs.terminal);
this.terminal.fit();
this.$parent.$on('console', data => {
this.terminal.writeln(data);
});
},
data: function () {
return {
terminal: new Terminal({
disableStdin: true,
allowTransparency: true,
fontSize: 12,
fontFamily: 'Menlo,Monaco,Consolas,monospace',
rows: 30,
theme: {
background: 'transparent',
}
}),
command: '',
};
},
methods: {
sendCommand: function () {
this.$parent.$emit('send-command', this.command);
this.command = '';
}
}
};
</script>
<style lang="postcss">
@import "~xterm/src/xterm.css";
</style>