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 fd64c839e4..4ae16732d1 100644 --- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js +++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js @@ -167,16 +167,17 @@ 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) => { 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) => { @@ -219,7 +220,7 @@ function createDivActivities(activity, id){ card.id = `activityCard_${id}`; card.innerHTML = `
@@ -272,36 +273,39 @@ 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) { - 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 { firstDate } = getFirstAndLastDates(timelineElements); +function setDistances(startDate,isToday, isJS,endDate) { + 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 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){ if(isToday){ - return (getAbsoluteDays(firstDate,today) * ((containerSize/7) + ((containerSize/7)*porcentOfDay)) ) + return (getAbsoluteDays(firstDate,today,1) * ((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)* ${porcentOfDay}) )`; - } - - return `calc(${getAbsoluteDays(firstDate, startDate)} * (80vw / 7))`; + return `calc(${getAbsoluteDays(firstDate, today,1)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`; + } + return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (80vw / 7))`; } }