Changes to page rating stuff

VoteByRating/votebyrating/static/scripts/page_rating.js

@@ -1,59 +1,166 @@
-$(document).ready(function()
+$(function()
 {
-	$( "#slider_box" ).slider({
-		min: -5,
-		max: 5,
-		orientation: "vertical",
-		slide: function(event, ui)
+	var candidate_rating_table = {
+			"Lorem Ipsum":0,
+			"Dolor Sit":0,
+			"Amet Consectetur":0,
+			"Adipiscing Elit":0,
+			"Cras A. Posuere":0,
+			"Nunc Donec":0,
+			"Imperdiet Bibendum":0,
+			"Orci Vitae":0,
+			"Tincidunt Vestibulum":0,
+			"Commodo Elementum":0
+	};
+
+	var rating_candidate_table = new Array();
+
+	for ( var i = 0; i < 11; ++i )
+	{
+		rating_candidate_table.push( new Array() );
+	}
+
+	for ( var name in candidate_rating_table )
+	{
+		rating_candidate_table[candidate_rating_table[name] + 5].push( name );
+	}
+
+	function remove_candidate_from_rating_table( name )
+	{
+		for ( var value in rating_candidate_table )
 		{
-			$( "#selected_rating" ).html("Lorem Ipsum: ");
-			if (ui.value > 0)
+			var index = rating_candidate_table[value].indexOf( name );
+			if ( index != -1 )
 			{
-				for (var i = 0; i < ui.value; ++i)
+				rating_candidate_table[value].splice( index, 1 );
+				break;
+			}
+		}
+	}
+
+	var rating_background_colors =
+	[
+		"minus_5",
+		"minus_4",
+		"minus_3",
+		"minus_2",
+		"minus_1",
+		"dont_care",
+		"plus_1",
+		"plus_2",
+		"plus_3",
+		"plus_4",
+		"plus_5"
+	];
+
+	function populate_slider_labels()
+	{
+		$( "#slider_labels" ).html( "" );
+		for ( var value = rating_candidate_table.length - 1; value >= 0; --value )
+		{
+			var candidates = rating_candidate_table[value];
+			$( "#slider_labels" ).append( "<div class'candidate_label' id='" + rating_background_colors[value] + "'></div>" );
+			for (var index in candidates)
+			{
+				var name = candidates[index];
+				var html;
+				if ( $( "div.selected_candidate" ).html() == name )
+				{
+					html = "<span class='selected_candidate'>" + name + "</span> ";
+				}
+				else if ( index != candidates.length - 1 )
+				{
+					html = name + ", ";
+				}
+				else
 				{
-					$( "#selected_rating" ).append(":) ");
+					html = name + " ";
 				}
+				$( ".candidate_label:last" ).append( html );
 			}
-			else if (ui.value == 0)
+		}
+	}
+
+	function change_selcted_rating( value )
+	{
+		var name = $( ".selected_candidate" ).html()
+		$( "#selected_rating" ).html( name + " " );
+		candidate_rating_table[name] = value;
+		remove_candidate_from_rating_table( name );
+		rating_candidate_table[value + 5].push( name );
+		populate_slider_labels();
+
+		if ( value > 0 )
+		{
+			for ( var i = 0; i < value; ++i )
 			{
-				$( "#selected_rating" ).append(":| ");
+				$( "#selected_rating" ).append( "<img src='../thumbs_up.png' width='7' height='13'/> " );
 			}
-			else
+		}
+		else if ( value == 0 )
+		{
+			$( "#selected_rating" ).append( "___ " );
+		}
+		else
+		{
+			for ( var i = 0; i < value * -1; ++i )
 			{
-				for (var i = 0; i < ui.value * -1; ++i)
-				{
-					$( "#selected_rating" ).append(":( ");
-				}
+				$( "#selected_rating" ).append( "<img src='../thumbs_down.png' width='7' height='13'/> " );
 			}
 		}
-	});
-
-	$( "#selected_rating" ).html("Lorem Ipsum: :| ");
-
-	var ratings_table = {
-
-			"Lorem Ipsum": 0,
-			"Dolor Sit": 0,
-			"Amet Consectetur": 0,
-			"Adipiscing Elit": 0,
-			"Cras A. Posuere": 0,
-			"Nunc Donec": 0,
-			"Imperdiet Bibendum": 0,
-			"Orci Vitae": 0,
-			"Tincidunt Vestibulum": 0,
-			"Commodo Elementum": 0
 	};
 
-	for (var name in ratings_table)
+	$( "#slider_box" ).slider({
+		min: -5,
+		max: 5,
+		orientation: "vertical",
+		slide: function( event, ui )
+		{
+			change_selcted_rating( ui.value );
+		}
+
+	});
+
+	for ( var name in candidate_rating_table )
 	{
-		$( "#candidates" ).append("<div class='candidate' data-candidate='" + name + "'>" + name + "</div>");
+		$( "#candidates" ).append( "<div class='candidate'>" + name + "</div>" );
 	}
 
-	$( ".candiate" ).on("click", function(event){
-		alert("Joy");
-		$( ".candidate" ).removeClass("selected_candidate");
-		$( this ).addClass("selected_candidate");
+	$( ".candidate:first" ).addClass( "selected_candidate" );
+	change_selcted_rating( 0 );
+
+	$( ".candidate" ).click(function()
+	{
+		$( ".candidate" ).removeClass( "selected_candidate" );
+		$( this ).addClass( "selected_candidate" );
+		var rating = candidate_ratings_table[$( this ).html()];
+		$( "#slider_box" ).slider( "value", rating );
+		change_selcted_rating( rating );
+	});
+
+	$( "#plus_box" ).click(function()
+	{
+		var rating = candidate_rating_table[$( ".selected_candidate" ).html()];
+		if (rating != 5)
+		{
+			$( "#slider_box" ).slider( "value", rating + 1 );
+			change_selcted_rating( rating + 1 );
+		}
+	});
+
+	$( "#minus_box" ).click(function()
+	{
+		var rating = candidate_rating_table[$( ".selected_candidate" ).html()];
+		if (rating != -5)
+		{
+			$( "#slider_box" ).slider( "value", rating - 1 );
+			change_selcted_rating( rating - 1 );
+		}
 	});
+
+	for ( var i = 0; i < 11; ++i )
+	{
+		$( "#tick_marks" ).append( "-<br/>" );
+	}
 
-});
-
+});

VoteByRating/votebyrating/static/style/page_rating.css

@@ -1,66 +1,141 @@
 body
 {
-    width: 640px;
-    height: 960px;
-    border: 0.25em solid black;
+  width: 640px;
+  height: 960px;
+  border: 2px solid black;
 }
 
-.column
+div.selected_candidate
 {
+	background-color: #6495ED;
+	color: white;
+	font-weight: bold;
+	font-size: 23px;
+}
+
+span.selected_candidate
+{
+	font-size: 11px;
+	font-weight: bold;
 }
 
 .candidate
 {
-    display: block;
-    width: 100%;
-    border: 0.125em solid black;
+  border: 1px solid black;
+  height: 25px;
+  font-size: 20px;
 }
 
 .slider_button
 {
-    width: 20px;
-    height: 20px;
-    border: .125em solid black;
-    display: block;
+  width: 20px;
+  height: 20px;
+  border: 1px solid black;
+  text-align: center;
 }
 
-.selected_candidate
+.candidate_label
 {
-	background-color: #6495ED;
-	color: white;
-	font-weight: bold;
+	border: 1px solid black;
+	font-size: 10px;
+	height: 40px;
+	margin-top: 5px;
 }
 
 #candidates
 {
-    width: 50%;
-    float: left;
+  float: left;
+  width: 250px;
+  padding: 10px;
 }
 
 #rating
 {
-    width: 40%;
-    padding: 0.75em;
-    float: right;
+  float: left;
+  width: 50px;
+  padding: 10px;
 }
 
-#plus_box
+#slider_box
 {
+  width: 10px;
+  height: 500px;
+  border: 1px solid black;
+  margin-left: 5px;
 }
 
-#minus_box
+#selected_rating
 {
+	float: right;
+	padding-right: 5px;
 }
 
-#slider_box
+#tick_marks
 {
-    width: 4px;
-    height: 500px;
-    display: block;
+	float: left;
+	width: 5px;
+	padding-top: 6px;
+	padding-left: 10px;
+	line-height: 50px;
 }
 
-#selected_rating
+#slider_labels
 {
-	float: right;
-	display: block;
+	float: left;
+	width: 275px;
+}
+
+#plus_5
+{
+	background-color: #00FF00
+}
+
+#plus_4
+{
+	background-color: #33FF00
+}
+
+#plus_3
+{
+	background-color: #66FF00
+}
+
+#plus_2
+{
+	background-color: #99FF00
+}
+
+#plus_1
+{
+	background-color: #CCFF00
+}
+
+#dont_care
+{
+	background-color: #FFFF00
+}
+
+#minus_1
+{
+	background-color: #FFCC00
+}
+
+#minus_2
+{
+	background-color: #FF9900
+}
+
+#minus_3
+{
+	background-color: #FF6600
+}
+
+#minus_4
+{
+	background-color: #FF3300
+}
+
+#minus_5
+{
+	background-color: #FF0000
 }