adding reactux comp. to form (edit+new) and fixing ordering issues

4 files changed, 15 insertions, 9 deletions

diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js
index 84426155d..b503f21f8 100644
--- a/app/assets/javascripts/es6_browserified/components/Todo.js
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -2,7 +2,7 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 
 const firstBlock = {display: 'inline-block', verticalAlign: 'middle', width: '75%'}
-const secondBlock = {display: 'inline-block', verticalAlign: 'middle', width: '25%',  textAlign: 'right'}
+const secondBlock = {display: 'inline-block', verticalAlign: 'middle', width: '25%', textAlign: 'right'}
 
 const Todo = (props)  => (
   <div className="list-group-item">
@@ -15,13 +15,13 @@ const Todo = (props)  => (
           <span className="fa fa-times"></span>
         </div>
         <div
-          className="btn btn-primary"
+          className={"btn btn-primary" + (props.first ? " disabled" : "")}
           onClick={props.onMoveUpClick}
         >
           <span className="fa fa-arrow-up"></span>
         </div>
         <div
-          className="btn btn-primary"
+          className={"btn btn-primary" + (props.last ? " disabled" : "")}
           onClick={props.onMoveDownClick}
         >
           <span className="fa fa-arrow-down"></span>
@@ -40,7 +40,9 @@ const Todo = (props)  => (
 Todo.propTypes = {
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
-  onMoveDownClick: PropTypes.func.isRequired
+  onMoveDownClick: PropTypes.func.isRequired,
+  first: PropTypes.bool,
+  last: PropTypes.bool
 }
 
 module.exports = Todo
diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js
index f81b8171d..707e3a796 100644
--- a/app/assets/javascripts/es6_browserified/components/TodoList.js
+++ b/app/assets/javascripts/es6_browserified/components/TodoList.js
@@ -6,11 +6,13 @@ const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick }) => (
   <div className='list-group'>
     {todos.map((todo, index) =>
       <Todo
-        key={todo.id}
+        key={'item-' + index}
         {...todo}
         onDeleteClick={() => onDeleteClick(index)}
         onMoveUpClick={() => onMoveUpClick(index)}
         onMoveDownClick={() => onMoveDownClick(index)}
+        first={ index === 0 }
+        last={ index === (todos.length - 1) }
       />
     )}
   </div>
diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim
index 295e2b38a..847acfea9 100644
--- a/app/views/routes/_form.html.slim
+++ b/app/views/routes/_form.html.slim
@@ -52,3 +52,6 @@
   | window.itinerary_stop = "#{URI.escape(@route.stop_areas.all.to_json)}"
 
 = javascript_include_tag 'es6_browserified/getJSON.js'
+
+/ StopPoints Reactux component
+= javascript_include_tag 'es6_browserified/stop_points.js'
diff --git a/app/views/routes/new.html.slim b/app/views/routes/new.html.slim
index 8ec5a38e9..51410a2e5 100644
--- a/app/views/routes/new.html.slim
+++ b/app/views/routes/new.html.slim
@@ -1,6 +1,5 @@
 = title_tag t('routes.new.title')
 
-== render 'form'
-
-/ TEST ES6
-= javascript_include_tag 'es6_browserified/stop_points.js'
+.row
+  .col-lg-8.col-lg-offset-2.col-md-8.col-md-offset-2.col-sm-8.col-sm-offset-2
+    == render 'form'