Merge branch 'master' into style-ratings

Conflicts: measure_mate/templates/assessment-revised.html
mvillis · Jan 10, 2016 · e0e458d · e0e458d
2 parents cde72bf + 5a07c69
commit e0e458d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@ Dev Central
 
 [![Build Status](https://travis-ci.org/mvillis/measure-mate.svg)](https://travis-ci.org/mvillis/measure-mate)
 [![Coverage Status](https://coveralls.io/repos/mvillis/measure-mate/badge.svg?branch=master&service=github)](https://coveralls.io/github/mvillis/measure-mate?branch=master)
+[![Stories in Progress](https://badge.waffle.io/mvillis/measure-mate.svg?label=in%20progress&title=In%20Progress)](http://waffle.io/mvillis/measure-mate)
 
 Demo
 -----

diff --git a/measure_mate/templates/assessment-revised.html b/measure_mate/templates/assessment-revised.html
@@ -17,6 +17,11 @@
   var Tabs = ReactBootstrap.Tabs;
   var Tab = ReactBootstrap.Tab;
   var Panel = ReactBootstrap.Panel;
+  var Input = ReactBootstrap.Input;
+  var Tooltip = ReactBootstrap.Tooltip;
+  var OverlayTrigger = ReactBootstrap.OverlayTrigger;
+  var Pager = ReactBootstrap.Pager;
+  var PageItem = ReactBootstrap.PageItem;
 
   var TemplateTable = React.createClass({
     loadAssessmentFromServer: function() {
@@ -90,18 +95,43 @@
     });
 
   var AttributeList = React.createClass({
+    getInitialState: function() {
+      return {
+        active_attribute: 1,
+        rating_selected: false
+      };
+    },
+    handleNext: function () {
+      this.setState({active_attribute: this.state.active_attribute + 1});
+    },
+    handlePrevious: function () {
+      this.setState({active_attribute: this.state.active_attribute - 1});
+    },
+    handleSelect(key) {
+      this.setState({active_attribute: key});
+    },
     render: function() {
       var attributeNodes = this.props.data.map(function (attribute, i) {
         return (
-          <Tab eventKey={i} title={<div><span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span>{attribute.name}</span></div>}>
+          <Tab eventKey={i+1} id={i+1} title={<div><span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span>{attribute.name}</span></div>}>
             <RatingList key={attribute.id} attribute_id={attribute.id} assess_id={this.props.assess_id} name={attribute.name} desc={attribute.desc} desc_class={attribute.desc_class} data={attribute.ratings}/>
           </Tab>
         );
       }.bind(this));
       return (
-        <Tabs defaultActiveKey={0} position="right" tabWidth={3}>
-          {attributeNodes}
-        </Tabs>
+        <div>
+          <Tabs position="right" activeKey={this.state.active_attribute} onSelect={this.handleSelect} tabWidth={3}>
+            {attributeNodes}
+          </Tabs>
+          <div className="col-xs-9">
+            <Pager>
+              <PageItem onClick={this.handlePrevious}>&larr; Previous</PageItem>
+              {' '}
+              <PageItem onClick={this.handleNext}>Next</PageItem>
+            </Pager>
+          </div>
+          <div className="col-xs-3"/>
+        </div>
       );
     }
   });
@@ -110,7 +140,7 @@
     getInitialState: function() {
       return {
         measurement_id: null,
-        selected_rating: null
+        selected_rating: null,
       };
     },
 
@@ -158,6 +188,11 @@
       });
     },
 
+    handleComplete: function() {
+      console.log("Hi, the complete button has been pushed");
+      this.props.onComplete();
+    },
+
     handleSubmitSuccess: function(data) {
       this.setState({
         selected_rating: data.rating,
@@ -171,6 +206,7 @@
 
     render: function() {
       var ratingNodes = this.props.data.map(function (rating) {
+          var tool_tip = <Tooltip>Click me to select!</Tooltip>
           var bs_style = "default"
           var active = (this.state.selected_rating == rating.id)
           var ranking_styles = ["default", "danger", "warning", "info", "success"]
@@ -179,14 +215,14 @@
           }
 
           return (
-            <ListGroupItem active={active} className={rating.desc_class} onClick={this.handleClick.bind(this, rating.id)} key={rating.id} bsStyle={bs_style} header={rating.name}>
-              {rating.desc}
-            </ListGroupItem>
+            <OverlayTrigger placement="left" overlay={tool_tip}>
+              <ListGroupItem active={active} className={rating.desc_class} onClick={this.handleClick.bind(this, rating.id)} key={rating.id} bsStyle={bs_style} header={rating.name}>
+                {rating.desc}
+              </ListGroupItem>
+            </OverlayTrigger>
           );
       }.bind(this));
-
       var desc_class = this.props.desc_class || ""
-
       return (
         <Panel header={this.props.name} bsStyle="primary">
             <p className={desc_class}>{this.props.desc}</p>