diff --git a/client/KnowledgeBank/completedProjects.ts b/client/KnowledgeBank/completedProjects.ts index 602b4250474def082b41b025bdd9bfb338762bc9..7a3a5eef9ef8159046938caa23852c659bdf1d51 100644 --- a/client/KnowledgeBank/completedProjects.ts +++ b/client/KnowledgeBank/completedProjects.ts @@ -107,7 +107,7 @@ export class projectCard { } else if (this.stage == "Plan") { stageSymbol = "P"; } else if (this.stage == "Do") { - stageSymbol = "D"; + stageSymbol = "G"; } else if (this.stage == "Study") { stageSymbol = "S"; } else if (this.stage == "Act") { diff --git a/client/SidebarAndHeader/pageHandler.ts b/client/SidebarAndHeader/pageHandler.ts index 91f0a9a0565acb8a80c15c1be41d758eff11b5f7..68b54f81de1c5f4fe2f311bbbd6afb681070e670 100644 --- a/client/SidebarAndHeader/pageHandler.ts +++ b/client/SidebarAndHeader/pageHandler.ts @@ -171,15 +171,15 @@ export function loadIdeaBank() { clearContent(); setTitle("Förbättringsförslag"); ideaBank.loadPage(); + + $(".initiateProjectButton").off('click').on('click', function (e) { + e.preventDefault(); + const target = e.target as HTMLElement; + const cardId = target.id.replace("initiateProjectFromCard", ""); + loadInitiatePage(cardId); +}); + - document.addEventListener("click", function (event) { - const target = event.target as HTMLElement; - //adds an event listener for the initiate page - if (target && target.className === "initiateProjectButton") { - const cardId = target.id.replace("initiateProjectFromCard", ""); - loadInitiatePage(cardId); - } - }); } function loadKnowledgeBank() { @@ -351,7 +351,7 @@ function loadMyProfile() { function loadMyProfilePage() { clearContent(); setTitle("Din Profil"); - profilePage.loadPage(); //fix containers + profilePage.loadPage(currentProjectsListenersAdded); //fix containers document.addEventListener("click", function (event) { const target = event.target as HTMLElement; //adds an event listener for the initiate page diff --git a/client/homePage.ts b/client/homePage.ts index 57dd466e660790c8a4e70fe7426825d5eef684f2..1c60dfe5c719e1747984e45d18327d9297a8f5c1 100644 --- a/client/homePage.ts +++ b/client/homePage.ts @@ -489,7 +489,7 @@ async function improvementWorkInfo(departmentContainer: any, user: any) { } } -async function getProjects( +export async function getProjects( selectElement: HTMLElement, listenersLoaded: boolean, userHsaId: string diff --git a/client/ideaBank/ideaCard.css b/client/ideaBank/ideaCard.css index 6ecbb7a29a8d10f82cd4751fb482c4794f572f91..d7b7e05e8d0151f232130badc0f1526b42d216f9 100644 --- a/client/ideaBank/ideaCard.css +++ b/client/ideaBank/ideaCard.css @@ -4,6 +4,7 @@ overflow: hidden; text-overflow: ellipsis; font-size: 13px; + color: black; } .ideaCardFontComments { font-family: "Roboto", sans-serif; diff --git a/client/initiateForbattringsarbete/initiateIdea.ts b/client/initiateForbattringsarbete/initiateIdea.ts index 0ed9e69688b1bb75d9edc3a4f81b8668f7bc3ee0..d02a51ad8abb3ed86db859afdf7970af70effcf2 100644 --- a/client/initiateForbattringsarbete/initiateIdea.ts +++ b/client/initiateForbattringsarbete/initiateIdea.ts @@ -5,10 +5,12 @@ import { loadCurrentProjects } from "../SidebarAndHeader/pageHandler.js"; let selectedEmployees: string[] = []; export async function loadEmployees() { + console.log("nu körs koden") const selectProjectLeaderHTML = $('#projectLeader'); // loads the select type from html const selectEmployeeHTML = $('#selectEmployee'); // loads the select type from html const allUsers = await getUsers({}); const allProjectLeaders = await getUsers({}); //here you can put constraints + allUsers.forEach(user => { const optionElement = $('<option>').addClass('ideaCardFont') @@ -29,6 +31,7 @@ export async function loadEmployees() { const selectUnitHTML = $('#selectDepartment'); // loads the select type from html const allHospitals = await getHospitals({}); const allUnits = await getUnits({}); //here you can put constraints + console.log(allHospitals) allHospitals.forEach(user => { const optionElement = $('<option>').addClass('ideaCardFont') .val(user.id) diff --git a/client/profilePage.ts b/client/profilePage.ts index 9aabacee1b3d1c023b2f5d1c231ec023af2395a2..d4d55da9393ef4f1177979e490c4416621e143cd 100644 --- a/client/profilePage.ts +++ b/client/profilePage.ts @@ -1,7 +1,19 @@ import { onAuthStateChanged } from "firebase/auth"; import { auth } from "./Database/database.js"; import { logout } from "./Database/authentication.js"; -import { getUsers, getSuggestions, getImprovementWorks, getUnits, getObjectById, getImprovementWorksForUser } from "../client/Database/database.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, +} from "./SidebarAndHeader/pageHandler.js"; +import { projectCard, addEventListener } from "./currentProjects/currentProjects.js"; + +import { + getProjects +} from "./homePage.js" function logoutUser(event : Event) { event.preventDefault(); @@ -192,7 +204,7 @@ async function createNewIdeaCard( container.appendChild(div); } - export async function loadPage() { + export async function loadPage(listenersLoaded: boolean) { const container = document.querySelector('#container-fluid'); @@ -247,7 +259,7 @@ async function createNewIdeaCard( } const projectContainer = document.getElementById("project-container"); if(projectContainer) { - await getProjects(projectContainer, user.id); + await getProjects(projectContainer, listenersLoaded, user.id); } }) @@ -287,112 +299,79 @@ async function createNewIdeaCard( }); } - - async function getProjects (selectElement : HTMLElement, /*listenersLoaded:boolean,*/ userHsaId: string) { - const data = await getImprovementWorksForUser(userHsaId); - let id = 0; - data.forEach(async(project) => { - let title = project.name; - let department = await getObjectById('unit', project.unitId); - if(department) { - let name = "Ansvarig"; //Waiting for backend fix - let description = project.content; - let i = id; - let card = new projectCard(i, name, department.name, title, description, project.id); - projectCards[i] = card; - let cardHTML = card.generateHTML(); - //addEventListener(listenersLoaded, project.id, card); - let div = document.createElement('div'); - div.className = 'homePageProjectCardDiv'; // Set the class name(s) here - div.innerHTML = cardHTML; - if (!selectElement) return; - selectElement.appendChild(div); // Stop if the container isn't found - id ++; - } else { - console.log(project.unitId + " is not a unit"); //Unit Ids on improvement work that do not exist - } - }); - } - - - - - let projectCards: { [key: number]: projectCard } = {}; - -class projectCard { - private name: string; // Projectowner - private department: string; - private title: string; - private description: string; - private id: number; - private projectId: string; - - constructor(id: number, name: string, department: string, title: string, description: string, projectId: string) { - this.name = name; - this.department = department; - this.title = title; - this.description = description; - this.id = id; - this.projectId = projectId; - } - - 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'; - } - } + 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); - loadInitiatePage() { - alert('The initiate project page should now be loaded'); - } - + // // Display end date for completed projects + // if (improvementWork.completed) { + // const datesDiv = document.getElementById( + // "ongoingCardDatesCurrentProjects" + improvementWork.id + // ); + // if (datesDiv) { + // datesDiv.innerText += + // " till " + formatDate(improvementWork.endDate); + // } + // } - - generateHTML(): string { - return `<div class="homeTotalExpandedOngoingWorkCard"> - <div style="cursor: pointer;" class="flex-container ongoingCard" id="${this.projectId}"> - <div class="ongoingCardImageContainer toSinglePage"> - <div class = "flex-box ongoingCardImage toSinglePage" id="pinkFaded"></div> - </div> - <div class="div ongoingCardInfo toSinglePage"> - <p class="toSinglePage" id="ongoingCardManager">${this.name}</p> - <p class="toSinglePage" id="ongoingCardDepartment">${this.department}</p> - <p class="toSinglePage" id="ongoingCardIdeaTitle">${this.title}</p> - </div> - - <!--<button data-project-id="${this.id}" class="projectButton" role="button">Gå till projektsidan</button>--> - - - <div class="container ongoingSeeCardDetails toSinglePage"> - <div class="ongoingSeeCardDetailsInner"> - - </div> - </div> - </div> - <div class = "expandedOngoingWorkCard" id="expandedOngoingWorkCard${this.projectId}" style="display: none;"> - <div class ="expandedTextOngoingWorkCard"> - ${this.description} - </div> - </div> - </div> ` - } -} + // // 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> \ No newline at end of file diff --git a/client/projectPage/addMemberModal.html b/client/projectPage/addMemberModal.html index a9be95d8284201f8513f68aad619f0bd0c1ca70e..d3b794b231a7d82e30d08c0d93e0ab335f45acee 100644 --- a/client/projectPage/addMemberModal.html +++ b/client/projectPage/addMemberModal.html @@ -1,8 +1,8 @@ <!-- addMemberModal.html --> <!DOCTYPE html> <html lang="en"> -<head> - <link rel="stylesheet" href="../ideaBank/ideaBank.css" /> +<head> + <link rel="stylesheet" href="../ideaBank/ideaBank.css" /> <link rel="stylesheet" href="../ideaBank/ideideaCard.css" /> <link rel="stylesheet" href="../initiateForbattringsarbete/initiateIdea.css" /> <meta charset="UTF-8"> @@ -25,9 +25,9 @@ <!-- Modal --> <div class="modal fade" id="addMemberModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> - <div class="modal-content"> + <div class="modal-content" style = "color: black;"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLongTitle">Ändra medlemmar kopplade till projektet</h5> + <h5 class="modal-title" id="exampleModalLongTitle" style = "color : black">Ändra medlemmar kopplade till projektet</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="upperCloseMemberModal"> <span aria-hidden="true">×</span> </button> @@ -65,8 +65,8 @@ <div class="selectedEmployees" id="selectedEmployees"></div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal" id="lowerCloseMemberModal">Close</button> - <button type="button" class="btn btn-primary" id="selectEmployeeSaveButton">Save changes</button> + <button type="button" class="btn btn-secondary" style = "width: 150px;" data-dismiss="modal" id="lowerCloseMemberModal">Stäng</button> + <button type="button" class="btn btn-secondary" style = "width: 150px;"id="selectEmployeeSaveButton">Spara Ändringar</button> </div> </div> </div> diff --git a/client/projectPage/projectPage.css b/client/projectPage/projectPage.css index 45ffd21b783eb3632e692969438ef4a1d3e85ce7..828582b639ed5ffabc61d7b4e83461f6e9c40966 100644 --- a/client/projectPage/projectPage.css +++ b/client/projectPage/projectPage.css @@ -346,4 +346,34 @@ body{ .flexDirectionRow{ display: flex; flex-direction: row; -} \ No newline at end of file +} +#startPauseButton{ + background-color: #845380; + border: none; + padding: 6px; + color: #fffafa; + font-weight: 1700; + border-radius: 8px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: medium; + text-align: center; + margin-left: 0%; + margin-top: 1%; + width: 20vh; +} + +#uploadButton{ + width: 11vw; + background-image: linear-gradient(to right, #845380, #303866); + border: none; + border-radius: 8px; + color: white; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: medium; + text-align: center; + background-color: #6c757d; + vertical-align: middle; + +} diff --git a/client/projectPage/projectPage.ts b/client/projectPage/projectPage.ts index e0afe031899a3979bdba65bd9438faede7598fc3..6a7c5cd27e3ae5765539eeef1ca6c12bd5711c15 100644 --- a/client/projectPage/projectPage.ts +++ b/client/projectPage/projectPage.ts @@ -501,11 +501,15 @@ function getDivWithIdFromHTML( export async function loadMemberModal(projectId: string) { const modalContent = await getDivWithIdFromHTML('../projectPage/addMemberModal.html', '#addMemberModal'); + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = '../initiateForbattringsarbete/initiateIdea.css'; - //clear selected employees setSelectedEmployeesEmpty(); if (modalContent) { + $('#container-fluid').append(link); $('#container-fluid').append(modalContent); ($(modalContent) as any).modal('show'); diff --git a/client/projectPage/projectPageA.html b/client/projectPage/projectPageA.html index 2dca59f3cc2821b5c3da8013d5883b8450480451..6c6653363f07967ea0e999ec338d5b0d83e59f7e 100644 --- a/client/projectPage/projectPageA.html +++ b/client/projectPage/projectPageA.html @@ -25,7 +25,7 @@ <p style="margin-right: 5px;">Medlemmar:</p> <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p> </div> - <button id="projectButton2">+ Lägg till medlem</button> + <button id="addMemberButton">+ Lägg till medlem</button> <button id="projectButton">Redigera</button> </div> @@ -87,11 +87,11 @@ <textarea id="a4" class="textArea" name="answer4" rows="7" cols="50" placeholder="Svara på frågan här..." required></textarea> </form> <div class="saveEditDiv"> - <button id="saveEditBtnA" class="saveBtn">Spara</button> + <button class="btn btn-secondary"id="saveEditBtnA" >Spara</button> </div> </div> - <div id="NolansModel" style="margin:3%; width: 30%;"> + <div id="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" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Göra</div> @@ -105,8 +105,8 @@ <p>Agera-steget är det sista steget i modellen. Du kan nu avsluta projektet eller låta förbättringsarbetet gå ienom en till iteration avd PGDA.</p> </article> - <button id="toCurrentProjects" data-project-id="${this.id}" class="btn btn-primary" role="button">Avsluta förbättringsarbete</button> - <button id="toCurrentProjects" data-project-id="${this.id}" class="btn btn-primary" role="button">En till iteration</button> + <button id="toCurrentProjects" data-project-id="${this.id}" class="btn btn-secondary" role="button">Avsluta förbättringsarbete</button> + <button id="toCurrentProjects" data-project-id="${this.id}" class="btn btn-secondary" role="button">En till iteration</button> </div> <div style="width: 25%;"> @@ -129,7 +129,7 @@ <ul id="tasksA" class="documentList taskList"> </ul> </div> - <button id="new-task-button-a" style="margin-top: 1vh;">+ Ny aktivitet</button> + <button class ="btn btn-secondary"id="new-task-button-a" style="margin-top: 1vh;">+ Ny aktivitet</button> </div> </div> diff --git a/client/projectPage/projectPageG.html b/client/projectPage/projectPageG.html index 87438c60d9e05e9e67256beea1e005d9cf9e2a88..a9c885d62341b98e762b8418656663a59c53da11 100644 --- a/client/projectPage/projectPageG.html +++ b/client/projectPage/projectPageG.html @@ -26,7 +26,7 @@ <p style="margin-right: 5px;">Medlemmar:</p> <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p> </div> - <button id="projectButton2">+ Lägg till medlem</button> + <button id="addMemberButton">+ Lägg till medlem</button> <button id="projectButton">Redigera</button> </div> @@ -94,7 +94,7 @@ <textarea id="g5" class="textArea" name="answer5" rows="5" cols="50" placeholder="Svara på frågan här..." required></textarea> </form> <div class="saveEditDiv"> - <button id="saveEditBtnG" class="saveBtn">Spara</button> + <button id="saveEditBtnG" class="btn btn-secondary">Spara</button> </div> </div> @@ -109,7 +109,7 @@ <p>Nästa steg är steg S(Studera) i PGSA modellen. Se till se att du har svarat på alla frågor på sidan, klicka sedan på knappen nedan för att gå till nästa steg.</p> </article> - <button id="toS" data-project-id="${this.id}" class="btn btn-primary" role="button">Nästa steg</button> + <button id="toS" data-project-id="${this.id}" class="btn btn-secondary" role="button">Nästa steg</button> </div> @@ -133,7 +133,7 @@ <ul id="tasksG" class="documentList taskList"> </ul> </div> - <button id="new-task-button-g" style="margin-top: 1vh;">+ Ny aktivitet</button> + <button class ="btn btn-secondary"id="new-task-button-g" style="margin-top: 1vh;">+ Ny aktivitet</button> </div> </div> diff --git a/client/projectPage/projectPageP.html b/client/projectPage/projectPageP.html index a39b830ed4037322fd5c90e5ef76ea82c4e87a4e..b22b598299fa20059f07f2514e02204f776bbaec 100644 --- a/client/projectPage/projectPageP.html +++ b/client/projectPage/projectPageP.html @@ -103,7 +103,7 @@ <textarea id="p7" class="textArea" name="answer6" rows="5" cols="50" placeholder="Svara på frågan här..." required></textarea> </form> <div class="saveEditDiv"> - <button id="saveEditBtnP" class="saveBtn">Spara</button> + <button id="saveEditBtnP" class="btn btn-secondary">Spara</button> </div> </div> @@ -117,7 +117,7 @@ <p>Nästa steg är steg G(Göra) i PGSA modellen. Se till se att du har svarat på alla frågor på sidan, klicka sedan på knappen nedan för att gå till nästa steg.</p> </article> - <button id="toG" data-project-id="${this.id}" class="btn btn-primary" role="button">Nästa steg</button> + <button id="toG" data-project-id="${this.id}" class="btn btn-secondary" role="button">Nästa steg</button> </div> <div style="width: 25%;"> <div class="sideTitle">Dokument</div> @@ -138,7 +138,7 @@ <ul id="tasksP" class="documentList taskList"> </ul> </div> - <button id="new-task-button-p" style="margin-top: 1vh;">+ Ny aktivitet</button> + <button class ="btn btn-secondary"id="new-task-button-p" style="margin-top: 1vh;">+ Ny aktivitet</button> </div> </div> diff --git a/client/projectPage/projectPageP.ts b/client/projectPage/projectPageP.ts index 295beee0b51f93ebe3cc33190f1481bf5d940c65..d1541e535b3ac3fab6f378628d6af8935ad668f5 100644 --- a/client/projectPage/projectPageP.ts +++ b/client/projectPage/projectPageP.ts @@ -120,6 +120,7 @@ export function loadPauseRestartButton(projectId : string, ongoing : boolean, di //Creates button with classname and text const pauseRestartButton = document.createElement("button"); + pauseRestartButton.id = 'startPauseButton' if (ongoing) { pauseRestartButton.textContent = "Pausa förbättringsarbete"; pauseRestartButton.className = "pause-button" diff --git a/client/projectPage/projectPageS.html b/client/projectPage/projectPageS.html index 52b3a144184ed50378c28fb22a967480032e89a0..82115985b3276a24b91a26b68de019e9eb902ef4 100644 --- a/client/projectPage/projectPageS.html +++ b/client/projectPage/projectPageS.html @@ -24,7 +24,7 @@ <p style="margin-right: 5px;">Medlemmar:</p> <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p> </div> - <button id="projectButton2">+ Lägg till medlem</button> + <button id="addMemberButton">+ Lägg till medlem</button> <button id="projectButton">Redigera</button> </div> @@ -80,11 +80,11 @@ <textarea id="s3" class="textArea" name="answer3" rows="7" cols="50" placeholder="Svara på frågan här..." required></textarea> </form> <div class="saveEditDiv"> - <button id="saveEditBtnS" class="saveBtn">Spara</button> + <button id="saveEditBtnS" class="btn btn-secondary">Spara</button> </div> </div> - <div id="NolansModel" style="margin:3%; width: 30%;"> + <div id="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" id="nolansToG"data-toggle="tooltip" title="Klicka för att komma till detta steg av modellen">Göra</div> @@ -96,7 +96,7 @@ <p>Nästa steg är steg A(Agera) i PGSA modellen. Se till se att du har svarat på alla frågor på sidan, klicka sedan på knappen nedan för att gå till nästa steg.</p> </article> - <button id="toA" data-project-id="${this.id}" class="btn btn-primary" role="button">Nästa steg</button> + <button id="toA" data-project-id="${this.id}" class="btn btn-secondary" role="button">Nästa steg</button> </div> @@ -119,7 +119,7 @@ <ul id="tasksS" class="documentList taskList"> </ul> </div> - <button id="new-task-button-s" style="margin-top: 1vh;">+ Ny aktivitet</button> + <button class ="btn btn-secondary"id="new-task-button-s" style="margin-top: 1vh;">+ Ny aktivitet</button> </div> </div>