Merge branch 'dev' into 'UX-buttons-project'

merged in dev

See merge request !231

client/KnowledgeBank/completedProjects.ts

@@ -21,133 +21,11 @@ import {
 
 import { formatDate } from "../projectPage/projectPage.js";
 
+import { projectCard } from "../currentProjects/currentProjects.js"
+
 let projectCards: projectCard[] = [];
 let filteredImprovementWorks: any[] = [];
 
-class projectCard {
-  public name: string; // Projectowner
-  public department: string;
-  public title: string;
-  public description: string;
-  public id: number;
-  public projectId: string;
-  public stage: any;
-  public dateStarted: any;
-
-  constructor(
-    id: number,
-    name: string,
-    department: string,
-    title: string,
-    description: string,
-    projectId: string,
-    currentStage: string,
-    dateStarted: any
-  ) {
-    this.name = name;
-    this.department = department;
-    this.title = title;
-    this.description = description;
-    this.id = id;
-    this.projectId = projectId;
-    this.stage = currentStage;
-    this.dateStarted = dateStarted;
-  }
-
-  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");
-  }
-
-  generateHTML(): string {
-    const stageImages = {
-      Act: "../images/Hemsida_PGSA_A.png",
-      Study: "../images/Hemsida_PGSA_S.png",
-      Do: "../images/Hemsida_PGSA_G.png",
-      Plan: "../images/Hemsida_PGSA_P.png",
-      Finished: "path/to/finished-image.jpg",
-    };
-
-    let stageKey = this.stage;
-
-    // Check if the stage is directly a key in stageImages
-    if (!stageImages[stageKey as keyof typeof stageImages]) {
-      // If not, try to map the Swedish stage to English using nolanStageMapping
-      stageKey = nolanStageMapping[stageKey];
-    }
-
-    // Now get the imageUrl using the stageKey
-    const imageUrl = stageImages[stageKey as keyof typeof stageImages];
-
-    return `
-    <div class="totalExpandedOngoingWorkCard">
-      <div style="cursor: pointer;" class="flex-container ongoingCard" id="completed-page-${
-        this.projectId
-      }">
-        <div class="ongoingCardImageContainer toSinglePage">
-          <div id="borderPinkFaded">
-            <div class = "flex-box ongoingCardImage toSinglePage">
-              <div id="currentStageLetterCompletedProjects" style="font-size: 25px; font-weight: bolder;
-              color: #845380;
-              position: inherit; margin-left: 5px; margin-top: 30px;">Avslutat</div>
-            </div>
-          </div>
-        </div>
-        <div class="div ongoingCardInfo toSinglePage">
-          <p class="toSinglePage" id="ongoingCardIdeaTitle">${this.title}</p>
-          <p class="toSinglePage" id="ongoingCardDepartment">${
-            this.department
-          }</p>
-          <p class="toSinglePage" id="ongoingCardManager">${this.name}</p>
-          <p class="toSinglePage" id="ongoingCardDatesCompletedProjects${
-            this.projectId
-          }" style="font-size: 13px; font-style: italic; margin-top: 5px;">${formatDate(
-      this.dateStarted
-    )} </p>
-        </div>
-        <button id="completed-page-button-${this.projectId}" data-project-id="${
-      this.id
-    }" class="projectButton fs-6 text-white d-flex pb-2 pt-2" role="button" style="height: 10%; min-width: 15vw; white-space: nowrap; align-items: center; font-family:'Roboto', sans-serif;">Gå till Förbättringsarbetet</button>
-        <div class="container ongoingSeeCardDetails toSinglePage">
-          <div class="ongoingSeeCardDetailsInner">
-            <p id="completed-page-ongoingSeeDetailsButton${
-              this.projectId
-            }" class = "moreInfoClass">> Mer information</p>
-          </div>
-        </div>
-      </div> 
-      <div class = "expandedOngoingWorkCard" id="expandedOngoingWorkCard${
-        this.projectId
-      }" style="display: none;">
-        <div class ="expandedTextOngoingWorkCard">
-          ${this.description}
-        </div>
-      </div>
-    </div> `;
-  }
-}
 
 export async function loadPage(listenersLoaded: boolean) {
   const container = document.querySelector("#container-fluid");
@@ -464,7 +342,9 @@ async function getProjects(
         improvementWork.content,
         improvementWork.id,
         improvementWork.currentStage,
-        improvementWork.dateStarted
+        improvementWork.dateStarted,
+        improvementWork.endDate,
+        improvementWork.completed
       );
       projectCards.push(card);
       let cardHTML = card.generateHTML();

client/KnowledgeBank/knowledgeBank.css

@@ -29,6 +29,7 @@
   transition: ease .5s;
   user-select: none;
   overflow: hidden;
+  font-size: 23px;
 }
 
 .button-kunskapsbanken::before {

client/KnowledgeBank/knowledgeBank.html

@@ -42,12 +42,12 @@
                 <div class="bottom-buttons d-flex m-2 p-3 justify-content-evenly">
                     <button onclick="redirectToPage('completedProjects.html')" id="buttons-kunskapsbanken-button3" 
                     class="button-kunskapsbanken" role="button" 
-                    >Inspiration:<br>avslutade förbättringarbeten</button>
+                    >Inspiration:<br>Avslutade förbättringsarbeten</button>
     
                     <button onclick="redirectToPage('ContactOrganizations.html')"
                     id="buttons-kunskapsbanken-button4" 
                     class="button-kunskapsbanken" role="button" 
-                    >Konktakinformation<br>förbättringsorganisationer</button>
+                    >Kontaktinformation<br>förbättringsorganisationer</button>
                 </div>
             </div>
             

client/currentProjects/currentProjects.ts

@@ -24,7 +24,7 @@ import { formatDate } from "../projectPage/projectPage.js";
 let projectCards: projectCard[] = [];
 let filteredImprovementWorks: any[] = [];
 
-class projectCard {
+export class projectCard {
   public name: string; // Projectowner
   public department: string;
   public title: string;
@@ -33,6 +33,8 @@ class projectCard {
   public projectId: string;
   public stage: any;
   public dateStarted: any;
+  public endDate: any;
+  public completed: boolean;
 
   constructor(
     id: number,
@@ -42,7 +44,9 @@ class projectCard {
     description: string,
     projectId: string,
     currentStage: string,
-    dateStarted: any
+    dateStarted: any,
+    endDate: any,
+    completed: boolean
   ) {
     this.name = name;
     this.department = department;
@@ -52,6 +56,8 @@ class projectCard {
     this.projectId = projectId;
     this.stage = currentStage;
     this.dateStarted = dateStarted;
+    this.endDate = endDate;
+    this.completed = completed;
   }
 
   showMoreInfo(blockId: string, thisTextId: string): void {
@@ -82,25 +88,33 @@ class projectCard {
   }
 
   generateHTML(): string {
-    const stageImages = {
-      Act: "../images/Hemsida_PGSA_A.png",
-      Study: "../images/Hemsida_PGSA_S.png",
-      Do: "../images/Hemsida_PGSA_G.png",
-      Plan: "../images/Hemsida_PGSA_P.png",
-      Finished: "path/to/finished-image.jpg",
-    };
-
-    let stageKey = this.stage;
-
-    // Check if the stage is directly a key in stageImages
-    if (!stageImages[stageKey as keyof typeof stageImages]) {
-      // If not, try to map the Swedish stage to English using nolanStageMapping
-      stageKey = nolanStageMapping[stageKey];
+    // Set default styles for stageSymbol (P, D, S, A, Avslutat)
+    let stageSymbol = "";
+    let stageFontSize = "50px";
+    let stageMarginLeft = "35px";
+    let stageMarginTop = "10px";
+
+    // Set projectDates to dateStarted
+    let projectDates = formatDate(this.dateStarted);
+
+    if (this.completed) {
+      stageSymbol = "Avslutat";
+      stageFontSize = "25px";
+      stageMarginLeft = "5px";
+      stageMarginTop = "30px";
+
+      // Append endDate to projectDates
+      projectDates += " till " + formatDate(this.endDate);
+    } else if (this.stage == "Plan") {
+      stageSymbol = "P";
+    } else if (this.stage == "Do") {
+      stageSymbol = "D";
+    } else if (this.stage == "Study") {
+      stageSymbol = "S";
+    } else if (this.stage == "Act") {
+      stageSymbol = "A";
     }
 
-    // Now get the imageUrl using the stageKey
-    const imageUrl = stageImages[stageKey as keyof typeof stageImages];
-
     return `
     <div class="totalExpandedOngoingWorkCard">
       <div style="cursor: default;" class="flex-container ongoingCard shadow" id="${
@@ -109,11 +123,15 @@ class projectCard {
         <div class="ongoingCardImageContainer toSinglePage">
           <div id="borderPinkFaded">
             <div class = "flex-box ongoingCardImage toSinglePage">
-              <div id="currentStageLetter${
-                this.projectId
-              }" style="font-size: 50px; font-weight: bolder;
+              <div id="currentStageLetter${this.projectId}" style=
+              "font-size: ${stageFontSize}; 
+              margin-left: ${stageMarginLeft}; 
+              margin-top: ${stageMarginTop};
+              font-weight: 
+              bolder;
               color: #845380;
-              position: inherit; margin-left: 35px; margin-top: 10px;"></div>
+              position: inherit; 
+              ">${stageSymbol}</div>
             </div>
           </div>
         </div>
@@ -123,18 +141,11 @@ class projectCard {
           this.department
         }</p>
           <p class="toSinglePage" id="ongoingCardManager">${this.name}</p>
-          <p class="toSinglePage" id="ongoingCardDatesCurrentProjects${
-            this.projectId
-          }" style="font-size: 13px; font-style: italic; margin-top: 5px;">${formatDate(
-      this.dateStarted
-    )} </p>
+          <p class="toSinglePage" id="ongoingCardDatesCurrentProjects${this.projectId}" style="font-size: 13px; font-style: italic; margin-top: 5px;">${projectDates} </p>
         </div>
         <button id="project-button-${this.projectId}" data-project-id="${
       this.id
     }" class="projectButton fs-6 text-white d-flex pb-2 pt-2" role="button" style="height: 10%; min-width: 15vw; white-space: nowrap; align-items: center; font-family:'Roboto', sans-serif;">Gå till Förbättringsarbetet</button>
-        <!--<div>
-        <img class="statusImage" src="${imageUrl}" alt="Stage Image">
-      </div>-->
         <div class="container ongoingSeeCardDetails toSinglePage">
           <div class="ongoingSeeCardDetailsInner">
             <div id="ongoingSeeDetailsButton${
@@ -425,7 +436,7 @@ export async function loadPage(listenersLoaded: boolean) {
   loadWorkStatus();
 }
 
-async function loadNolanStages() {
+export async function loadNolanStages() {
   const selectStageHTML = $("#nolanStageSelection"); // loads the select type from html
   const allStages = ["Planera", "Göra", "Studera", "Agera"];
   allStages.forEach((stage) => {
@@ -445,7 +456,7 @@ async function loadNolanStages() {
   });
 }
 
-async function loadPatientRiskLevels() {
+export async function loadPatientRiskLevels() {
   const selectPatientRiskLevelHTML = $("#patientRiskLevelSelection"); // loads the select type from html
   const allRiskLevels = ["Grön", "Blå", "Gul", "Röd"];
   allRiskLevels.forEach((riskLevel) => {
@@ -485,7 +496,7 @@ async function loadWorkStatus() {
   });
 }
 
-function sortProjects(
+export function sortProjects(
   selectElement: Element,
   listenersLoaded: boolean,
   ascendingDates: boolean
@@ -507,7 +518,7 @@ function sortProjects(
   }
 }
 
-async function getProjects(
+export async function getProjects(
   selectElement: Element,
   listenersLoaded: boolean,
   improvementWorks: any[]
@@ -527,7 +538,9 @@ async function getProjects(
         improvementWork.content,
         improvementWork.id,
         improvementWork.currentStage,
-        improvementWork.dateStarted
+        improvementWork.dateStarted,
+        improvementWork.endDate,
+        improvementWork.completed,
       );
       projectCards.push(card);
       let cardHTML = card.generateHTML();
@@ -538,39 +551,6 @@ async function getProjects(
       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

client/homePage.html

@@ -61,7 +61,7 @@
             
                 <div class="monthly-finished-work">
                     <div class="rounded-container fs-5">
-                        <p>Månadens Förbättringsarbete</p>
+                        <p>Aktuella Förbättringsarbeten</p>
                         <div class="inner2-container">
                         </div>
                     </div>

client/ideaBank/ideaBank.ts

@@ -28,18 +28,15 @@ class IdeaCard {
     const user = JSON.parse(tmp)[0];
 
     try {
-      let suggestion = await getSuggestions({ id: this.suggestionID });
+      let suggestion = await await getObjectById("suggestion", this.suggestionID);
 
-
-      console.log(suggestion); // Check if each suggestion has the 'upvotes' array
-
-      // Check if suggestion and suggestion[0] are defined
-      if (!suggestion || suggestion.length === 0 || !suggestion[0]) {
+      // Check if suggestion and suggestion are defined
+      if (!suggestion || suggestion.length === 0) {
         console.error("Suggestion not found or is invalid");
         return false;
       }
 
-      if (suggestion[0].upvotes.includes(user.id)) {
+      if (suggestion.upvotes.includes(user.id)) {
         return true;
       }
     } catch (error) {
@@ -62,10 +59,10 @@ class IdeaCard {
       this.upvoteCount++;
     } else {
       this.upvoteCount--;
-
   }
     return upvoted;
   }
+  
   private header: string;
   private department: string;
   private name: string;
@@ -97,6 +94,7 @@ class IdeaCard {
   // <img src="images/upvoteIcon.png" class ="upvoteIcon" alt="upvoteIcon">
   async generateHTML() {
     const userHasUpvoted = await this.hasUserUpvoted();
+
     const upvoteColor = userHasUpvoted ? "purple" : "white";
     const strokeColor = userHasUpvoted ? "purple" : "grey";