id.dir", "~") }}', command: '', output: '', serverName: '{{ $server->name }}', shellPrefix: '', clearAfterCommand: false, runUrl: '{{ route("servers.console.run", ["server" => $server]) }}', init() { this.setShellPrefix() $watch('user', async (value) => { await this.getWorkingDir() }) const consoleOutput = document.getElementById('console-output') consoleOutput.addEventListener('mouseup', (event) => { if (window.getSelection()?.toString()) { return } this.focusCommand() }) this.focusCommand() document.addEventListener('keydown', (event) => { if (event.ctrlKey && event.key === 'l') { event.preventDefault() if (this.running) return this.output = '' } }) }, async run() { if (! this.command) return this.running = true let output = this.shellPrefix + ' ' + this.command + '\n' if (this.clearAfterCommand) { this.output = output } else { this.output += output } setTimeout(() => { document.getElementById('console-output').scrollTop = document.getElementById('console-output').scrollHeight }, 100) const fetchOptions = { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', }, body: JSON.stringify({ user: this.user, command: this.command, }), } this.command = '' const response = await fetch(this.runUrl, fetchOptions) const reader = response.body.getReader() const decoder = new TextDecoder('utf-8') this.setShellPrefix() while (true) { if (! this.running) { reader.cancel() this.output += '\nStopped!' break } const { value, done } = await reader.read() if (done) break const textChunk = decoder.decode(value, { stream: true }) this.output += textChunk setTimeout(() => { document.getElementById('console-output').scrollTop = document.getElementById('console-output').scrollHeight }, 100) } this.output += '\n' await this.getWorkingDir() this.running = false setTimeout(() => { document.getElementById('command').focus() }, 100) }, stop() { this.running = false }, setShellPrefix() { this.shellPrefix = `${this.user}@${this.serverName}:${this.dir}$` }, focusCommand() { document.getElementById('command').focus() }, async getWorkingDir() { const response = await fetch( '{{ route("servers.console.working-dir", ["server" => $server]) }}', ) if (response.ok) { const data = await response.json() this.dir = data.dir this.setShellPrefix() } }, }" >