remove react-console-component, create methods for updating console on message received

Author: mroote

app/dist/dist/css/factorio-server-manager.css

@@ -11,7 +11,7 @@
     top: 0; left: 0; bottom: 0; right: 0;
 }
 
-div.react-console-container {
+div.console-container {
   font-size: 0.85em;
   font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
   width: 60em;
@@ -23,39 +23,6 @@ div.react-console-container {
   overflow: auto;
   white-space: pre; }
 
-div.react-console-prompt-box {
-  color: #444; }
-
-span.react-console-prompt-label {
-  font-weight: bold; }
-
-div.react-console-focus span.react-console-cursor {
-  background: #333;
-  color: #eee; }
-
-div.react-console-nofocus span.react-console-cursor {
-  background: none;
-  color: #444;
-  outline: 0.1em solid #333;
-  outline-offset: -0.1em; }
-
-div.react-console-focus span.react-console-cursor-idle {
-  animation: react-console-cursor-animation 1s infinite; }
-
-@keyframes react-console-cursor-animation {
-  0% {
-    background: #333;
-    color: #eee; }
-  50% {
-    background: #333;
-    color: #eee; }
-  51% {
-    background: none;
-    color: #444; }
-  100% {
-    background: none;
-    color: #444; } }
-
-div.react-console-message {
-  color: #999;
-  padding: 0.1em; }
+div.console-prompt-box {
+  color: #444; 
+  max-width: 100%}

src/factorio_server.go

@@ -15,7 +15,7 @@ import (
 	"strconv"
 	"strings"
 
-	"github.com/MajorMJR/rcon"
+	"github.com/majormjr/rcon"
 )
 
 type FactorioServer struct {

ui/App/components/ConsoleContent.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {IndexLink} from 'react-router';
-import Console from 'react-console-component'
 import Socket from '../../socket.js';
 
 class ConsoleContent extends React.Component {
@@ -10,20 +9,37 @@ class ConsoleContent extends React.Component {
         this.connectWebsocket = this.connectWebsocket.bind(this);
         this.handleCommand = this.handleCommand.bind(this);
         this.onConnect = this.onConnect.bind(this);
-        this.onNewLogLine = this.onNewLogLine.bind(this);
-        this.state = {}
+        this.handleInput = this.handleInput.bind(this);
+        this.clearInput = this.clearInput.bind(this);
+        this.clearHistory = this.clearHistory.bind(this);
+        this.addHistory = this.addHistory.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.newLogLine = this.newLogLine.bind(this);
+        this.state = {
+            commands: {},
+            history: [],
+            prompt: '$ ',
+        }
     }
 
     componentDidMount() {
         this.connectWebsocket();
     }
 
+    componentDidUpdate() {
+      var el = this.refs.output;
+      console.log(this.refs);
+      var container = document.getElementById("console-output");
+      console.log(container)
+      container.scrollTop = this.refs.output.scrollHeight;
+    }
+
     connectWebsocket() {
         var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
         let ws = new WebSocket(ws_scheme + "://" + window.location.host + "/ws");
         let socket = this.socket = new Socket(ws);
         socket.on('connect', this.onConnect.bind(this));
-        socket.on('log update', this.onNewLogLine.bind(this));
+        socket.on('log update', this.newLogLine.bind(this));
     }
 
     handleCommand(command) {
@@ -34,17 +50,52 @@ class ConsoleContent extends React.Component {
     onConnect() {
         this.setState({connected: true});
         this.socket.emit("log subscribe");
-        this.refs.console.log("connected to Factorio Server")
     }
 
-    onNewLogLine(logline) {
-        console.log(logline);
-        console.log(this.refs.console);
-        this.refs.console.log({message: logline});
-        this.refs.console.return();
+    handleInput(e) {
+        if (e.key === "Enter") {
+            var input_text = this.refs.term.value;
+
+            this.addHistory(this.state.prompt + " " + input_text);
+
+            this.clearInput();
+        }
+    }
+
+    clearInput() {
+        this.refs.term.value = "";
+    }
+
+    clearHistory() {
+        ths.setState({ history: []});
+    }
+
+    addHistory(output) {
+        var history = this.state.history;
+        history.push(output);
+        this.setState({
+            'history': history
+        });
+    }
+
+    handleClick() {
+        var term = this.refs.term;
+        term.focus();
+    }
+
+    newLogLine(logline) {
+        var history = this.state.history;
+        history.push(logline);
+        this.setState({
+            'history': history
+        });
     }
 
     render() {
+        var output = this.state.history.map((op, i) => {
+            return <p key={i}>{op}</p>
+        });
+
         return(
             <div className="content-wrapper">
                 <section className="content-header">
@@ -59,11 +110,14 @@ class ConsoleContent extends React.Component {
                 </section>
 
                 <section className="content">
-
-                    <Console ref="console"
-                        autofocus={true}
-                        handler={this.handleCommand}
-                    />
+                
+                <div id='console-output' className='console-container' onClick={this.handleClick} ref="output">
+                    {output}
+                </div>
+                <p>
+                    <span className="console-prompt-box">{this.state.prompt}</span>
+                    <input type="text" onKeyPress={this.handleInput} ref="term" />
+                </p>
 
                 </section>
             </div>