Merge pull request #212 from RickCarlino/master

Starting "groups" / "zones" tabs

app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx

@@ -1,11 +1,9 @@
+//= require farmbot_app/react/init
 //= require farmbot_app/react/menus/crop_inventory
 //= require farmbot_app/react/menus/plant_catalog
 //= require farmbot_app/react/menus/crop_info
 //= require farmbot_app/react/menus/calendar
 //= require farmbot_app/react/menus/schedule_creation
-
-Fb = (window.Fb || {});
-
 class Crop {
   constructor(options) {
     this.name = (options.name || "Untitled Crop");
@@ -44,7 +42,10 @@ $(document).ready(function() {
   Fb.leftMenu         = document.getElementById("designer-left-menu-bar");
   Fb.rightMenuContent = document.getElementById("designer-right-content");
   Fb.rightMenu        = document.getElementById("designer-right-menu-bar");
-  if (Fb.leftMenuContent && Fb.leftMenu && Fb.rightMenuContent && Fb.rightMenu){
+  if (Fb.leftMenuContent &&
+      Fb.leftMenu &&
+      Fb.rightMenuContent &&
+      Fb.rightMenu){
     Fb.renderInventory();
     Fb.renderCalendar();
   } else{

app/assets/javascripts/farmbot_app/react/init.js

@@ -0,0 +1,2 @@
+Fb = (window.Fb || {});
+

app/assets/javascripts/farmbot_app/react/menus/calendar.js.jsx

@@ -1,5 +1,3 @@
-Fb = (window.Fb || {});
-
 Fb.CalendarMenu = class extends React.Component {
   render() {
     return  <div className="search-box-wrapper">

app/assets/javascripts/farmbot_app/react/menus/crop_info.js.jsx

@@ -1,5 +1,3 @@
-Fb = (window.Fb || {});
-
 class MapPoint {
   constructor(x, y) {
     this.x = x || 0;

app/assets/javascripts/farmbot_app/react/menus/crop_inventory.js.jsx

@@ -1,4 +1,35 @@
-Fb = (window.Fb || {});
+Fb.InventoryTab = class extends React.Component {
+  render() {
+    return <li>
+            <a href="#"
+               className={this.props.active ? "active" : ""}>
+              { this.props.name }
+            </a>
+           </li>
+  }
+}
+
+Fb.InventoryTabList = class extends React.Component {
+  handleClick(a,b,c,d) {
+    debugger;
+  }
+
+  constructor() {
+   super();
+   this.state = {current_tab: "Plants"};
+  }
+
+  render() {
+    return <ul className="tabs">
+            {
+              this.props.items.map(function(item, i) {
+                return <Fb.InventoryTab key={i}
+                                        name={item}
+                                        active={this.state.current_tab === item}/>;
+            }.bind(this))}
+           </ul>
+  }
+}
 
 Fb.InventoryMenu = class extends React.Component {
   render() {
@@ -7,17 +38,7 @@ Fb.InventoryMenu = class extends React.Component {
         <div className="search-box-wrapper">
           <input className="search" placeholder="Search"/>
         </div>
-        <ul className="tabs">
-          <li className="active">
-            <a href="#">Plants</a>
-          </li>
-          <li>
-            <a href="#">Groups</a>
-          </li>
-          <li>
-            <a href="#">Zones</a>
-          </li>
-        </ul>
+        <Fb.InventoryTabList items={["Plants", "Groups", "Zones"]} />
       </div>
     )
   }
@@ -28,7 +49,7 @@ Fb.InventoryContent = class extends React.Component {
     return(
       <div>
         <Fb.InventoryList crops={ fakeCrops } />
-        <Fb.ToolTip action={ Fb.renderCatalog } desc="Add a new plant!" color="dark-green"/>
+        <Fb.ToolTip action={ Fb.renderCatalog } desc="Add a new plant" color="dark-green"/>
       </div>
     );
   }

app/assets/javascripts/farmbot_app/react/menus/plant_catalog.js.jsx

@@ -1,7 +1,5 @@
-Fb = (window.Fb || {});
-
-Fb.PlantCatalogContent = React.createClass({
-  render: function () {
+Fb.PlantCatalogContent = class extends React.Component {
+  render() {
     var crops = fakeCrops.map(
        (crop) => <Fb.PlantCatalogTile crop={crop} key={crop._id} />
      );
@@ -13,10 +11,10 @@ Fb.PlantCatalogContent = React.createClass({
       </div>
     );
   }
-})
+};
 
-Fb.PlantCatalogMenu = React.createClass({
-  render: function () {
+Fb.PlantCatalogMenu = class extends React.Component {
+  render() {
     return(
       <div>
         <div className="search-box-wrapper">
@@ -30,10 +28,10 @@ Fb.PlantCatalogMenu = React.createClass({
       </div>
     );
   }
-});
+};
 
-Fb.PlantCatalogTile = React.createClass({
-  render: function() {
+Fb.PlantCatalogTile = class extends React.Component {
+  render() {
     return(
       <div className="plantCatalogTile" onClick={ e => { Fb.renderCropInfo(this.props.crop); } }>
         <div className="row">
@@ -53,7 +51,7 @@ Fb.PlantCatalogTile = React.createClass({
       </div>
     );
   }
-})
+};
 
 
 Fb.renderCatalog = function() {

app/assets/javascripts/farmbot_app/react/menus/schedule_creation.js.jsx

@@ -1,5 +1,3 @@
-Fb = (window.Fb || {});
-
 Fb.scheduleCreationMenu = class extends React.Component {
   render() {
     return(