diff --git a/client/KnowledgeBank/Nolans.css b/client/KnowledgeBank/Nolans.css
index c0b287f51f233ffe16d7814c874f9ec39342cee5..deab731c673f4d5cb0a5db79d887ea0457b999ad 100644
--- a/client/KnowledgeBank/Nolans.css
+++ b/client/KnowledgeBank/Nolans.css
@@ -57,6 +57,15 @@ font-size:15px;
padding-top: 5%;
}
+.projectPageNolandsModel {
+ width: 50%;
+ display: flex;
+ flex-direction: column; /* Stack children (e.g. the buttons) vertically*/
+ /* justify-content: center; */ /* Horizontal centering. align-items istead would be vertical centering. */
+ align-items: center;
+ /* padding-top: 5%; */
+ position: relative;
+}
.NolansButtons {
width: 50%;
@@ -96,7 +105,7 @@ font-size:15px;
/*Styling for the PGSA-circle */
.wrap {
- height: 350px;
+ height: 350px; /* varför 350?? */
width: 300px;
border-radius: 50%;
position: relative;
@@ -104,6 +113,11 @@ font-size:15px;
border: 2px solid #000; /* Add a 2px solid black border */
}
+.projectPageWrap{
+ height: 300px; /* ful lösning, men behövdes för att bägge sidor skulle bli snygga */
+
+}
+
.quart {
position: absolute;
height: 50%;
@@ -119,29 +133,27 @@ font-size:15px;
.quart:first-child {
top: 0;
- left: 0;
- background-color: #884582;
-
+ left: 50%;
+ background-color: #ffaaf8;
+
}
.quart:nth-child(2) {
- top: 0;
+ top: 50%;
left: 50%;
- background-color: #ffaaf8;
-
+ background-color: #ef7de6;
}
.quart:nth-child(3) {
top: 50%;
left: 0;
background-color: #bc60b4;
-
}
.quart:nth-child(4) {
- top: 50%;
- left: 50%;
- background-color: #ef7de6;
+ top: 0;
+ left: 0;
+ background-color: #884582;
}
.center {
diff --git a/client/KnowledgeBank/Nolans.html b/client/KnowledgeBank/Nolans.html
index 12d4193d2091132eeaeea42113ecabfc4398938f..878542bc4ea9b93fbe9ec71815eff4e39042ec19 100644
--- a/client/KnowledgeBank/Nolans.html
+++ b/client/KnowledgeBank/Nolans.html
@@ -110,10 +110,10 @@
<div class="arrow"></div>
<div class="wrap">
- <div id="nolans7" class="quart" onclick="redirectToPage('Nolans7.html')">Agera</div>
<div id="nolans4" class="quart" onclick="redirectToPage('Nolans4.html')">Planera</div>
- <div id="nolans6" class="quart" onclick="redirectToPage('Nolans6.html')">Studera</div>
<div id="nolans5" class="quart" onclick="redirectToPage('Nolans5.html')">Göra</div>
+ <div id="nolans6" class="quart" onclick="redirectToPage('Nolans6.html')">Studera</div>
+ <div id="nolans7" class="quart" onclick="redirectToPage('Nolans7.html')">Agera</div>
<div class="center">P G S A</div>
</div>
</div>
diff --git a/client/KnowledgeBank/completedProjects.ts b/client/KnowledgeBank/completedProjects.ts
index ca57fb5dd1cc7c439159160b5e6b3f5096bc182c..602b4250474def082b41b025bdd9bfb338762bc9 100644
--- a/client/KnowledgeBank/completedProjects.ts
+++ b/client/KnowledgeBank/completedProjects.ts
@@ -21,7 +21,148 @@ import {
import { formatDate } from "../projectPage/projectPage.js";
-import { projectCard } from "../currentProjects/currentProjects.js"
+//import { projectCard } from "../currentProjects/currentProjects.js"
+
+export 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;
+ public endDate: any;
+ public completed: boolean;
+
+ constructor(
+ id: number,
+ name: string,
+ department: string,
+ title: string,
+ description: string,
+ projectId: string,
+ currentStage: string,
+ dateStarted: any,
+ endDate: any,
+ completed: boolean
+ ) {
+ this.name = name;
+ this.department = department;
+ this.title = title;
+ this.description = description;
+ this.id = id;
+ this.projectId = projectId;
+ this.stage = currentStage;
+ this.dateStarted = dateStarted;
+ this.endDate = endDate;
+ this.completed = completed;
+ }
+
+ 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 {
+ // 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";
+ }
+
+ return `
+ <div class="totalExpandedOngoingWorkCard">
+ <div style="cursor: default;" class="flex-container ongoingCard shadow" id="${
+ this.projectId
+ }">
+ <div class="ongoingCardImageContainer toSinglePage">
+ <div id="borderPinkFaded">
+ <div class = "flex-box ongoingCardImage toSinglePage">
+ <div id="currentStageLetter${this.projectId}" style=
+ "font-size: ${stageFontSize};
+ margin-left: ${stageMarginLeft};
+ margin-top: ${stageMarginTop};
+ font-weight:
+ bolder;
+ color: #845380;
+ position: inherit;
+ ">${stageSymbol}</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="ongoingCardDatesCurrentProjects${this.projectId}" style="font-size: 13px; font-style: italic; margin-top: 5px;">${projectDates} </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">
+ <div id="completed-page-ongoingSeeDetailsButton${
+ this.projectId
+ }" class = "moreInfoClass">> Mer information</div>
+ </div>
+ </div>
+ </div>
+ <div class = "expandedOngoingWorkCard" id="expandedOngoingWorkCard${
+ this.projectId
+ }" style="display: none;">
+ <div class ="expandedTextOngoingWorkCard">
+ ${this.description}
+ </div>
+ </div>
+ </div> `;
+ }
+}
let projectCards: projectCard[] = [];
let filteredImprovementWorks: any[] = [];
@@ -309,11 +450,11 @@ function sortProjects(
// Loop through the saved array of cards and generate HTML for each card
for (const card of cardsToIterate) {
let cardHTML = card.generateHTML();
- addEventListener(listenersLoaded, card.projectId, card);
let div = document.createElement("div");
div.className = "projectCardCardDiv"; // Set the class name(s) here
div.innerHTML = cardHTML;
if (!selectElement) return;
+ addEventListener(listenersLoaded, card.projectId, card);
selectElement.appendChild(div); // Stop if the container isn't found
}
}
diff --git a/client/projectPage/projectPageA.html b/client/projectPage/projectPageA.html
index 139715d523397ce0c9b7bddf8796d7a42fcbb754..2dca59f3cc2821b5c3da8013d5883b8450480451 100644
--- a/client/projectPage/projectPageA.html
+++ b/client/projectPage/projectPageA.html
@@ -92,12 +92,13 @@
</div>
<div id="NolansModel" style="margin:3%; width: 30%;">
- <div class="wrap">
- <div class="quart" id="nolansToP" data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen" >1. Planera </div>
- <div class="quart" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">2. Göra</div>
- <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">4. Agera</div>
- <div class="quart" id="nolansToS"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">3. Studera</div>
- <div class="center">PGSA</div>
+ <div class="wrap projectPageWrap">
+ <div class="quart" id="nolansToP" data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen" >Planera </div>
+ <div class="quart" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Göra</div>
+ <div class="quart" id="nolansToS"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Studera</div>
+ <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Agera</div>
+
+ <div class="center">P G S A</div>
</div>
<article class="infoText">
<h1>Sista steget</h1>
diff --git a/client/projectPage/projectPageG.html b/client/projectPage/projectPageG.html
index efd64ceb9415a42a7e41f5c38ef28ed19c2f0f04..87438c60d9e05e9e67256beea1e005d9cf9e2a88 100644
--- a/client/projectPage/projectPageG.html
+++ b/client/projectPage/projectPageG.html
@@ -98,11 +98,11 @@
</div>
</div>
- <div id="NolansModel" style="margin:3%; width: 30%;">
- <div class="wrap">
- <div class="quart" id="nolansToP"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">1. Planera</div>
- <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">2. Göra</div>
- <div class="center">PGSA</div>
+ <div class="projectPageNolandsModel" style="margin:3%; width: 30%;">
+ <div class="wrap projectPageWrap">
+ <div class="quart" id="nolansToP"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Planera</div>
+ <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Göra</div>
+ <div class="center">P G S A</div>
</div>
<article class="infoText">
<h1>Nästa steg</h1>
diff --git a/client/projectPage/projectPageP.html b/client/projectPage/projectPageP.html
index ca3dad90d10d210166ae6de29bdb9ab9bcb9b032..a39b830ed4037322fd5c90e5ef76ea82c4e87a4e 100644
--- a/client/projectPage/projectPageP.html
+++ b/client/projectPage/projectPageP.html
@@ -101,16 +101,16 @@
<img src="../images/info.png" style="height: 3vh; margin-left: 3px;" data-toggle="tooltip" title="FÖRTYDLIGANDE INFO HÄR">
</div>
<textarea id="p7" class="textArea" name="answer6" rows="5" cols="50" placeholder="Svara på frågan här..." required></textarea>
- </form>
+ </form>
<div class="saveEditDiv">
<button id="saveEditBtnP" class="saveBtn">Spara</button>
</div>
</div>
- <div id="NolansModel" style="margin:3%; width: 30%;">
- <div class="wrap">
- <div class="quart" data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen" >1. Planera</div>
- <div class="center">PGSA</div>
+ <div class ="projectPageNolandsModel" style="margin:3%; width: 30%;">
+ <div class="wrap projectPageWrap"> <!-- double class because of different heights -->
+ <div class="quart" data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen" >Planera</div>
+ <div class="center">P G S A</div>
</div>
<article class="infoText">
<h1>Nästa steg</h1>
@@ -118,9 +118,7 @@
</article>
<button id="toG" data-project-id="${this.id}" class="btn btn-primary" role="button">Nästa steg</button>
-
-
- </div>
+ </div>
<div style="width: 25%;">
<div class="sideTitle">Dokument</div>
<div class="documentsContainer">
diff --git a/client/projectPage/projectPageS.html b/client/projectPage/projectPageS.html
index e7526ec9eb7faf23b2983f8f1769cc8567a9defc..52b3a144184ed50378c28fb22a967480032e89a0 100644
--- a/client/projectPage/projectPageS.html
+++ b/client/projectPage/projectPageS.html
@@ -85,12 +85,11 @@
</div>
<div id="NolansModel" style="margin:3%; width: 30%;">
- <div class="wrap">
- <div class="quart" id="nolansToP"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">1. Planera</div>
- <div class="quart" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">2. Göra</div>
- <div></div>
- <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">3. Studera</div>
- <div class="center">PGSA</div>
+ <div class="wrap projectPageWrap">
+ <div class="quart" id="nolansToP"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Planera</div>
+ <div class="quart" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Göra</div>
+ <div class="quart"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Studera</div>
+ <div class="center">P G S A</div>
</div>
<article class="infoText">
<h1>Nästa steg</h1>