Task: upvote and downvote on issues

blt/urls.py

@@ -67,12 +67,14 @@
     UserProfileDetailsView,
     UserProfileDetailView,
     contributors_view,
+    dislike_issue2,
     facebook_callback,
     flag_issue2,
     github_callback,
     google_callback,
     like_issue2,
     subscribe_to_domains,
+    vote_count,
 )
 
 favicon_view = RedirectView.as_view(url="/static/favicon.ico", permanent=True)
@@ -287,7 +289,11 @@
         r"^flag_issue/(?P<issue_pk>\d+)/$", website.views.flag_issue, name="flag_issue"
     ),
     re_path(r"^like_issue2/(?P<issue_pk>\d+)/$", like_issue2, name="like_issue2"),
+    re_path(r"^dislike_issue2/(?P<issue_pk>\d+)/$", dislike_issue2, name="dislike_issue2"),
     re_path(r"^flag_issue2/(?P<issue_pk>\d+)/$", flag_issue2, name="flag_issue2"),
+    re_path(r"^vote_count/(?P<issue_pk>\d+)/$", vote_count, name="vote_count"),
+    path("domain/<int:pk>/subscribe/", subscribe_to_domains, name="subscribe_to_domains"),
+    re_path(r"^save_issue/(?P<issue_pk>\d+)/$", website.views.save_issue, name="save_issue"),
     path(
         "domain/<int:pk>/subscribe/", subscribe_to_domains, name="subscribe_to_domains"
     ),

website/templates/_bug.html

@@ -58,67 +58,84 @@
             {% endif %}
         {% endfor %}
     </div>
-    <div class="bug-actions h-[45px] flex flex-row">
-        <button {% if not user.is_authenticated %}disabled{% endif %}
-                onclick="like_unlike_handler(event,{{ bug.id }})">
-            <svg id="likeSvg{{ bug.id }}"
-                 class="scale-125 m-3"
-                 width="23"
-                 height="23"
-                 viewBox="0 0 23 23"
-                 fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
-                <path d="M7.46692 9.45723V18.6604" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
-                </path>
-                <path d="M16.0815 18.6604H7.46693H3.78564V9.4572H7.46693L12.2485 3.87867C12.7023 3.34933 13.4161 3.12177 14.0925 3.29086L14.1362 3.3018C15.3711 3.61052 15.9274 5.04941 15.2214 6.10849L12.9889 9.4572H17.1859C18.3474 9.4572 19.2186 10.5198 18.9908 11.6588L17.8864 17.1807C17.7143 18.0411 16.9589 18.6604 16.0815 18.6604Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
-                </path>
-            </svg>
-        </button>
-        {% with user_issue_upvoted_list=user.userprofile.issue_upvoted.all %}
-            {% if user_issue_upvoted_list and bug in user_issue_upvoted_list %}
-                <script>
+    <div class="bug-actions h-[45px] flex flex-row justify-between">
+        <div class="flex flex-row items-center">
+            <button {% if not user.is_authenticated %}disabled{% endif %}
+                    onclick="like_unlike_handler(event,{{ bug.id }})">
+                <svg id="likeSvg{{ bug.id }}"
+                     class="scale-125 m-3"
+                     width="23"
+                     height="23"
+                     viewBox="0 0 23 23"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M7.46692 9.45723V18.6604" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
+                    </path>
+                    <path d="M16.0815 18.6604H7.46693H3.78564V9.4572H7.46693L12.2485 3.87867C12.7023 3.34933 13.4161 3.12177 14.0925 3.29086L14.1362 3.3018C15.3711 3.61052 15.9274 5.04941 15.2214 6.10849L12.9889 9.4572H17.1859C18.3474 9.4572 19.2186 10.5198 18.9908 11.6588L17.8864 17.1807C17.7143 18.0411 16.9589 18.6604 16.0815 18.6604Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
+                    </path>
+                </svg>
+            </button>
+            <span id="likes_count">0</span>
+            {% with user_issue_upvoted_list=user.userprofile.issue_upvoted.all %}
+                {% if user_issue_upvoted_list and bug in user_issue_upvoted_list %}
+                    <script>
                     $(document).ready(function () {
                         $('#likeSvg{{bug.id}}').find('path').attr('fill', '#a11010');
+                        getVoteCount({{bug.id}});
                     });
-                </script>
-            {% endif %}
-        {% endwith %}
-        <button {% if not user.is_authenticated %}disabled{% endif %}
-                onclick="flag_unflag_handler(event,{{ bug.id }})">
-            <svg id="flagSvg{{ bug.id }}"
-                 class="scale-125 m-3 ms-1"
-                 width="23"
-                 height="23"
-                 viewBox="0 0 23 23"
-                 fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
-                <path d="M4.06152 19.5808V13.1385V3.93531" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M4.06152 3.93531H18.7867L14.1851 8.53692L18.7867 13.1385H4.06152" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-        </button>
-        {% with user_issue_flagged_list=user.userprofile.issue_flaged.all %}
-            {% if user_issue_flagged_list and bug in user_issue_flagged_list %}
-                <script>
+                    </script>
+                {% endif %}
+            {% endwith %}
+            <button {% if not user.is_authenticated %}disabled{% endif %}
+                    onclick="dislike_handler(event,{{ bug.id }})">
+                <svg id="dislikeSvg{{ bug.id }}"
+                     class="scale-125 m-3"
+                     width="23"
+                     height="23"
+                     viewBox="0 0 23 23"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M 7.467 12.439 L 7.467 3.236" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M 16.081 3.236 L 7.467 3.236 L 3.786 3.236 L 3.786 12.439 L 7.467 12.439 L 12.249 18.018 C 12.702 18.547 13.416 18.774 14.093 18.605 L 14.136 18.594 C 15.371 18.286 15.927 16.847 15.221 15.788 L 12.989 12.439 L 17.186 12.439 C 18.347 12.439 19.219 11.376 18.991 10.237 L 17.886 4.716 C 17.714 3.855 16.959 3.236 16.081 3.236 Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+            <span id="dislikes_count">0</span>
+            {% with user_issue_downvoted_list=user.userprofile.issue_downvoted.all %}
+                {% if user_issue_downvoted_list and bug in user_issue_downvoted_list %}
+                    <script>
+                    $(document).ready(function () {
+                        $('#dislikeSvg{{bug.id}}').find('path').attr('fill', '#a11010');
+                        getVoteCount({{bug.id}});
+                    });
+                    </script>
+                {% endif %}
+            {% endwith %}
+            <button {% if not user.is_authenticated %}disabled{% endif %}
+                    onclick="flag_unflag_handler(event,{{ bug.id }})">
+                <svg id="flagSvg{{ bug.id }}"
+                     class="scale-125 m-3 "
+                     width="23"
+                     height="23"
+                     viewBox="0 0 23 23"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.06152 19.5808V13.1385V3.93531" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M4.06152 3.93531H18.7867L14.1851 8.53692L18.7867 13.1385H4.06152" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+            {% with user_issue_flagged_list=user.userprofile.issue_flaged.all %}
+                {% if user_issue_flagged_list and bug in user_issue_flagged_list %}
+                    <script>
                         $(document).ready(function () {
                             $('#flagSvg{{bug.id}}').find('path').attr('fill', '#a11010');
                         });
-                </script>
-            {% endif %}
-        {% endwith %}
-        <svg class="scale-125 m-3 ms-auto"
-             width="23"
-             height="23"
-             viewBox="0 0 23 23"
-             fill="none"
-             xmlns="http://www.w3.org/2000/svg">
-            <path opacity="0.15" d="M4.18701 4.85562C4.18701 4.34735 4.59906 3.9353 5.10733 3.9353H17.9918C18.5001 3.9353 18.9122 4.34735 18.9122 4.85562V17.7401C18.9122 18.2484 18.5001 18.6604 17.9918 18.6604H5.10733C4.59906 18.6604 4.18701 18.2484 4.18701 17.7401V4.85562Z" fill="#8C0000" fill-opacity="0.74" />
-            <path d="M17.0715 3.9353H6.02765C5.01109 3.9353 4.18701 4.75939 4.18701 5.77595V16.8198C4.18701 16.923 4.1955 17.0241 4.2118 17.1226C4.35621 17.995 5.11424 18.6604 6.02765 18.6604H17.0715C18.0881 18.6604 18.9122 17.8364 18.9122 16.8198V13.3135V5.77595C18.9122 4.75939 18.0881 3.9353 17.0715 3.9353Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M10.6283 8.53688C10.6283 9.55346 9.80425 10.3775 8.78766 10.3775C7.7711 10.3775 6.94702 9.55346 6.94702 8.53688C6.94702 7.52032 7.7711 6.69624 8.78766 6.69624C9.80425 6.69624 10.6283 7.52032 10.6283 8.53688Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M4.21252 17.1226L7.7288 13.6063C8.35464 13.0587 9.26994 12.9987 9.96185 13.4601L10.4305 13.7724C11.0973 14.217 11.9754 14.1789 12.6013 13.6782L15.0384 11.7285C15.6596 11.2315 16.5249 11.1925 17.1853 11.6185C17.2584 11.6657 17.3236 11.7242 17.3852 11.7857L18.9129 13.3135" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
+                    </script>
+                {% endif %}
+            {% endwith %}
+        </div>
         <a target="_blank"
            href="https://twitter.com/intent/tweet?text=Bug Found on @{{ bug.domain_title }} - {{ bug.description }} Report: https://{% env 'FQDN' %}/issue2/{{ bug.id }}"
-           class="w-fit flex items-center px-10 h-14 rounded-xl font-extrabold hover:text-red-500 hover:bg-gray-100 m-5 xl:m-0"
+           class="w-fit flex items-center px-2 h-14 rounded-xl font-extrabold hover:text-red-500 hover:bg-gray-100 m-5 xl:m-0 "
            rel="noopener noreferrer">
             <svg class="scale-125 m-3 ms-1"
                  width="23"

website/templates/includes/_dislike2.html

@@ -0,0 +1,33 @@
+{% load gravatar %}
+<div id="dislike_root" class="flex justify-between">
+    {% if request.user.is_authenticated %}
+        <button name="{{ object.pk }}"
+                type="submit"
+                class="dislike flex items-center px-10 h-14 rounded-xl border-[1px] border-gray-300 font-extrabold hover:text-red-500 hover:bg-gray-100 m-5 xl:m-0">
+            <i class="fa-regular fa-thumbs-down text-2xl mr-2"> </i>
+            <p id="total_dislikes">{{ dislikes }} Downvotes</p>
+        </button>
+    {% else %}
+        <button disabled
+                class="flex items-center px-10 h-14 rounded-xl border-[1px] border-gray-300 font-extrabold bg-gray-200 m-5 xl:m-0">
+            <i class="fa-regular fa-thumbs-down text-2xl mr-2"> </i>
+            <p>{{ dislikes }} Downvotes</p>
+        </button>
+    {% endif %}
+</div>
+<script>
+        function dislike_handler(e){
+            e.preventDefault();
+            var issue_pk = $(this).attr('name');
+            $.ajax({
+                type: 'GET',
+                url: '/dislike_issue2/' + issue_pk + '/',
+                data: {},
+                success: function (data) {
+                    $('#dislike_root').html(data);
+                },
+            });
+            $('body').off('click', '.dislike', dislike_handler);
+        }
+        $('body').on('click', '.dislike', dislike_handler);
+</script>

website/templates/issue2.html

@@ -100,6 +100,7 @@
                             </div>
                             <div class="w-full xl:w-[100%] mt-10 xl:mt-0 flex flex-wrap justify-between text-black">
                                 {% include "includes/_likes2.html" %}
+                                {% include "includes/_dislike2.html" %}
                                 {% include "includes/_flags2.html" %}
                                 {% include "includes/_bookmark2.html" %}
                                 <a target="_blank"

website/templates/new_home.html

@@ -39,17 +39,42 @@
                 url: '/like_issue2/' + issue_pk + '/',
                 data: {},
                 success: function (data) {
-                    // Toggle the color of the SVG
-                    var svg = $('#likeSvg' + issue_pk);
-                    var currentColor = svg.find('path').attr('fill');
+
+                    var likesvg = $('#likeSvg' + issue_pk);
+                    var dislikesvg = $('#dislikeSvg' + issue_pk);
+                    var currentColor = likesvg.find('path').attr('fill');
+
+                    if (currentColor === '#a11010') {
+                        likesvg.find('path').attr('fill', ''); 
+                    } else {
+                        likesvg.find('path').attr('fill', '#a11010');
+                        dislikesvg.find('path').attr('fill', ''); 
+                    }
+
+                    getVoteCount(issue_pk);
+                },
+            });
+        }
+        function dislike_handler(e,issue_pk){
+            e.preventDefault();
+            var issue_pk = issue_pk;
+            $.ajax({
+                type: 'GET',
+                url: '/dislike_issue2/' + issue_pk + '/',
+                data: {},
+                success: function (data) {
+                    var likesvg = $('#likeSvg' + issue_pk);
+                    var dislikesvg = $('#dislikeSvg' + issue_pk);
+                    var currentColor = dislikesvg.find('path').attr('fill');
 
                     if (currentColor === '#a11010') {
-                        // Change to default color
-                        svg.find('path').attr('fill', ''); // Set to default color
+                        dislikesvg.find('path').attr('fill', ''); 
                     } else {
-                        // Change to full red
-                        svg.find('path').attr('fill', '#a11010');
+                        dislikesvg.find('path').attr('fill', '#a11010');
+                        likesvg.find('path').attr('fill', ''); 
                     }
+
+                    getVoteCount(issue_pk);
                 },
             });
         }
@@ -75,6 +100,19 @@
                 },
             });
         }
+        function getVoteCount(issue_pk) {
+            $.ajax({
+                url: `/vote_count/${issue_pk}/`,  // Adjust the URL as needed
+                type: 'GET',
+                success: function(response) {
+                    $('#likes_count').text(response.likes);
+                    $('#dislikes_count').text(response.dislikes);
+                },
+                error: function(error) {
+                    console.log(error);
+                }
+            });
+        }
     </script>
     <div class="col-md-12">
         <div class="text-center">

website/views.py

@@ -3728,14 +3728,16 @@ def flag_issue2(request, issue_pk):
     context["flags"] = total_flag_votes
     return render(request, "includes/_flags2.html", context)
 
-
 @login_required(login_url="/accounts/login")
 def like_issue2(request, issue_pk):
     context = {}
     issue_pk = int(issue_pk)
-    issue = Issue.objects.get(pk=issue_pk)
+    issue = get_object_or_404(Issue, pk=issue_pk)
     userprof = UserProfile.objects.get(user=request.user)
-    if userprof in UserProfile.objects.filter(issue_upvoted=issue):
+
+    if UserProfile.objects.filter(issue_downvoted=issue, user=request.user).exists():
+        userprof.issue_downvoted.remove(issue)
+    if UserProfile.objects.filter(issue_upvoted=issue, user=request.user).exists():
         userprof.issue_upvoted.remove(issue)
     else:
         userprof.issue_upvoted.add(issue)
@@ -3767,12 +3769,37 @@ def like_issue2(request, issue_pk):
             html_message=msg_html,
         )
 
-    userprof.save()
     total_votes = UserProfile.objects.filter(issue_upvoted=issue).count()
     context["object"] = issue
     context["likes"] = total_votes
     return render(request, "includes/_likes2.html", context)
 
+@login_required(login_url="/accounts/login")
+def dislike_issue2(request, issue_pk):
+    context = {}
+    issue_pk = int(issue_pk)
+    issue = get_object_or_404(Issue, pk=issue_pk)
+    userprof = UserProfile.objects.get(user=request.user)
+
+    if UserProfile.objects.filter(issue_upvoted=issue, user=request.user).exists():
+        userprof.issue_upvoted.remove(issue)
+    if UserProfile.objects.filter(issue_downvoted=issue, user=request.user).exists():
+        userprof.issue_downvoted.remove(issue)
+    else:
+        userprof.issue_downvoted.add(issue)
+    total_votes = UserProfile.objects.filter(issue_downvoted=issue).count()
+    context["object"] = issue
+    context["dislikes"] = total_votes
+    return render(request, "includes/_dislike2.html", context)
+
+@login_required(login_url="/accounts/login")
+def vote_count(request, issue_pk):
+    issue_pk = int(issue_pk)
+    issue = Issue.objects.get(pk=issue_pk)
+
+    total_upvotes = UserProfile.objects.filter(issue_upvoted=issue).count()
+    total_downvotes = UserProfile.objects.filter(issue_downvoted=issue).count()
+    return JsonResponse({'likes': total_upvotes, 'dislikes':total_downvotes})
 
 @login_required(login_url="/accounts/login")
 def subscribe_to_domains(request, pk):