diff --git a/backend/secfit/groups/models.py b/backend/secfit/groups/models.py
index 78619f83d0c06156faba74d68807daeb3b3ee3e2..fa07bf25a66cb5e380359060772434e56ed6a0e4 100644
--- a/backend/secfit/groups/models.py
+++ b/backend/secfit/groups/models.py
@@ -49,6 +49,6 @@ class Content(models.Model):
group = models.ForeignKey(
Group, on_delete=models.CASCADE, related_name="ownedByGroup"
)
- title = models.TextField(max_length=100, unique=True, primary_key=True)
+ title = models.TextField(max_length=100, unique=True)
description = models.TextField()
image = models.ImageField(upload_to='media', blank=True)
\ No newline at end of file
diff --git a/frontend/www/group.html b/frontend/www/group.html
index 78cce992de1e1a088a38a72d86e5ecf84918d9b2..6c8d54c5f0b6ec6dddb8aa3a099a7d7161852116 100644
--- a/frontend/www/group.html
+++ b/frontend/www/group.html
@@ -39,54 +39,58 @@
</div>
</form>
- <form class="row g-3" id="form-content">
- <div id="div-content" class="col-lg-12">
- </form>
+ <form class="row g-3" id="form-invite">
+ <div class="col-lg-6 ">
+ <label for="inputId" class="form-label">Invite (User Id)</label>
+ <input type="text" class="form-control" id="inputId" name="userId">
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <input type="button" class="btn btn-primary" id="btn-invite-group" value=" Invite ">
+ </div>
+ </form>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-12">
+ <h3 class="mt-3 hide" id="content-title">Content</h3>
+ </div>
<form class="row g-3 hide" id="form-addcontent">
<div class="row div-content-container g-3 mb-3">
- <div class="col-lg-6"><h5 id="post-headline"></h5></div>
+ <div class="col-lg-6"><h5>Add new content, by filling out the fields below:</h5></div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
- <label class="form-label content-title">Title</label>
+ <label class="form-label content-title">Title (required, must be unique)</label>
<input type="text" name="content-title">
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
- <label class="form-label content-description">Description</label>
+ <label class="form-label content-description">Description (required)</label>
<input type="text" class="form-control" name="content-description">
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="col-lg-6">
+ <label class="form-label content-image">Add image file here (only image filetypes accepted)</label>
<input type="file" class="form-control" id="customFile" name="files">
+
</div>
</div>
<div class="col-lg-6"></div>
</div>
</form>
- <form class="row g-3" id="form-invite">
- <div class="col-lg-6 ">
- <label for="inputId" class="form-label">Invite (User Id)</label>
- <input type="text" class="form-control" id="inputId" name="userId">
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <input type="button" class="btn btn-primary" id="btn-invite-group" value=" Invite ">
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-12">
- <h3 class="mt-3">Content</h3>
- </div>
- </div>
- <div class="col-lg-6">
- <input type="button" class="btn btn-primary h" id="btn-add-content" value="Add content">
+ <form class="row g-3" id="form-contentbuttons">
+ <div class="col-lg-6">
+ <input type="button" class="btn btn-primary hide" id="btn-add-content" value="Add content">
<input type="button" class="btn btn-primary hide" id="btn-ok-content" value=" OK ">
<input type="button" class="btn btn-secondary hide" id="btn-cancel-content" value="Cancel">
</div>
+ </form>
<div class="col-lg-6">
</div>
- </form>
+ <form class="row g-3" id="form-content">
+ <div id="div-content" class="col-lg-12">
+ </form>
+ </div>
</div>
<template id="template-content">
@@ -105,7 +109,7 @@
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="col-lg-6">
- <input type="file" class="form-control" id="customFile" name="files" readonly>
+ <img src="" alt="Content image" id="contentImage" style="max-width: 100%; height: auto">
</div>
</div>
<div class="col-lg-6"></div>
diff --git a/frontend/www/scripts/group.js b/frontend/www/scripts/group.js
index 32e4e80302ae3f5100e6540040789742ba4258bc..d4038dc04111910a75e02aefc971b8c651141518 100644
--- a/frontend/www/scripts/group.js
+++ b/frontend/www/scripts/group.js
@@ -68,7 +68,7 @@ function handleAddContentButtonClick() {
cancelButton.className = cancelButton.className.replace(" hide", "");
cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
- addContentButton.className = addContentButton.className.replace(" h", " hide");
+ addContentButton.className += " hide";
createBlankContent();
}
@@ -110,7 +110,6 @@ async function retrieveGroup(id) {
} else {
let contentData = await res.json();
let contentList = contentData.results;
- console.log(contentList);
for (let i = 0; i < contentList.length; i++) {
console.log(contentList[i]);
let templateContent = document.querySelector("#template-content");
@@ -124,8 +123,6 @@ async function retrieveGroup(id) {
} else {
let userData = await respo.json();
userName =userData.username;
- console.log(userData);
- console.log(userData.username);
}
let headline = divContentContainer.querySelector('#post-headline')
@@ -139,6 +136,9 @@ async function retrieveGroup(id) {
groupTitleInput.value = contentList[i].title;
groupTitleInput.readOnly = true;
+ let image = divContentContainer.querySelector("#contentImage")
+ image.src=contentList[i].image;
+
let contentDescriptionLabel = divContentContainer.querySelector('.content-description');
contentDescriptionLabel.for = `inputDescription${i}`;
@@ -171,6 +171,7 @@ function generateGroupForm() {
*/
async function updateGroup(id) {
let submitForm = generateGroupForm();
+ console.log(submitForm);
let response = await sendRequest("PUT", `${HOST}/api/groups/${id}/`, submitForm, "");
if (!response.ok) {
@@ -179,6 +180,7 @@ async function updateGroup(id) {
document.body.prepend(alert);
} else {
location.reload();
+
/**
setReadOnly(true, "#form-group");
okButton.className += " hide";
@@ -199,34 +201,38 @@ async function updateGroup(id) {
* @param {*} id of the group that is getting the new member
*/
-async function addContent(id){
+async function addContent(id) {
let user = null;
let res = await sendRequest("GET", `${HOST}/api/users/?user=current`)
- if (!res.ok) {
- console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
- } else {
- let data = await res.json();
- user = data.results[0];
- let form = document.querySelector("#form-addcontent");
- let formData = new FormData(form);
- let groupContentTitles = formData.get("content-title");
- let groupContentDescriptions = formData.get("content-description");
- let files = formData.get("files")
- let subForm = new FormData();
- subForm.append("creator", user.id);
- subForm.append("group", id);
- subForm.append("title", groupContentTitles);
- subForm.append("description", groupContentDescriptions);
- /**if (files != null) {
- subForm.append("image", files)
- }*/
+ if (!res.ok) {
+ console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
+ } else {
+ let data = await res.json();
+ user = data.results[0];
+ let form = document.querySelector("#form-addcontent");
+ let formData = new FormData(form);
+ let groupContentTitle = formData.get("content-title");
+ let groupContentDescription = formData.get("content-description");
+ let file = formData.get("files");
+ let subForm = new FormData();
+ subForm.append("creator", user.id);
+ subForm.append("group", id);
+ subForm.append("title", groupContentTitle);
+ subForm.append("description", groupContentDescription);
+ console.log(file);
+ if (file != null) {
+ subForm.append("image", file);
+
let respo = await sendRequest("POST", `${HOST}/api/content/`, subForm, "");
if (!respo.ok) {
let data = await respo.json();
- let alert = createAlert(`Could not update group ${id}`, data);
+ let alert = createAlert(`Could not update content`, data);
document.body.prepend(alert);
+ } else {
+ location.reload();
}
}
+ }
}
async function inviteMember(id) {
@@ -251,6 +257,7 @@ async function inviteMember(id) {
async function createBlankContent() {
let form = document.querySelector("#form-addcontent");
+ form.reset();
form.className = form.className.replace(" hide", "");
}
@@ -270,6 +277,7 @@ window.addEventListener("DOMContentLoaded", async () => {
let buttonAddContent = document.querySelector("#btn-add-content");
let buttonOkContent = document.querySelector("#btn-ok-content");
buttonAddContent.addEventListener("click", handleAddContentButtonClick);
+ let contentTitle = document.getElementById("content-title");
const urlParams = new URLSearchParams(window.location.search);
@@ -277,12 +285,12 @@ window.addEventListener("DOMContentLoaded", async () => {
if (urlParams.has('id')) {
const groupId = urlParams.get('id');
await retrieveGroup(groupId);
-
+ buttonAddContent.className = buttonOkContent.className.replace(" hide", "");
editButton.addEventListener("click", handleEditGroupButtonClick);
okButton.addEventListener("click", (async (id) => await updateGroup(id)).bind(undefined, groupId));
buttonOkContent.addEventListener("click", (async (id) => await addContent(id)).bind(undefined, groupId));
inviteButton.addEventListener("click", (async (id) => await inviteMember(id)).bind(undefined, groupId));
-
+ contentTitle.className = contentTitle.className.replace(" hide", "");
}
//create
else {