fix upvotes on projects + solve similar titles

app/static/css/style.css

@@ -97,6 +97,10 @@ input:focus {
   font-family: Poppins !important;
 }
 
+.btn-active {
+  background-color: var(--cirrus-link-dark);
+}
+
 .white {
   color: var(--white) !important;
 }

app/templates/gallery.html

@@ -32,7 +32,7 @@ <h1>Explore The Community</h1>
       {% for project in projects %}
         <div class="col-4" style="padding: 0 0.75rem;">
           <div class="challenge-card">
-            <a href="#{{ project.name }}">
+            <a href="#project-{{ project.pk }}">
               {% if project.image %}
               <div class="card-img" style="background-image: url({{ project.image.url }})"></div>
             {% else %}

app/templates/project_modal.html

@@ -1,6 +1,6 @@
 {% block project_modal %}
   {% for project, project_links in projects_info %}
-    <div class="modal modal-large modal-animated--zoom-in" id="{{ project.name }}" style="padding-left: 0; padding-right: 0; padding-bottom: 0;">
+    <div class="modal modal-large modal-animated--zoom-in" id="project-{{ project.pk }}" style="padding-left: 0; padding-right: 0; padding-bottom: 0;">
       <a href="#searchModalDialog" class="modal-overlay close-btn" style="z-index:1;" aria-label="Close"></a>
       <a href="#searchModalDialog" class="close-btn modal-close-btn" aria-label="Close">
         <span class="icon">
@@ -50,14 +50,15 @@ <h6 style="margin: 0;">{{ creator.username }}</h6>
               <div class="row">
                 <div class="col-12">
                   <a class="u-center" style="margin-bottom: 31px;">
-                    <button id="upvote-{{ project.pk }}" class="btn-primary btn--pilled" style="width: 100%;"><i class="fas fa-angle-double-up"></i>&nbsp; Upvote {{ project.upvotes }} </button>
+                    {% if not request.user.is_authenticated %}
+                    <button onclick="document.location='#login-modal';return false;" class="btn-primary btn--pilled" style="width: 100%;"><i class="fas fa-angle-double-up"></i>&nbsp; Upvote <span class="project-upvotes">{{ project.upvotes }}</span> </button>
+                    {% elif user_upvote_projects[project.pk] %}
+                    <button onclick="upvote(event, {{project.pk}})" class="btn-primary btn--pilled btn-active" style="width: 100%;"><i class="fas fa-angle-double-up"></i>&nbsp; Upvote <span class="project-upvotes">{{ project.upvotes }}</span> </button>
+                    {% else %}
+                    <button onclick="upvote(event, {{project.pk}})" class="btn-primary btn--pilled" style="width: 100%;"><i class="fas fa-angle-double-up"></i>&nbsp; Upvote <span class="project-upvotes">{{ project.upvotes }}</span> </button>
+                    {% endif %}
                   </a>
                 </div>
-                <!-- <div class="col-4">
-                  <a href="{{ url('project_challenge_create', pk=challenge.pk) }}" class="u-center" style="margin-bottom: 31px;">
-                    <button class="btn-primary btn--pilled" style="width: 100%;">Create Project</button>
-                  </a>
-                </div> -->
 
               </div>
               <div class="challenge-card" style="margin-top:0 !important;">
@@ -69,7 +70,7 @@ <h1 style="font-size: 20px; margin-top: 0px;">Project Description</h1>
                       <a href="{{ project.get_edit_url() }}">
                         <button class="btn--pilled btn-primary">Edit Project</button>
                       </a>
-                      <a href="#confirm-delete-{{ project.name }}">
+                      <a href="#confirm-delete-{{ project.pk }}">
                         <button class="btn--pilled btn-primary btn-danger">Delete Project</button>
                       </a>
                     {% endif %}
@@ -137,8 +138,8 @@ <h4 style="margin-top: 0;">Links</h4>
         </div>
       </div>
     </div>
-    <div class="modal modal-large modal-animated--zoom-in" id="confirm-delete-{{ project.name }}">
-      <a href="#{{ project.name }}" class="modal-overlay close-btn" aria-label="Close"></a>
+    <div class="modal modal-large modal-animated--zoom-in" id="confirm-delete-{{ project.pk }}">
+      <a href="#project-{{ project.pk }}" class="modal-overlay close-btn" aria-label="Close"></a>
         <div class="modal-content" style="border-radius: 8px; background-color: #F6F8FB; height: 30vh; max-width: 50vw; width:50vw; display: flex; flex-direction: column;">
           <div class="modal-body" style="padding: 4rem 4rem; max-height: 100%; flex-grow: 1;">
             <div class="row">
@@ -152,7 +153,7 @@ <h3>Are you certain that you want to delete this project?</h3>
                 <button class="btn--pilled btn-primary btn-danger">Delete Project</button>
               </a>
             </form>
-            <a href="#{{ project.name }}">
+            <a href="#project-{{ project.pk }}">
               <button class="btn--pilled">Cancel</button>
             </a>
           </div>
@@ -164,18 +165,23 @@ <h3>Are you certain that you want to delete this project?</h3>
         e.preventDefault();
         $('form[name="delete-project"]').submit()
       })
-    </script>
-    <script>
-        $(`#upvote-{{ project.pk }}`).on('click', function (e) {
-          console.log("Hello world")
+      function upvote(e, project_pk) {
+        e.preventDefault();
+        e.target.classList.toggle("btn-active");
+        var span_project_upvotes = e.target.children[1];
+        console.log(span_project_upvotes)
+        e.target.classList.contains("btn-active") 
+        ? span_project_upvotes.innerHTML = `${parseInt(span_project_upvotes.innerHTML) + 1}`
+        : span_project_upvotes.innerHTML = `${parseInt(span_project_upvotes.innerHTML) - 1}` ;
         $.ajax({
-          type: "POST",
-          url: `/upvote/project/{{ project.pk }}/`,
+          url: `/upvote/project/${project_pk}/`,
+          type: 'POST',
           data: {
-        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
-          }
-        }).then(location.reload());
-      });
+            'project_pk': {{ project.pk }},
+            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
+          },
+        });
+      }
     </script>
   {% endfor %}
 {% endblock %}

app/templates/project_preview_card.html

@@ -1,5 +1,5 @@
 <div class="challenge-card">
-    <a href="#{{ project.name }}" style="white-space: nowrap;">
+    <a href="#project-{{ project.pk }}" style="white-space: nowrap;">
       <div class="project-card-content row" style="display: flex;">
         {% if project.image %}
         <div class="project-card-image-preview col-3" style="background-image: url({{ project.image.url }});"></div>

app/views.py

@@ -97,12 +97,7 @@ def get_context_data(self, **kwargs):
             "q" not in self.request.GET and "tag" not in self.request.GET
         ):
             context["projects"] = Project.objects.all()
-            context["project__links"] = []
-            for p in context["projects"]:
-                context["project__links"].append(SocialLinkAttachement.objects.filter(
-                    object_id=p.pk,
-                    content_type=ContentType.objects.get_for_model(Project),
-                ))
+            context["user_upvote_projects"], context["project__links"] = get_project_upvotes_links(self.request.user, context["projects"])
             context["projects_info"] = zip(context["projects"],context["project__links"])
             return context
 
@@ -151,13 +146,9 @@ def get_context_data(self, **kwargs):
             .distinct()
             .order_by("-created")
         )
-        context["project__links"] = []
-        for p in context["projects"]:
-            context["project__links"].append(SocialLinkAttachement.objects.filter(
-                object_id=p.pk,
-                content_type=ContentType.objects.get_for_model(Project),
-            ))
+        context["user_upvote_projects"], context["project__links"] = get_project_upvotes_links(self.request.user, context["projects"])
         context["projects_info"] = zip(context["projects"],context["project__links"])
+
         context["links"] = SocialLinkAttachement.objects.filter(
             object_id=self.object.pk,
             content_type=ContentType.objects.get_for_model(Profile),
@@ -378,19 +369,14 @@ def get_context_data(self, **kwargs):
                 context["user_upvote_comments"][comment.pk] = True
             except:
                 context["user_upvote_comments"][comment.pk] = False
-            
+
         if self.challenge.start and self.challenge.end:
             context["time_labels"] = [
                 {"label": "Start Time", "time": self.challenge.start},
                 {"label": "End Time", "time": self.challenge.end},
             ]
         context["projects"] = Project.objects.filter(challenge=self.challenge)
-        context["project__links"] = []
-        for p in context["projects"]:
-            context["project__links"].append(SocialLinkAttachement.objects.filter(
-                object_id=p.pk,
-                content_type=ContentType.objects.get_for_model(Project),
-            ))
+        context["user_upvote_projects"], context["project__links"] = get_project_upvotes_links(self.request.user, context["projects"])
         context["projects_info"] = zip(context["projects"],context["project__links"])
         context["related_challenges"] = Challenge.objects.filter(tags__pk__in=self.challenge.tags.all()).distinct().exclude(pk=self.challenge.pk)[:3] #Take top 3 related challenges
         if len(context["related_challenges"]) == 0: #If it can't find any challenges, recommend
@@ -612,4 +598,19 @@ def delete_project(request, pk):
         # Unauthorized Access
         raise Http404
     # Unauthorized Access
-    raise Http404
+    raise Http404
+
+def get_project_upvotes_links(user, projects):
+    project__links = []
+    user_upvote_projects = {}
+    for project in projects:
+        project__links.append(SocialLinkAttachement.objects.filter(
+            object_id=project.pk,
+            content_type=ContentType.objects.get_for_model(Project),
+        ))
+        try:
+            UpvoteProject.objects.get(obj=project.pk, user=user)
+            user_upvote_projects[project.pk] = True
+        except:
+            user_upvote_projects[project.pk] = False
+    return user_upvote_projects, project__links