v0.1 + flag problematic entry, give reason

recommender/static/html/recommender.html

@@ -114,7 +114,7 @@
   text-overflow:ellipsis;
 }
 
-.recommender_entryId, .recommender_url, .recommender_descriptionSlot {
+.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason {
   display:none;
 }
 
@@ -143,11 +143,11 @@
   float: left;
   font-size: small;
 }*/
-.addSourceBlockTitle, .editSourceBlockTitle {
+.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
   margin-bottom: 1em;
 }
 
-.editSourceBlock, .recommender_add {
+.editSourceBlock, .recommender_add, .flagSourceBlock {
   padding-left: 1em;
 }
 
@@ -187,24 +187,24 @@
 } */
 /*
 [title]{
-	position:relative;
+    position:relative;
 }
 [title]:after{
-	content:attr(title);
-	color:#fff;
-	background:#333;
-	background:rgba(51,51,51,0.75);
-	padding:5px;
-	position:absolute;
-	left:-9999px;
-	opacity:0;
-	bottom:100%;
-	white-space:nowrap;
-	-webkit-transition:0.25s linear opacity;
+    content:attr(title);
+    color:#fff;
+    background:#333;
+    background:rgba(51,51,51,0.75);
+    padding:5px;
+    position:absolute;
+    left:-9999px;
+    opacity:0;
+    bottom:100%;
+    white-space:nowrap;
+    -webkit-transition:0.25s linear opacity;
 }
 [title]:hover:after{
-	left:5px;
-	opacity:1;
+    left:5px;
+    opacity:1;
 }*/
 
 .downArrowIcon:before { content: '▼'; }
@@ -221,20 +221,30 @@ form { margin: 0em; }
 
 <div class="recommender_block">
   <div class="recommender_recommendations">
-	<div class="recommender_content">
+    <div class="recommender_content">
       <div class="recommender_row_top hide-show resource_list_expanded">
-	    Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div>
-	  </div>
-	  <div class='recommender_row_inner'>
-	    <div class="recommender_row">
+        Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div>
+      </div>
+      <div class='recommender_row_inner'>
+        <div class="recommender_row">
           % for elem in resources:
-            % if elem['id'] in downvotes:
-              <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='downvoting'" />
-            % elif elem['id'] in upvotes:
-              <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='upvoting'" />
-            % else:
-              <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='nonevoting'" />
-            % endif
+            <%
+              if elem['id'] in downvotes:
+                voteMode = "downvoting"
+              elif elem['id'] in upvotes:
+                voteMode = 'upvoting'
+              else:
+                voteMode = 'nonevoting'
+        
+              if elem['id'] in flagId:
+                flagMode = 'problematic'
+                reason = flagReason[flagId.index(elem['id'])]
+              else:
+                flagMode = ''
+                reason = ''
+            %>
+            <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode" />
+            
           % endfor
         </div>
         <div class='pagination'> </div>
@@ -245,9 +255,15 @@ form { margin: 0em; }
     </div>
     <div class='recommender_modify'>
       <div class='recommender_modify_title_container'><div class='backToViewButton'>&lt; Related resources</div><div class='recommender_modify_title'></div></div>
-      <div class="editSourceBlock" id="editSourceBlock">
+      <div class="flagSourceBlock">
+        <div class="flagSourceBlockTitle">Give or edit the reasons why you flagged this resource, or unflag it.</div>
+        Reasons: <input type="text" class="flag_reason" style="height: 25px; position: relative; left: 10px;"><br>
+        <input type="button" value="Save the reason" class="flag_reason_submit" style="margin-top: 0.5em">
+        <input type="button" value="Unflag the resource" class="unflag_button" style="margin-top: 0.5em">
+      </div>
+      <div class="editSourceBlock">
       </div>
-      <div class="recommender_add" id="recommender_add">
+      <div class="recommender_add">
         <div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div>
         Description: <input type="text" class="in_title" style="height: 25px; position: relative; left: 10px;"><br>
         HyperLink: <input type="text" class="in_url" style="height: 25px; position: relative; left: 22px;"><br>

recommender/static/html/resourcebox.html

-<%page args="title,votes,url,description,id,isProblematic,voteMode"/> 
-      <div class="recommender_resource">
+<%page args="title,votes,url,description,id,isProblematic,problematicReason,voteMode"/> 
+  <div class="recommender_resource">
 	<div class="recommender_vote_box">
 	  <div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
 	  <div class="recommender_vote_score ${voteMode}"><b>${votes}</b></div>
 	  <div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
 	</div>
-	<div class="recommender_blurb"><div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div><div class="recommender_descriptionSlot">${description}</div><div class="recommender_entryId">${id}</div></div>
+	<div class="recommender_blurb">
+	  <div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div>
+	  <div class="recommender_descriptionSlot">${description}</div>
+	  <div class="recommender_entryId">${id}</div>
+	  <div class="recommender_problematicReason">${problematicReason}</div>
+    </div>
 	<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div>
-      </div>
+  </div>

recommender/static/js/src/recommender.js

@@ -13,17 +13,18 @@ function RecommenderXBlock(runtime, element) {
 	/* resource list collapse or expansion */
     $(".hide-show").click(function () {
 	  if ($(this).hasClass('resource_list_expanded')) {
-		$(this).find('.hide-show-icon').removeClass('upArrowIcon').addClass('downArrowIcon');
+		//$(this).find('.hide-show-icon').removeClass('upArrowIcon').addClass('downArrowIcon');
 		$(".recommender_row_inner", element).slideUp('fast');
 		$('.resource_add_button').css('visibility', 'hidden');
 		$(this).css('cursor', 's-resize');
 	  }
 	  else {
-		$(this).find('.hide-show-icon').removeClass('downArrowIcon').addClass('upArrowIcon');
+		//$(this).find('.hide-show-icon').removeClass('downArrowIcon').addClass('upArrowIcon');
 	    $(".recommender_row_inner", element).slideDown('fast');
 	    $('.resource_add_button').css('visibility', 'visible');
 	    $(this).css('cursor', 'n-resize');
 	  }
+	  $(this).find('.hide-show-icon').toggleClass('upArrowIcon').toggleClass('downArrowIcon');
 	  $(this).toggleClass('resource_list_expanded');
 	  addTooltip();
     });
@@ -93,9 +94,10 @@ function RecommenderXBlock(runtime, element) {
 
     /* change between different mode (resource list or add/edit mode) */
     function backToView() {
-	  $('.recommender_add').hide();
-	  $('.editSourceBlock').hide();
 	  $('.recommender_modify').hide();
+	  $('.flagSourceBlock').hide();
+      $('.editSourceBlock').hide();
+      $('.recommender_add').hide();
 	  $('.recommender_content').show();
 	  if ($('.recommender_row_top').css('cursor') == 's-resize') { $(".hide-show").click(); }
     }
@@ -185,12 +187,12 @@ function RecommenderXBlock(runtime, element) {
                   '</div>' + 
                   '<div class="recommender_blurb"><div class="recommender_title">' + 
                   '<a href="' + data['resource']['url'] + '" target="_blank">' + data['resource']['title'] + '</a>' + '</div>' +
-                  '<div class="recommender_url">' + data['resource']['url'] + 
-                  '</div><div class="recommender_descriptionSlot">' + data['resource']['description'] +
+                  '<div class="recommender_descriptionSlot">' + data['resource']['description'] +
                   '</div><div class="recommender_entryId">' + result['id'] +
-                  '</div></div><div class="recommender_edit">' +
+                  '</div><div class="recommender_problematicReason"></div>' +
+                  '</div><div class="recommender_edit">' +
                   '<span class="ui-icon ui-icon-pencil resource_edit_button"></span>' +
-                  '<span class="ui-icon ui-icon-flag flagResource notProblematic" title="Flag irrelevant resource">' +
+                  '<span class="ui-icon ui-icon-flag flagResource" title="Flag irrelevant resource">' +
                   '</span></div></div>';
 
                 /* show the added resource at right place (pos), based on sorting the votes, and lead student to that page */
@@ -202,13 +204,14 @@ function RecommenderXBlock(runtime, element) {
 	              $('.recommender_resource:eq(' + pos.toString() + ')').before(content);
                   currentPage = Math.ceil((pos + 1)/entriesPerPage); 
                 }
+                addResourceReset();
+	            unbindEvent();
+	            bindEvent();
+	            paginationRow();
+			    pagination();
+	            backToView();
               }
-              addResourceReset();
-              unbindEvent();
-              bindEvent();
-              paginationRow();
-			  pagination();
-              backToView();
+              else { alert('add redundant resource'); }
             }
         });
     });
@@ -385,6 +388,7 @@ function RecommenderXBlock(runtime, element) {
                   $('.editSourceBlock').empty();
                   backToView();
                 }
+                else { alert('add redundant resource'); }
               }
             });
           });
@@ -392,28 +396,71 @@ function RecommenderXBlock(runtime, element) {
 
 		/* flag problematic resource: TODO */
         $('.flagResource').click(function() {
-          var data = {};
-          if ($(this).hasClass('notProblematic')) {
-            data['isProblematic'] = 'problematic';
-            $(this).removeClass('notProblematic').addClass('problematic');
-          }
-          else {
-            data['isProblematic'] = 'notProblematic';
-            $(this).removeClass('problematic').addClass('notProblematic');
-          }
-          data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
-          $.ajax({
-            type: "POST",
-            url: flagResourceUrl,
-            data: JSON.stringify(data)
-          });
-        });
+	      $('.flagSourceBlock').show();
+		  $('.recommender_content').hide();
+	  	  $('.recommender_modify').show();
+		  $('.recommender_modify_title').text('Reasons for flagging the resource');
+
+          var flagDiv = $(this);
+          var flaggedResourceDiv = $(this).parent().parent();
+          $('.flag_reason').val($(flaggedResourceDiv).find('.recommender_problematicReason').text());
+
+          if (!$(this).hasClass('problematic')){
+            data = {};
+            data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
+            data['reason'] = '';
+            data['isProblematic'] = true;
+	        $.ajax({
+	          type: "POST",
+	          url: flagResourceUrl,
+	          data: JSON.stringify(data),
+	          success: function(result) {
+		        $(flagDiv).addClass('problematic');
+	          }
+	        });
+	      }
+	      addTooltip();
+	      $('.flag_reason_submit').unbind();
+	      $('.unflag_button').unbind();
+	
+	      $('.flag_reason_submit').click(function() {
+            data = {};
+            data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
+            data['reason'] = $('.flag_reason').val();
+            data['isProblematic'] = true;
+            $.ajax({
+	            type: "POST",
+	            url: flagResourceUrl,
+	            data: JSON.stringify(data),
+	            success: function(result) {
+		          $(flagDiv).addClass('problematic');
+		          $(flaggedResourceDiv).find('.recommender_problematicReason').text(data['reason']);
+		          backToView();
+	            }
+	        });
+	      });
+		
+		  $('.unflag_button').click(function() {
+            data = {};
+            data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
+            data['isProblematic'] = false;
+            $.ajax({
+	            type: "POST",
+	            url: flagResourceUrl,
+	            data: JSON.stringify(data),
+	            success: function(result) {
+		          $(flagDiv).removeClass('problematic');
+		          $(flaggedResourceDiv).find('.recommender_problematicReason').text('');
+		          backToView();
+	            }
+	        });
+	      });
+		});
+
         addTooltip();
       }
 
     function addTooltip() {
-      $('.notProblematic').attr('title', 'Flag this resource as problematic and give the reason');
-      $('.problematic').attr('title', 'Edit the reason of this problematic resource');
       $('.resource_add_button').attr('title', 'Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource');
       $('.resource_edit_button').attr('title', 'Edit the description, hypelink, and previewing screenshot of this resource');
       $('.recommender_vote_arrow_up').attr('title', 'Upvote for a helpful resource');
@@ -426,15 +473,20 @@ function RecommenderXBlock(runtime, element) {
       $('.edit_title').attr('title', 'Type in the description of the resource');
       $('.edit_url').attr('title', 'Type in the hyperlink to the resource');
       $('.backToViewButton').attr('title', 'Back to list of related resources');
+
+      if ($('.flagResource').hasClass('problematic')) { $('.flagResource').attr('title', 'Unflag this problematic resource or edit the reason for it'); }
+      else { $('.flagResource').attr('title', 'Flag this resource as problematic and give the reason' ); }
+
       if ($('.recommender_row_top').hasClass('resource_list_expanded')) { $('.recommender_row_top').attr('title', 'Select to hide the list'); }
       else { $('.recommender_row_top').attr('title', 'Select for expanding resource list' ); }
     }
 
     function initial() {
 	  $(".hide-show").click();
-	  $('.editSourceBlock').hide();
-	  $('.recommender_add').hide();
 	  $('.recommender_modify').hide();
+	  $('.flagSourceBlock').hide();
+      $('.editSourceBlock').hide();
+      $('.recommender_add').hide();
 	  paginationRow();
 	  pagination();
 	  addResourceReset();