From 4a19b3b30605f689aadfd3c313f035897aa1407b Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Sun, 31 Mar 2024 11:48:33 -0500 Subject: [PATCH 1/4] :bug: fix(Timeline): Day progress not visualization --- marlo-web/src/main/webapp/crp/js/home/dashboard.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index fd64c839e4..65b404b2f4 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -167,7 +167,7 @@ function moveScrollLeft() { } const convertDateToAfricanDate = (date) => { - const africanOptions = { timeZone: 'Africa/Nairobi', month: 'short', day: 'numeric', year: "numeric" }; + const africanOptions = { timeZone: 'Africa/Nairobi', month: 'short', day: 'numeric', year: "numeric", hour: "numeric", minute: "numeric"}; return new Date(date.toLocaleString('en-US', africanOptions)); } const convertDateToText = (date, withYear) => { @@ -277,11 +277,8 @@ function setWidth(amount) { function setDistances(startDate,isToday, isJS) { const today = convertDateToAfricanDate(new Date()); - today.setDate(today.getDate()); - let startofDay = new Date(today.getTime()); - startofDay.setHours(0,0,0,0); - const porcentOfDay = ((today.getTime() - startofDay.getTime()) / (1000*60*60*24)) - console.log(porcentOfDay); + const currentHour = today.getHours(); + const percentageCompletion = (currentHour / 24); const { firstDate } = getFirstAndLastDates(timelineElements); const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); @@ -290,7 +287,7 @@ function setDistances(startDate,isToday, isJS) { if(isJS){ if(isToday){ - return (getAbsoluteDays(firstDate,today) * ((containerSize/7) + ((containerSize/7)*porcentOfDay)) ) + return (getAbsoluteDays(firstDate,today) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) ) } return (getAbsoluteDays(firstDate,startDate) * (containerSize/7)) @@ -298,7 +295,7 @@ function setDistances(startDate,isToday, isJS) { } else { if(isToday){ - return `calc(${getAbsoluteDays(firstDate, today)} * (80vw / 7) + ((80vw / 7)* ${porcentOfDay}) )`; + return `calc(${getAbsoluteDays(firstDate, today)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`; } return `calc(${getAbsoluteDays(firstDate, startDate)} * (80vw / 7))`; From c59901425b5c5a2262569ad556b4555374a81d41 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Sun, 31 Mar 2024 13:44:08 -0500 Subject: [PATCH 2/4] :bug: fix(Timeline): Final activity visualization --- .../src/main/webapp/crp/js/home/dashboard.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index 65b404b2f4..1aebf686e6 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -219,7 +219,7 @@ function createDivActivities(activity, id){ card.id = `activityCard_${id}`; card.innerHTML = `
@@ -275,14 +275,16 @@ function setWidth(amount) { return `calc(${amount !==undefined? (amount === 0? 3: amount+1)+"*(80vw / 7))": "calc(80vw / 7)"}`; } -function setDistances(startDate,isToday, isJS) { +function setDistances(startDate,isToday, isJS,endDate) { const today = convertDateToAfricanDate(new Date()); const currentHour = today.getHours(); const percentageCompletion = (currentHour / 24); - const { firstDate } = getFirstAndLastDates(timelineElements); + const { firstDate, lastDate } = getFirstAndLastDates(timelineElements); const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); let containerSize = vw * 0.8; + + const isFinalActivity = new Date(lastDate).getTime() === new Date(endDate).getTime(); if(isJS){ @@ -290,15 +292,14 @@ function setDistances(startDate,isToday, isJS) { return (getAbsoluteDays(firstDate,today) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) ) } - return (getAbsoluteDays(firstDate,startDate) * (containerSize/7)) + return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/7)) } else { if(isToday){ return `calc(${getAbsoluteDays(firstDate, today)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`; - } - - return `calc(${getAbsoluteDays(firstDate, startDate)} * (80vw / 7))`; + } + return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (80vw / 7))`; } } From ac91e89496caedaae8e1b5bd23ffc899a6471be1 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Tue, 2 Apr 2024 11:47:25 -0500 Subject: [PATCH 3/4] :bug: fix(Timeline): update visualization of activities --- .../src/main/webapp/crp/css/home/dashboard.css | 17 +++++++++++------ .../src/main/webapp/crp/js/home/dashboard.js | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/marlo-web/src/main/webapp/crp/css/home/dashboard.css b/marlo-web/src/main/webapp/crp/css/home/dashboard.css index 931f4960ab..dec06dbae6 100644 --- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css +++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css @@ -249,7 +249,6 @@ span.timelineControl:hover { justify-content: center; -webkit-box-shadow: 0px 0px 10px rgb(0 0 0 / 15%); border-radius: 5px; - height: 297px; } .porcentTimeLine { @@ -420,7 +419,7 @@ span.timelineControl:hover { scroll-behavior: smooth; overflow-x: scroll; overflow-y: hidden; - height: 28vh; + height: 36vh; width: 80vw; margin: 0 auto; } @@ -471,7 +470,7 @@ span.timelineControl:hover { } .timebox { - height: 144px; + height: 198px; position: relative; text-align: center; border-right: 1px dashed #CCCCCC; @@ -542,12 +541,18 @@ span.timelineControl:hover { margin: 0; } - .activityCard:nth-child(even){ + .activityCard:nth-child(n+1){ + top: 48px; + } + + .activityCard:nth-child(2n+2){ top: 108px; } - .activityCard:nth-child(odd){ - top: 48px; + + .activityCard:nth-child(3n+3){ + top: 168px; + } diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index 1aebf686e6..d69102824c 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -174,9 +174,10 @@ const convertDateToText = (date, withYear) => { return new Date(date).toLocaleString('default', withYear? { timeZone: 'Africa/Nairobi', month: 'short', day: 'numeric', year: "numeric" } : { timeZone: 'Africa/Nairobi', month: 'short', day: 'numeric' }); } -const getAbsoluteDays = (startDate, endDate) => { +const getAbsoluteDays = (startDate, endDate, restDays) => { const oneDay = 24 * 60 * 60 * 1000; - return Math.round(Math.abs((new Date(startDate) - new Date(endDate)) / oneDay)); + const isRestDays = restDays? restDays : 0; + return Math.round(Math.abs((new Date(startDate) - new Date(endDate)) / oneDay)) - isRestDays; }; const getFirstAndLastDates = (dates) => { @@ -276,10 +277,14 @@ function setWidth(amount) { } function setDistances(startDate,isToday, isJS,endDate) { - const today = convertDateToAfricanDate(new Date()); + const { firstDate, lastDate } = getFirstAndLastDates(timelineElements); + let today = convertDateToAfricanDate(new Date()); + + console.log(timelineElements); + today = today.getDate() > lastDate? convertDateToAfricanDate(lastDate): today; + const currentHour = today.getHours(); const percentageCompletion = (currentHour / 24); - const { firstDate, lastDate } = getFirstAndLastDates(timelineElements); const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); let containerSize = vw * 0.8; @@ -289,7 +294,7 @@ function setDistances(startDate,isToday, isJS,endDate) { if(isJS){ if(isToday){ - return (getAbsoluteDays(firstDate,today) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) ) + return (getAbsoluteDays(firstDate,today,1) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) ) } return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/7)) @@ -297,7 +302,7 @@ function setDistances(startDate,isToday, isJS,endDate) { } else { if(isToday){ - return `calc(${getAbsoluteDays(firstDate, today)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`; + return `calc(${getAbsoluteDays(firstDate, today,1)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`; } return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (80vw / 7))`; } From 67f12c28266e4bd60ebc17c476554083ec3a9ca4 Mon Sep 17 00:00:00 2001 From: JhonSGIzquierdo Date: Tue, 2 Apr 2024 13:59:22 -0500 Subject: [PATCH 4/4] :wrench: chore(Timeline): width activities update --- marlo-web/src/main/webapp/crp/js/home/dashboard.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js index d69102824c..4ae16732d1 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -273,7 +273,8 @@ const setStatusColor = (status) => { } function setWidth(amount) { - return `calc(${amount !==undefined? (amount === 0? 3: amount+1)+"*(80vw / 7))": "calc(80vw / 7)"}`; + + return `calc(${amount !==undefined? (amount === 0? 3: amount)+"*(80vw / 7))": "calc(80vw / 7)"}`; } function setDistances(startDate,isToday, isJS,endDate) {