-
Gabriel Nyman authoredGabriel Nyman authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
profilePage.ts 16.23 KiB
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./Database/database.js";
import { logout } from "./Database/authentication.js";
import { getUsers, getSuggestions, getImprovementWorks, getImprovementWorkResponsible, getUnits, getObjectById, getImprovementWorksForUser } from "../client/Database/database.js";
import { formatDate } from "./projectPage/projectPage.js";
import {
loadProjectPageP,
loadProjectPageA,
loadProjectPageG,
loadProjectPageS,
loadInitiatePage
} from "./SidebarAndHeader/pageHandler.js";
import { projectCard, addEventListener } from "./currentProjects/currentProjects.js";
import {
getProjects
} from "./homePage.js"
function logoutUser(event : Event) {
event.preventDefault();
alert('logout')
logout()
}
/* onAuthStateChanged(auth, (user) => {
const userNameLink = document.getElementById('userNameLink') as HTMLAnchorElement;
const logOutLink = document.getElementById('logOutLink');
if ( userNameLink && logOutLink){
if ( user ) {
var x = user;
// User is logged in, 'user' contains user information
console.log("User is logged in:", user.uid, user.email, user);
console.log(user.uid)
$("#user-name").text("Nytt namn");
userNameLink.textContent = user.email;
userNameLink.href = 'homePage.html';
logOutLink.style.display = 'inline'; // Show Logga ut
logOutLink.addEventListener('click', logoutUser);
} else {
// No user is logged in
}
}
});
*/
interface Project {
ID: string;
name: string;
current_stage: string;
content: string;
unit_ID: string;
date_started: Date;
}
let myIdeaCards: { [key: number]: IdeaCard } = {};
class IdeaCard {
private header: string;
private department: string;
private name: string;
private description: string;
private upvoteCount: number;
private id: number;
private suggestionID: string;
constructor(
id: number, header: string,
department: string,
name: string,
description: string,
upvoteCount: number,
suggestionID: string
) {
this.header = header;
this.department = department;
this.name = name;
this.description = description;
this.upvoteCount = upvoteCount;
this.id = id;
this.suggestionID = suggestionID;
}
generateHTML(): string {
return `<div class="totalExpandedIdeaCard">
<div class="ideaCard">
<div class="ideaCardBorder">
<div class="ideaCardImageHP">
<img src="../images/pinkFaded.png" class ="pinkFadedHP" alt="pinkFaded">
</div>
<div class="ideaCardMiddleText">
<p id="ideaCardHeader" class="ideaCardFont">${this.header}</p>
<p id="ideaCardDepartment" class="ideaCardFont">${this.department}</p>
<p id="ideaCardName" class="ideaCardFont">${this.name}</p>
<p id="ideaCardMoreInfo${this.id}" class="ideaCardFont moreInfoClass"> > Mer information</p>
</div>
</div>
<div class="ideaCardUpvotesHP">
<div class="upvoteDivHP">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-caret-up upvoteSymbol" viewBox="0 0 16 16">
<path d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z"/>
</svg> <div id ="upvoteNumber" class="ideaCardFont">${this.upvoteCount}</div>
</div>
</div>
</div>
<div id="expandedContent${
this.id
}" class= "expandedIdeaContent" style ="display : none;">
<div class="expandedDescriptionText">
<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">
<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>`;
}
showMoreInfo(blockId: string, thisTextId: string): void {
const blockElement = document.getElementById(blockId);
if (blockElement) {
blockElement.style.display = "flex";
}
const textElement = document.getElementById(thisTextId);
if (textElement) {
textElement.innerText = "^ Stäng detaljer";
}
}
closeMoreInfo(blockId: string, thisTextId: string): void {
const blockElement = document.getElementById(blockId) as HTMLSelectElement;
if (blockElement) {
blockElement.style.display = "none";
}
const textElement = document.getElementById(thisTextId);
if (textElement) {
textElement.innerText = "> Mer information";
}
}
loadInitiatePage() {
alert("The initiate project page should now be loaded");
}
}
async function createNewCards(className: string, container: Element, signedInUserHsaID: string) {
let user = await getObjectById("users",signedInUserHsaID);
let userSuggestions = await getSuggestions({creatorHsaId: user.id})
//If there exist filter use those instead to get matching suggestions rest should not need to be changed
var counter = 0;
userSuggestions.forEach(async (suggestion) => {
var unit = await getObjectById("unit", suggestion.unitId);
var user = await getObjectById("users", suggestion.creatorHsaId);
createNewIdeaCard(
suggestion.name,
unit.name,
user.firstName + " " + user.lastName,
suggestion.content,
suggestion.upvotes.length,
className,
container, counter,
suggestion.id
);
counter = counter + 1;
});
}
async function createNewIdeaCard(
header: string,
department: string,
name: string,
description: string,
upvoteCount: number,
className: string,
container: Element,
ID: number,
suggestionID: string
) {
let card = new IdeaCard(
ID,
header,
department,
name,
description,
upvoteCount,
suggestionID
);
let cardHTML = card.generateHTML();
myIdeaCards[ID] = card;
let div = document.createElement("div");
div.className = className; // Set the class name(s) here
div.innerHTML = cardHTML;
container.appendChild(div);
}
export async function loadPage(listenersLoaded: boolean) {
const container = document.querySelector('#container-fluid');
if (!container) return; // Stop if the container isn't found
fetch('profilePage.html')
.then(response => response.text())
.then(async data => {
// Create a temporary container element to hold the loaded content
const tempContainer = document.createElement('div');
tempContainer.innerHTML = data;
// Select the specific element with the class you want
const specificElement = tempContainer.querySelector('.main-content');
if (specificElement) {
// Insert the specific element into the target element
container.insertBefore(specificElement, container.firstChild);
}
var tmp = localStorage.getItem('user')
console.log(tmp)
if (!tmp){
console.log("there is not an user in localStorage")
return;
}
var user = JSON.parse(tmp)[0];
const suggestionContainer = document.getElementById("suggestion-container");
if(suggestionContainer) {
await createNewCards("HomePageIdeaCardDiv",suggestionContainer, user.id);
}
addListner(myIdeaCards, container);
console.log(user.firstName + "user.firstname")
const nameHeaderElement = document.getElementById('user-name-header') const nameElement = document.getElementById('user-name');
const emailElement = document.getElementById('user-email');
const roleElement = document.getElementById('user-role');
const unitElement = document.getElementById("user-unit");
let userFullName = user.firstName + " " + user.lastName;
let userUnits = await getUnits({unitId: user.unitId});
let userUnit = userUnits[0];
if (emailElement && roleElement && nameElement && unitElement && nameHeaderElement) {
nameHeaderElement.textContent = userFullName
nameElement.textContent = userFullName;
unitElement.textContent = userUnit.name;
emailElement.textContent = user.email;
roleElement.textContent = user.role;
}
const projectContainer = document.getElementById("project-container");
if(projectContainer) {
getProjects(projectContainer, listenersLoaded, user.id);
}
})
.catch(error => {
console.error('Failed to load the external HTML file:', error);
});
}
function addListner(cardArray: { [key: number]: IdeaCard }, element: Element) {
element.addEventListener("click", function (event) {
const target = event.target as HTMLElement;
//Adds an eventlistener for the more info of the card
if (target && target.className === "ideaCardFont moreInfoClass") {
const cardId = parseInt(target.id.replace("ideaCardMoreInfo", ""), 10);
if (cardArray[cardId]) {
const card = cardArray[cardId];
const expandedDiv = document.getElementById(`expandedContent${cardId}`);
console.log(expandedDiv);
if (expandedDiv) {
if (expandedDiv.style.display === "none") {
card.showMoreInfo(
`expandedContent${cardId}`,
`ideaCardMoreInfo${cardId}`
);
} else {
card.closeMoreInfo(
`expandedContent${cardId}`,
`ideaCardMoreInfo${cardId}`
);
}
} else {
console.error("Expanded div not found");
}
}
}
if (target && target.className === "initiateProjectButton") {
const cardId = target.id.replace("initiateProjectFromCard", "");
loadInitiatePage(cardId);
}
});
}
let projectCards: projectCard[] = [];
// async function getProjects(
// selectElement: Element,
// listenersLoaded: boolean,
// improvementWorks: any[] // ) {
// let id = 0;
// projectCards = [];
// improvementWorks.forEach(async (improvementWork) => {
// let title = improvementWork.name;
// let department = await getObjectById("unit", improvementWork.unitId);
// let projectLeader = await getImprovementWorkResponsible(improvementWork.id);
// if (department) {
// let card = new projectCard(
// id,
// projectLeader.firstName + " " + projectLeader.lastName,
// department.name,
// title,
// improvementWork.content,
// improvementWork.id,
// improvementWork.currentStage,
// improvementWork.dateStarted,
// improvementWork.endDate,
// improvementWork.completed,
// );
// projectCards.push(card);
// let cardHTML = card.generateHTML();
// let div = document.createElement("div");
// div.className = "projectCardCardDiv"; // Set the class name(s) here
// div.innerHTML = cardHTML;
// if (!selectElement) return;
// selectElement.appendChild(div); // Stop if the container isn't found
// addEventListener(improvementWork.id, card);
// // Display end date for completed projects
// if (improvementWork.completed) {
// const datesDiv = document.getElementById(
// "ongoingCardDatesCurrentProjects" + improvementWork.id
// );
// if (datesDiv) {
// datesDiv.innerText +=
// " till " + formatDate(improvementWork.endDate);
// }
// }
// // Display "Avslutat" for completed projects
// const stageDiv = document.getElementById(
// "currentStageLetter" + improvementWork.id
// );
// if (stageDiv) {
// if (improvementWork.completed) {
// stageDiv.innerText = "Avslutat";
// stageDiv.style.fontSize = "25px";
// stageDiv.style.marginLeft = "5px";
// stageDiv.style.marginTop = "30px";
// } else if (improvementWork.currentStage == "Plan") {
// console.log("hej");
// stageDiv.innerHTML = "P";
// } else if (improvementWork.currentStage == "Do") {
// stageDiv.innerHTML = "D";
// } else if (improvementWork.currentStage == "Study") {
// stageDiv.innerText = "S";
// } else if (improvementWork.currentStage == "Act") {
// stageDiv.innerText = "A";
// }
// }
// id++;
// } else {
// console.log(improvementWork.unitId + " is not a unit"); //Unit Ids on improvement work that do not exist
// }
// });
// }
//<p id="ongoingSeeDetailsButton${this.projectId}" class = "moreInfoClass">> Mer information</p>