jury dashboard + rating WIP

js/components/whitelabel/prize/components/ascribe_detail/piece_container.js

@@ -14,6 +14,8 @@ import Property from '../../../../../components/ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../components/ascribe_forms/input_textarea_toggable';
 import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
+import StarRating from 'react-star-rating';
+
 /**
  * This is the component that implements resource/data specific functionality
  */
@@ -70,6 +72,10 @@ let PrizePieceDetails = React.createClass({
     propTypes: {
         piece: React.PropTypes.object
     },
+
+    onRatingClick(event, position, rating, caption, name) {
+        console.log(rating);
+    },
     render() {
         if (this.props.piece.prize
             && this.props.piece.prize.name
@@ -79,6 +85,13 @@ let PrizePieceDetails = React.createClass({
                     title="Prize Details"
                     show={true}
                     defaultExpanded={true}>
+                    <StarRating
+                        name="airbnb-rating"
+                        caption=""
+                        step={1}
+                        size='lg'
+                        onRatingClick={this.onRatingClick}
+                        ratingAmount={5} />
                     <Form ref='form'>
                         {Object.keys(this.props.piece.extra_data).map((data) => {
                             let label = data.replace('_', ' ');

package.json

@@ -84,7 +84,8 @@
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.1.2",
-    "yargs": "^3.10.0"
+    "yargs": "^3.10.0",
+    "react-star-rating": "~1.3.2"
   },
   "jest": {
     "scriptPreprocessor": "node_modules/babel-jest",

sass/main.scss

@@ -6,6 +6,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_variables';
 @import 'variables';
 @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
+@import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
 @import '../node_modules/react-datepicker/dist/react-datepicker';
 @import 'glyphicons-social';
 @import 'ascribe_theme';
@@ -381,4 +382,9 @@ hr {
     > span {
         font-size: 2em;
     }
+}
+
+.rating-container .rating-stars {
+    width: 25px;
+    color: #000;
 }