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.error(err.message);
engine.logger.debug(err.stack); engine.logger.debug(err.stack);
} else { } else {
engine.logger.info("Finished generating ui"); engine.logger.info("finished generating ui");
} }
process.exit(); 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) { if (arr.length > val) {
return options.fn(this); return options.fn(this);
} else { } else {
@ -24,7 +32,7 @@ Handlebars.registerHelper('ifarrlengthgt', function(arr, val, options) {
}); });
Handlebars.registerHelper('emptyname', function(name, index) { 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', this._generateFile(contract, 'dapp.js.tpl', 'js',
{ {
'title': contract.className + ' autogenerated UI', 'title': contract.className,
'contractName': contract.className, 'contractName': contract.className,
'functions': contract.abiDefinition.filter(x => x.type == 'function') '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 React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'; import { FormGroup, ControlLabel, FormControl, Checkbox, Button } from 'react-bootstrap';
{{#each functions}} {{#each functions}}
@ -14,7 +14,7 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
{{#if inputs.length}} {{#if inputs.length}}
input: { input: {
{{#each inputs}} {{#each inputs}}
{{name}}: ''{{#unless @last}},{{/unless}} {{name}}: {{#ifeq type 'bool'}}false{{else}}''{{/ifeq}}{{#unless @last}},{{/unless}}
{{/each}} {{/each}}
}, },
{{/if}} {{/if}}
@ -26,28 +26,33 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
} }
handleChange(e, name){ 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); this.setState(this.state);
} }
async handleClick(e){ async handleClick(e){
e.preventDefault(); e.preventDefault();
{{#ifview stateMutability}}
this.setState({output: null}); this.setState({output: null});
let result = await {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.{{name}}{{#unless @last}}, {{/unless}}{{/each}}).call(); {{#ifview stateMutability}}
{{#ifarrlengthgt outputs 1}} {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.input.{{name}}{{#unless @last}}, {{/unless}}{{/each}})
this.setState({output: { .call()
.then((result) => {
{{#iflengthgt outputs 1}}
this.setState({output: {
{{#each outputs}} {{#each outputs}}
{{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}} {{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}}
{{/each}} {{/each}}
}}); }});
{{else}} {{else}}
this.setState({output: result}); this.setState({output: result});
{{/ifarrlengthgt}} {{/iflengthgt}}
});
// TODO show on screen // TODO show on screen
{{/ifview}} {{/ifview}}
@ -63,12 +68,18 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
{{#each inputs}} {{#each inputs}}
<FormGroup> <FormGroup>
<ControlLabel>{{name}}</ControlLabel> <ControlLabel>{{name}}</ControlLabel>
{{#ifeq type 'bool'}}
<Checkbox
onClick={(e) => this.handleCheckbox(e, '{{name}}')}
/>
{{else}}
<FormControl <FormControl
type="text" type="text"
defaultValue={ this.state.input.{{name}} } defaultValue={ this.state.input.{{name}} }
placeholder="{{type}}" placeholder="{{type}}"
onChange={(e) => this.handleChange(e, '{{name}}')} onChange={(e) => this.handleChange(e, '{{name}}')}
/> />
{{/ifeq}}
</FormGroup> </FormGroup>
{{/each}} {{/each}}
{{/if}} {{/if}}
@ -78,15 +89,15 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
this.state.output != null ? this.state.output != null ?
<React.Fragment> <React.Fragment>
<h4>Results</h4> <h4>Results</h4>
{{#ifarrlengthgt outputs 1}} {{#iflengthgt outputs 1}}
<ul> <ul>
{{#each outputs}} {{#each outputs}}
<li>{{emptyname name @index}}: { this.state.output.{{emptyname name @index}} }</li> <li>{{emptyname name @index}}: { this.state.output.{{emptyname name @index}} }</li>
{{/each}} {{/each}}
</ul> </ul>
{{else}} {{else}}
{this.state.output} {this.state.output.toString()}
{{/ifarrlengthgt}} {{/iflengthgt}}
</React.Fragment> </React.Fragment>
: '' : ''
} }