Handling boolean parameters

This commit is contained in:
Richard Ramos 2018-05-11 09:26:27 -04:00 committed by Pascal Precht
parent d80d16f4ca
commit e7d435f03d
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 40 additions and 21 deletions

View File

@ -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();
});

View File

@ -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')
});

View File

@ -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,18 +26,24 @@ 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}}
{{#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}}
@ -45,9 +51,8 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
}});
{{else}}
this.setState({output: result});
{{/ifarrlengthgt}}
{{/iflengthgt}}
});
// TODO show on screen
{{/ifview}}
@ -63,12 +68,18 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
{{#each inputs}}
<FormGroup>
<ControlLabel>{{name}}</ControlLabel>
{{#ifeq type 'bool'}}
<Checkbox
onClick={(e) => this.handleCheckbox(e, '{{name}}')}
/>
{{else}}
<FormControl
type="text"
defaultValue={ this.state.input.{{name}} }
placeholder="{{type}}"
onChange={(e) => this.handleChange(e, '{{name}}')}
/>
{{/ifeq}}
</FormGroup>
{{/each}}
{{/if}}
@ -78,15 +89,15 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
this.state.output != null ?
<React.Fragment>
<h4>Results</h4>
{{#ifarrlengthgt outputs 1}}
{{#iflengthgt outputs 1}}
<ul>
{{#each outputs}}
<li>{{emptyname name @index}}: { this.state.output.{{emptyname name @index}} }</li>
{{/each}}
</ul>
{{else}}
{this.state.output}
{{/ifarrlengthgt}}
{this.state.output.toString()}
{{/iflengthgt}}
</React.Fragment>
: ''
}