From 767478d2eba62c286796a67c5c53d7a63844b406 Mon Sep 17 00:00:00 2001
From: Gabriel Nyman <gabny226@student.liu.se>
Date: Wed, 6 Dec 2023 14:42:26 +0100
Subject: [PATCH] fixed eventlisteners for cards on profile page as well
---
client/homePage.ts | 47 ++++++++++++++++++++++++++++++----
client/profilePage.ts | 59 +++++++++++++++++++++++++++++++++++++------
2 files changed, 93 insertions(+), 13 deletions(-)
diff --git a/client/homePage.ts b/client/homePage.ts
index 6c622a1..7a1a756 100644
--- a/client/homePage.ts
+++ b/client/homePage.ts
@@ -7,6 +7,7 @@ import {
loadProjectPageA,
loadProjectPageG,
loadProjectPageS,
+ loadInitiatePage
} from "./SidebarAndHeader/pageHandler.js";
import {
getUsers,
@@ -106,22 +107,53 @@ class IdeaCard {
this.id
}" class= "expandedIdeaContent" style ="display : none;">
<div class="expandedDescriptionText">
- <p class="ideaCardFont" id="expandedHeader">Om ideen</p>
- <p id="expandedDescription">${this.description}</p>
+ <p class="ideaCardFontComments" id="expandedHeader">Om ideen</p>
+ <p class="ideaCardFont" id="expandedDescription">${
+ this.description
+ }</p>
</div>
<div class="expandedCommentAndButton id = "expandedCommentAndButton${
this.id
}">
<div class="expandedComment">
- <p class="ideaCardFont">Kommentarer</p>
- <p class="ideaCardFont">Komment 1</p>
- <p class="ideaCardFont">K0mment 2</p>
+ <button class="ideaCardFontComments" id="commentsProjectCard">Kommentarer</button>
</div>
+
<div class="expandedButton">
<button class="initiateProjectButton" id="initiateProjectFromCard${
this.suggestionID
}">Initiera Förbättringsförslag</button>
</div>
+
+ <!-- commentsModal.html -->
+ <div id="commentsModal" class="modal">
+ <div class="modal-content">
+ <span class="close" id="closeModal">×</span>
+ <div id="existingComments">
+ <!-- Display existing comments here -->
+ <div class="comment-container">
+ <div class="comment">
+ <div class="comment-author">John Doe</div>
+ <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+
+ <div class="comment">
+ <div class="comment-author">Jane Smith</div>
+ <div class="comment-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+ </div>
+
+ <div class="comment">
+ <div class="comment-author">Erik Svensson</div>
+ <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </div>
+ <form id="addCommentForm">
+ <input type="text" id="commentInput" name="commentInput">
+ <button type="button" id="addCommentBtn">Publicera</button>
+ </form>
+ </div>
+ </div>
</div>
</div>
</div>`;
@@ -210,6 +242,11 @@ function addListner(cardArray: { [key: number]: IdeaCard }, element: Element) {
}
}
}
+
+ if (target && target.className === "initiateProjectButton") {
+ const cardId = target.id.replace("initiateProjectFromCard", "");
+ loadInitiatePage(cardId);
+ }
});
}
async function createNewIdeaCard(
diff --git a/client/profilePage.ts b/client/profilePage.ts
index 6706058..be9c4d5 100644
--- a/client/profilePage.ts
+++ b/client/profilePage.ts
@@ -8,6 +8,7 @@ import {
loadProjectPageA,
loadProjectPageG,
loadProjectPageS,
+ loadInitiatePage
} from "./SidebarAndHeader/pageHandler.js";
import { projectCard, addEventListener } from "./currentProjects/currentProjects.js";
@@ -106,20 +107,57 @@ class IdeaCard {
</div>
</div>
</div>
- <div id="expandedContent${this.id}" class= "expandedIdeaContent" style ="display : none;">
+ <div id="expandedContent${
+ this.id
+ }" class= "expandedIdeaContent" style ="display : none;">
<div class="expandedDescriptionText">
- <p class="ideaCardFont" id="expandedHeader">Om ideen</p>
- <p id="expandedDescription">${this.description}</p>
+ <p class="ideaCardFontComments" id="expandedHeader">Om ideen</p>
+ <p class="ideaCardFont" id="expandedDescription">${
+ this.description
+ }</p>
</div>
- <div class="expandedCommentAndButton id = "expandedCommentAndButton${this.id}">
+ <div class="expandedCommentAndButton id = "expandedCommentAndButton${
+ this.id
+ }">
<div class="expandedComment">
- <p class="ideaCardFont">Kommentarer</p>
- <p class="ideaCardFont">Komment 1</p>
- <p class="ideaCardFont">K0mment 2</p>
+ <button class="ideaCardFontComments" id="commentsProjectCard">Kommentarer</button>
</div>
+
<div class="expandedButton">
- <button class="initiateProjectButton" id="initiateProjectFromCard${this.suggestionID}">Initiera Projekt</button>
+ <button class="initiateProjectButton" id="initiateProjectFromCard${
+ this.suggestionID
+ }">Initiera Förbättringsförslag</button>
</div>
+
+ <!-- commentsModal.html -->
+ <div id="commentsModal" class="modal">
+ <div class="modal-content">
+ <span class="close" id="closeModal">×</span>
+ <div id="existingComments">
+ <!-- Display existing comments here -->
+ <div class="comment-container">
+ <div class="comment">
+ <div class="comment-author">John Doe</div>
+ <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+
+ <div class="comment">
+ <div class="comment-author">Jane Smith</div>
+ <div class="comment-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+ </div>
+
+ <div class="comment">
+ <div class="comment-author">Erik Svensson</div>
+ <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </div>
+ <form id="addCommentForm">
+ <input type="text" id="commentInput" name="commentInput">
+ <button type="button" id="addCommentBtn">Publicera</button>
+ </form>
+ </div>
+ </div>
</div>
</div>
</div>`;
@@ -296,6 +334,11 @@ async function createNewIdeaCard(
}
}
+
+ if (target && target.className === "initiateProjectButton") {
+ const cardId = target.id.replace("initiateProjectFromCard", "");
+ loadInitiatePage(cardId);
+ }
});
}
--
GitLab