Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Changes to page rating stuff #1

Merged
merged 11 commits into from
This page is out of date. Refresh to see the latest.
189 VoteByRating/votebyrating/static/scripts/page_rating.js
View
@@ -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/>" );
+ }
-});
-
+});
133 VoteByRating/votebyrating/static/style/page_rating.css
View
@@ -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
}
BIN  VoteByRating/votebyrating/static/thumbs_down.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  VoteByRating/votebyrating/static/thumbs_up.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 VoteByRating/votebyrating/templates/rating.html
View
@@ -1,19 +1,21 @@
<html lang="en">
<head>
- <link rel="stylesheet" type="text/css" href="../static/style/page_rating.css"/>
- <link rel="stylesheet" type="text/css" href="../static/style/ui-lightness/jquery-ui-1.8.20.custom.css"/>
- <script type="text/javascript" src="../static/scripts/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="../static/scripts/jquery-ui-1.8.20.custom.min.js"></script>
- <script type="text/javascript" src="../static/scripts/page_rating.js"></script>
- <title>Test</title>
+ <link rel="stylesheet" type="text/css" href="../static/style/page_rating.css"/>
+ <link rel="stylesheet" type="text/css" href="../static/style/ui-lightness/jquery-ui-1.8.20.custom.css"/>
+ <script type="text/javascript" src="../static/scripts/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src="../static/scripts/jquery-ui-1.8.20.custom.min.js"></script>
+ <script type="text/javascript" src="../static/scripts/page_rating.js"></script>
+ <title>Vote By Rating</title>
</head>
<body>
- <div class="column" id="candidates"></div>
- <div id="selected_rating"></div>
- <div class="column" id="rating">
- <div class="slider_button" id="plus_box">+</div>
- <div id="slider_box"></div>
- <div class="slider_button" id="minus_box">-</div>
- </div>
+ <div id="selected_rating"></div>
+ <div id="candidates"></div>
+ <div id="tick_marks"></div>
+ <div id="rating">
+ <div class="slider_button" id="plus_box">+</div>
+ <div id="slider_box"></div>
+ <div class="slider_button" id="minus_box">-</div>
+ </div>
+ <div id="slider_labels"></div>
</body>
</html>
Something went wrong with that request. Please try again.