diff --git a/app/assets/javascripts/farm_designer/designer.js.jsx b/app/assets/javascripts/farm_designer/designer.js.jsx index 0524171c0..e69de29bb 100644 --- a/app/assets/javascripts/farm_designer/designer.js.jsx +++ b/app/assets/javascripts/farm_designer/designer.js.jsx @@ -1,12 +0,0 @@ -class Polygon { - constructor(height, width) { - this.height = height; - this.width = width; - } -}; -$(document).ready(function () { - // var dom = document.querySelector('.content'); - // var jsx =

Hello World

; - - // React.render(jsx, dom); -}); diff --git a/app/assets/javascripts/farmbot_app/react/crop_inventory.js.jsx b/app/assets/javascripts/farmbot_app/react/crop_inventory.js.jsx new file mode 100644 index 000000000..249de6772 --- /dev/null +++ b/app/assets/javascripts/farmbot_app/react/crop_inventory.js.jsx @@ -0,0 +1,81 @@ +Fb = (window.Fb || {}); + +Fb.InventoryMenu = React.createClass({ + render: function(){ + return ( +
+
+ +
+ +
+ ) + } +}) +// used to be line +Fb.InventoryContent = React.createClass({ + render: function(){ + return( +
+ + +
+ ); + } +}) + +Fb.InventoryList = React.createClass({ + render: function() { + + var crops = this.props.crops.map( + (crop) => + ); + + return(); + } +}); + +Fb.InventoryItem = React.createClass({ + render: function() { + return( +
  • + {this.props.crop.name} +
    {this.props.crop.age} days old
    +
    • ); + } +}); + +Fb.AddCrop = React.createClass({ + addCrop: function(e) { + React.render(, Fb.leftMenu); + React.render(, Fb.leftMenuContent); + }, + render: function(){ + return( +
    +
    +
    + Add a new plant +
    +
    + + +
    + ); + } +}) + +Fb.renderInventory = function(){ + React.render(, Fb.leftMenu); + React.render(, Fb.leftMenuContent); +}; diff --git a/app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx b/app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx index 0cbf31178..113af2880 100644 --- a/app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx +++ b/app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx @@ -1,116 +1,14 @@ +//= require farmbot_app/react/crop_inventory +//= require farmbot_app/react/plant_catalog Fb = (window.Fb || {}); var fakeCrops = [ - {name: "Cabbage", age: 4, _id: 1}, - {name: "Cabbage", age: 3, _id: 2}, - {name: "Pepper", age: 3, _id: 3}, - {name: "Dill", age: 12, _id: 4}, + {name: "Blueberry", age: 4, _id: 1, imgUrl: "/designer_icons/blueberry.svg"}, + {name: "Cabbage", age: 3, _id: 2, imgUrl: "/designer_icons/cabbage.svg"}, + {name: "Pepper", age: 3, _id: 3, imgUrl: "/designer_icons/pepper.svg"}, + {name: "Cilantro", age: 12, _id: 4, imgUrl: "/designer_icons/cilantro.svg"}, ]; - -Fb.CropList = React.createClass({ - render: function() { - - var crops = this.props.crops.map( - (crop) => - ); - - return(
      { crops }
    ); - } -}); - -Fb.CropListItem = React.createClass({ - render: function() { - return( -
  • - {this.props.crop.name} -
    {this.props.crop.age} days old
    -
    • ); - } -}); - -Fb.AddCrop = React.createClass({ - addCrop: function(e) { - React.render(, Fb.leftMenu); - React.render(, Fb.leftMenuContent); - }, - render: function(){ - return( -
    -
    -
    - Add a new plant -
    -
    - - -
    - ); - } -}) - -Fb.CropInventory = React.createClass({ - render: function(){ - return( -
    - - -
    - ); - } -}) - -Fb.InventoryMenu = React.createClass({ - render: function(){ - return ( -
    -
    - -
    - -
    - ) - } -}) - -Fb.PlantStuff = React.createClass({ - render: function () { - return

    This is where a list of plantable crops will go

    - } -}) - -Fb.PlantStuffMenu = React.createClass({ - render: function () { - return( -
    -
    -

    - - - - Choose a Crop -

    -
    -
    - ) - } -}) - -Fb.renderInventory = function(){ - React.render(, Fb.leftMenu); - React.render(, Fb.leftMenuContent); -}; - $(document).ready(function() { Fb.leftMenuContent = document.getElementById("designer-left-content"); Fb.leftMenu = document.getElementById("designer-left-menu-bar"); diff --git a/app/assets/javascripts/farmbot_app/react/plant_catalog.js.jsx b/app/assets/javascripts/farmbot_app/react/plant_catalog.js.jsx new file mode 100644 index 000000000..9570cc504 --- /dev/null +++ b/app/assets/javascripts/farmbot_app/react/plant_catalog.js.jsx @@ -0,0 +1,54 @@ +Fb.PlantCatalogContent = React.createClass({ + render: function () { + var crops = fakeCrops.map( + (crop) => + ); + + return( +
    +
    + { crops } +
    + ); + } +}) + +Fb.PlantCatalogMenu = React.createClass({ + render: function () { + return( +
    +
    +

    + + + + Choose a Crop +

    +
    +
    + ); + } +}); + +Fb.PlantCatalogTile = React.createClass({ + render: function(){ + return( +
    +
    +
    +
    +
    { this.props.crop.name }
    +
    +
    +
    +
    +
    +
    +

    +
    +
    +
    +
    + ); + } +}) diff --git a/app/assets/stylesheets/farmbot.css.scss b/app/assets/stylesheets/farmbot.css.scss index 13b924dca..56eb7c4a4 100644 --- a/app/assets/stylesheets/farmbot.css.scss +++ b/app/assets/stylesheets/farmbot.css.scss @@ -339,6 +339,10 @@ button { font-style: italic; } } +.small-header-wrapper { + @extend .header-wrapper; + padding: 0.25rem; +} .drag-drop-area { border-style: dashed; border-width: 2px; diff --git a/public/designer_icons/blueberry.svg b/public/designer_icons/blueberry.svg new file mode 100644 index 000000000..35a80e85f --- /dev/null +++ b/public/designer_icons/blueberry.svg @@ -0,0 +1 @@ +Created by anbileru adalerufrom the Noun Project \ No newline at end of file diff --git a/public/designer_icons/cabbage.svg b/public/designer_icons/cabbage.svg new file mode 100644 index 000000000..86577f6ae --- /dev/null +++ b/public/designer_icons/cabbage.svg @@ -0,0 +1 @@ +Created by Clockwisefrom the Noun Project \ No newline at end of file diff --git a/public/designer_icons/cilantro.svg b/public/designer_icons/cilantro.svg new file mode 100644 index 000000000..2d1ac8306 --- /dev/null +++ b/public/designer_icons/cilantro.svg @@ -0,0 +1 @@ +Created by Ola Möllerfrom the Noun Project \ No newline at end of file diff --git a/public/designer_icons/pepper.svg b/public/designer_icons/pepper.svg new file mode 100644 index 000000000..afcf5cfff --- /dev/null +++ b/public/designer_icons/pepper.svg @@ -0,0 +1,3 @@ +Created by Edward Boatmanfrom the Noun Project \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico old mode 100755 new mode 100644 index e69de29bb..413744015 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 000000000..ac98b3685 Binary files /dev/null and b/public/favicon.png differ