diff --git a/lib/index.js b/lib/index.js index 40ca6a29..adcb88d0 100644 --- a/lib/index.js +++ b/lib/index.js @@ -388,7 +388,7 @@ class Embark { engine.logger.error(err.message); engine.logger.debug(err.stack); } else { - engine.logger.info("Finished generating ui"); + engine.logger.info("finished generating ui"); } process.exit(); }); diff --git a/lib/modules/scaffolding-react/index.js b/lib/modules/scaffolding-react/index.js index 8f9ed674..77ae40dd 100644 --- a/lib/modules/scaffolding-react/index.js +++ b/lib/modules/scaffolding-react/index.js @@ -15,7 +15,15 @@ Handlebars.registerHelper('ifview', function(stateMutability, options) { } }); -Handlebars.registerHelper('ifarrlengthgt', function(arr, val, options) { +Handlebars.registerHelper('ifeq', function(elem, value, options){ + if (elem == value) { + return options.fn(this); + } else { + return options.inverse(this); + } +}); + +Handlebars.registerHelper('iflengthgt', function(arr, val, options) { if (arr.length > val) { return options.fn(this); } else { @@ -24,7 +32,7 @@ Handlebars.registerHelper('ifarrlengthgt', function(arr, val, options) { }); Handlebars.registerHelper('emptyname', function(name, index) { - return name ? name : 'outputParam' + index; + return name ? name : 'output' + index; }); @@ -75,7 +83,7 @@ class ScaffoldingReact { this._generateFile(contract, 'dapp.js.tpl', 'js', { - 'title': contract.className + ' autogenerated UI', + 'title': contract.className, 'contractName': contract.className, 'functions': contract.abiDefinition.filter(x => x.type == 'function') }); diff --git a/lib/modules/scaffolding-react/templates/dapp.js.tpl b/lib/modules/scaffolding-react/templates/dapp.js.tpl index 1ad6d429..e20dc0c4 100644 --- a/lib/modules/scaffolding-react/templates/dapp.js.tpl +++ b/lib/modules/scaffolding-react/templates/dapp.js.tpl @@ -3,7 +3,7 @@ import {{contractName}} from 'Embark/contracts/{{contractName}}'; import React from 'react'; import ReactDOM from 'react-dom'; -import { FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'; +import { FormGroup, ControlLabel, FormControl, Checkbox, Button } from 'react-bootstrap'; {{#each functions}} @@ -14,7 +14,7 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component { {{#if inputs.length}} input: { {{#each inputs}} - {{name}}: ''{{#unless @last}},{{/unless}} + {{name}}: {{#ifeq type 'bool'}}false{{else}}''{{/ifeq}}{{#unless @last}},{{/unless}} {{/each}} }, {{/if}} @@ -26,28 +26,33 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component { } handleChange(e, name){ - this.state[name] = e.target.value; + this.state.input[name] = e.target.value; + this.setState(this.state); + } + + handleCheckbox(e, name){ + this.state.input[name] = e.target.checked; this.setState(this.state); } async handleClick(e){ e.preventDefault(); - - {{#ifview stateMutability}} this.setState({output: null}); - let result = await {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.{{name}}{{#unless @last}}, {{/unless}}{{/each}}).call(); - {{#ifarrlengthgt outputs 1}} - this.setState({output: { + {{#ifview stateMutability}} + {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.input.{{name}}{{#unless @last}}, {{/unless}}{{/each}}) + .call() + .then((result) => { + {{#iflengthgt outputs 1}} + this.setState({output: { {{#each outputs}} - {{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}} + {{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}} {{/each}} - }}); + }}); {{else}} - this.setState({output: result}); - {{/ifarrlengthgt}} - - + this.setState({output: result}); + {{/iflengthgt}} + }); // TODO show on screen {{/ifview}} @@ -63,12 +68,18 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component { {{#each inputs}} {{name}} + {{#ifeq type 'bool'}} + this.handleCheckbox(e, '{{name}}')} + /> + {{else}} this.handleChange(e, '{{name}}')} /> + {{/ifeq}} {{/each}} {{/if}} @@ -78,15 +89,15 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component { this.state.output != null ?

Results

- {{#ifarrlengthgt outputs 1}} + {{#iflengthgt outputs 1}} {{else}} - {this.state.output} - {{/ifarrlengthgt}} + {this.state.output.toString()} + {{/iflengthgt}}
: '' }