aclindsa/lunch
1
0
Fork 0
Code Releases Activity

Refactor UI, Add ability to remove suggestions

Browse Source
This commit is contained in:
Aaron Lindsay
2017-01-01 08:10:58 -05:00
parent d7adb27c10
commit 0400dd06b6
10 changed files with 222 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
js/components/NewSuggestion.js
View File

@ -4,6 +4,7 @@ var ReactBootstrap = require('react-bootstrap');
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var Button = ReactBootstrap.Button;
@ -102,31 +103,38 @@ module.exports = React.createClass({
var attendeeList = this.getAttendeeList();
var buttonDisabled = this.state.attendee == null || !this.state.suggestion;
return (
<Grid><Row>
<Col xs={4}>
<Combobox
value={this.state.attendee}
data={attendeeList}
valueField='AttendeeId'
textField='Name'
onChange={this.onChangeAttendee} />
</Col>
<Col xs={1}>
</Col>
<Col xs={4}>
<Combobox
value={this.state.suggestion}
data={this.unusedPopularSuggestions()}
valueField='RestaurantName'
textField='RestaurantName'
onChange={this.onChangeSuggestion} />
</Col>
<Col xs={1}>
</Col>
<Col xs={2}>
<Button bsStyle="success" disabled={buttonDisabled} onClick={this.onAddSuggestion}>Add Suggestion/Veto</Button>
</Col>
</Row></Grid>
<Row>
<Col xs={4}>
<FormGroup controlId="newsuggestionrestaurantname">
<ControlLabel>Add Suggestion/Veto To:</ControlLabel>
<Combobox
value={this.state.suggestion}
data={this.unusedPopularSuggestions()}
valueField='RestaurantName'
textField='RestaurantName'
onChange={this.onChangeSuggestion} />
</FormGroup>
</Col>
<Col xs={1}></Col>
<Col xs={4}>
<FormGroup controlId="newsuggestionby">
<ControlLabel>Suggested By:</ControlLabel>
<Combobox
value={this.state.attendee}
data={attendeeList}
valueField='AttendeeId'
textField='Name'
onChange={this.onChangeAttendee} />
</FormGroup>
</Col>
<Col xs={1}></Col>
<Col xs={2}>
<FormGroup controlId="addnewsuggestionbutton">
<ControlLabel><br /></ControlLabel>
<Button bsStyle="success" disabled={buttonDisabled} onClick={this.onAddSuggestion}>Add</Button>
</FormGroup>
</Col>
</Row>
);
}
});

56
js/components/RecordLunch.js
View File

@ -6,6 +6,8 @@ var ControlLabel = ReactBootstrap.ControlLabel;
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Panel = ReactBootstrap.Panel;
var Button = ReactBootstrap.Button;
var Multiselect = require('react-widgets').Multiselect;
@ -55,22 +57,47 @@ module.exports = React.createClass({
var attendeeList = this.getAttendeeList();
var suggestionIds = Object.keys(this.props.suggestions);
suggestionIds.sort(function(a, b){return parseInt(a, 10) - parseInt(b, 10);});
suggestionIds.sort(function(a, b){return parseInt(b, 10) - parseInt(a, 10);});
var suggestions = [];
for (var i in suggestionIds) {
var suggestion = this.props.suggestions[suggestionIds[i]];
suggestions.push((
<Row key={suggestion.SuggestionId}>
<Col xs={4}>{this.props.attendees[suggestion.AttendeeId].Name}</Col>
<Col xs={1}></Col>
<Col xs={4}>{suggestion.RestaurantName}</Col>
</Row>
));
var suggestorName = "Unknown";
if (this.props.attendees.hasOwnProperty(suggestion.AttendeeId))
suggestorName = this.props.attendees[suggestion.AttendeeId].Name;
if (i == 0) {
var self = this;
var popFunction = function(){
return function(){self.props.removeSuggestion(suggestion);};
}();
suggestions.push((
<Row key={suggestion.SuggestionId}><Panel>
<Col xs={4}><ControlLabel>Current Suggestion:</ControlLabel></Col>
<Col xs={1}></Col>
<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
<Col xs={1}></Col>
<Col xs={2}>
<Button bsStyle="danger" onClick={popFunction}>Pop</Button>
</Col>
</Panel></Row>
));
} else {
suggestions.push((
<Row key={suggestion.SuggestionId}>
<Col xs={4}><ControlLabel>{(suggestionIds.length - i).toString() + "."}</ControlLabel></Col>
<Col xs={1}></Col>
<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
<Col xs={1}></Col>
<Col xs={2}>
</Col>
</Row>
));
}
}
return (
<div><form>
<Grid><Row><Col xs={12}>
<Grid fluid><Row><Col xs={12}>
<FormGroup controlId="attendees">
<ControlLabel>Attendees</ControlLabel>
<Multiselect
@ -83,20 +110,13 @@ module.exports = React.createClass({
onCreate={this.onCreateAttendee} />
</FormGroup>
</Col></Row>
<Row>
<Col xs={4}><ControlLabel>Suggested By:</ControlLabel></Col>
<Col xs={1}></Col>
<Col xs={4}><ControlLabel>Restaurant Name:</ControlLabel></Col>
</Row>
{suggestions}
</Grid>
<FormGroup controlId="newsuggestion">
<NewSuggestion
createSuggestion={this.props.createSuggestion}
attendees={this.props.attendees}
suggestions={this.props.suggestions}
popularSuggestions={this.props.popularSuggestions} />
</FormGroup>
{suggestions}
</Grid>
</form></div>
);
}