timezone toggle

RocketCommunicationsInc · May 6, 2024 · 4c58f6f · 4c58f6f
1 parent a092261
commit 4c58f6f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 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
@@ -70,6 +70,28 @@ export class RuxRuler {
         return `${unitOfTime * index + 2} / ${end}`
     }
 
+    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
+
+        return (
+            <span
+                class="ruler-new-day-display"
+                style={{
+                    gridRow: '2',
+                    gridColumn: `2 / ${end}`,
+                }}
+            >
+                <span>{prevDay[1]}</span>
+            </span>
+        )
+    }
+
     timePattern = /^00:.+$/
 
     shouldShowDate(time: string) {
@@ -84,8 +106,8 @@ export class RuxRuler {
         return this.timePattern.test(time)
     }
 
+    private firstNewDay: number | undefined
     render() {
-        let firstNewDay: number
         return (
             <Host>
                 <div class="rux-ruler rux-track">
@@ -94,12 +116,12 @@ export class RuxRuler {
                             const newDay = this.timePattern.test(time)
                                 ? newDayDate
                                 : ''
-                            if (newDay !== '' && !firstNewDay)
-                                firstNewDay = index
+                            if (newDay !== '' && !this.firstNewDay)
+                                this.firstNewDay = index
 
                             const isOddDay = (index: number) => {
-                                if (firstNewDay) {
-                                    return (index - firstNewDay) % 48 <= 23
+                                if (this.firstNewDay) {
+                                    return (index - this.firstNewDay) % 48 <= 23
                                 }
                                 return false
                             }
@@ -138,6 +160,9 @@ export class RuxRuler {
                             )
                         }
                     )}
+                    {this.showStartOfDay && this.firstNewDay
+                        ? this.getPartialDay()
+                        : null}
                 </div>
             </Host>
         )

diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html
@@ -76,6 +76,12 @@
                     <rux-button secondary onclick="togglegrid()"
                         >Toggle Grid</rux-button
                     >
+                    <rux-button
+                        id="timezone"
+                        secondary
+                        onclick="toggleTimezone()"
+                        >Toggle Timezone</rux-button
+                    ><span id="currentTimezone"></span>
                 </section>
 
                 <rux-timeline
@@ -276,6 +282,8 @@
             const input = document.querySelector('rux-input')
             const timeline2 = document.querySelector('rux-timeline#second')
             const input2 = document.querySelector('rux-input#second')
+            const currenttz = document.querySelector('#currentTimezone')
+            currenttz.textContent = timeline.getAttribute('timezone')
 
             let zoomLevel = 2
             let zoomLevel2 = 4
@@ -292,6 +300,16 @@
                 timeline.toggleAttribute('show-grid')
             }
 
+            const toggleTimezone = () => {
+                const current = timeline.timezone
+
+                const newTz =
+                    current === 'America/New_York' ? 'UTC' : 'America/New_York'
+                console.log(current, newTz)
+                timeline.timezone = newTz
+                currenttz.textContent = newTz
+            }
+
             function setZoomInterval(zoomLevel) {
                 if (zoomLevel < 1) timeline.setAttribute('interval', 'month')
                 if (zoomLevel < 2) timeline.setAttribute('interval', 'week')