diff --git a/backend/secfit/groups/models.py b/backend/secfit/groups/models.py
index 63f3793df5f692db7b5a79981454fbaeda070f57..b6d7b50cebe6c27d59cbe794125a5b4b02a01a6d 100644
--- a/backend/secfit/groups/models.py
+++ b/backend/secfit/groups/models.py
@@ -5,7 +5,6 @@ from django.contrib.contenttypes.models import ContentType
from django.urls import reverse
from django.db import models
from django.contrib.auth import get_user_model
-from workouts.models import Workout
# Create your models here.
diff --git a/backend/secfit/groups/serializers.py b/backend/secfit/groups/serializers.py
index c681927326c206f61a929ca9e633d0e8d105ff82..d58a16e01cb9c5ea34b0b6dd2ad2429b4d43ccc2 100644
--- a/backend/secfit/groups/serializers.py
+++ b/backend/secfit/groups/serializers.py
@@ -11,7 +11,7 @@ class GroupSerializer(serializers.HyperlinkedModelSerializer):
fields = ["owner", "name", "description"]
-class MembershipSerializer(serializers.HyperlinkedModelSerializer):
+class MembershipSerializer(serializers.ModelSerializer):
member = serializers.ReadOnlyField(source="member.username")
class Meta:
diff --git a/frontend/www/group.html b/frontend/www/group.html
new file mode 100644
index 0000000000000000000000000000000000000000..f491a0a8e8776415332c240d1a8113f065ff7d58
--- /dev/null
+++ b/frontend/www/group.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Group</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+ <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="styles/style.css">
+ <script src="scripts/navbar.js" type="text/javascript" defer></script>
+</head>
+ <body>
+ <navbar-el></navbar-el>
+
+ <div class="container">
+ <div class="row">
+ <div class="col-lg">
+ <h3 class="mt-3">Create Group</h3>
+ </div>
+ </div>
+ <form class="row g-3" id="form-group">
+ <div class="col-lg-6 ">
+ <label for="inputName" class="form-label">Name</label>
+ <input type="text" class="form-control" id="inputName" name="name" readonly>
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <label for="inputDescription" class="form-label">Description</label>
+ <textarea class="form-control" id="inputDescription" name="description" readonly></textarea>
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <input type="button" class="btn btn-primary" id="btn-ok-group" value=" OK ">
+ <input type="button" class="btn btn-secondary" id="btn-cancel-group" value="Cancel">
+ </div>
+ <div class="col-lg-6">
+
+ </div>
+ </form>
+ </div>
+ <script src="scripts/defaults.js"></script>
+ <script src="scripts/scripts.js"></script>
+ <script src="scripts/group.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/frontend/www/groups.html b/frontend/www/groups.html
new file mode 100644
index 0000000000000000000000000000000000000000..24ec44695e5eac67051bc2d968f21651f6388592
--- /dev/null
+++ b/frontend/www/groups.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Groups</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+ <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="styles/style.css">
+ <script src="scripts/navbar.js" type="text/javascript" defer></script>
+</head>
+<body>
+ <navbar-el></navbar-el>
+
+ <div class="container">
+ <div class="row">
+ <div class="col-lg text-center">
+ <h3 class="mt-5">View your groups!</h3>
+ <p>Here you can view, create, and edit groups you own.</p>
+ <input type="button" class="btn btn-primary" id="btn-create-group" value="Create new group">
+ </div>
+ <div class="row">
+ <div class="col-lg text-center">
+ <div class="list-group mt-1" id="div-content"></div>
+ </div>
+ </div>
+ </div>
+
+ <template id="template-group">
+ <a class="list-group-item list-group-item-action flex-column align-items-start my-1 exercise" href="">
+ <div class="d-flex w-100 justify-content-between align-items-center">
+ <h5 class="mb-1"></h5>
+ </div>
+ <div class="d-flex">
+ <p class="mb-1">
+ </p>
+ </div>
+ </a>
+ </template>
+
+ <script src="scripts/defaults.js"></script>
+ <script src="scripts/scripts.js"></script>
+ <script src="scripts/groups.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/www/scripts/group.js b/frontend/www/scripts/group.js
new file mode 100644
index 0000000000000000000000000000000000000000..adb777226b7ea76fda839b0cc098315a2e9543c2
--- /dev/null
+++ b/frontend/www/scripts/group.js
@@ -0,0 +1,39 @@
+let cancelButton;
+let okButton;
+let oldFormData;
+
+function handleCancelButtonDuringCreate() {
+ window.location.replace("groups.html");
+}
+
+async function createExercise() {
+ let form = document.querySelector("#form-group");
+ let formData = new FormData(form);
+ let body = {"name": formData.get("name"),
+ "description": formData.get("description"),
+ };
+
+ let response = await sendRequest("POST", `${HOST}/api/groups/`, body);
+
+ if (response.ok) {
+ window.location.replace("groups.html");
+ } else {
+ let data = await response.json();
+ let alert = createAlert("Could not create new group!", data);
+ document.body.prepend(alert);
+ }
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+ cancelButton = document.querySelector("#btn-cancel-group");
+ okButton = document.querySelector("#btn-ok-group");
+ oldFormData = null;
+
+ setReadOnly(false, "#form-group");
+
+ 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
diff --git a/frontend/www/scripts/groups.js b/frontend/www/scripts/groups.js
new file mode 100644
index 0000000000000000000000000000000000000000..b15df62715851ccd568fa700a7f4a20e9cf56eed
--- /dev/null
+++ b/frontend/www/scripts/groups.js
@@ -0,0 +1,42 @@
+async function fetchGroups(request) {
+ let response = await sendRequest("GET", `${HOST}/api/groups/`);
+
+ if (response.ok) {
+ let data = await response.json();
+
+ let groups = data.results;
+ let container = document.getElementById('div-content');
+ let exerciseTemplate = document.querySelector("#template-group");
+ groups.forEach(group => {
+ const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
+ exerciseAnchor.href = `exercise.html?id=${group.id}`;
+
+ const h5 = exerciseAnchor.querySelector("h5");
+ h5.textContent = group.name;
+
+ const p = exerciseAnchor.querySelector("p");
+ p.textContent = group.description;
+
+ container.appendChild(exerciseAnchor);
+ });
+ }
+
+ return response;
+}
+
+function createGroup() {
+ window.location.replace("group.html");
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+ let createButton = document.querySelector("#btn-create-group");
+ createButton.addEventListener("click", createGroup);
+
+ let response = await fetchGroups();
+
+ if (!response.ok) {
+ let data = await response.json();
+ let alert = createAlert("Could not retrieve groups!", data);
+ document.body.prepend(alert);
+ }
+});