Add `plant_catalog` to left side menu
Rick Carlino
parent
bba5fdea87
commit
e450fa99f9
|
|
@ -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 = <h1>Hello World</h1>;
|
||||
|
||||
// React.render(jsx, dom);
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
Fb = (window.Fb || {});
|
||||
|
||||
Fb.InventoryMenu = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
// used to be line
|
||||
Fb.InventoryContent = React.createClass({
|
||||
render: function(){
|
||||
return(
|
||||
<div>
|
||||
<Fb.InventoryList crops={ fakeCrops } />
|
||||
<Fb.AddCrop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
Fb.InventoryList = React.createClass({
|
||||
render: function() {
|
||||
|
||||
var crops = this.props.crops.map(
|
||||
(crop) => <Fb.InventoryItem crop={crop} key={crop._id} />
|
||||
);
|
||||
|
||||
return(<ul className="crop-inventory"> { crops } </ul>);
|
||||
}
|
||||
});
|
||||
|
||||
Fb.InventoryItem = React.createClass({
|
||||
render: function() {
|
||||
return(
|
||||
<li>
|
||||
<a href="#"> {this.props.crop.name} </a>
|
||||
<div>{this.props.crop.age} days old</div>
|
||||
</li>);
|
||||
}
|
||||
});
|
||||
|
||||
Fb.AddCrop = React.createClass({
|
||||
addCrop: function(e) {
|
||||
React.render(<Fb.PlantCatalogMenu />, Fb.leftMenu);
|
||||
React.render(<Fb.PlantCatalogContent />, Fb.leftMenuContent);
|
||||
},
|
||||
render: function(){
|
||||
return(
|
||||
<div>
|
||||
<div className="fb-tooltip">
|
||||
<div className="tooltip-text">
|
||||
Add a new plant
|
||||
</div>
|
||||
</div>
|
||||
<span className="plus-circle dark-green" onClick={this.addCrop}>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
Fb.renderInventory = function(){
|
||||
React.render(<Fb.InventoryMenu />, Fb.leftMenu);
|
||||
React.render(<Fb.InventoryContent />, Fb.leftMenuContent);
|
||||
};
|
||||
|
|
@ -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) => <Fb.CropListItem crop={crop} key={crop._id} />
|
||||
);
|
||||
|
||||
return(<ul className="crop-inventory"> { crops } </ul>);
|
||||
}
|
||||
});
|
||||
|
||||
Fb.CropListItem = React.createClass({
|
||||
render: function() {
|
||||
return(
|
||||
<li>
|
||||
<a href="#"> {this.props.crop.name} </a>
|
||||
<div>{this.props.crop.age} days old</div>
|
||||
</li>);
|
||||
}
|
||||
});
|
||||
|
||||
Fb.AddCrop = React.createClass({
|
||||
addCrop: function(e) {
|
||||
React.render(<Fb.PlantStuffMenu />, Fb.leftMenu);
|
||||
React.render(<Fb.PlantStuff />, Fb.leftMenuContent);
|
||||
},
|
||||
render: function(){
|
||||
return(
|
||||
<div>
|
||||
<div className="fb-tooltip">
|
||||
<div className="tooltip-text">
|
||||
Add a new plant
|
||||
</div>
|
||||
</div>
|
||||
<span className="plus-circle dark-green" onClick={this.addCrop}>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
Fb.CropInventory = React.createClass({
|
||||
render: function(){
|
||||
return(
|
||||
<div>
|
||||
<Fb.CropList crops={ fakeCrops } />
|
||||
<Fb.AddCrop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
Fb.InventoryMenu = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
Fb.PlantStuff = React.createClass({
|
||||
render: function () {
|
||||
return <p> This is where a list of plantable crops will go </p>
|
||||
}
|
||||
})
|
||||
|
||||
Fb.PlantStuffMenu = React.createClass({
|
||||
render: function () {
|
||||
return(
|
||||
<div>
|
||||
<div className="search-box-wrapper">
|
||||
<p>
|
||||
<a href="#" onClick={Fb.renderInventory}>
|
||||
<i className="fa fa-arrow-left"></i>
|
||||
</a>
|
||||
Choose a Crop
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
Fb.renderInventory = function(){
|
||||
React.render(<Fb.InventoryMenu />, Fb.leftMenu);
|
||||
React.render(<Fb.CropInventory />, Fb.leftMenuContent);
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
Fb.leftMenuContent = document.getElementById("designer-left-content");
|
||||
Fb.leftMenu = document.getElementById("designer-left-menu-bar");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
Fb.PlantCatalogContent = React.createClass({
|
||||
render: function () {
|
||||
var crops = fakeCrops.map(
|
||||
(crop) => <Fb.PlantCatalogTile crop={crop} key={crop._id} />
|
||||
);
|
||||
|
||||
return(
|
||||
<div crops={ fakeCrops }>
|
||||
<br/>
|
||||
{ crops }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
Fb.PlantCatalogMenu = React.createClass({
|
||||
render: function () {
|
||||
return(
|
||||
<div>
|
||||
<div className="search-box-wrapper">
|
||||
<p>
|
||||
<a href="#" onClick={Fb.renderInventory}>
|
||||
<i className="fa fa-arrow-left"></i>
|
||||
</a>
|
||||
Choose a Crop
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Fb.PlantCatalogTile = React.createClass({
|
||||
render: function(){
|
||||
return(
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="small-12 columns">
|
||||
<div className="small-header-wrapper">
|
||||
<h5>{ this.props.crop.name }</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="small-12 columns">
|
||||
<div className="content-wrapper">
|
||||
<p> <img src={this.props.crop.imgUrl} /> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 100 125" version="1.1" x="0px" y="0px"><g transform="translate(0,-952.36216)"><path style="" d="m 48.23046,962.11418 c -5.3849,0.0179 -10.91626,1.68042 -15.76757,5.09766 -8.70631,6.13269 -12.82045,16.23172 -11.36133,25.58203 3.21194,-1.1605 6.69818,-1.80469 10.34765,-1.80469 5.01988,0 9.73949,1.20546 13.84571,3.32227 5.37187,-5.72887 13.24498,-9.35156 22.03125,-9.35156 1.7996,0 3.55752,0.15482 5.26758,0.44531 -0.0767,-4.63173 -1.45784,-9.21508 -4.26563,-13.20117 C 63.657,965.57265 56.1007,962.08806 48.23046,962.11418 Z m -5.32617,2.84766 2.00391,1.44727 5.5957,-0.84375 -1.51172,2.48437 2.64258,2.12695 -3.89062,1.65821 -2.30274,3.49218 -3.3457,-0.42187 -5.50781,2.23242 -0.27539,-2.17969 -4.57032,-0.70898 3,-2.30274 -0.1875,-3.11718 4.01367,-0.68555 z" fill="#000000" fill-opacity="1" stroke="none"/><path style="" d="m 68.55078,987.63762 c -8.01308,0 -15.18928,3.33557 -20.03907,8.60156 7.08441,4.89612 11.67774,12.76282 11.67774,21.63282 0,5.837 -1.98777,11.2428 -5.36719,15.6504 4.00152,2.2759 8.70264,3.5859 13.72852,3.5859 C 83.15763,1037.1083 95,1026.0372 95,1012.3759 95,998.71463 83.15763,987.63762 68.55078,987.63762 Z m 3.22851,3.19922 2.99414,1.99805 4.78711,0.54492 0.35156,2.1914 4.10157,2.86524 -2.55469,0.72656 0.31641,3.02929 -3.53321,-1.2832 -3.70312,0.9141 -1.85156,-2.3262 -4.9336,-1.89258 1.22461,-1.61719 -2.45508,-3.26953 3.38086,0.30469 z" fill="#000000" fill-opacity="1" stroke="none"/><path style="" d="M 31.44921,993.13371 C 16.84236,993.13371 5,1004.2107 5,1017.872 c 0,13.6613 11.84236,24.7383 26.44921,24.7383 14.60686,0 26.44922,-11.077 26.44922,-24.7383 0,-13.6613 -11.84236,-24.73829 -26.44922,-24.73829 z m 7.56446,3.31641 1.74023,2.8125 7.28906,1.59378 -3.09961,2.4726 2.17969,3.9844 -5.60742,0.2696 -4.57617,3.3808 -3.89063,-2.1387 -7.88086,0.2286 0.75586,-2.9297 -5.25586,-3.0996 4.82813,-1.5176 1.33008,-4.08988 5.27343,1.03711 6.91407,-2.00391 z" fill="#000000" fill-opacity="1" stroke="none"/></g><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by anbileru adaleru</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M75.918,45.115c0,0,3.427-2.564,2.836-4.003c-0.593-1.438-4.847-0.464-4.847-0.464s2.693-3.366,0.684-4.204 c-2.012-0.839-12.38,7.987-12.38,7.987l-4.357,2.905c-1.096,0.439-1.779,0.308-1.119-1.274c2.744-2.617,5.544-4.486,5.544-4.486 S78.09,32.923,78.09,29.69c0-3.233-6.484-1.199-6.484-1.199s3.296-5.585,1.631-7.251c-1.669-1.668-7.049,2.177-7.049,2.177 s1.803-6.277-1.5-6.277c-1.197,0-2.949,2.179-4.696,4.957c1.41-5.607,2.503-11.523,1.242-12.782c-2.522-2.523-5.94,3.649-5.94,3.649 s-1.174-7.047-3.721-7.047c-2.548,0-4.295,6.784-4.295,6.784s-3.4-6.506-5.87-4.036c-1.278,1.278-0.43,7.648,0.686,13.498 c-2.348-3.697-4.753-6.854-6.121-6.854c-3.302,0-1.499,6.277-1.499,6.277s-5.381-3.844-7.049-2.178 c-1.667,1.667,1.629,7.251,1.629,7.251s-6.483-2.033-6.483,1.199c0,3.234,17.643,13.716,17.643,13.716s2.128,1.42,4.492,3.519 c0,0.001,0.001,0.002,0.002,0.003c2.743,3.074,0.663,2.727-1.817,1.413l-3.118-2.078c0,0-10.368-8.827-12.378-7.987 c-2.011,0.838,0.683,4.204,0.683,4.204s-4.254-0.974-4.847,0.464c-0.589,1.439,2.835,4.003,2.835,4.003s-4.467,0.408-3.643,2.378 c0.424,1.019,4.22,2.02,7.785,2.748c-2.635,0.468-4.977,1.093-5.295,1.865c-0.766,1.867,3.199,2.307,3.199,2.307 s-3.422,2.146-2.866,3.475c0.551,1.328,4.472,0.766,4.472,0.766s-2.654,3.189-0.828,3.939c1.828,0.752,11.847-6.781,11.847-6.781 s0.644-0.433,1.631-0.985c-1.012,1.512-1.791,2.933-1.563,3.456c0.569,1.303,2.73-0.485,2.73-0.485s-0.591,2.781,0.354,3.152 c0.943,0.372,2.579-1.885,2.579-1.885s0.312,2.904,1.585,2.351c0.623-0.271,1.205-2.492,1.637-4.698 c-0.581,8.953-2.707,25.801-10.441,36.918c-0.434,0.622-0.28,1.479,0.343,1.912c0.239,0.166,0.512,0.246,0.783,0.246 c0.435,0,0.861-0.205,1.128-0.589c4.801-6.9,8.137-16.514,9.915-28.572c0.328-2.224,0.568-4.316,0.747-6.212 c0.249,1.983,0.621,3.638,1.169,3.953c1.514,0.868,2.304-2.712,2.304-2.712s1.729,3.043,2.957,2.711 c1.229-0.333,0.876-3.884,0.876-3.884s2.455,2.531,3.342,0.984c0.452-0.786-0.909-3.594-2.353-6.157 c0.495,0.298,0.791,0.496,0.791,0.496s10.019,7.533,11.847,6.781c1.826-0.75-0.829-3.939-0.829-3.939s3.921,0.562,4.474-0.766 c0.556-1.329-2.865-3.475-2.865-3.475s3.964-0.439,3.197-2.307c-0.318-0.771-2.66-1.396-5.295-1.865 c3.565-0.728,7.361-1.729,7.787-2.748C80.384,45.523,75.918,45.115,75.918,45.115z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Ola Möller</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 75.263 125" enable-background="new 0 0 75.263 100" xml:space="preserve"><path d="M24.708,0c-12.67,4.123-13.515,24.074-13.515,24.074C1.056,28.509,0.004,37.568,0,41.179
|
||||
c-0.054,43.502,51.104,65.528,73.7,57.017c0.736-0.277,3.015-2.074,0.179-3.59c-12.638-6.758-47.745-31.091-45.671-60.754
|
||||
c0.264-3.764-0.966-10.833-11.313-9.989c0,0-0.223-17.556,11.896-19.74L24.708,0z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Edward Boatman</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
|
||||
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
Before Width: | Height: | Size: 0 B After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Loading…
Reference in New Issue