From a27415eb864d8591533079367cb03b795f62443d Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Mon, 10 Aug 2015 15:23:13 +0200
Subject: [PATCH] jury dashboard + rating WIP

---
 .../components/ascribe_detail/piece_container.js    | 13 +++++++++++++
 package.json                                        |  3 ++-
 sass/main.scss                                      |  6 ++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js
index 8917e6d0..8782f6f0 100644
--- a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js
+++ b/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('_', ' ');
diff --git a/package.json b/package.json
index 4fdf87fb..9d767930 100644
--- a/package.json
+++ b/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",
diff --git a/sass/main.scss b/sass/main.scss
index d2c05afa..c83379b3 100644
--- a/sass/main.scss
+++ b/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;
 }
\ No newline at end of file