From 2f96aaad9ab0f5cbf573ae8fbbc58a29f7ede09f Mon Sep 17 00:00:00 2001
From: Niklas Keller <me@kelunik.com>
Date: Sun, 20 Mar 2016 20:29:21 +0100
Subject: [PATCH] Display quality as tags instead of an absolute number

---
 .../experiments/answers/AnswerList.js         | 33 ++++++++++++++++---
 src/sass/screen.scss                          | 32 ++++++++++++++++++
 2 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/js/components/experiments/answers/AnswerList.js b/src/js/components/experiments/answers/AnswerList.js
index ac2ed87..5cad562 100644
--- a/src/js/components/experiments/answers/AnswerList.js
+++ b/src/js/components/experiments/answers/AnswerList.js
@@ -11,6 +11,7 @@ import JsonFormatter from "../../../formatters/JsonFormatter";
 import CsvFormatter from "../../../formatters/CsvFormatter";
 import { saveAs } from "filesaver.js";
 import moment from "moment";
+import classNames from "classnames";
 
 /**
  * @author Niklas Keller
@@ -145,6 +146,26 @@ class AnswerList extends DataComponent {
                 answerTime = answerTime.fromNow();
             }
 
+            let quality = item.ratings.length > 0 ? (
+                <span className={"answer-quality " + (item.quality >= this.state.experiment.paymentQualityThreshold
+                        ? "answer-quality-good"
+                        : "answer-quality-bad")}>
+                    {item.quality >= this.state.experiment.paymentQualityThreshold ? "Good" : "Bad"}
+                </span>
+            ) : (
+                <span className="answer-quality answer-quality-none">
+                     No Ratings
+                </span>
+            );
+
+            if (item.duplicate) {
+                quality = (
+                    <span className="answer-quality answer-quality-duplicate">
+                        DUPLICATE
+                    </span>
+                );
+            }
+
             let meta = (
                 <div className="answer-meta">
                     <time dateTime={moment(item.time * 1000).toISOString()}
@@ -152,9 +173,7 @@ class AnswerList extends DataComponent {
                         {answerTime}
                     </time>
 
-                        <span className="answer-quality">
-                            Quality: {item.quality}
-                        </span>
+                    {quality}
                 </div>
             );
 
@@ -162,7 +181,8 @@ class AnswerList extends DataComponent {
                 meta,
                 <div className="answer-content dont-break-out">
                     item.content
-                </div>,
+                </div>
+                ,
                 feedback,
                 systemResponse
             ];
@@ -186,7 +206,10 @@ class AnswerList extends DataComponent {
             }
 
             return (
-                <div key={item.id} className="answer">
+                <div key={item.id} className={classNames({
+                            "answer": true,
+                            "answer-duplicate": item.duplicate
+                        })}>
                     {content}
                 </div>
             );
diff --git a/src/sass/screen.scss b/src/sass/screen.scss
index c876096..412f419 100644
--- a/src/sass/screen.scss
+++ b/src/sass/screen.scss
@@ -188,6 +188,7 @@ pre {
 
 .answer-meta {
   color: #888;
+  line-height: 16px;
 }
 
 .answer-meta > * {
@@ -195,6 +196,10 @@ pre {
   margin: 8px 16px 8px 0;
 }
 
+.answer-duplicate {
+  opacity: .5;
+}
+
 .answer-content {
   padding: 8px 0;
 }
@@ -240,6 +245,33 @@ pre {
   text-decoration: underline !important;
 }
 
+.answer-quality {
+  display: inline-block;
+  margin: 0 3px;
+  padding: 3px 6px;
+  border-bottom: 1px solid rgba(0,0,0,.2);
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 11px;
+  background-color: #eee;
+  text-transform: uppercase;
+}
+
+.answer-quality-good {
+  color: #00ac4d;
+  background-color: #84c695;
+}
+
+.answer-quality-bad {
+  color: #ab3900;
+  background-color: #e2ac93;
+}
+
+.answer-quality-duplicate {
+  color: #333;
+  background-color: #eee;
+}
+
 @media (max-width: 600px) {
   .answer-content-image {
     display: block;