rating with stars

QuitoTactico · Nov 9, 2024 · 2cc5e64 · 2cc5e64
1 parent 45fd5af
commit 2cc5e64
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 28 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/learning_resource/forms.py b/learning_resource/forms.py
@@ -59,14 +59,7 @@ class Meta:
                     "required": True,
                 }
             ),
-            "rate": forms.NumberInput(
-                attrs={
-                    "class": "form-control custom-input",
-                    "min": 1,
-                    "max": 5,
-                    "required": True,
-                }
-            ),
+            "rate": forms.HiddenInput(),  # Cambiado de NumberInput a HiddenInput
         }
         labels = {
             "comment": "Comment Something",

diff --git a/learning_resource/templates/learning_resource_detail.html b/learning_resource/templates/learning_resource_detail.html
@@ -80,31 +80,22 @@ <h1>{{ learning_resource.name }}</h1>
 
     <!-- Review Section -->
     <div class="review-section">
-        <!-- Past Manual Form
-        <h3>Write A Review</h3>
-        <textarea placeholder="Type Something..."></textarea>
-        <div class="review-rating">
-            <p>⭐ ⭐ ⭐ ⭐ ⭐</p>
-
-        </div>
-        <button>Submit Review</button>
-        -->
         <h3>Write A Review</h3>
         <form method="post" action="{% url 'learning_resource_create_review' learning_resource.id %}"
             enctype="multipart/form-data">
             {% csrf_token %}
             {{ review_form.as_p }}
+            <div class="star-rating">
+                <span class="star" data-value="1">&#9733;</span>
+                <span class="star" data-value="2">&#9733;</span>
+                <span class="star" data-value="3">&#9733;</span>
+                <span class="star" data-value="4">&#9733;</span>
+                <span class="star" data-value="5">&#9733;</span>
+                <input type="hidden" name="rate" id="rate" value="{{ review_form.rate.value|default:0 }}">
+            </div>
             <button type="submit" class="btn btn-primary">Submit Review</button>
         </form>
 
-        <!-- Past Review Section 
-        <h3>Reviews</h3>
-        <div class="review">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque deserunt natus iure accusantium sequi,
-                maiores ex sunt, quas in corrupti molestiae facere voluptatibus autem reprehenderit unde vitae iusto
-                itaque! Consequatur.</p>
-        </div>
-        -->
         {% if learning_resource.reviews.all %}
         <h3>Reviews</h3>
         {% endif %}
@@ -119,11 +110,28 @@ <h4>
                 {{ review.user.name }}
             </h4>
             <p>{{ review.comment }}</p>
-            <p>{% for _ in review.rate_range %}⭐{% endfor %}
+            <p>
+                {% for _ in review.rate_range %}
+                &#9733;
+                {% endfor %}
                 <span class="text-muted">- {{ review.created_at }}</span>
             </p>
         </div>
         {% endfor %}
     </div>
+    <script>
+        // JavaScript para la selección interactiva de estrellas
+        document.querySelectorAll('.star-rating .star').forEach(function (star) {
+            star.addEventListener('click', function () {
+                var rating = this.getAttribute('data-value');
+                document.getElementById('rate').value = rating;
+                document.querySelectorAll('.star-rating .star').forEach(function (s) {
+                    s.style.color = s.getAttribute('data-value') <= rating ? '#f1c40f' : '#ccc';
+                });
+            });
+        });
+    </script>
+    <!-- Asegúrate de que Bootstrap JS está incluido -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </div>
 {% endblock %}
diff --git a/learning_resource/views.py b/learning_resource/views.py
@@ -1,8 +1,8 @@
-from django.shortcuts import render, redirect
+from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.decorators import login_required, user_passes_test
 from user.models import User
 from learning_route.models import LearningRouteResource
-from .models import LearningResource
+from .models import LearningResource, Review
 from .forms import LearningResourceForm, ReviewForm
 
 
@@ -49,6 +49,24 @@ def detail(request, id: int, route_resource_id: int = None):
         return redirect("not_found")
 
 
+def learning_resource_detail(request, pk):
+    learning_resource = get_object_or_404(LearningResource, pk=pk)
+    reviews = learning_resource.reviews.all()
+
+    # Calcular el resumen de las estrellas
+    ratings_summary = {}
+    for star in range(1, 6):
+        ratings_summary[star] = reviews.filter(rate=star).count()
+
+    context = {
+        'learning_resource': learning_resource,
+        'reviews': reviews,
+        'ratings_summary': ratings_summary,
+    }
+
+    return render(request, 'learning_resource_detail.html', context)
+
+
 @login_required
 def create_review(request, id: int):
     try:

diff --git a/static/css/learningresourcedetail.css b/static/css/learningresourcedetail.css
@@ -158,4 +158,37 @@ body {
     height: 50px;
     border-radius: 50%;
     margin-right: 10px;
+}
+
+.star-rating {
+    display: flex;
+    flex-direction: row;
+    font-size: 2rem;
+}
+
+.star-rating .star {
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.2s;
+}
+
+.star-rating .star:hover,
+.star-rating .star.selected {
+    color: #f1c40f;
+}
+
+.review p {
+    font-size: 1.2rem;
+    color: #f1c40f;
+    cursor: default;
+}
+
+.ratings-summary .rating-row .stars {
+    color: #f1c40f;
+    font-size: 1.5rem;
+}
+
+.ratings-summary .rating-row .count {
+    font-size: 1.2rem;
+    color: #333;
 }