Initial support list of numbers expression

src/app/cmd.js

@@ -55,8 +55,7 @@ var cmd = {
     };
 
     function displayCommandError(input, message) {
-        var error = new app.models.ErrorResult(message);
-        cmdController.display(new app.models.DisplayResult(input, error));
+        console.error(message)
     }
 
     function invokeHandler (input, handler) {

src/app/commands.js

@@ -1,45 +1,59 @@
 import appState from './appState';
 import HelpResult from './models/HelpResult';
+import ExpressionResult from './models/ExpressionResult';
+import * as expression from './expression';
 
 var cmdConfig = {};
 
 export default {
     initialize (cmd) {
-            cmd.commands({
-            'help': function(c) {
-                // var helpResult = document.querySelector('.result .helpResultTpl');
-                // if(helpResult != null) {
-                //     moveResultUp(helpResult);
-                //     return;
-                // }
 
-                appState.addCommandResult(new HelpResult(c.input));                
-            },
-            'clear': function() {
-                appState.clearCommmandResults();
-            },
-            'em': function() {
-                cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
-            },
-            'dark': function() {
-                cmdConfig.theme = 'dark';
-            },
-            'light': function () {
-                cmdConfig.theme = 'light';
-            },
-            'about': function() {
-                var aboutResult = document.querySelector('.result .aboutTpl');
-                if(aboutResult != null) {
-                    moveResultUp(aboutResult);
-                    return;
-                }
-                return new app.models.ViewResult('aboutTpl');
-            },
-            '-debug': function() {
-                app.debugMode = true;
-                console.log('debug is on');
-            },
-            '-notrack': function () {}
+            cmd.command({
+                   canHandle: (input) => expression.parser.canParse(input),
+                   handle: function(c) {
+                       var expr = expression.parser.parse(c.input);
+                       console.log(expr);
+                       appState.addCommandResult(new ExpressionResult(c.input, expr));
+                   }         
+             })
+
+            cmd.commands({
+                'help': function(c) {
+                    // var helpResult = document.querySelector('.result .helpResultTpl');
+                    // if(helpResult != null) {
+                    //     moveResultUp(helpResult);
+                    //     return;
+                    // }
+
+                    appState.addCommandResult(new HelpResult(c.input));                
+                },
+                'clear': function() {
+                    appState.clearCommmandResults();
+                },
+                'em': function() {
+                    cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
+                },
+                'dark': function() {
+                    cmdConfig.theme = 'dark';
+                },
+                'light': function () {
+                    cmdConfig.theme = 'light';
+                },
+                'about': function() {
+                    var aboutResult = document.querySelector('.result .aboutTpl');
+                    if(aboutResult != null) {
+                        moveResultUp(aboutResult);
+                        return;
+                    }
+                    return new app.models.ViewResult('aboutTpl');
+                },
+                '-debug': function() {
+                    app.debugMode = true;
+                    console.log('debug is on');
+                },
+                '-notrack': function () {}
         });
+
+        
     }
  }

src/app/components/results/DisplayResultView.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import HelpResultView from './HelpResultView';
 import HelpResult from '../../models/HelpResult';
+import HelpResultView from './HelpResultView';
+import ExpressionResult from '../../models/ExpressionResult';
+import ExpressionResultView from './ExpressionResultView';
 
 export default class DisplayResult extends React.Component {
     render() {
         return <div className="result">
-                        <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a class="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
+                        <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a className="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
                         <div className="content">
                             {this.findResultComponent(this.props.content)}
                         </div>
@@ -17,6 +19,11 @@ export default class DisplayResult extends React.Component {
             return <HelpResultView key={key} content={result} />
         }
 
+        if(result instanceof ExpressionResult) {
+            return <ExpressionResultView key={key} result={result} /> 
+        }
+
+        console.warn('Unknow result', result);
         return <span>Unknown result {typeof result}</span>
     }
 }

src/app/components/results/ExpressionResultView.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ListOfNumbersExpressionView from './ListOfNumbersExpressionView';
+import * as expression from '../../expression'; 
+
+export default class ExpressionResultView extends React.Component {
+    render() {
+        var expr = this.props.result.expression;
+        if(expr instanceof expression.ListOfNumbersExpression) {
+            return <ListOfNumbersExpressionView expression={expr} />
+        }
+
+        return <b>Expression: {expr.expressionString}</b>;
+    } 
+}

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class ListOfNumersExpressionView extends React.Component {
+    render() {
+        const expr = this.props.expression;
+        const numberViews = expr.numbers.map((n, i) => <OperandView key={i} operand={n} />) 
+        return <table className="expression" cellspacing="0">
+                    {numberViews}        
+               </table>
+    }
+}
+
+class OperandView extends React.Component {
+    render() {
+        const op = this.props.operand;
+        console.log(op);
+        // const bitsSize = this.propsю;
+         // .padLeft(m.bitsSize, '0')
+        return  <tr data-kind={op.kind}>
+            <td className="label">{op.input}</td>
+            <td className="bin">{op.bin}</td>
+            <td className="other">{op.other}</td>
+        </tr>
+    };
+}

src/app/expression.js

@@ -120,11 +120,7 @@ export class Operand {
             this.kind = this.input.indexOf('0x') > -1 ? 'hex' : 'dec';
             this.other = this.kind == 'dec' ? this.hex : this.dec;
         }
-        
-        toHexString (hex) {
-            return hex.indexOf('-') == 0 ? '-0x' + hex.substr(1) : '0x' + hex;
-        };
-
+                
         getLengthInBits() {
             if(this.value < 0) {
                 return 32;
@@ -153,6 +149,10 @@ export class Operand {
             default : throw new Error(kind + " kind doesn't have opposite kind")
         }
     };
+
+    toString() {
+        return this.input;
+    }
     
     static getBase(kind){
         switch (kind){
@@ -171,9 +171,9 @@ export class Operand {
         return new Operand(str);
     };
 
-    toString() {
-        return this.input;
-    }
+    static toHexString (hex) {
+            return hex.indexOf('-') == 0 ? '-0x' + hex.substr(1) : '0x' + hex;
+     };
 }
 
 export class SingleOperandExpression {
@@ -231,7 +231,5 @@ export class Expression {
         return this.expressionString ? "Expression: " + this.expressionString : this.toString();
     };
 }
-
-
-    
-export default expression;
+  
+export var parser = expression;

src/app/index.jsx

@@ -9,6 +9,7 @@ import AppRoot from './components/AppRoot';
 commands.initialize(cmd);
 
 cmd.execute('help');
+cmd.execute('1 2 3');
 
 var root = <AppRoot appState={appState} />;
 ReactDOM.render(root, document.getElementById('root'));

src/app/models/ExpressionResult.js

@@ -0,0 +1,8 @@
+import CommandResult from './CommandResult';
+
+export default class ExpressionResult extends CommandResult {
+    constructor(input, expression) {
+        super(input);
+        this.expression = expression;
+    }
+}

src/css/styles.css

@@ -71,6 +71,7 @@ code { font-size: 1.2em; font-weight: bold; }
 
 /* Dark */
 .dark { background: #121212; color: white;}
+.dark .expression { color: white;}
 .dark .expressionInput { background: #121212; color: white; }
 .dark a, .dark a:visited { color: white; }
 .dark .indicator { color: #555; }