Merge branch 'pedagogy_v2_front' into 'pedagogy_v2'

Frontend for pedagogy

See merge request ae/Sith!218

core/static/core/style.scss

@@ -30,6 +30,12 @@ $shadow-color: rgb(223, 223, 223);
 
 $background-bouton-color: hsl(0, 0%, 90%);
 
+/*--------------------------MEDIA QUERY HELPERS------------------------*/
+$small-devices: 576px;
+$medium-devices: 768px;
+$large-devices: 992px;
+$extra-large-devices: 1200px;
+
 /*--------------------------------GENERAL------------------------------*/
 
 body {
@@ -1564,7 +1570,6 @@ footer {
 form {
   margin: 0px auto;
   margin-bottom: 10px;
-  width: 60%;
 }
 
 label {
@@ -1668,3 +1673,445 @@ label {
   }
 
 }
+
+/* --------------------------------------pedagogy-----------------------------------*/
+
+$pedagogy-blue: #1bb9ea;
+$pedagogy-orange: #ea7900;
+$pedagogy-hover-blue: #0e97ce;
+$pedagogy-light-blue: #caf0ff;
+$pedagogy-white-text: #f0f0f0;
+
+.pedagogy {
+    &.star-not-checked {
+      color : #f7f7f7;
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+    &.star-checked {
+      color: $pedagogy-orange;
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+    @media screen and (max-width: $large-devices){
+      &.star-not-checked {
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+      &.star-checked {
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+
+  #dynamic_view {
+    font-size: 1.1em;
+
+    table {
+    }
+
+    td {
+      text-align: center;
+      border: none;
+    }
+
+  }
+
+  #search_form {
+    margin: 0px;
+    width: 100%;
+
+    .input-search {
+      background: $pedagogy-light-blue;
+      width: 300px;
+      height: 21px;
+    }
+    .button-search {
+      background: $pedagogy-orange;
+      color: white;
+      font-weight: bold;
+      margin-left: 20px;
+    }
+    .radio-guide input[type="radio"],input[type="checkbox"] {
+      display:none;
+    }
+    .radio-guide {
+      margin-top: 10px;
+      color: white;
+    }
+    .radio-guide label {
+      display:inline-block;
+      background-color: $pedagogy-blue;
+      padding: 10px 20px;
+      font-family:Arial;
+      font-size:16px;
+      border-radius: 4px;
+    }
+    .radio-guide input[type="radio"]:checked + label {
+      background-color:$pedagogy-orange;
+    }
+    .radio-guide input[type="checkbox"]:checked + label {
+      background-color:$pedagogy-orange;
+    }
+    .radio-guide  label:hover {
+      background-color:  $pedagogy-hover-blue;
+    }
+
+    #radioAUTUMN + label {
+      margin-left: 50px;
+    }
+  }
+
+  #uv_detail {
+    color: #062f38;
+
+    .uv-quick-info-container {
+      display: grid;
+      grid-template-columns: 20% 20% 20% 20% auto;
+      grid-template-rows: auto auto;
+      grid-template-areas:
+        "hours-cm hours-td hours-tp hours-te hours-the"
+        "department credit-type semester . ." ;
+    }
+
+    .department {
+      grid-area: department;
+    }
+
+    .credit-type {
+      grid-area: credit-type;
+    }
+
+    .semester {
+      grid-area: semester;
+    }
+
+    .hours-cm {
+      grid-area: hours-cm;
+    }
+
+    .hours-td {
+      grid-area: hours-td;
+    }
+
+    .hours-tp {
+      grid-area: hours-tp;
+    }
+
+    .hours-te {
+      grid-area: hours-te;
+    }
+
+    .hours-the {
+      grid-area: hours-the;
+    }
+
+    #leave_comment {
+      .leave-comment-grid-container {
+        display: grid;
+        grid-template-columns: 270px auto;
+        grid-template-rows: 100%;
+        grid-template-areas: "stars comment";
+
+        @media screen and (max-width: $large-devices){
+          grid-template-columns: 100%;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+            "stars"
+            "comment";
+        }
+      }
+
+      .ui-accordion-content {
+        background-color: $white-color;
+        border-color: $pedagogy-orange;
+        border-right: none;
+      }
+
+      .form-stars {
+        grid-area: stars;
+      }
+
+      .form-comment {
+        grid-area: comment;
+      }
+
+      .ui-accordion-header {
+        background-color: $pedagogy-orange;
+        color: $pedagogy-white-text;
+        clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
+
+        @media screen and (max-width: $large-devices){
+          clip-path: none;
+        }
+      }
+
+      .ui-accordion-header-icon {
+        color: $pedagogy-white-text;
+        margin-right: 10px;
+      }
+
+      .input-stars {
+        margin-top: 20px;
+      }
+
+      input[type="submit"] {
+        float: right;
+      }
+    }
+
+    .uv-details-container {
+      display: grid;
+      grid-template-columns: 150px 100px auto;
+      grid-template-rows: 156px 1fr;
+      grid-template-areas:
+        "grade grade-stars uv-infos"
+        ". . uv-infos";
+
+      @media screen and (max-width: $large-devices){
+        grid-template-columns: 50% 50%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+          "grade grade-stars"
+          "uv-infos uv-infos";
+      }
+    }
+
+    .grade {
+      grid-area: grade;
+      color: $pedagogy-white-text;
+      background-color: $pedagogy-blue;
+      padding-right: 10px;
+
+      > p {
+        text-align: right;
+          font-weight: bold;
+      }
+    }
+
+    .grade-stars {
+      grid-area: grade-stars;
+      color: $pedagogy-white-text;
+      background-color: $pedagogy-blue;
+      font-weight: bold;
+    }
+
+    .uv-infos {
+      grid-area: uv-infos;
+      padding-left: 10px;
+    }
+
+    .comment-container {
+      display: grid;
+      grid-template-columns: 300px auto;
+      grid-template-rows: auto auto auto;
+      grid-template-areas:
+        "grade-block comment"
+        "grade-block info"
+        "comment-end-bar comment-end-bar";
+      margin-bottom: 30px;
+      margin-top: 10px;
+
+      @media screen and (max-width: $large-devices){
+        grid-template-columns: auto;
+        grid-template-rows: auto auto auto auto;
+        grid-template-areas:
+          "grade-block"
+          "comment"
+          "info"
+          "comment-end-bar"
+      }
+
+      .grade-block {
+        grid-area: grade-block;
+        width: 300px;
+
+        display: grid;
+        grid-template-columns: 150px 150px;
+        grid-template-rows: 156px auto;
+        grid-template-areas:
+          "grade-type grade-stars"
+          "grade-extension grade-extension";
+        grid-gap: 15px;
+
+        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
+        align-items: start;
+
+        background-color: $pedagogy-blue;
+
+        @media screen and (max-width: $large-devices){
+          grid-template-columns: 50% auto;
+          grid-template-rows: auto;
+          grid-template-areas:"grade-type grade-stars";
+          width: auto;
+          clip-path: none;
+          align-content: space-evenly;
+          align-items: end;
+        }
+
+        .grade-extension {
+          grid-area: grade-extension;
+          background-color: $pedagogy-blue;
+        }
+
+        .grade-type {
+          grid-area: grade-type;
+
+          > p {
+            color: $pedagogy-white-text;
+            font-weight: bold;
+            text-align: right;
+          }
+        }
+
+        .grade-stars {
+          grid-area: grade-stars;
+        }
+      }
+
+      .comment {
+        grid-area: comment;
+
+        display: grid;
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+          "anchor"
+          "markdown";
+
+        @media screen and (max-width: $large-devices){
+          border-left: solid;
+          border-right: solid;
+          border-color: $pedagogy-blue;
+        }
+
+        .anchor {
+          grid-area: anchor;
+          text-align: right;
+          margin-right: 15px;
+        }
+
+        .markdown {
+          grid-area: markdown;
+
+          min-height: 139px;
+          margin-top: 0px;
+          margin-right: 0px;
+          padding: 10px;
+          text-align: justify;
+          overflow: auto;
+        }
+      }
+
+      .info {
+        grid-area: info;
+        padding-bottom: 10px;
+
+        @media screen and (max-width: $large-devices){
+          border-left: solid;
+          border-right: solid;
+          border-color: $pedagogy-blue;
+        }
+
+        .status-reported {
+          color: red;
+          float: left;
+          padding-left: 10px;
+        }
+
+        .actions {
+          float: right;
+        }
+      }
+
+      .comment-end-bar {
+        grid-area: comment-end-bar;
+
+        display: grid;
+        grid-template-columns: 33% auto auto;
+        grid-template-rows: 2.5em;
+        grid-template-areas: "author date report";
+
+        background-color: $pedagogy-blue;
+        margin-top: -1px;
+
+        @media screen and (max-width: $large-devices){
+          grid-template-columns: auto;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+            "report"
+            "date"
+            "author";
+          margin-top: 0px;
+          text-align: center;
+        }
+
+        .author {
+          grid-area: author;
+
+          padding-top: 6px;
+          padding-left: 20px;
+
+          background-color: $pedagogy-orange;
+          clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);
+
+          @media screen and (max-width: $large-devices){
+            clip-path: none;
+            padding: 0px;
+            padding-bottom: 7px;
+          }
+
+          a {
+            color: $pedagogy-white-text;
+            font-weight: bold;
+          }
+
+          a:hover {
+            color: $pedagogy-hover-blue;
+          }
+
+        }
+
+        .date {
+          grid-area: date;
+          color: $pedagogy-white-text;
+
+          @media screen and (max-width: $large-devices){
+            padding-bottom: 7px;
+          }
+        }
+
+        .report {
+          grid-area: report;
+          justify-self: right;
+          padding-right: 30px;
+          padding-left: 30px;
+
+          a {
+            color: $pedagogy-white-text;
+          }
+
+          a:hover {
+            color: $pedagogy-hover-blue;
+          }
+
+          @media screen and (max-width: $large-devices){
+            text-align: center;
+            justify-self: inherit;
+            padding-bottom: 7px;
+            background-color: $white-color;
+
+            border-left: solid;
+            border-right: solid;
+            border-color: $pedagogy-blue;
+
+            a {
+              color: $black-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}

core/templates/core/user_tools.jinja

@@ -104,6 +104,16 @@
     <li><a href="{{ url('club:tools', club_id=m.club.id) }}">{{ m.club }}</a></li>
     {% endfor %}
 </ul>
+
+<hr>
+<h4>{% trans %}Pedagogy{% endtrans %}</h4>
+<ul>
+    {% if user.is_in_group(settings.SITH_GROUP_PEDAGOGY_ADMIN_ID) or user.is_root %}
+    <li><a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a></li>
+    <li><a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a></li>
+    {% endif %}
+</ul>
+
 <hr>
 <h4>{% trans %}Elections{% endtrans %}</h4>
 <ul>
@@ -113,6 +123,8 @@
     <li><a href="{{ url('election:create') }}">{% trans %}Create a new election{% endtrans %}</a></li>
     {%- endif -%}
 </ul>
+
+<hr>
 <h4>{% trans %}Other tools{% endtrans %}</h4>
 <ul>
     <li><a href="{{ url('core:to_markdown') }}">{% trans %}Convert dokuwiki/BBcode syntax to Markdown{% endtrans %}</a></li>

pedagogy/forms.py

@@ -24,6 +24,8 @@
 
 from django import forms
 from django.utils.translation import ugettext_lazy as _
+from django.forms.widgets import Widget
+from django.templatetags.static import static
 
 from core.views.forms import MarkdownInput
 from core.models import User
@@ -72,6 +74,20 @@ class UVForm(forms.ModelForm):
         self.fields["author"].initial = author_id
 
 
+class StarList(forms.NumberInput):
+    template_name = "pedagogy/starlist.jinja"
+
+    def __init__(self, nubmer_of_stars=0):
+        super(StarList, self).__init__(None)
+        self.number_of_stars = nubmer_of_stars
+
+    def get_context(self, name, value, attrs):
+        context = super(StarList, self).get_context(name, value, attrs)
+        context["number_of_stars"] = range(0, self.number_of_stars)
+        context["translations"] = {"do_not_vote": _("Do not vote")}
+        return context
+
+
 class UVCommentForm(forms.ModelForm):
     """
     Form handeling creation and edit of an UVComment
@@ -93,6 +109,11 @@ class UVCommentForm(forms.ModelForm):
             "comment": MarkdownInput,
             "author": forms.HiddenInput,
             "uv": forms.HiddenInput,
+            "grade_global": StarList(5),
+            "grade_utility": StarList(5),
+            "grade_interest": StarList(5),
+            "grade_teaching": StarList(5),
+            "grade_work_load": StarList(5),
         }
 
     def __init__(self, author_id, uv_id, *args, **kwargs):

pedagogy/models.py

@@ -28,6 +28,9 @@ from django.utils import timezone
 from django.core import validators
 from django.conf import settings
 from django.utils.functional import cached_property
+from django.core.urlresolvers import reverse
+
+from rest_framework import serializers
 
 from core.models import User
 
@@ -58,6 +61,9 @@ class UV(models.Model):
 
         return int(sum(comments.values_list(field, flat=True)) / comments.count())
 
+    def get_absolute_url(self):
+        return reverse("pedagogy:uv_detail", kwargs={"uv_id": self.id})
+
     @cached_property
     def grade_global_average(self):
         return self.__grade_average_generic("grade_global")
@@ -302,3 +308,30 @@ class UVCommentReport(models.Model):
         User, related_name="reported_uv_comment", verbose_name=_("reporter")
     )
     reason = models.TextField(_("reason"))
+
+
+# Custom serializers
+
+
+class UVSerializer(serializers.ModelSerializer):
+    """
+    Custom seralizer for UVs
+    Allow adding more informations like absolute_url
+    """
+
+    class Meta:
+        model = UV
+        fields = "__all__"
+
+    absolute_url = serializers.SerializerMethodField()
+    update_url = serializers.SerializerMethodField()
+    delete_url = serializers.SerializerMethodField()
+
+    def get_absolute_url(self, obj):
+        return obj.get_absolute_url()
+
+    def get_update_url(self, obj):
+        return reverse("pedagogy:uv_update", kwargs={"uv_id": obj.id})
+
+    def get_delete_url(self, obj):
+        return reverse("pedagogy:uv_delete", kwargs={"uv_id": obj.id})

pedagogy/templates/pedagogy/guide.jinja

@@ -6,18 +6,225 @@
 {% endblock %}
 
 {% block content %}
+<div class="pedagogy">
+	<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
 		{% if can_create_uv(user) %}
 		<p>
 			<a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
 		</p>
-	{% endif %}
-    {% for uv in object_list %}
 		<p>
-	    	<a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}">{{ uv.code }}</a>
+			<a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
-	    	{% if user.is_owner(uv) -%}
-	    	  	<a href="{{ url('pedagogy:uv_update', uv_id=uv.id) }}">{% trans %}Edit{% endtrans %}</a>
-	    	  	<a href="{{ url('pedagogy:uv_delete', uv_id=uv.id) }}">{% trans %}Delete{% endtrans %}</a>
-	    	{%- endif -%}
 		</p>
+		{% endif %}
+		<p>
+			<input id="search_input" class="input-search" type="text" name="search">
+			<button class="button-search">{% trans %}Search{% endtrans %}</button>
+		</p>
+		<div class="radio-guide">
+			{% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
+				<input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
 			{% endfor %}
+		</div>
+		<div class="radio-guide">
+			{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
+				<input type="radio" name="credit_type" id="radio{{ credit_type }}" value="{{ credit_type }}"><label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
+			{% endfor %}
+
+			<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN"><label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
+			<input type="checkbox" name="semester" id="radioSPRING" value="SPRING"><label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
+			<span><input type="checkbox" name="semester" id="radioAP" value="AUTUMN_AND_SPRING"><label for="radioAP">AP</label></span>
+		</div>
+		<input type="text" name="json" hidden>
+	</form>
+	<br>
+	<table id="dynamic_view">
+		<thead>
+			<tr>
+				<td>{% trans %}UV{% endtrans %}</td>
+				<td>{% trans %}Title{% endtrans %}</td>
+				<td>{% trans %}Department{% endtrans %}</td>
+				<td>{% trans %}Credit type{% endtrans %}</td>
+				<td><i class="fa fa-leaf"></i></td>
+				<td><i class="fa fa-sun-o"></i></td>
+				{% if can_create_uv(user) %}
+				<td>{% trans %}Edit{% endtrans %}</td>
+				<td>{% trans %}Delete{% endtrans %}</td>
+				{% endif %}
+			</tr>
+		</thead>
+		<tbody id="dynamic_view_content">
+			{% for uv in object_list %}
+			<tr onclick="window.location.href = `{{ url('pedagogy:uv_detail', uv_id=uv.id) }}`">
+				<td><a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}">{{ uv.code }}</a></td>
+				<td>{{ uv.title }}</td>
+				<td>{{ uv.department }}</td>
+				<td>{{ uv.credit_type }}</td>
+				<td>
+					{% if uv.semester in ["AUTUMN", "AUTUMN_AND_SPRING"] %}
+						<i class="fa fa-leaf"></i>
+					{% endif %}
+				</td>
+				<td>
+					{% if uv.semester in ["SPRING", "AUTUMN_AND_SPRING"] %}
+						<i class="fa fa-sun-o"></i>
+					{% endif %}
+				</td>
+				{% if user.is_owner(uv) -%}
+				<td><a href="{{ url('pedagogy:uv_update', uv_id=uv.id) }}">{% trans %}Edit{% endtrans %}</a></td>
+				<td><a href="{{ url('pedagogy:uv_delete', uv_id=uv.id) }}">{% trans %}Delete{% endtrans %}</a></td>
+				{%- endif -%}
+			</tr>
+			{% endfor %}
+		</tbody>
+	</table>
+</div>
+<script>
+	function autofillCheckboxRadio(name){
+			if (urlParams.has(name)){ $("input[name='" + name + "']").each(function(){
+				if ($(this).attr("value") == urlParams.get(name))
+					$(this).prop("checked", true);
+			});
+		}
+	}
+
+	function uvJSONToHTML(uv){
+		var autumn = "";
+		var spring = "";
+		if (uv.semester == "AUTUMN" || uv.semester == "AUTUMN_AND_SPRING")
+			autumn = "<i class='fa fa-leaf'></i>";
+		if (uv.semester == "SPRING" || uv.semester == "AUTUMN_AND_SPRING")
+			spring = "<i class='fa fa-sun-o'></i>";
+
+		var html = `
+			<tr onclick="window.location.href = '${uv.absolute_url}';">
+				<td><a href="${uv.absolute_url}">${uv.code}</a></td>
+				<td>${uv.title}</td>
+				<td>${uv.department}</td>
+				<td>${uv.credit_type}</td>
+				<td>${autumn}</td>
+				<td>${spring}</td>
+		`;
+		{% if can_create_uv(user) %}
+		html += `
+			<td><a href="${uv.update_url}">{% trans %}Edit{% endtrans %}</a></td>
+			<td><a href="${uv.delete_url}">{% trans %}Delete{% endtrans %}</a></td>
+		`;
+		{% endif %}
+		return html + "</td>";
+	}
+
+	var lastTypedLetter;
+	$("#search_input").on("keyup", function(){
+		// Auto submit when user pauses it's typing
+		clearTimeout(lastTypedLetter);
+		lastTypedLetter = setTimeout(function (){
+			$("#search_form").submit();
+		}, 300);
+	});
+	$("#search_input").on("change", function(e){
+		// Don't send request when leaving the text area
+		// It has already been send by the keypress event
+		e.preventDefault();
+	});
+
+	// Auto fill from get arguments
+	var urlParams = new URLSearchParams(window.location.search);
+	if (urlParams.has("search"))
+		$("input[name='search']").first().prop("value", urlParams.get("search"));
+	autofillCheckboxRadio("department");
+	autofillCheckboxRadio("credit_type");
+	autofillCheckboxRadio("semester");
+
+	// Allow unchecking a radio button when we click on it
+	// Keep a state of what is checked
+	var formStates = {};
+	function radioCheckToggle(e){
+		if (formStates[this.name] == this.value){
+			this.checked = false;
+			formStates[this.name] = "";
+			// Fire an update since the browser does not do it in this situation
+			$("#search_form").submit();
+			return;
+		}
+		formStates[this.name] = this.value;
+	}
+
+	$("input[type='radio']").each(function() {
+		$(this).on("click", radioCheckToggle);
+    	// Get current state
+    	if ($(this).prop("checked")){
+    		formStates[$(this).attr("name")] = $(this).attr("value");
+    	}
+    });
+
+	var autumn_and_spring = $("input[value='AUTUMN_AND_SPRING']").first();
+	var autumn = $("input[value='AUTUMN']").first();
+	var spring = $("input[value='SPRING']").first();
+
+    // Make autumn and spring hidden if js is enabled
+    autumn_and_spring.parent().hide();
+
+    // Fill json field if js is enabled
+    $("input[name='json']").first().prop("value", "true");
+
+    // Set correctly state of what is checked
+    if (autumn_and_spring.prop("checked")){
+    	autumn.prop("checked", true);
+    	spring.prop("checked", true);
+    	autumn_and_spring.prop("checked", false);
+    }
+
+    // Handle submit here and modify autumn and spring here
+	$("#search_form").submit(function(e) {
+		e.preventDefault();
+		if (autumn.prop("checked") && spring.prop("checked")){
+			autumn_and_spring.prop("checked", true);
+			autumn.prop("checked", false);
+			spring.prop("checked", false);
+		}
+
+		// Do query
+		var xhr = new XMLHttpRequest();
+		$.ajax({
+			type: "GET",
+			url: "{{ url('pedagogy:guide') }}",
+			data: $(this).serialize(),
+			tryCount: 0,
+			retryLimit: 10,
+			xhr: function(){
+				 return xhr;
+			},
+			success: function(data){
+				// Update URL
+				history.pushState({}, null, xhr.responseURL.replace("&json=true", ""));
+				// Update content
+				$("#dynamic_view_content").html("");
+				for (key in data){
+					$("#dynamic_view_content").append(uvJSONToHTML(data[key]));
+				}
+			},
+			error: function(){
+				console.log(`try ${this.tryCount}`);
+				if (this.tryCount++ <= this.retryLimit){
+					$("dynamic_view_content").html("");
+					$.ajax(this);
+					return;
+				}
+				$("#dynamic_view_content").html("<tr><td></td><td>{% trans %}Error connecting to the server{% endtrans %}</td></tr>");
+			}
+		});
+
+		// Restore autumn and spring for perfect illusion
+		if (autumn_and_spring.prop("checked")){
+			autumn_and_spring.prop("checked", false);
+			autumn.prop("checked", true);
+			spring.prop("checked", true);
+		}
+    });
+
+    // Auto send on change
+    $("#search_form").on("change", function(e){
+    	$(this).submit();
+    });
+</script>
 {% endblock content %}

pedagogy/templates/pedagogy/macros.jinja

@@ -0,0 +1,15 @@
+{% macro display_star(grade) -%}
+
+    {% if grade >= 0 %}
+        {% for i in range(5) %}
+            {% if i <= grade %}
+                <span class="fa fa-star pedagogy star-checked"></span>
+            {% else %}
+                <span class="fa fa-star pedagogy star-not-checked"></span>
+            {% endif %}
+        {% endfor %}
+    {% else %}
+        <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
+    {% endif %}
+
+{%- endmacro %}

pedagogy/templates/pedagogy/moderation.jinja

@@ -1,63 +1,37 @@
 {% extends "core/base.jinja" %}
-{% from 'core/macros.jinja' import select_all_checkbox %}
 
 {% block title %}
 {% trans %}UV comment moderation{% endtrans %}
 {% endblock title %}
 
 {% block content %}
-<form action="{{ url('pedagogy:moderation') }}", id="moderation_delete_form" method="post" enctype="multipart/form-data">
+{{ form.errors }}
-	{% csrf_token %}
-	<p style="margin-bottom: 1em;">{{ select_all_checkbox("moderation_delete_form") }}</p>
 <table>
 	<thead>
 		<tr>
 			<td>{% trans %}UV{% endtrans %}</td>
 			<td>{% trans %}Comment{% endtrans %}</td>
 			<td>{% trans %}Reason{% endtrans %}</td>
-				<td>{% trans %}Delete{% endtrans %}</td>
+			<td>{% trans %}Action{% endtrans %}</td>
 		</tr>
 	</thead>
 	<tbody>
 		{% set queryset = form.accepted_reports.field.queryset %}
 		{% for widget in form.accepted_reports.subwidgets %}
 		{% set report = queryset.get(id=widget.data.value) %}
-			<tr>
+		<form action="{{ url('pedagogy:moderation') }}" method="post" enctype="multipart/form-data">
-				<td><a href="{{ url('pedagogy:uv_detail', uv_id=report.comment.uv.id) }}">{{ report.comment.uv }}</a></td>
-				<td>{{ report.comment.comment|markdown }}</td>
-				<td>{{ report.reason|markdown }}</td>
-				<td>{{ widget.tag() }}</td>
-			</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-	<p><input type="submit" value="{% trans %}Delete comments{% endtrans %}"></p>
-</form>
-<form action="{{ url('pedagogy:moderation') }}", id="moderation_keep_form" method="post" enctype="multipart/form-data">
 			{% csrf_token %}
-	<p style="margin-bottom: 1em;">{{ select_all_checkbox("moderation_keep_form") }}</p>
-	<table>
-		<thead>
 			<tr>
-				<td>{% trans %}UV{% endtrans %}</td>
+				<td><a href="{{ url('pedagogy:uv_detail', uv_id=report.comment.uv.id) }}#{{ report.comment.uv.id }}">{{ report.comment.uv }}</a></td>
-				<td>{% trans %}Comment{% endtrans %}</td>
-				<td>{% trans %}Reason{% endtrans %}</td>
-				<td>{% trans %}Delete{% endtrans %}</td>
-			</tr>
-		</thead>
-		<tbody>
-			{% set queryset = form.denied_reports.field.queryset %}
-			{% for widget in form.denied_reports.subwidgets %}
-			{% set report = queryset.get(id=widget.data.value) %}
-			<tr>
-				<td><a href="{{ url('pedagogy:uv_detail', uv_id=report.comment.uv.id) }}">{{ report.comment.uv }}</a></td>
 				<td>{{ report.comment.comment|markdown }}</td>
 				<td>{{ report.reason|markdown }}</td>
-				<td>{{ widget.tag() }}</td>
+				<td>
+					<button name="accepted_reports" type="submit" value="{{ report.id }}">{% trans %}Delete comment{% endtrans %}</button>
+					<button name="denied_reports" type="submit" value="{{ report.id }}">{% trans %}Delete report{% endtrans %}</button>
+				</td>
 			</tr>
+		</form>
 		{% endfor %}
 	</tbody>
 </table>
-	<p><input type="submit" value="{% trans %}Delete report{% endtrans %}"></p>
-</form>
 {% endblock content %}

pedagogy/templates/pedagogy/starlist.jinja

@@ -0,0 +1,50 @@
+<div>
+    <style>
+        .checked {
+            color : orange;
+        }
+        .unchecked {
+            color : gray;
+        }
+        .star input[type="radio"] {
+            display : none;
+        }
+        .star {
+            display: inline;
+        }
+
+    </style>
+
+    <label class="star">
+        <input type="radio" name="{{ widget.name }}" value="-1" onclick='
+            var stars = document.getElementsByClassName("{{ widget.name }}");
+            for (var i = 0; i < stars.length; i++){
+                var attrs = stars[i].getAttribute("class");
+                attrs = attrs.replace("unchecked", "");
+                attrs = attrs.replace("checked", "");
+                stars[i].setAttribute("class", attrs + " unchecked");
+            }
+        ' checked>
+        <span class="fa fa-times-circle"> {{ translations.do_not_vote }}</span>
+    </label>
+    {% for i in number_of_stars %}
+    <label class="star">
+        <input type="radio" name="{{ widget.name }}" value="{{ forloop.counter0 }}" onclick='
+            var stars = document.getElementsByClassName("{{ widget.name }}");
+
+            for (var i = 0; i < stars.length; i++){
+                var attrs = stars[i].getAttribute("class");
+                attrs = attrs.replace("unchecked", "");
+                attrs = attrs.replace("checked", "");
+                if (i > {{ forloop.counter0 }}){
+                    stars[i].setAttribute("class", attrs + " unchecked");
+                } else {
+                    stars[i].setAttribute("class", attrs + " checked");
+                }
+            }
+        '>
+        <i class="{{ widget.name }} fa fa-star unchecked"></i>
+    </label>
+    {% endfor %}
+
+</div>

pedagogy/templates/pedagogy/uv_detail.jinja

@@ -1,51 +1,219 @@
 {% extends "core/base.jinja" %}
+{% from "core/macros.jinja" import user_profile_link %}
+{% from "pedagogy/macros.jinja" import display_star %}
 
 {% block title %}
 {% trans %}UV Details{% endtrans %}
 {% endblock %}
 
 {% block content %}
-	<p><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
+<div class="pedagogy">
-	<h1>{{ object.code }} - {{ object.title }}</h1>
+	<div id="uv_detail">
-	<p>{% trans %}Department: {% endtrans %}{{ object.department }}</p>
+		<p id="return_noscript"><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
-	<p>{{ object.objectives|markdown }}</p>
+		<button id="return_js" onclick='(function(){
-	<p>{{ object.program|markdown }}</p>
+			// If comes from the guide page, go back with history
-	<p>{{ object.skills|markdown }}</p>
+			if (document.referrer.replace(/\?(.+)/gm,"").endsWith(`{{ url("pedagogy:guide") }}`)){
-	<p>{{ object.key_concepts|markdown }}</p>
+				window.history.back();
-	<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
+				return;
+			}
+			// Simply goes to the guide page
+			window.location.href = `{{ url("pedagogy:guide") }}`;
+		})()' hidden>{% trans %}Back{% endtrans %}</button>
 
-	<p>{{ object.grade_global_average }}</p>
+		<h1>{{ object.code }} - {{ object.title }}</h1>
-	<p>{{ object.grade_utility_average }}</p>
+		<br>
-	<p>{{ object.grade_interest_average }}</p>
+		<div class="uv-quick-info-container">
-	<p>{{ object.grade_teaching_average }}</p>
+			<div class="hours-cm">
-	<p>{{ object.grade_work_load_average }}</p>
+				<b>{% trans %}CM: {% endtrans %}</b>{{ object.hours_CM }}
+			</div>
+			<div class="hours-td">
+				<b>{% trans %}TD: {% endtrans %}</b>{{ object.hours_TD }}
+			</div>
+			<div class="hours-tp">
+				<b>{% trans %}TP: {% endtrans %}</b>{{ object.hours_TP }}
+			</div>
+			<div class="hours-te">
+				<b>{% trans %}TE: {% endtrans %}</b>{{ object.hours_TE }}
+			</div>
+			<div class="hours-the">
+				<b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
+			</div>
+
+			<div class="department">
+				{{ object.department }}
+			</div>
+			<div class="credit-type">
+				{{ object.credit_type }}
+			</div>
+			<div class="semester">
+				{{ object.get_semester_display() }}
+			</div>
+		</div>
+
+		<br>
+
+		<div class="uv-details-container">
+			<div class="grade">
+				<p>{% trans %}Global grade{% endtrans %}</p>
+				<p>{% trans %}Utility{% endtrans %}</p>
+				<p>{% trans %}Interest{% endtrans %}</p>
+				<p>{% trans %}Teaching{% endtrans %}</p>
+				<p>{% trans %}Work load{% endtrans %}</p>
+			</div>
+			<div class="grade-stars">
+				<p>{{ display_star(object.grade_global_average) }}</p>
+				<p>{{ display_star(object.grade_utility_average) }}</p>
+				<p>{{ display_star(object.grade_interest_average) }}</p>
+				<p>{{ display_star(object.grade_teaching_average) }}</p>
+				<p>{{ display_star(object.grade_work_load_average) }}</p>
+			</div>
+			<div class="uv-infos">
+				<p><b>{% trans %}Objectives{% endtrans %}</b></p>
+				<p>{{ object.objectives|markdown }}</p>
+				<p><b>{% trans %}Program{% endtrans %}</b></p>
+				<p>{{ object.program|markdown }}</p>
+				<p><b>{% trans %}Earned skills{% endtrans %}</b></p>
+				<p>{{ object.skills|markdown }}</p>
+				<p><b>{% trans %}Key concepts{% endtrans %}</b></p>
+				<p>{{ object.key_concepts|markdown }}</p>
+				<p><b>{% trans %}UV manager: {% endtrans %}</b>{{ object.manager }}</p>
+			</div>
+		</div>
+
+		<br>
+		<div id="leave_comment">
+			<h2>{% trans %}Leave comment{% endtrans %}</h2>
+			<div>
+				<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
+					{% csrf_token %}
+					<div class="leave-comment-grid-container">
+						<div class="form-stars">
+							{{ form.author.errors }}
+							{{ form.uv.errors }}
+
+							{{ form.author }}
+							{{ form.uv }}
+
+							<div class="input-stars">
+								<label for="{{ form.grade_global.id_for_label }}">{{ form.grade_global.label }} :</label>
+								{{ form.grade_global.errors }}
+								{{ form.grade_global }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_utility.id_for_label }}">{{ form.grade_utility.label }} :</label>
+								{{ form.grade_utility.errors }}
+								{{ form.grade_utility }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_interest.id_for_label }}">{{ form.grade_interest.label }} :</label>
+								{{ form.grade_interest.errors }}
+								{{ form.grade_interest }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_teaching.id_for_label }}">{{ form.grade_teaching.label }} :</label>
+								{{ form.grade_teaching.errors }}
+								{{ form.grade_teaching }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_work_load.id_for_label }}">{{ form.grade_work_load.label }} :</label>
+								{{ form.grade_work_load.errors }}
+								{{ form.grade_work_load }}
+							</div>
+						</div>
+						<div class="form-comment">
+							<label for="{{ form.comment.id_for_label }}">{{ form.comment.label }} :</label>
+							{{ form.comment.errors }}
+							{{ form.comment }}
+						</div>
+					</div>
+					<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
+				</form>
+			</div>
+		</div>
+		<br>
 
 		{% if object.comments.exists() %}
 			<h2>{% trans %}Comments{% endtrans %}</h2>
-		{% for comment in object.comments.all() %}
+			{% for comment in object.comments.order_by("-publish_date").all() %}
-			<p>{{ comment.grade_global }}</p>
+				<div id="{{ comment.id }}" class="comment-container">
-			<p>{{ comment.grade_utility }}</p>
+
-			<p>{{ comment.grade_interest }}</p>
+					<div class="grade-block">
-			<p>{{ comment.grade_teaching }}</p>
+						<div class="grade-type">
-			<p>{{ comment.grade_work_load }}</p>
+							<p>{% trans %}Global grade{% endtrans %}</p>
-			<p>{{ comment.comment|markdown }}</p>
+							<p>{% trans %}Utility{% endtrans %}</p>
-			<p>{% trans %}Published: {% endtrans %}{{ comment.publish_date }}</p>
+							<p>{% trans %}Interest{% endtrans %}</p>
-			<p>{% trans %}Author: {% endtrans %}{{ comment.author }}</p>
+							<p>{% trans %}Teaching{% endtrans %}</p>
-			{% if user.is_owner(comment) %}
+							<p>{% trans %}Work load{% endtrans %}</p>
-				<p><a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a></p>
+						</div>
-				<p><a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a></p>
+						<div class="grade-stars">
-			{% endif %}
+							<p>{{ display_star(comment.grade_global) }}</p>
-			<p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report{% endtrans %}</a></p>
+							<p>{{ display_star(comment.grade_utility) }}</p>
+							<p>{{ display_star(comment.grade_interest) }}</p>
+							<p>{{ display_star(comment.grade_teaching) }}</p>
+							<p>{{ display_star(comment.grade_work_load) }}</p>
+						</div>
+						<div class="grade-extension"></div>
+					</div>
+
+					<div class="comment">
+						<div class="anchor">
+							<a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}#{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
+						</div>
+						{{ comment.comment|markdown }}
+					</div>
+
+					<div class="info">
 						{% if comment.is_reported %}
-				<p>{% trans %}This comment has been reported{% endtrans %}</p>
+							<p class="status-reported">
+								{% trans %}This comment has been reported{% endtrans %}
+							</p>
 						{% endif %}
+
+						{% if user.is_owner(comment) %}
+							<p class="actions">
+									<a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a>
+									<a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a>
+							</p>
+						{% endif %}
+					</div>
+
+					<div class="comment-end-bar">
+						<div class="report"><p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report this comment{% endtrans %}</a></p></div>
+
+						<div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>
+
+						<div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
+					</div>
+
+				</div>
 			{% endfor %}
 		{% endif %}
 
-	<h2>{% trans %}Leave comment{% endtrans %}</h2>
+	</div>
-	<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
+</div>
-        {% csrf_token %}
+
-		{{ form.as_p() }}
+<script type="text/javascript">
-        <p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
+	$("#return_noscript").hide();
-	</form>
+	$("#return_js").show();
+	var icons = {
+		header: "fa fa-toggle-right",
+		activeHeader: "fa fa-toggle-down"
+	};
+	$(function(){
+		$("#leave_comment").accordion({
+			icons: icons,
+		    heightStyle: "content",
+		    active: false,
+		    collapsible: true
+		});
+	});
+	// Remove jquery-ui icons to make fontawesome work
+	$(document).ready(function(){
+		$(".ui-accordion-header-icon").first().removeClass("ui-icon");
+	});
+</script>
 {% endblock %}

pedagogy/templates/search/indexes/pedagogy/uv_auto.txt

@@ -1,2 +1,3 @@
 {{ object.code }}
 {{ object.manager }}
+{{ object.title }}

pedagogy/templates/search/indexes/pedagogy/uv_text.txt

@@ -1,2 +1,3 @@
 {{ object.code }}
 {{ object.manager }}
+{{ object.title }}

pedagogy/tests.py

@@ -616,6 +616,16 @@ class UVSearchTest(TestCase):
         response = self.client.get(reverse("pedagogy:guide"), {"search": "P"})
         self.assertContains(response, text="PA00")
 
+        # Search with first letter of UV code in lowercase
+        response = self.client.get(reverse("pedagogy:guide"), {"search": "p"})
+        self.assertContains(response, text="PA00")
+
+        # Search with UV title
+        response = self.client.get(
+            reverse("pedagogy:guide"), {"search": "participation"}
+        )
+        self.assertContains(response, text="PA00")
+
         # Search with UV manager
         response = self.client.get(reverse("pedagogy:guide"), {"search": "HEYBERGER"})
         self.assertContains(response, text="PA00")
@@ -673,9 +683,10 @@ class UVSearchTest(TestCase):
             response.content,
             [
                 {
-                    "model": "pedagogy.uv",
+                    "id": 1,
-                    "pk": 1,
+                    "absolute_url": "/pedagogy/uv/1",
-                    "fields": {
+                    "update_url": "/pedagogy/uv/1/edit",
+                    "delete_url": "/pedagogy/uv/1/delete",
                     "code": "PA00",
                     "author": 0,
                     "credit_type": "OM",
@@ -694,7 +705,6 @@ class UVSearchTest(TestCase):
                     "hours_TP": 0,
                     "hours_THE": 121,
                     "hours_TE": 4,
-                    },
                 }
             ],
         )

pedagogy/views.py

@@ -25,13 +25,11 @@
 from django.views.generic import (
     CreateView,
     DeleteView,
-    DetailView,
     UpdateView,
     ListView,
     FormView,
     View,
 )
-from django.core import serializers
 from django.utils import html
 from django.http import HttpResponse
 from django.core.exceptions import PermissionDenied, ObjectDoesNotExist
@@ -39,6 +37,9 @@ from django.core.urlresolvers import reverse_lazy, reverse
 from django.shortcuts import get_object_or_404
 from django.conf import settings
 
+from haystack.query import SearchQuerySet
+from rest_framework.renderers import JSONRenderer
+
 from core.views import (
     DetailFormView,
     CanCreateMixin,
@@ -48,15 +49,13 @@ from core.views import (
 )
 from core.models import RealGroup, Notification
 
-from haystack.query import SearchQuerySet
-
 from pedagogy.forms import (
     UVForm,
     UVCommentForm,
     UVCommentReportForm,
     UVCommentModerationForm,
 )
-from pedagogy.models import UV, UVComment, UVCommentReport
+from pedagogy.models import UV, UVComment, UVCommentReport, UVSerializer
 
 # Some mixins
 
@@ -166,7 +165,7 @@ class UVListView(CanViewMixin, CanCreateUVFunctionMixin, ListView):
 
         # Return serialized response
         return HttpResponse(
-            serializers.serialize("json", self.get_queryset()),
+            JSONRenderer().render(UVSerializer(self.get_queryset(), many=True).data),
             content_type="application/json",
         )
 
@@ -195,7 +194,7 @@ class UVListView(CanViewMixin, CanCreateUVFunctionMixin, ListView):
         if len(search) == 1:
             # It's a search with only one letter
             # Hastack doesn't work well with only one letter
-            return queryset.filter(code__startswith=search)
+            return queryset.filter(code__istartswith=search)
 
         try:
             qs = (