Merge pull request #60 from bitovi/new-ahead

adding new and ahead status
bitovi · Apr 22, 2024 · da799e9 · da799e9
2 parents ed2b84d + 8a9ae3e
commit da799e9
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 78 deletions.
diff --git a/public/css/colors.css b/public/css/colors.css
@@ -43,6 +43,12 @@
 .color-bg-warning {
 	background-color: var(--warning-color)
 }
+.color-bg-ahead {
+	background-color: var(--ahead-color);
+}
+.color-bg-new {
+	background-color: var(--new-color);
+}
 
 .color-text-complete {
 	color: var(--complete-color);
@@ -62,6 +68,12 @@
 .color-text-blocked {
 	color: var(--blocked-color);
 }
+.color-text-ahead {
+	color: var(--ahead-dark-color);
+}
+.color-text-new {
+	color: var(--new-color);
+}
 .color-text-black {
 	color: var(--black-color);
 }
@@ -87,6 +99,11 @@
 	color: var(--black-color);
 }
 
+.color-text-and-bg-ahead-last-period {
+	background-color: var(--ahead-dark-color);
+	color: var(--black-color);
+}
+
 .color-text-and-bg-unknown {
 	background-color: var(--unknown-color);
 	color: var(--black-color);
@@ -100,7 +117,14 @@
 	background-color: var(--blocked-color);
 	color: var(--white-color);
 }
-
+.color-text-and-bg-ahead {
+	background-color: var(--ahead-color);
+	color: var(--black-color);
+}
+.color-text-and-bg-new {
+	background-color: var(--new-color);
+	color: var(--white-color);
+}
 
 
 .color-border-slate-900 {

diff --git a/public/css/primitives.css b/public/css/primitives.css
@@ -7,6 +7,9 @@
 	--unknown-color: #dab09280;
 	--notstarted-color: #97A0AF; /* N80 - Spooky ghost */
 	--blocked-color: rgb(242, 0, 11);
+	--ahead-color: #79E2F2; /* T100 - Hairy fairy */
+	--ahead-dark-color: #00A3BF;
+	--new-color: #6554C0;
 	--white-color: rgb(255 255 255);
 	--black-color: rgb(0 0 0);
 	--slate-900-color: rgb(17 24 39);

diff --git a/public/dist/main.js b/public/dist/main.js
diff --git a/public/dist/main.js.map b/public/dist/main.js.map
diff --git a/public/dist/production.css b/public/dist/production.css
diff --git a/public/gantt-grid.js b/public/gantt-grid.js
@@ -117,7 +117,6 @@ export class GanttGrid extends StacheElement {
             left: "0",
             right: "0",
             bottom: "0",
-            zIndex: "1" // this shouldn't be needed
         });
         lastPeriodRoot.className = "py-1 lastPeriod"
 
@@ -157,12 +156,19 @@ export class GanttGrid extends StacheElement {
                     const behindTime =  document.createElement("div");
                     behindTime.style.backgroundClip = "content-box";
                     behindTime.style.opacity = "0.9";
+                    behindTime.style.position = "relative";
                     behindTime.className = "border-y-solid-1px"
 
                     if(timing && status === "behind") {
                         Object.assign(behindTime.style, getPositions(timing || {}).style);
+                        behindTime.style.zIndex = 1;
                         behindTime.classList.add("color-text-and-bg-behind-last-period");
                     }
+                    if(timing && status === "ahead") {
+                        Object.assign(behindTime.style, getPositions(timing || {}).style);
+                        behindTime.classList.add("color-text-and-bg-ahead-last-period");
+                        behindTime.style.zIndex = -1;
+                    }
                     return behindTime;
                 }
 

diff --git a/public/status-helpers.js b/public/status-helpers.js
@@ -142,7 +142,14 @@ function timedStatus(timedRecord) {
 		} else if (timedRecord.lastPeriod && 
 			((+timedRecord.due) > WIGGLE_ROOM + (+timedRecord.lastPeriod.due)) ) {
 				return "behind";
-		} else if (timedRecord.start > new Date()) {
+		} else if(timedRecord.lastPeriod && 
+			((+timedRecord.due) + WIGGLE_ROOM <  (+timedRecord.lastPeriod.due)) ) {
+				return "ahead";
+		} else if(!timedRecord.lastPeriod) {
+			return "new";
+		}
+
+		if (timedRecord.start > new Date()) {
 				return "notstarted"
 		}
 		else {

diff --git a/public/timeline-report.js b/public/timeline-report.js
@@ -321,8 +321,10 @@ export class TimelineReport extends StacheElement {
 
               <div class='p-2'>
                 <span class='color-text-and-bg-unknown p-2 inline-block'>Unknown</span>
+                <span class='color-text-and-bg-new p-2 inline-block'>New</span>
                 <span class='color-text-and-bg-notstarted p-2 inline-block'>Not Started</span>
                 <span class='color-text-and-bg-ontrack p-2 inline-block'>On Track</span>
+                <span class='color-text-and-bg-ahead p-2 inline-block'>Ahead</span>
                 <span class='color-text-and-bg-behind p-2 inline-block'>Behind</span>
                 <span class='color-text-and-bg-blocked p-2 inline-block'>Blocked</span>
                 <span class='color-text-and-bg-complete p-2 inline-block'>Complete</span>