spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Ability to remove crops, too!

pull/225/head
Rick Carlino 2015-09-30 11:45:13 -05:00
parent 234e4a5663
commit d8874d6074
6 changed files with 191 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
javascripts/menus/crop_info.js
View File

@ -1,89 +1,80 @@
import { Crop } from '../crops';
export class CropInfo extends React.Component {
drop (e) {
var crop = new Crop({x: e.clientX, y: e.clientY});
this.props.dispatch({type: "CROP_ADD_REQUEST", payload: crop});
goBack() {
this.props.dispatch({type: "CATALOG_SHOW"});
}
constructor() {
super();
this.render = this.render.bind(this);
this.state = {data: []};
}
showCatalog(){
this.props.dispatch({type: "CATALOG_SHOW"})
removeCrop() {
this.props.dispatch({type: "CROP_REMOVE_REQUEST",
payload: this.props.crop });
}
render() {
return <div>
<div className="green-content">
<div className="search-box-wrapper">
<p>
<a href="#" onClick={ this.showCatalog.bind(this) }>
<i className="fa fa-arrow-left"></i>
</a>
{ this.props.crop.name }
</p>
</div>
</div>
<div className="designer-info">
<div className="crop-drag-info-tile">
<h6>Crop Image</h6>
<img className="crop-drag-info-image"
src={this.props.crop.imgUrl}
onDragEnd={ this.drop.bind(this) }/>
<div className="crop-info-overlay">
To plant, drag and drop into map
</div>
</div>
<div>
<h6>
Crop Info
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Expected height: 28 inches </li>
<li> Expected diameter: 44 inches </li>
<li> Life Expectancy: 8 years </li>
</ul>
</div>
<div>
<h6>
Planting Tips
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Plant in full sun </li>
<li> Fruits most in acidic soil </li>
<li> Plant near melons </li>
</ul>
</div>
<div>
<h6>
Default Regimens
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Blueberries by OpenFarm</li>
<li> Soil Acidifier </li>
</ul>
</div>
<div>
<h6>
Delete This Crop
</h6>
<p>
Note: You will no longer be able to plant this crop.
</p>
<span>
<button className="red">
Delete
</button>
</span>
</div>
return <div>
<div className="green-content">
<div className="search-box-wrapper">
<p>
<a href="#" onClick={ this.goBack.bind(this) }>
<i className="fa fa-arrow-left"></i>
</a>
Crop { this.props.crop._id || "" }
</p>
</div>
</div>
<div className="designer-info">
<div className="crop-drag-info-tile">
<h6>Photos of this Crop</h6>
<img className="crop-drag-info-image"
src={this.props.crop.imgUrl || '/designer_icons/placeholder_berries.jpg'} />
</div>
</div>
<div>
<h6>
Plant Info
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Expected height: 28 inches </li>
<li> Expected diameter: 44 inches </li>
<li> Life Expectancy: 8 years </li>
</ul>
</div>
<div>
<h6>
Planting Tips
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Plant in full sun </li>
<li> Fruits most in acidic soil </li>
<li> Plant near melons </li>
</ul>
</div>
<div>
<h6>
Default Regimens
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Blueberries by OpenFarm</li>
<li> Soil Acidifier </li>
</ul>
</div>
<div>
<h6>
Delete This Crop
</h6>
<p>
Note: You will no longer be able to plant this crop.
</p>
<span>
<button className="red" onClick={this.removeCrop.bind(this)}>
Delete
</button>
</span>
</div>
</div>
}
}

3
javascripts/menus/designer_main.js
View File

@ -1,10 +1,11 @@
import { CropInventory } from './crop_inventory';
import { PlantCatalog } from './plant_catalog';
import { Calendar } from './calendar';
import { PlantInfo } from './plant_info';
import { CropInfo } from './crop_info';
import { GardenMap } from './garden_map';
const LEFT_MENU_CHOICES = {CropInventory, PlantCatalog, CropInfo}
const LEFT_MENU_CHOICES = {CropInventory, PlantCatalog, PlantInfo, CropInfo}
export class DesignerMain extends React.Component {
transferableProps(name){

6
javascripts/menus/plant_catalog.js
View File

@ -1,16 +1,16 @@
import { Crop, fakeCrops } from '../crops';
export class PlantCatalogTile extends React.Component {
showCropInfo(){
showPlantInfo(){
this.props.dispatch({
type: 'CROP_INFO_SHOW',
type: 'PLANT_INFO_SHOW',
payload: this.props.crop
});
};
render() {
return(
<div className="plantCatalogTile" onClick={ this.showCropInfo.bind(this) }>
<div className="plantCatalogTile" onClick={ this.showPlantInfo.bind(this) }>
<div className="row">
<div className="small-12 columns">
<div className="small-header-wrapper">

83
javascripts/menus/plant_info.js 100644
View File

@ -0,0 +1,83 @@
import { Crop } from '../crops';
export class PlantInfo extends React.Component {
drop (e) {
var crop = new Crop({x: e.clientX, y: e.clientY});
this.props.dispatch({type: "CROP_ADD_REQUEST", payload: crop});
}
showCatalog(){
this.props.dispatch({type: "CATALOG_SHOW"});
}
render() {
return <div>
<div className="green-content">
<div className="search-box-wrapper">
<p>
<a href="#" onClick={ this.showCatalog.bind(this) }>
<i className="fa fa-arrow-left"></i>
</a>
{ this.props.crop.name }
</p>
</div>
</div>
<div className="designer-info">
<div className="crop-drag-info-tile">
<h6>Plant Image</h6>
<img className="crop-drag-info-image"
src={this.props.crop.imgUrl}
onDragEnd={ this.drop.bind(this) }/>
<div className="crop-info-overlay">
To plant, drag and drop into map
</div>
</div>
<div>
<h6>
Plant Info
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Expected height: 28 inches </li>
<li> Expected diameter: 44 inches </li>
<li> Life Expectancy: 8 years </li>
</ul>
</div>
<div>
<h6>
Planting Tips
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Plant in full sun </li>
<li> Fruits most in acidic soil </li>
<li> Plant near melons </li>
</ul>
</div>
<div>
<h6>
Default Regimens
<span><a href="#">Edit</a></span>
</h6>
<ul>
<li> Blueberries by OpenFarm</li>
<li> Soil Acidifier </li>
</ul>
</div>
<div>
<h6>
Delete This Crop
</h6>
<p>
Note: You will no longer be able to plant this crop.
</p>
<span>
<button className="red">
Delete
</button>
</span>
</div>
</div>
</div>
}
}

36
javascripts/redux/actions.js
View File

@ -14,7 +14,8 @@ actions.DEFAULT = function (s, a) {
actions.CROP_SELECT = function(s, a) {
var select_crop = update(s, {middleMenu: {selectedCrop: a.payload}});
return select_crop;
var change_menu = actions.CROP_INFO_SHOW(select_crop, a);
return change_menu;
};
actions.CROP_ADD_REQUEST = function (s, a) {
@ -36,6 +37,39 @@ actions.CROP_ADD_SUCCESS = function (s = store.getState(), a) {
return update(s, {middleMenu: {crops: new_array}});
};
actions.CROP_REMOVE_REQUEST = function (s, a) {
$.ajax({
method: "DELETE",
url: "/api/crops/" + a.payload._id
}).done(function () {
store.dispatch({type: "CROP_REMOVE_SUCCESS", payload: a.payload});
}).fail(function (a, b, c) { store.dispatch({type: "CROP_REMOVE_FAILURE"}) });
return s;
};
actions.CROP_REMOVE_FAILURE = function (s = store.getState(), a) {
alert("Failed to remove crop.");
return s;
};
actions.CROP_REMOVE_SUCCESS = function (s = store.getState(), a) {
let oldArray = s.middleMenu.crops;
var newArray = _.filter(oldArray, (c) => c._id !== a.payload._id);
return update(s, {middleMenu: {crops: newArray}});
};
actions.PLANT_INFO_SHOW = function(s, a) {
// TODO: add type system to check for presence of `crop` Object?
let fragment = {
leftMenu: {
component: 'PlantInfo',
crop: a.payload
}
};
return update(s, fragment);
};
actions.CROP_INFO_SHOW = function(s, a) {
// TODO: add type system to check for presence of `crop` Object?
let fragment = {

BIN
public/designer_icons/placeholder_berries.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB