set up start of day for hours and minutes

RocketCommunicationsInc · May 7, 2024 · 72a13a8 · 72a13a8
1 parent c190b9a
commit 72a13a8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 48 deletions.
diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
@@ -71,31 +71,50 @@ export class RuxRuler {
     }
 
     getPartialDay() {
-        if (!this.firstNewDay) return
-        console.log(this.firstNewDay)
-        const prevDay = this.dateRange[this.firstNewDay - 1]
-        console.log(this.dateRange, prevDay)
-        //Set Last Column
-        let unitOfTime = 60
-        const end = unitOfTime * this.firstNewDay! + 2
-        console.log(prevDay)
+        let partialDay = {
+            end: -1,
+            date: this.dateRange[0][1],
+        }
+        /**
+         * If this.firsNewDay exists it means that there is the start of a day within the date range
+         * so we need to find where it starts and backfill the previous day to the start day
+         */
+        if (this.firstNewDay) {
+            //Set Last Column
+            let unitOfTime = 60
+            if (this.interval === 'minute') {
+                unitOfTime = unitOfTime * 60
+            }
+            const prevDay = this.dateRange[this.firstNewDay - 1]
+            const end = unitOfTime * this.firstNewDay! + 2
+            partialDay = {
+                end,
+                date: prevDay[1],
+            }
+        }
 
+        /**
+         * Otherwise there is not the start of a day
+         * within the timeine so we can make the partial
+         * date take up the full width of the timeline.
+         */
         return (
             <span
                 class="ruler-new-day-display"
                 style={{
                     gridRow: '2',
-                    gridColumn: `2 / ${end}`,
+                    gridColumn: `2 / ${partialDay.end}`,
                 }}
             >
-                <span>{prevDay[1]}</span>
+                <span>{partialDay.date}</span>
             </span>
         )
     }
 
-    timePattern = /^00:.+$/
+    timePattern = /^00:00+$/
 
     shouldShowDate(time: string) {
+        console.log(time, this.timePattern.test(time))
         if (!['hour', 'minute'].includes(this.interval)) {
             return false
         }

diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html
@@ -91,7 +91,7 @@
                     start="2021-02-01T00:00:00.000Z"
                     end="2021-03-03T01:00:00.000Z"
                     playhead="2021-02-02T00:00:00.000Z"
-                    interval="week"
+                    interval="hour"
                     zoom="4"
                     show-grid
                 >
@@ -193,9 +193,9 @@
                 <rux-timeline
                     id="second"
                     has-played-indicator="false"
-                    timezone="America/New_York"
+                    timezone="UTC"
                     start="2021-02-01T14:00:00.000Z"
-                    end="2021-02-01T18:00:00.000Z"
+                    end="2021-02-02T01:00:00.000Z"
                     playhead="2021-02-01T16:00:00.000Z"
                     interval="hour"
                     zoom="4"
@@ -241,36 +241,6 @@
                             Event 4.1
                         </rux-time-region>
                     </rux-track>
-                    <rux-track>
-                        <div slot="label">Region 5</div>
-                        <rux-time-region
-                            start="2021-02-01T05:00:00Z"
-                            end="2021-02-02T05:33:00Z"
-                            status="caution"
-                        >
-                            Event 5.1
-                        </rux-time-region>
-                    </rux-track>
-                    <rux-track>
-                        <div slot="label">Region 6</div>
-                        <rux-time-region
-                            start="2021-02-01T05:00:00Z"
-                            end="2021-02-02T05:33:00Z"
-                            status="normal"
-                        >
-                            Event 6.1
-                        </rux-time-region>
-                    </rux-track>
-                    <rux-track>
-                        <div slot="label">Region 7</div>
-                        <rux-time-region
-                            start="2021-02-01T05:00:00Z"
-                            end="2021-02-02T05:33:00Z"
-                            status="normal"
-                        >
-                            Event 7.1
-                        </rux-time-region>
-                    </rux-track>
                     <rux-track slot="ruler">
                         <rux-ruler show-start-of-day></rux-ruler>
                     </rux-track>
@@ -328,10 +298,8 @@
             }
 
             function setZoomInterval2(zoomLevel) {
-                if (zoomLevel <= 2) timeline2.setAttribute('interval', 'hour')
-                if (zoomLevel > 2 && zoomLevel <= 6)
-                    timeline2.setAttribute('interval', 'minute')
-                if (zoomLevel > 6) timeline2.setAttribute('interval', 'second')
+                if (zoomLevel <= 4) timeline2.setAttribute('interval', 'hour')
+                if (zoomLevel > 4) timeline2.setAttribute('interval', 'minute')
             }
         </script>
     </body>