Skip to content
Snippets Groups Projects
Commit 0acaaa83 authored by Simen's avatar Simen
Browse files

added frontend forms and lists for the group functionality.

parent abb31f69
No related branches found
No related tags found
1 merge request!1Fix/permissions
Hide whitespace changes
Inline Side-by-side
backend/secfit/groups/models.py
+ 0
− 1
View file @ 0acaaa83
......@@ -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.
......
backend/secfit/groups/serializers.py
+ 1
− 1
View file @ 0acaaa83
......@@ -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:
......
frontend/www/group.html 0 → 100644
+ 47
− 0
View file @ 0acaaa83
<!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
frontend/www/groups.html 0 → 100644
+ 47
− 0
View file @ 0acaaa83
<!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
frontend/www/scripts/group.js 0 → 100644
+ 39
− 0
View file @ 0acaaa83
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
frontend/www/scripts/groups.js 0 → 100644
+ 42
− 0
View file @ 0acaaa83
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);
}
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment