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

20
resources/assets/scripts/components/server/Server.vue
View file

@ -55,7 +55,7 @@
</router-link>
</div>
</div>
<div class="bg-white p-6 rounded border border-grey-light h-full">
<div class="bg-white p-6 rounded border border-grey-light h-full w-full">
<router-view></router-view>
</div>
</div>
@ -83,6 +83,10 @@
mounted: function () {
this.loadServer();
this.$on('send-command', data => {
this.socket.emit('send command', data);
});
},
data: function () {
@ -109,7 +113,6 @@
},
initalizeWebsocket: function () {
this.$store.commit('server/CONSOLE_DATA', 'Connecting to ' + this.credentials.node + '...');
this.socket = io(this.credentials.node + '/v1/ws/' + this.server.uuid, {
query: 'token=' + this.credentials.key,
});
@ -123,34 +126,29 @@
},
_socket_error: function (err) {
this.$store.commit('server/CONSOLE_DATA', 'There was a socket error: ' + err);
console.error('there was a socket error:', err);
},
_socket_connect: function () {
this.$store.commit('server/CONSOLE_DATA', 'Connected to socket.');
this.socket.emit('send server log');
console.log('connected');
},
_socket_status: function (data) {
this.$store.commit('server/CONSOLE_DATA', 'Server state has changed.');
console.warn(data);
},
_socket_serverLog: function (data) {
data.split(/\n/g).forEach(item => {
this.$store.commit('server/CONSOLE_DATA', item);
this.$emit('console', item);
});
},
_socket_consoleLine: function (data) {
if(data.line) {
data.line.split(/\n/g).forEach((item) => {
this.$store.commit('server/CONSOLE_DATA', item);
data.line.split(/\n/g).forEach(item => {
this.$emit('console', item);
});
}
}
},
},
}
</script>

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>