From fdf6e5dd9b0492095ce76f3fd55bf2567cad6126 Mon Sep 17 00:00:00 2001 From: BorysLevytskyi Date: Tue, 22 Nov 2016 19:32:36 +0200 Subject: [PATCH] Initial support list of numbers expression --- src/app/cmd.js | 3 +- src/app/commands.js | 82 +++++++++++-------- .../components/results/DisplayResultView.jsx | 11 ++- .../results/ExpressionResultView.jsx | 14 ++++ .../results/ListOfNumbersExpressionView.jsx | 25 ++++++ src/app/expression.js | 22 +++-- src/app/index.jsx | 1 + src/app/models/ExpressionResult.js | 8 ++ src/css/styles.css | 1 + 9 files changed, 117 insertions(+), 50 deletions(-) create mode 100644 src/app/components/results/ExpressionResultView.jsx create mode 100644 src/app/components/results/ListOfNumbersExpressionView.jsx create mode 100644 src/app/models/ExpressionResult.js diff --git a/src/app/cmd.js b/src/app/cmd.js index 27f797f..c7017b0 100644 --- a/src/app/cmd.js +++ b/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) { diff --git a/src/app/commands.js b/src/app/commands.js index ea955ba..7fb7136 100644 --- a/src/app/commands.js +++ b/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 () {} }); + + } } \ No newline at end of file diff --git a/src/app/components/results/DisplayResultView.jsx b/src/app/components/results/DisplayResultView.jsx index 315ff06..303bce4 100644 --- a/src/app/components/results/DisplayResultView.jsx +++ b/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
-
>{this.props.content.input}#
+
>{this.props.content.input}#
{this.findResultComponent(this.props.content)}
@@ -17,6 +19,11 @@ export default class DisplayResult extends React.Component { return } + if(result instanceof ExpressionResult) { + return + } + + console.warn('Unknow result', result); return Unknown result {typeof result} } } \ No newline at end of file diff --git a/src/app/components/results/ExpressionResultView.jsx b/src/app/components/results/ExpressionResultView.jsx new file mode 100644 index 0000000..3ccf546 --- /dev/null +++ b/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 + } + + return Expression: {expr.expressionString}; + } +} \ No newline at end of file diff --git a/src/app/components/results/ListOfNumbersExpressionView.jsx b/src/app/components/results/ListOfNumbersExpressionView.jsx new file mode 100644 index 0000000..c98bdea --- /dev/null +++ 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) => ) + return + {numberViews} +
+ } +} + +class OperandView extends React.Component { + render() { + const op = this.props.operand; + console.log(op); + // const bitsSize = this.propsю; + // .padLeft(m.bitsSize, '0') + return + {op.input} + {op.bin} + {op.other} + + }; +} \ No newline at end of file diff --git a/src/app/expression.js b/src/app/expression.js index 541df1a..fae9385 100644 --- a/src/app/expression.js +++ b/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; \ No newline at end of file + +export var parser = expression; \ No newline at end of file diff --git a/src/app/index.jsx b/src/app/index.jsx index b64715d..852b7e0 100644 --- a/src/app/index.jsx +++ b/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 = ; ReactDOM.render(root, document.getElementById('root')); \ No newline at end of file diff --git a/src/app/models/ExpressionResult.js b/src/app/models/ExpressionResult.js new file mode 100644 index 0000000..34e9351 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css index c070e88..90ed2cf 100644 --- a/src/css/styles.css +++ b/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; }