165 lines
3.8 KiB
JavaScript
165 lines
3.8 KiB
JavaScript
Fb.Inventory = {}
|
|
|
|
Fb.Inventory.Tab = class extends React.Component {
|
|
render() {
|
|
return <li onClick={ this.handleClick.bind(this) }>
|
|
<a href="#"
|
|
wow={this.store}
|
|
className={this.props.active ? "active" : ""}>
|
|
{ this.props.name }
|
|
</a>
|
|
</li>
|
|
}
|
|
|
|
handleClick() {
|
|
debugger;
|
|
Fb.store.dispatch({type: "CLICK_INVENTORY_TAB", params: this.props.name})
|
|
}
|
|
}
|
|
|
|
|
|
Fb.Inventory.Plants = class extends React.Component {
|
|
render() {
|
|
return(
|
|
<div>
|
|
<Fb.Inventory.List crops={ fakeCrops } />
|
|
<Fb.ToolTip action={ Fb.renderCatalog } desc="Add a new plant" color="dark-green"/>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
Fb.Inventory.Groups = class extends React.Component {
|
|
render() {
|
|
return(
|
|
<div className="designer-info">
|
|
<h6>My Groups</h6>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Lucky Cabages</a>
|
|
<p>5 Plants</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">Lucky Cabages</a>
|
|
<p>5 Plants</p>
|
|
</li>
|
|
</ul>
|
|
<h6>Zone Auto-Groups</h6>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Plants in "Broccoli Overlord"</a>
|
|
<p>10 Plants</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">Plants in "Flower Patch"</a>
|
|
<p>7 Plants</p>
|
|
</li>
|
|
</ul>
|
|
<h6>Crop Auto-Groups</h6>
|
|
<ul>
|
|
<li>
|
|
<a href="#">All Strawberries</a>
|
|
<p>1 plant</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">All Flowers</a>
|
|
<p>42 plants</p>
|
|
</li>
|
|
</ul>
|
|
<Fb.ToolTip action={ Fb.renderCatalog }
|
|
desc="Add a new group"
|
|
color="dark-green"/>
|
|
</div>
|
|
)
|
|
}
|
|
};
|
|
|
|
Fb.Inventory.Zones = class extends React.Component {
|
|
render() {
|
|
return(
|
|
<div className="designer-info">
|
|
<h6>My Zones</h6>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Front area</a>
|
|
<p>18 Square Feet</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">Needs Compost</a>
|
|
<p>5 Square Feet</p>
|
|
</li>
|
|
</ul>
|
|
<h6>Auto-Zones</h6>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Broccoli Overlord</a>
|
|
<p>60 Square Feet</p>
|
|
</li>
|
|
</ul>
|
|
<Fb.ToolTip action={ Fb.renderCatalog }
|
|
desc="Add New Zone"
|
|
color="dark-green"/>
|
|
</div>
|
|
)
|
|
}
|
|
};
|
|
Fb.Inventory.Item = class extends React.Component {
|
|
render() {
|
|
return(
|
|
<li>
|
|
<a href="#"> {this.props.crop.name} </a>
|
|
<div>{this.props.crop.age} days old</div>
|
|
</li>);
|
|
}
|
|
};
|
|
|
|
Fb.Inventory.List = class extends React.Component {
|
|
render() {
|
|
var crops = this.props.crops.map(
|
|
(crop, k) => <Fb.Inventory.Item crop={crop} key={ k } />
|
|
);
|
|
|
|
return(<ul className="crop-inventory"> { crops } </ul>);
|
|
}
|
|
};
|
|
|
|
Fb.Inventory.Content = class extends React.Component {
|
|
|
|
get tabName() {
|
|
return (Fb.store.getState().UI.inventoryTab || "Plants")
|
|
}
|
|
|
|
currentTab() { return Fb.Inventory[this.tabName] }
|
|
|
|
isActive(item) { return this.tabName === item }
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<div className="green-content">
|
|
<div className="search-box-wrapper">
|
|
<input className="search" placeholder="Search"/>
|
|
</div>
|
|
<ul className="tabs">
|
|
{
|
|
["Plants", "Groups", "Zones"].map(function(item, i) {
|
|
return <Fb.Inventory.Tab key={i}
|
|
name={item}
|
|
active={this.isActive(item)}/>;
|
|
}.bind(this))}
|
|
</ul>
|
|
</div>
|
|
|
|
{
|
|
React.createElement(this.currentTab())
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
};
|
|
|
|
|
|
Fb.renderInventory = function(){
|
|
React.render(<Fb.Inventory.Content />, Fb.leftMenu);
|
|
};
|