[pedagogy] Star for comment grades

core/static/core/style.scss

@@ -1668,3 +1668,14 @@ label {
   }
 
 }
+
+/* --------------------------------------pedagogy-----------------------------------*/
+
+.pedagogy {
+  &.star_not_checked {
+    color : gray;
+  }
+  &.star_checked {
+    color : orange;
+  }
+}

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,10 @@ class UVForm(forms.ModelForm):
         self.fields["author"].initial = author_id
 
 
+class StarList(forms.NumberInput):
+    template_name = "pedagogy/starlist.jinja"
+
+
 class UVCommentForm(forms.ModelForm):
     """
     Form handeling creation and edit of an UVComment
@@ -93,6 +99,11 @@ class UVCommentForm(forms.ModelForm):
             "comment": MarkdownInput,
             "author": forms.HiddenInput,
             "uv": forms.HiddenInput,
+            "grade_global": StarList,
+            "grade_utility": StarList,
+            "grade_interest": StarList,
+            "grade_teaching": StarList,
+            "grade_work_load": StarList,
         }
 
     def __init__(self, author_id, uv_id, *args, **kwargs):

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 %}
+        <p> {% trans %} not rated {% endtrans %} </p>
+    {% endif %}
+
+{%- endmacro %}

pedagogy/templates/pedagogy/starlist.jinja

@@ -0,0 +1,41 @@
+<div>
+    {# <input name="{{ widget.name }}" id="{{ widget.name }}" hidden type="number" {% include "django/forms/widgets/attrs.html" %}></input> #}
+    <style>
+        .checked{
+            color : orange;
+        }
+        .unchecked{
+            color : gray;
+        }
+        .star input[type="radio"]{
+            display : none;
+        }
+        .star{
+            display: inline;
+        }
+        
+    </style>
+
+    {% for i in i|rjust:5 %}
+    <label class="star">
+        <input type="radio" name="{{ widget.name }}" value="{{ forloop.counter0 }}" onclick='
+            var stars = document.getElementsByClassName("{{ widget.name }}");
+            // console.log(Array.from(this.parentNode.parentNode.children).filter(el => el.className == "star"));
+
+            for (var i = 0; i < 5; i++){
+                console.log(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,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% import "pedagogy/macros.jinja" as macros%}
 
 {% block title %}
 {% trans %}UV Details{% endtrans %}
@@ -23,11 +24,11 @@
 	{% if object.comments.exists() %}
 		<h2>{% trans %}Comments{% endtrans %}</h2>
 		{% for comment in object.comments.all() %}
-			<p>{{ comment.grade_global }}</p>
-			<p>{{ comment.grade_utility }}</p>
-			<p>{{ comment.grade_interest }}</p>
-			<p>{{ comment.grade_teaching }}</p>
-			<p>{{ comment.grade_work_load }}</p>
+			<p>{{ macros.display_star(comment.grade_global) }}</p>
+			<p>{{ macros.display_star(comment.grade_utility) }}</p>
+			<p>{{ macros.display_star(comment.grade_interest) }}</p>
+			<p>{{ macros.display_star(comment.grade_teaching) }}</p>
+			<p>{{ macros.display_star(comment.grade_work_load) }}</p>
 			<p>{{ comment.comment|markdown }}</p>
 			<p>{% trans %}Published: {% endtrans %}{{ comment.publish_date }}</p>
 			<p>{% trans %}Author: {% endtrans %}{{ comment.author }}</p>