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}}
{{#each outputs}}
- {{emptyname name @index}}: { this.state.output.{{emptyname name @index}} }
{{/each}}
{{else}}
- {this.state.output}
- {{/ifarrlengthgt}}
+ {this.state.output.toString()}
+ {{/iflengthgt}}
: ''
}