.idea/encodings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
+</project>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (venv)" project-jdk-type="Python SDK" />
+  <component name="PyCharmProfessionalAdvertiser">
+    <option name="shown" value="true" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/tdt4242-base.iml" filepath="$PROJECT_DIR$/.idea/tdt4242-base.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/tdt4242-base.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TestRunnerService">
+    <option name="PROJECT_TEST_RUNNER" value="Unittests" />
+  </component>
+</module>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

backend/secfit/.gitignore

+geckodriver.log
\ No newline at end of file

backend/secfit/secfit/settings.py

@@ -133,14 +133,28 @@ MEDIA_ROOT = os.path.join(BASE_DIR, "media")
 MEDIA_URL = "/media/"
 
 
+# REST_FRAMEWORK = {
+#     "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
+#     "PAGE_SIZE": 10,
+#     #"DEFAULT_AUTHENTICATION_CLASSES": (
+#     #    "rest_framework_simplejwt.authentication.JWTAuthentication",
+#     #),
+#     'DEFAULT_AUTHENTICATION_CLASSES': (
+#         # 'rest_framework.authentication.SessionAuthentication',
+#         "rest_framework_simplejwt.authentication.JWTAuthentication"
+#     ),
+# }
+
+
 REST_FRAMEWORK = {
     "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
-    "PAGE_SIZE": 10,
+    "PAGE_SIZE": 100,
     "DEFAULT_AUTHENTICATION_CLASSES": (
         "rest_framework_simplejwt.authentication.JWTAuthentication",
     ),
 }
 
+
 AUTH_USER_MODEL = "users.User"
 
 DEBUG = True

backend/secfit/workouts/admin.py

@@ -3,9 +3,10 @@
 from django.contrib import admin
 
 # Register your models here.
-from .models import Exercise, ExerciseInstance, Workout, WorkoutFile
+from .models import Exercise, ExerciseInstance, Workout, WorkoutFile, WorkoutLike
 
 admin.site.register(Exercise)
 admin.site.register(ExerciseInstance)
 admin.site.register(Workout)
 admin.site.register(WorkoutFile)
+admin.site.register(WorkoutLike)

backend/secfit/workouts/migrations/0004_workoutlike.py

+# Generated by Django 3.1 on 2021-02-21 14:35
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('workouts', '0003_rememberme'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='WorkoutLike',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('userLiking', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='userLiking', to=settings.AUTH_USER_MODEL)),
+                ('workoutToLike', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='workouts.workout')),
+            ],
+        ),
+    ]

backend/secfit/workouts/models.py

@@ -151,3 +151,15 @@ class RememberMe(models.Model):
 
     def __str__(self):
         return self.remember_me
+
+
+# Likes for a workout
+class WorkoutLike(models.Model):
+
+    # The workout that is being liked
+    workoutToLike = models.ForeignKey(Workout, on_delete=models.CASCADE)
+
+    # The user doing the liking
+    userLiking = models.ForeignKey(
+        get_user_model(), on_delete=models.CASCADE, related_name="userLiking"
+    )
\ No newline at end of file

backend/secfit/workouts/seleniumLikeIntegrationTest.py

+import unittest
+from selenium import webdriver
+from selenium.webdriver.common.keys import Keys
+from webdriver_manager.firefox import GeckoDriverManager
+import time
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+
+from datetime import datetime
+
+# <---------- IMPORTANT --------->
+# MUST HAVE FIREFOX, SELENIUM AND WEBDRIVER INSTALLED TO RUN THESE TESTS:
+# pip install selenium
+# pip install webdriver-manager
+
+# Before running this test, remember to host the application on http://localhost:9090 using docker-compose up --build
+# in the main project folder
+
+# Test is run by: python seleniumLikeIntegrationTest.py (when in the workouts-folder)
+class TestWorkoutLikes(unittest.TestCase):
+
+    # Creates two unique usernames to be used in the tests;
+    # by appending the current exact time to the username, we will always have unique usernames
+    uniqueUsername1 = "LikeTestUser1-" + datetime.utcnow().strftime("%m-%d-%Y-%H-%M-%S.%f")
+    uniqueUsername2 = "LikeTestUser2-" + datetime.utcnow().strftime("%m-%d-%Y-%H-%M-%S.%f")
+
+
+    # Runs before each test
+    def setUp(self):
+        self.driver = webdriver.Firefox(executable_path=GeckoDriverManager().install())
+
+        # Sets an implicit wait of 10 seconds (Test will wait for up to 10 seconds for an expected DOM element)
+        self.driver.implicitly_wait(10)
+
+    # Tests that a user auto-likes his own workout
+    def test_auto_liked_own_workout_and_only_one_like(self):
+        driver = self.driver
+
+        # Opens the web browser, and logs out just in case someone was already logged in
+        driver.get("http://localhost:9090/logout.html")
+
+        # Finds and clicks the button in the main page that brings us to the register page
+        registerButton = driver.find_element_by_id("btn-register")
+        registerButton.click()
+
+        # Finds all the input fields in the register form
+        usernameField = driver.find_element_by_name('username')
+        emailField = driver.find_element_by_name('email')
+        passwordField = driver.find_element_by_name('password')
+        repeatPasswordField = driver.find_element_by_name('password1')
+        phoneNumberField = driver.find_element_by_name('phone_number')
+        countryField = driver.find_element_by_name('country')
+        cityField = driver.find_element_by_name('city')
+        streetAddressField = driver.find_element_by_name('street_address')
+
+        # Fetches the first unique username
+        uniqueUsername = self.__class__.uniqueUsername1
+
+        # Inputs values in all the registration fields
+        usernameField.send_keys(uniqueUsername)
+        emailField.send_keys(uniqueUsername+"@test.test")
+        passwordField.send_keys("123")
+        repeatPasswordField.send_keys("123")
+        phoneNumberField.send_keys("12312312")
+        countryField.send_keys("Norway")
+        cityField.send_keys("Narvik")
+        streetAddressField.send_keys("Kvartslia")
+
+        # Finds and clicks the button that creates the account
+        createAccountButton = driver.find_element_by_id("btn-create-account")
+        createAccountButton.click()
+
+        # The "new workout" button sometimes doesn't registers clicks even though it has been loaded into the DOM.
+        # Therefore, we wait 1 second before clicking it
+        time.sleep(1)
+
+        # Finds and clicks the button that opens the page for creating a new workout
+        newWorkoutButton = driver.find_element_by_id("btn-create-workout")
+        newWorkoutButton.click()
+
+        # Input fields for a new workout
+        workoutNameField = driver.find_element_by_id("inputName")
+        workoutDateField = driver.find_element_by_id("inputDateTime")
+        workoutNotesField = driver.find_element_by_id("inputNotes")
+
+        # Waits until fields become editable
+        time.sleep(2)
+
+        # Inputs values into fields
+        workoutNameField.send_keys("TestWorkout")
+        workoutDateField.clear();
+        workoutDateField.send_keys("2020-01-01 12:00");
+        workoutNotesField.send_keys("This is an auto-generated workout meant for testing")
+
+        time.sleep(1)
+
+        # Finds and clicks the button that publishes the new workout
+        publishWorkoutButton = driver.find_element_by_id("btn-ok-workout")
+        publishWorkoutButton.click()
+
+        time.sleep(2)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds and clicks the button that views the user's own workouts
+        myWorkoutsButton = driver.find_element_by_id("list-my-workouts-list")
+        myWorkoutsButton.click()
+        time.sleep(2)
+
+        # Finds the like button and the like amount of the newly-created workout
+        likeButton = driver.find_elements_by_css_selector("a.like-button")[-1]
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # Tests that the newly-created workout has a like amount of 1 (auto-liked by the workout owner)
+        self.assertEqual("1", likeNumber.text)
+
+        # Tests that the like button is active (already liked by the owner)
+        self.assertEqual("like-button active", likeButton.get_attribute("class"))
+
+        # Tries to re-click the like button to unlike; this should not be possible
+        try:
+            likeButton.click()
+            self.fail("Users should not be able to unlike after liking")
+
+        except:
+            pass
+
+        # Changes the class of the like button so that it is no longer disabled,
+        # so we can test that re-clicking an already-liked workout doesn't increment the like amount
+        driver.execute_script("arguments[0].setAttribute('class','like-button')", likeButton)
+        time.sleep(1)
+
+        likeButton.click()
+        time.sleep(2)
+
+        # Gets the newest like number that is in the DOM
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # Tests that the newly-created workout still has a like amount of 1 (auto-liked by the workout owner)
+        self.assertEqual("1", likeNumber.text)
+
+        # Refresh the site so that we can be sure that we fetch the newest like amounts, and that the workout wasn't
+        # actually re-liked by the owner (that no change happened in the database)
+        driver.refresh()
+        time.sleep(2)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds and clicks the button that views the user's own workouts
+        myWorkoutsButton = driver.find_element_by_id("list-my-workouts-list")
+        myWorkoutsButton.click()
+        time.sleep(2)
+
+        # Finds the like button and the like amount of the newly-created workout
+        likeButton = driver.find_elements_by_css_selector("a.like-button")[-1]
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # We re-test that the newly-created workout still has a like amount of 1;
+        # the like amount should not have incremented
+        self.assertEqual("1", likeNumber.text)
+
+        # Tests that the like button is still active (already liked by the owner)
+        self.assertEqual("like-button active", likeButton.get_attribute("class"))
+
+        time.sleep(1)
+
+
+    # Tests that a user can like another user's public workout *once*
+    def test_liked_by_other_user_and_only_one_like(self):
+        driver = self.driver
+
+        # Opens the web browser, and logs out just in case someone was already logged in
+        driver.get("http://localhost:9090/logout.html")
+
+        # Finds and clicks the button in the main page that brings us to the register page
+        registerButton = driver.find_element_by_id("btn-register")
+        registerButton.click()
+
+        # Finds all the input fields in the register form
+        usernameField = driver.find_element_by_name('username')
+        emailField = driver.find_element_by_name('email')
+        passwordField = driver.find_element_by_name('password')
+        repeatPasswordField = driver.find_element_by_name('password1')
+        phoneNumberField = driver.find_element_by_name('phone_number')
+        countryField = driver.find_element_by_name('country')
+        cityField = driver.find_element_by_name('city')
+        streetAddressField = driver.find_element_by_name('street_address')
+
+        # Fetches the first unique username
+        uniqueUsername = self.__class__.uniqueUsername2
+
+        # Inputs values in all the registration fields
+        usernameField.send_keys(uniqueUsername)
+        emailField.send_keys(uniqueUsername + "@test.test")
+        passwordField.send_keys("123")
+        repeatPasswordField.send_keys("123")
+        phoneNumberField.send_keys("12312312")
+        countryField.send_keys("Norway")
+        cityField.send_keys("Narvik")
+        streetAddressField.send_keys("Kvartslia")
+
+        # Finds and clicks the button that creates the account
+        createAccountButton = driver.find_element_by_id("btn-create-account")
+        createAccountButton.click()
+
+        time.sleep(1)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds the like button and the like amount of the newly-created workout
+        likeButton = driver.find_elements_by_css_selector("a.like-button")[-1]
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # Tests that the newly-created workout has a like amount of 1 (auto-liked by the workout owner)
+        self.assertEqual("1", likeNumber.text)
+
+        # Tests that the like button is not active (not already liked)
+        self.assertEqual("like-button", likeButton.get_attribute("class"))
+
+        # Clicks the like button
+        likeButton.click()
+        time.sleep(2)
+
+        # Gets the newest like number that is in the DOM
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # Tests that the newly-created workout now has a like amount of 2
+        self.assertEqual("2", likeNumber.text)
+
+        # Refresh the site so that we can be sure that we fetch the newest like amounts, and that the workout was
+        # actually liked by the new user (that the change happened in the database as well)
+        driver.refresh()
+        time.sleep(2)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds the like button and the like amount of the newly-created workout
+        likeButton = driver.find_elements_by_css_selector("a.like-button")[-1]
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # We re-test that the newly-created workout still has a like amount of 2;
+        # the like amount should have incremented
+        self.assertEqual("2", likeNumber.text)
+
+        # Tests that the like button is still active (already liked)
+        self.assertEqual("like-button active", likeButton.get_attribute("class"))
+        time.sleep(1)
+
+        # Tries to re-click the like button to unlike; this should not be possible
+        try:
+            likeButton.click()
+            self.fail("Users should not be able to unlike after liking")
+
+        except:
+            pass
+
+        # Changes the class of the like button so that it is no longer disabled,
+        # so we can test that re-clicking an already-liked workout doesn't increment the like amount
+        driver.execute_script("arguments[0].setAttribute('class','like-button')", likeButton)
+        time.sleep(1)
+
+        likeButton.click()
+        time.sleep(2)
+
+        # Gets the newest like number that is in the DOM
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # Tests that the newly-created workout still has a like amount of 2
+        self.assertEqual("2", likeNumber.text)
+
+        # Refresh the site so that we can be sure that we fetch the newest like amounts, and that the workout wasn't
+        # actually re-liked by the owner (that the change happened in the database as well)
+        driver.refresh()
+        time.sleep(2)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds the like button and the like amount of the newly-created workout
+        likeButton = driver.find_elements_by_css_selector("a.like-button")[-1]
+        likeNumber = driver.find_elements_by_css_selector("td.like-amount")[-1]
+
+        # We re-test that the newly-created workout still has a like amount of 2;
+        # the like amount should not have incremented further
+        self.assertEqual("2", likeNumber.text)
+
+        # Tests that the like button is still active (already liked)
+        self.assertEqual("like-button active", likeButton.get_attribute("class"))
+
+        time.sleep(1)
+
+
+    # *Not a test*, just a cleanup that deletes the workout that was created during the other tests. Tried using
+    # tearDownClass, but that did not let me access the website
+    def test_remove_created_workout(self):
+        driver = self.driver
+        print("YOOOOO")
+
+        # Opens the web browser, and logs out just in case someone was already logged in
+        driver.get("http://localhost:9090/logout.html")
+        time.sleep(2)
+
+        driver.get("http://localhost:9090/login.html")
+        time.sleep(2)
+
+        # Finds all the input fields in the register form
+        usernameField = driver.find_element_by_name('username')
+        passwordField = driver.find_element_by_name('password')
+
+        # Fetches the username for the user that created the workout
+        uniqueUsername = self.__class__.uniqueUsername1
+
+        # Inputs values in all the registration fields
+        usernameField.send_keys(uniqueUsername)
+        passwordField.send_keys("123")
+
+        logInButton = driver.find_element_by_id("btn-login")
+        logInButton.click()
+        time.sleep(2)
+
+        # Scrolls to the bottom of the page; a 'problem' (due to dynamic loading) with not every workout being
+        # loaded into the DOM appears when we have too many workouts. Scrolling to the bottom fixes this.
+        self.scroll_down()
+        time.sleep(1)
+
+        # Finds and clicks the button that views the user's own workouts
+        myWorkoutsButton = driver.find_element_by_id("list-my-workouts-list")
+        myWorkoutsButton.click()
+        time.sleep(2)
+
+        workout = driver.find_elements_by_css_selector("a.list-group-item")[-1]
+        workout.click()
+        time.sleep(2)
+
+        editButton = driver.find_element_by_id("btn-edit-workout")
+        editButton.click()
+        time.sleep(1)
+
+        deleteWorkoutButton = driver.find_element_by_id("btn-delete-workout")
+        deleteWorkoutButton.click()
+        time.sleep(1)
+
+
+    # Runs after running the tests
+    def tearDown(self):
+        self.driver.close()
+
+    # Code for scrolling to the end of a dynamically loading page;
+    # from https://stackoverflow.com/questions/48850974/selenium-scroll-to-end-of-page-in-dynamically-loading-webpage
+    def scroll_down(self):
+        """A method for scrolling the page."""
+
+        # Get scroll height.
+        last_height = self.driver.execute_script("return document.body.scrollHeight")
+
+        while True:
+
+            # Scroll down to the bottom.
+            self.driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
+
+            # Wait to load the page.
+            time.sleep(2)
+
+            # Calculate new scroll height and compare with last scroll height.
+            new_height = self.driver.execute_script("return document.body.scrollHeight")
+
+            if new_height == last_height:
+                break
+
+            last_height = new_height
+
+
+if __name__ == "__main__":
+    unittest.main()
+
+

backend/secfit/workouts/urls.py

@@ -27,6 +27,16 @@ urlpatterns = format_suffix_patterns(
             views.ExerciseInstanceList.as_view(),
             name="exercise-instance-list",
         ),
+        path(
+            "api/leaderboards/<int:pk>/",
+            views.Leaderboards.as_view(),
+            name="leaderboards",
+        ),
+        path(
+            "api/workoutLiking/<int:pk>/",
+            views.WorkoutLiking.as_view(),
+            name="WorkoutLiking",
+        ),
         path(
             "api/exercise-instances/<int:pk>/",
             views.ExerciseInstanceDetail.as_view(),

backend/secfit/workouts/views.py

@@ -6,10 +6,12 @@ from rest_framework import permissions
 from rest_framework.parsers import (
     JSONParser,
 )
+import json
+from rest_framework import status
 from rest_framework.decorators import api_view
 from rest_framework.response import Response
 from rest_framework.reverse import reverse
-from django.db.models import Q
+from django.db.models import Q, Sum, F, IntegerField
 from rest_framework import filters
 from workouts.parsers import MultipartJsonParser
 from workouts.permissions import (
@@ -22,7 +24,7 @@ from workouts.permissions import (
     IsWorkoutPublic,
 )
 from workouts.mixins import CreateListModelMixin
-from workouts.models import Workout, Exercise, ExerciseInstance, WorkoutFile
+from workouts.models import Workout, Exercise, ExerciseInstance, WorkoutFile, WorkoutLike
 from workouts.serializers import WorkoutSerializer, ExerciseSerializer
 from workouts.serializers import RememberMeSerializer
 from workouts.serializers import ExerciseInstanceSerializer, WorkoutFileSerializer
@@ -34,6 +36,9 @@ from collections import namedtuple
 import base64, pickle
 from django.core.signing import Signer
 
+from users.models import User
+from rest_framework.views import APIView
+
 
 @api_view(["GET"])
 def api_root(request, format=None):
@@ -204,7 +209,6 @@ class ExerciseDetail(
 
     HTTP methods: GET, PUT, PATCH, DELETE
     """
-
     queryset = Exercise.objects.all()
     serializer_class = ExerciseSerializer
     permission_classes = [permissions.IsAuthenticated]
@@ -221,6 +225,43 @@ class ExerciseDetail(
     def delete(self, request, *args, **kwargs):
         return self.destroy(request, *args, **kwargs)
 
+class Leaderboards(APIView):
+
+    permission_classes = [permissions.IsAuthenticated]
+    
+    def get(self, request, pk):
+
+        # User must be logged in
+        if self.request.user:
+    
+            leaderboardNumbers = ExerciseInstance.objects.filter(Q(exercise__pk=pk) & Q(workout__visibility='PU')).values('workout__owner__pk').annotate(amount=Sum(F("sets") * F("number"), output_field=IntegerField())).order_by('-amount')
+    
+            leaderboardResult = []
+    
+            # Iterates through the top 5 entries in the leaderboard and formats it correctly
+            for i in range(0, min(5, len(leaderboardNumbers))):
+                leaderboardResult.append({"name": User.objects.get(pk=leaderboardNumbers[i]['workout__owner__pk']).username, "value": leaderboardNumbers[i]['amount']})
+    
+                # Applies the rank to the leaderboard entry; if two or more users have the score they get the same rank
+                if i > 0 and leaderboardNumbers[i-1]["amount"] == leaderboardNumbers[i]["amount"]:
+                    leaderboardResult[i]["rank"] = leaderboardResult[i-1]["rank"]
+                else:
+                    leaderboardResult[i]["rank"] = i+1
+    
+            # Finds the user in the leaderboard list. If the user is not in the leaderboard list,
+            # the user is automatically given a score of 0 and the worst rank
+
+            currentLoggedInUser = self.request.user
+    
+            for j in range(0, len(leaderboardNumbers)):
+                if leaderboardNumbers[j]['workout__owner__pk'] == currentLoggedInUser.pk:
+                    leaderboardResult.append({"name": currentLoggedInUser.username, "value": leaderboardNumbers[j]["amount"], "rank": j+1})
+                    break
+            else:
+                leaderboardResult.append({"name": currentLoggedInUser.username, "value": 0, "rank": len(leaderboardNumbers) + 1})
+
+            return Response(leaderboardResult)
+
 
 class ExerciseInstanceList(
     mixins.ListModelMixin,
@@ -340,3 +381,35 @@ class WorkoutFileDetail(
 
     def delete(self, request, *args, **kwargs):
         return self.destroy(request, *args, **kwargs)
+
+
+# View for fetching like amount, and for creating new likes
+class WorkoutLiking(APIView):
+    permission_classes = [permissions.IsAuthenticated]
+
+    # Returns a tuple with a boolean value that is true if liking is allowed (the workout does not belong to the user
+    # and the workout has not been liked before), and the amount of likes that the workout has
+    def get(self, request, pk):
+
+        likingAllowed = Workout.objects.get(pk=pk).owner != self.request.user and WorkoutLike.objects.filter(
+            Q(userLiking=self.request.user) & Q(workoutToLike__pk=pk)).count() == 0
+
+        likeAmount = WorkoutLike.objects.filter(Q(workoutToLike__pk=pk)).count() + 1
+
+        return Response((likingAllowed, likeAmount), status.HTTP_200_OK)
+
+    # Tries to like a new post and returns the same as the GET above
+    def post(self, request, pk):
+
+        likingAllowed = Workout.objects.get(pk=pk).owner != self.request.user and WorkoutLike.objects.filter(
+            Q(userLiking=self.request.user) & Q(workoutToLike__pk=pk)).count() == 0
+
+        likeAmount = WorkoutLike.objects.filter(Q(workoutToLike__pk=pk)).count() + 1
+
+        if likingAllowed:
+            newWorkoutLike = WorkoutLike(workoutToLike=Workout.objects.get(pk=pk), userLiking=self.request.user)
+            newWorkoutLike.save()
+
+            return Response((False, likeAmount + 1), status.HTTP_201_CREATED)
+
+        return Response((likingAllowed, likeAmount), status.HTTP_100_CONTINUE)
\ No newline at end of file

frontend/www/exercise.html

@@ -45,7 +45,15 @@
 
             </div>
         </form>
+        <div class="row">
+            <div class="col-lg">
+                <h3 class="mt-3">Leaderboard</h3>
+            </div>
         </div>
+            <table id="leaderboardstable" class="table table-striped">
+                <tr><th>Rank<th>Username<th>Score
+            </table>
+          </div>
         <script src="scripts/defaults.js"></script>
         <script src="scripts/scripts.js"></script>
         <script src="scripts/exercise.js"></script>

frontend/www/scripts/exercise.js

@@ -4,151 +4,200 @@ let deleteButton;
 let editButton;
 let oldFormData;
 
-
 function handleCancelButtonDuringEdit() {
-    setReadOnly(true, "#form-exercise");
-    okButton.className += " hide";
-    deleteButton.className += " hide";
-    cancelButton.className += " hide";
-    editButton.className = editButton.className.replace(" hide", "");
-
-    cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
-    let form = document.querySelector("#form-exercise");
-    if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
-    if (oldFormData.has("description")) form.description.value = oldFormData.get("description");
-    if (oldFormData.has("unit")) form.unit.value = oldFormData.get("unit");
-    
-    oldFormData.delete("name");
-    oldFormData.delete("description");
-    oldFormData.delete("unit");
-
+  setReadOnly(true, "#form-exercise");
+  okButton.className += " hide";
+  deleteButton.className += " hide";
+  cancelButton.className += " hide";
+  editButton.className = editButton.className.replace(" hide", "");
+
+  cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
+
+  let form = document.querySelector("#form-exercise");
+  if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
+  if (oldFormData.has("description"))
+    form.description.value = oldFormData.get("description");
+  if (oldFormData.has("unit")) form.unit.value = oldFormData.get("unit");
+
+  oldFormData.delete("name");
+  oldFormData.delete("description");
+  oldFormData.delete("unit");
 }
 
 function handleCancelButtonDuringCreate() {
-    window.location.replace("exercises.html");
+  window.location.replace("exercises.html");
 }
 
 async function createExercise() {
-    let form = document.querySelector("#form-exercise");
-    let formData = new FormData(form);
-    let body = {"name": formData.get("name"), 
-                "description": formData.get("description"), 
-                "unit": formData.get("unit")};
-
-    let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
-
-    if (response.ok) {
-        window.location.replace("exercises.html");
-    } else {
-        let data = await response.json();
-        let alert = createAlert("Could not create new exercise!", data);
-        document.body.prepend(alert);
-    }
+  let form = document.querySelector("#form-exercise");
+  let formData = new FormData(form);
+  let body = {
+    name: formData.get("name"),
+    description: formData.get("description"),
+    unit: formData.get("unit"),
+  };
+
+  let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
+
+  if (response.ok) {
+    window.location.replace("exercises.html");
+  } else {
+    let data = await response.json();
+    let alert = createAlert("Could not create new exercise!", data);
+    document.body.prepend(alert);
+  }
 }
 
 function handleEditExerciseButtonClick() {
-    setReadOnly(false, "#form-exercise");
+  setReadOnly(false, "#form-exercise");
 
-    editButton.className += " hide";
-    okButton.className = okButton.className.replace(" hide", "");
-    cancelButton.className = cancelButton.className.replace(" hide", "");
-    deleteButton.className = deleteButton.className.replace(" hide", "");
+  editButton.className += " hide";
+  okButton.className = okButton.className.replace(" hide", "");
+  cancelButton.className = cancelButton.className.replace(" hide", "");
+  deleteButton.className = deleteButton.className.replace(" hide", "");
 
-    cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
+  cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
 
-    let form = document.querySelector("#form-exercise");
-    oldFormData = new FormData(form);
+  let form = document.querySelector("#form-exercise");
+  oldFormData = new FormData(form);
 }
 
 async function deleteExercise(id) {
-    let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
-    if (!response.ok) {
-        let data = await response.json();
-        let alert = createAlert(`Could not delete exercise ${id}`, data);
-        document.body.prepend(alert);
-    } else {
-        window.location.replace("exercises.html");
-    }
+  let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
+  if (!response.ok) {
+    let data = await response.json();
+    let alert = createAlert(`Could not delete exercise ${id}`, data);
+    document.body.prepend(alert);
+  } else {
+    window.location.replace("exercises.html");
+  }
 }
 
 async function retrieveExercise(id) {
-    let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
-    console.log(response.ok);
-    if (!response.ok) {
-        let data = await response.json();
-        let alert = createAlert("Could not retrieve exercise data!", data);
-        document.body.prepend(alert);
-    } else {
-        let exerciseData = await response.json();
-        let form = document.querySelector("#form-exercise");
-        let formData = new FormData(form);
-
-        for (let key of formData.keys()) {
-            let selector = `input[name="${key}"], textarea[name="${key}"]`;
-            let input = form.querySelector(selector);
-            let newVal = exerciseData[key];
-            input.value = newVal;
-        }
+  let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
+  console.log(response.ok);
+  if (!response.ok) {
+    let data = await response.json();
+    let alert = createAlert("Could not retrieve exercise data!", data);
+    document.body.prepend(alert);
+  } else {
+    let exerciseData = await response.json();
+    let form = document.querySelector("#form-exercise");
+    let formData = new FormData(form);
+
+    for (let key of formData.keys()) {
+      let selector = `input[name="${key}"], textarea[name="${key}"]`;
+      let input = form.querySelector(selector);
+      let newVal = exerciseData[key];
+      input.value = newVal;
     }
+  }
 }
 
 async function updateExercise(id) {
-    let form = document.querySelector("#form-exercise");
-    let formData = new FormData(form);
-    let body = {"name": formData.get("name"), 
-                "description": formData.get("description"), 
-                "unit": formData.get("unit")};
-    let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
-
-    if (!response.ok) {
-        let data = await response.json();
-        let alert = createAlert(`Could not update exercise ${id}`, data);
-        document.body.prepend(alert);
-    } else {
-        // duplicate code from handleCancelButtonDuringEdit
-        // you should refactor this
-        setReadOnly(true, "#form-exercise");
-        okButton.className += " hide";
-        deleteButton.className += " hide";
-        cancelButton.className += " hide";
-        editButton.className = editButton.className.replace(" hide", "");
-    
-        cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-        
-        oldFormData.delete("name");
-        oldFormData.delete("description");
-        oldFormData.delete("unit");
+  let form = document.querySelector("#form-exercise");
+  let formData = new FormData(form);
+  let body = {
+    name: formData.get("name"),
+    description: formData.get("description"),
+    unit: formData.get("unit"),
+  };
+  let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
+
+  if (!response.ok) {
+    let data = await response.json();
+    let alert = createAlert(`Could not update exercise ${id}`, data);
+    document.body.prepend(alert);
+  } else {
+    // duplicate code from handleCancelButtonDuringEdit
+    // you should refactor this
+    setReadOnly(true, "#form-exercise");
+    okButton.className += " hide";
+    deleteButton.className += " hide";
+    cancelButton.className += " hide";
+    editButton.className = editButton.className.replace(" hide", "");
+
+    cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
+
+    oldFormData.delete("name");
+    oldFormData.delete("description");
+    oldFormData.delete("unit");
+  }
+}
+
+async function fetchLeaderBoards(id) {
+
+  // Fetches leaderboard data
+  let response = await sendRequest("GET", `${HOST}/api/leaderboards/${id}/`);
+  let data = await response.json();
+
+  if (response.ok) {
+    let table = document.getElementById("leaderboardstable");
+    let row, cell;
+
+    //The user's own score will always be placed last in the JSON response
+    let userIndex = data.length - 1;
+
+    for (let i = 0; i < data.length - 1; i++) {
+      row = table.insertRow();
+      cell = row.insertCell();
+      cell.textContent = data[i].rank;
+      cell = row.insertCell();
+      cell.textContent = data[i].name;
+      cell = row.insertCell();
+      cell.textContent = data[i].value;
     }
+    //If the user is not in top 5, the users score will also be rendered
+    if (data[userIndex].rank > 5) {
+      row = table.insertRow();
+      cell = row.insertCell();
+      cell.textContent = data[userIndex].rank;
+      cell = row.insertCell();
+      cell.textContent = data[userIndex].name;
+      cell = row.insertCell();
+      cell.textContent = data[userIndex].value;
+    }
+  }
+
+  return data;
 }
 
 window.addEventListener("DOMContentLoaded", async () => {
-    cancelButton = document.querySelector("#btn-cancel-exercise");
-    okButton = document.querySelector("#btn-ok-exercise");
-    deleteButton = document.querySelector("#btn-delete-exercise");
-    editButton = document.querySelector("#btn-edit-exercise");
-    oldFormData = null;
-
-    const urlParams = new URLSearchParams(window.location.search);
-
-    // view/edit
-    if (urlParams.has('id')) {
-        const exerciseId = urlParams.get('id');
-        await retrieveExercise(exerciseId);
-
-        editButton.addEventListener("click", handleEditExerciseButtonClick);
-        deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
-        okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, exerciseId));
-    } 
-    //create
-    else {
-        setReadOnly(false, "#form-exercise");
-
-        editButton.className += " hide";
-        okButton.className = okButton.className.replace(" hide", "");
-        cancelButton.className = cancelButton.className.replace(" hide", "");
-
-        okButton.addEventListener("click", async () => await createExercise());
-        cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
-    }
-});
\ No newline at end of file
+  cancelButton = document.querySelector("#btn-cancel-exercise");
+  okButton = document.querySelector("#btn-ok-exercise");
+  deleteButton = document.querySelector("#btn-delete-exercise");
+  editButton = document.querySelector("#btn-edit-exercise");
+  oldFormData = null;
+
+  const urlParams = new URLSearchParams(window.location.search);
+
+  // view/edit
+  if (urlParams.has("id")) {
+    const exerciseId = urlParams.get("id");
+    await retrieveExercise(exerciseId);
+    await fetchLeaderBoards(exerciseId);
+
+    editButton.addEventListener("click", handleEditExerciseButtonClick);
+    deleteButton.addEventListener(
+      "click",
+      (async (id) => await deleteExercise(id)).bind(undefined, exerciseId)
+    );
+    okButton.addEventListener(
+      "click",
+      (async (id) => await updateExercise(id)).bind(undefined, exerciseId)
+    );
+  }
+  //create
+  else {
+    setReadOnly(false, "#form-exercise");
+
+    editButton.className += " hide";
+    okButton.className = okButton.className.replace(" hide", "");
+    cancelButton.className = cancelButton.className.replace(" hide", "");
+
+    okButton.addEventListener("click", async () => await createExercise());
+    cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
+  }
+
+
+});

frontend/www/scripts/workouts.js

@@ -8,7 +8,17 @@ async function fetchWorkouts(ordering) {
 
         let workouts = data.results;
         let container = document.getElementById('div-content');
-        workouts.forEach(workout => {
+
+        for(const workout of workouts){
+
+            let workoutLikes = await sendRequest("GET", `${HOST}/api/workoutLiking/${workout.id}`);
+
+            let workoutLikesData = [true, 1]
+
+            if(workoutLikes.ok){
+                workoutLikesData = await workoutLikes.json()
+            }
+
             let templateWorkout = document.querySelector("#template-workout");
             let cloneWorkout = templateWorkout.content.cloneNode(true);
 
@@ -27,8 +37,35 @@ async function fetchWorkouts(ordering) {
             rows[2].querySelectorAll("td")[1].textContent = workout.owner_username; //Owner
             rows[3].querySelectorAll("td")[1].textContent = workout.exercise_instances.length; // Exercises
 
+            rows[4].querySelectorAll("td")[1].textContent = workoutLikesData[1]
+
+            let likeButton = rows[4].querySelectorAll("td")[2].querySelector(".like-button")
+
+            if(!workoutLikesData[0]){
+                likeButton.classList.add("active")
+            }
+
+            likeButton.addEventListener("click", async function(e) {
+                e.preventDefault();
+
+                if(!this.classList.contains("active")){
+                    this.classList.add("active");
+                    this.classList.add("animated");
+                    generateClones(this);
+
+                    let likeWorkoutResponse = await sendRequest("POST", `${HOST}/api/workoutLiking/${workout.id}/`, {});
+
+                    if(likeWorkoutResponse.ok){
+                        let likeWorkoutData = await likeWorkoutResponse.json()
+                        rows[4].querySelectorAll("td")[1].textContent = likeWorkoutData[1]
+                        likeButton.classList.add("active")
+                    }
+                }
+            })
+
+
             container.appendChild(aWorkout);
-        });
+        };
         return workouts;
     }
 }
@@ -103,4 +140,48 @@ window.addEventListener("DOMContentLoaded", async () => {
             }
         });
     }
-});
\ No newline at end of file
+});
+
+
+
+
+
+function generateClones(button) {
+  let clones = randomInt(4, 7);
+  for (let it = 1; it <= clones; it++) {
+    let clone = button.querySelector("svg").cloneNode(true),
+      size = randomInt(5, 16);
+    button.appendChild(clone);
+    clone.setAttribute("width", size);
+    clone.setAttribute("height", size);
+    clone.style.position = "absolute";
+    clone.style.transition =
+      "transform 0.5s cubic-bezier(0.12, 0.74, 0.58, 0.99) 0.3s, opacity 1s ease-out .5s";
+    let animTimeout = setTimeout(function() {
+      clearTimeout(animTimeout);
+      clone.style.transform =
+        "translate3d(" +
+        (plusOrMinus() * randomInt(10, 25)) +
+        "px," +
+        (plusOrMinus() * randomInt(10, 25)) +
+        "px,0)";
+      clone.style.opacity = 0;
+    }, 1);
+    let removeNodeTimeout = setTimeout(function() {
+      clone.parentNode.removeChild(clone);
+      clearTimeout(removeNodeTimeout);
+    }, 900);
+    let removeClassTimeout = setTimeout( function() {
+      button.classList.remove("animated")
+    }, 600);
+  }
+}
+
+
+function plusOrMinus() {
+  return Math.random() < 0.5 ? -1 : 1;
+}
+
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

frontend/www/styles/style.css

@@ -62,3 +62,96 @@
 .link-block {
   display: block;
 }
+
+
+
+
+/*
+Like button example from https://codepen.io/abaicus/pen/gNXdQP/
+*/
+
+.like-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.like-button.animated {
+  -webkit-animation: pop 0.9s both;
+  animation: pop 0.9s both;
+}
+.like-button svg {
+  opacity: 1;
+}
+.like-button svg path {
+  fill: #333;
+  transition: fill .4s ease-out;
+}
+.like-button.active svg path {
+  fill: #2196f3;
+ }
+
+.like-button.active {
+    pointer-events: none;
+}
+
+@-webkit-keyframes pop {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pop {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
\ No newline at end of file