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

[UNSTABLE] Move navbar into React component

pull/232/head
Rick Carlino 2015-10-08 11:58:10 -05:00
parent 604eecd803
commit 51b7347b3e
6 changed files with 80 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/dashboard/index.html.haml
View File

@ -1,3 +1,4 @@
= render partial: "pages/navbar"
%div
%script{:id => "devices.html", :type => "text/ng-template"}
= render partial: "dashboard/ng-partials/devices"

28
app/views/layouts/application.html.haml
View File

@ -12,33 +12,5 @@
= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/redux/1.0.1/redux.min.js"
= javascript_include_tag "application"
%body{'ng-app' => 'FarmBot'}
.row
%nav.drop-shadow{ng_app: 'farmbot', ng_controller: 'nav'}
.small-menu-title MENU
%a{:href => root_path} Home
- if current_user
%a{:href => "/pages/farm_designer"} Farm Designer
%a{:href => "/dashboard#/movement"} Controls
%a{:href => "/dashboard#/devices"} Devices
%a{:href => "/dashboard#/sequence"} Sequences
%a{:href => "/dashboard#/schedule"} Schedules
%a.large-menu-right{:href => destroy_user_session_path} Sign out
%a.large-menu-right{:href => edit_user_registration_path} My Account
- else
%a.large-menu-right{:href => new_user_session_path} Log In
%a.large-menu-right{:href => new_user_registration_path} Register
%a.large-menu-right{:href => page_path('help')} Help
- if current_user && controller_name == "dashboard"
%stopbutton
%syncbutton{ schedules: "schedules" }
.container.small-12.medium-6.large-4.small-centered.columns
- if notice
.alert-box.notice.round{"onClick" => "hidden = true"}
= notice
%a.close{style: 'margin-right: 10px; color: white; opacity: 1.0;'} ×
- if alert
.alert-box.alert.round{"onClick" => "hidden = true"}
= alert
%a.close{style: 'margin-right: 10px; color: white; opacity: 1.0;'} ×
.content
= yield

37
app/views/pages/_navbar.html 100644
View File

@ -0,0 +1,37 @@
<div class="row">
<nav class="drop-shadow" ng_app="farmbot" ng_controller="nav">
<div class="small-menu-title">MENU</div>
<a href="<%= root_path %>">Home</a>
<% if current_user %>
<a href="/pages/farm_designer">Farm Designer</a>
<a href="/dashboard#/movement">Controls</a>
<a href="/dashboard#/devices">Devices</a>
<a href="/dashboard#/sequence">Sequences</a>
<a href="/dashboard#/schedule">Schedules</a>
<a class="large-menu-right" href="<%= destroy_user_session_path %>">Sign out</a>
<a class="large-menu-right" href="<%= edit_user_registration_path %>">My Account</a>
<% else %>
<a class="large-menu-right" href="<%= new_user_session_path %>">Log In</a>
<a class="large-menu-right" href="<%= new_user_registration_path %>">Register</a>
<a class="large-menu-right" href="<%= page_path('help') %>">Help</a>
<% end %>
<% if current_user && controller_name == "dashboard" %>
<stopbutton></stopbutton>
<syncbutton schedules="schedules"></syncbutton>
<% end %>
</nav>
</div>
<div class="container small-12 medium-6 large-4 small-centered columns">
<% if notice %>
<div class="alert-box notice round" onClick="hidden = true">
<%= notice %>
<a class="close" style="margin-right: 10px; color: white; opacity: 1.0;">×</a>
</div>
<% end %>
<% if alert %>
<div class="alert-box alert round" onClick="hidden = true">
<%= alert %>
<a class="close" style="margin-right: 10px; color: white; opacity: 1.0;">×</a>
</div>
<% end %>
</div>

2
app/views/pages/farm_designer.html.erb
View File

@ -1,4 +1,4 @@
<div class="farm-designer" id="root">
<div id="root">
</div>
<script type="text/javascript">

34
javascripts/menus/designer_main.js
View File

@ -4,6 +4,7 @@ import { Calendar } from './calendar';
import { PlantInfo } from './plant_info';
import { CropInfo } from './crop_info';
import { GardenMap } from './garden_map';
import { Navbar } from './navbar';
const LEFT_MENU_CHOICES = {PlantInventory, PlantCatalog, PlantInfo, CropInfo}
@ -33,23 +34,26 @@ export class DesignerMain extends React.Component {
render(){
return (
<div className="farm-designer-body">
<div className="farm-designer-left">
<div id="designer-left">
{ this.renderLeft() }
<div className="farm-designer">
<Navbar/>
<div className="farm-designer-body">
<div className="farm-designer-left">
<div id="designer-left">
{ this.renderLeft() }
</div>
</div>
<div className="farm-designer-middle">
{ this.renderMiddle() }
</div>
<div className="farm-designer-right">
<div id="designer-right">
<Calendar />
</div>
</div>
</div>
</div>
<div className="farm-designer-middle">
{ this.renderMiddle() }
</div>
<div className="farm-designer-right">
<div id="designer-right">
<Calendar />
</div>
</div>
</div>
);
}
}

22
javascripts/menus/navbar.js 100644
View File

@ -0,0 +1,22 @@
export class Navbar extends React.Component {
render() {
return <div className="row">
<nav className="drop-shadow">
<div className="small-menu-title">MENU</div>
<a href="/">Home</a>
<a href="/pages/farm_designer">Farm Designer</a>
<a href="/dashboard#/movement">Controls</a>
<a href="/dashboard#/devices">Devices</a>
<a href="/dashboard#/sequence">Sequences</a>
<a href="/dashboard#/schedule">Schedules</a>
<a className="large-menu-right" href="/users/sign_out">Sign out</a>
<a className="large-menu-right" href="/users/edit">My Account</a>
<button className="red button-like" type="button">Stop*</button>
<button className="yellow button-like" type="button">
Sync <i className="fa fa-upload"></i>*
</button>
LAST SYNC: Never
</nav>
</div>
}
}