@aquera/nile-elements 0.0.15 → 0.0.17

package/src/nile-calendar/nile-calendar.ts

@@ -32,6 +32,7 @@ import type { NileMenu } from '../nile-menu';
 import type { NilePopup } from '../nile-popup';
 import '../nile-popup';
 import { NileDropdown } from '../nile-dropdown';
+import { TIMEZONES } from './timezones';
 
 /**
  * Nile icon component.
@@ -50,15 +51,16 @@ export class NileCalendar extends NileElement {
   }
 
   private currentMonth: number = new Date().getMonth();
+
   private currentYear: number = new Date().getFullYear();
 
   @query('nile-dropdown') dropdown: NileDropdown;
 
   @property({ type: Boolean, reflect: true }) dropDownOpened = false;
 
-  @property({ type: Object }) value : any;
+  @property({ type: Object }) value: any;
 
-  @property({ type: Object }) rangeValue : any;
+  @property({ type: Object }) rangeValue: any;
 
   @property({ type: String, attribute: 'value' }) valueAttribute:
     | string
@@ -68,14 +70,23 @@ export class NileCalendar extends NileElement {
     null;
 
   @property({ type: Object }) startDate: Date | null = null;
+
   @property({ type: Object }) endDate: Date | null = null;
-  @property({ type: Boolean }) isSelectingStart = true; // flag to indicate what we're selecting
+
+  @property({ type: Boolean }) isSelectingStart = true;
 
   @property({ type: Boolean }) range = false;
 
+  @property({ type: String }) type = 'absolute';
+
+  @property({ type: String }) selectedUnit: string;
+
+  @property({ type: Number }) selectedValue: number;
+
+  @property({ type: String }) selectedTimeZone: string = 'local';
+
   @watch('value')
   valueChanged() {
-
     if (this.range && this.value) {
       this.rangeValue = this.value;
       this.value = null;
@@ -98,7 +109,6 @@ export class NileCalendar extends NileElement {
     }
   }
 
-
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
 
@@ -164,10 +174,6 @@ export class NileCalendar extends NileElement {
     this.requestUpdate();
   }
 
-
-
-
-
   connectedCallback() {
     super.connectedCallback();
     this.initializeValue();
@@ -194,7 +200,6 @@ export class NileCalendar extends NileElement {
   }
 
   private nextMonth(): void {
-
     if (this.currentMonth === 11) {
       this.currentMonth = 0;
       this.currentYear++;
@@ -205,7 +210,6 @@ export class NileCalendar extends NileElement {
   }
 
   private prevMonth(): void {
-
     if (this.currentMonth === 0) {
       this.currentMonth = 11;
       this.currentYear--;
@@ -254,6 +258,11 @@ export class NileCalendar extends NileElement {
 
   private confimRange() {
     if (this.startDate && this.endDate) {
+      if (this.selectedTimeZone !== 'local') {
+        this.startDate = this.convertTZ(this.startDate, this.selectedTimeZone);
+        this.endDate = this.convertTZ(this.endDate, this.selectedTimeZone);
+      }
+
       this.emit('nile-changed', {
         startDate: this.startDate,
         endDate: this.endDate,
@@ -269,6 +278,24 @@ export class NileCalendar extends NileElement {
     }
   }
 
+  convertTZ(date: Date, tzString: any) {
+    return new Date(
+      (typeof date === 'string' ? new Date(date) : date).toLocaleString(
+        'en-US',
+        { timeZone: tzString }
+      )
+    );
+  }
+
+  isCurrentDate(day: number, month: number, year: number) {
+    const today = new Date();
+    return (
+      day === today.getDate() &&
+      month + 1 === today.getMonth() + 1 &&
+      year === today.getFullYear()
+    );
+  }
+
   private renderMonth(
     year: number,
     month: number,
@@ -337,7 +364,12 @@ export class NileCalendar extends NileElement {
     return html`
       <div class="calendar">
         <div class="calendar-header">
-          <nile-icon class="calendar-header__month-navigation" name="arrowleft" color="black" @click="${this.prevMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowleft"
+            color="black"
+            @click="${this.prevMonth}"
+          >
           </nile-icon>
           <span
             >${new Date(year, month).toLocaleString('default', {
@@ -345,7 +377,12 @@ export class NileCalendar extends NileElement {
             })}
             ${year}</span
           >
-          <nile-icon class="calendar-header__month-navigation" name="arrowright" color="black" @click="${this.nextMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowright"
+            color="black"
+            @click="${this.nextMonth}"
+          >
           </nile-icon>
         </div>
         <div class="day-names">
@@ -370,7 +407,11 @@ export class NileCalendar extends NileElement {
                 isCurrentMonth
               )} ${isInRange(day, month, year, isCurrentMonth)
                 ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}"
+                : ''} ${!isCurrentMonth ? 'filler' : ''}
+                ${this.isCurrentDate(day, month, year) && isCurrentMonth
+                ? 'current-date'
+                : ''}
+                "
               @click="${() => {
                 if (isCurrentMonth) {
                   this.selectDate(day, month, year);
@@ -393,12 +434,17 @@ export class NileCalendar extends NileElement {
     return `${day}/${month}/${year}`;
   }
 
-  private formatDateRange(value: { startDate: Date | null, endDate: Date | null }): string {
-    if(!value){
+  private formatDateRange(value: {
+    startDate: Date | null;
+    endDate: Date | null;
+  }): string {
+    if (!value) {
       return value;
     }
     if (!value.startDate || !value.endDate) return '';
-    return `${this.formatDate(value.startDate)} - ${this.formatDate(value.endDate)}`;
+    return `${this.formatDate(value.startDate)} - ${this.formatDate(
+      value.endDate
+    )}`;
   }
 
   private handleStartDateInput(event: CustomEvent): void {
@@ -424,7 +470,6 @@ export class NileCalendar extends NileElement {
       this.endDate = date;
     } else {
       this.endDate = null;
-
     }
     this.requestUpdate();
   }
@@ -454,56 +499,133 @@ export class NileCalendar extends NileElement {
     return regex.test(input);
   }
 
-// Parse time string to a Date object
-private parseTime(input: string, date: Date): Date | null {
-  if (!this.isValidTimeInput(input)) {
-    return null;
+  // Parse time string to a Date object
+  private parseTime(input: string, date: Date): Date | null {
+    if (!this.isValidTimeInput(input)) {
+      return null;
+    }
+    const [hour, minute, second] = input.split(':').map(Number);
+    const newDate = new Date(date.getTime());
+    newDate.setHours(hour, minute, second);
+    return newDate;
   }
-  const [hour, minute, second] = input.split(':').map(Number);
-  const newDate = new Date(date.getTime());
-  newDate.setHours(hour, minute, second);
-  return newDate;
-}
 
-private handleStartTimeInput(event: CustomEvent): void {
-  if (!this.startDate) {
-    this.startDate = null;
-    return;
+  private handleStartTimeInput(event: CustomEvent): void {
+    if (!this.startDate) {
+      this.startDate = null;
+      return;
+    }
+    const time = this.parseTime(event.detail.value, this.startDate);
+    if (time) {
+      this.startDate = time;
+    } else {
+      this.startDate.setHours(0, 0, 0);
+    }
+    this.requestUpdate();
   }
-  const time = this.parseTime(event.detail.value, this.startDate);
-  if (time) {
-    this.startDate = time;
-  } else {
-    this.startDate.setHours(0, 0, 0);
+
+  private handleEndTimeInput(event: CustomEvent): void {
+    if (!this.endDate) {
+      this.endDate = null;
+      return;
+    }
+    const time = this.parseTime(event.detail.value, this.endDate);
+    if (time) {
+      this.endDate = time;
+    } else {
+      this.endDate.setHours(0, 0, 0);
+    }
+    this.requestUpdate();
   }
-  this.requestUpdate();
-}
 
-private handleEndTimeInput(event: CustomEvent): void {
-  if (!this.endDate) {
-    this.endDate = null;
-    return;
+  setType(newType: string) {
+    this.type = newType;
   }
-  const time = this.parseTime(event.detail.value, this.endDate);
-  if (time) {
-    this.endDate = time;
-  } else {
-    this.endDate.setHours(0, 0, 0);
+
+  createRelativePeriod(unit: String, value: number) {
+    const endTime = new Date();
+    const startTime = new Date();
+
+    switch (unit) {
+      case 'minutes':
+        startTime.setMinutes(startTime.getMinutes() - value);
+        break;
+      case 'hours':
+        startTime.setHours(startTime.getHours() - value);
+        break;
+      case 'days':
+        startTime.setDate(startTime.getDate() - value);
+        break;
+      case 'weeks':
+        startTime.setDate(startTime.getDate() - 7 * value); // Subtract weeks as days
+        break;
+      case 'months':
+        startTime.setMonth(startTime.getMonth() - value);
+        break;
+    }
+
+    this.startDate = new Date(startTime.getTime());
+    this.endDate = new Date(endTime.getTime());
+
+    this.requestUpdate();
+
+    return {
+      startDate: this.startDate,
+      endDate: this.endDate,
+    };
+  }
+
+  handleTimeValueClick(unit: string, value: number, event: any) {
+    const timestamps = this.createRelativePeriod(unit, value);
+
+    this.selectedUnit = unit;
+    this.selectedValue = value;
+
+    this.requestUpdate();
   }
-  this.requestUpdate();
-}
 
+  renderTimeValues(unit: string, values: any[]) {
+    return values.map(
+      value =>
+        html`
+          <div
+            class="time-value ${this.selectedUnit === unit &&
+            this.selectedValue === value
+              ? 'time-value--selected'
+              : ''}"
+            @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
+          >
+            ${value}
+          </div>
+        `
+    );
+  }
 
+  handleDurationChange(event: any) {
+    this.selectedValue = Number(event.detail.value);
+    if (this.selectedUnit && this.selectedValue) {
+      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+    }
+  }
 
-  /* #endregion */
+  handleUnitChange(event: any) {
+    this.selectedUnit = event.detail.value;
+    if (this.selectedUnit && this.selectedValue) {
+      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+    }
+  }
 
-  /* #region Methods */
+  handleTimeZoneChange(event: any) {
+    this.selectedTimeZone = event.detail.value;
+    this.requestUpdate();
+  }
 
   /**
    * Render method
-   * @slot This is a slot test
    */
   render(): TemplateResult {
+    const timeZones: string[] = TIMEZONES;
+
     const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
     const nextMonth = (this.currentMonth + 1) % 12;
     const nextYear =
@@ -511,59 +633,175 @@ private handleEndTimeInput(event: CustomEvent): void {
     const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
 
     return html`
+      <div
+        class="base ${this.range ? 'base__range' : ''} ${this.type ===
+        'relative'
+          ? 'base__relative'
+          : ''}"
+      >
+        <div class="calendar-config ${!this.range ? 'hidden' : ''}">
+          <div class="calendar-switcher">
+            <div
+              class="calendar-switch${this.type === 'absolute'
+                ? '__active'
+                : ''}"
+              @click="${() => this.setType('absolute')}"
+            >
+              Absolute
+            </div>
+            <div
+              class="calendar-switch${this.type === 'relative'
+                ? '__active'
+                : ''}"
+              @click="${() => this.setType('relative')}"
+            >
+              Relative
+            </div>
+          </div>
 
-        <div class="base ${this.range ? 'base__range' : ''}">
-          <div class="calendar-wrapper" >
-            <div class="calendar-container ${this.range ? 'with-margin' : ''}">
-              ${this.renderMonth(
-                this.currentYear,
-                this.currentMonth,
-                this.getDaysArray(this.currentYear, this.currentMonth)
+          <div class="calendar-timezone">
+            <nile-select
+              searchEnabled
+              hoist
+              value=${this.selectedTimeZone}
+              @nile-change=${this.handleTimeZoneChange}
+            >
+              <nile-option value="local">Local Time Zone</nile-option>
+              ${timeZones.map(
+                timeZone => html`
+                  <nile-option value="${timeZone}">${timeZone}</nile-option>
+                `
               )}
+            </nile-select>
+          </div>
+        </div>
+
+        <div
+          class="calendar-wrapper  ${this.type !== 'absolute' ? 'hidden' : ''}"
+        >
+          <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+            ${this.renderMonth(
+              this.currentYear,
+              this.currentMonth,
+              this.getDaysArray(this.currentYear, this.currentMonth)
+            )}
+          </div>
+        </div>
+
+        <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Minutes</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('minutes', [1, 3, 5, 15, 30, 45])}
             </div>
-            <!-- ${this.range
-              ? html`
-                  <div class="calendar-container">
-                    ${this.renderMonth(
-                      this.currentYear,
-                      (this.currentMonth + 1) % 12,
-                      this.getDaysArray(
-                        this.currentYear,
-                        (this.currentMonth + 1) % 12
-                      )
-                    )}
-                  </div>
-                `
-              : ''} -->
+          </div>
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Hours</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
+            </div>
+          </div>
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Days</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
+            </div>
+          </div>
 
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Weeks</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
+            </div>
+          </div>
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Months:</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('months', [3, 6, 12, 15])}
+            </div>
           </div>
-          ${this.range
-            ? html`
+        </div>
+
+        ${this.range && this.type === 'relative'
+          ? html`
+          <div class="calender-input calender-input--relative">
+            <div class="from">
+              <nile-input class="manual-input" label="Duration"  value="${
+                this.selectedValue
+              }"
+              @nile-input="${this.handleDurationChange}"
+              placeholder="Enter Value" ></nile-input>
+              <nile-select class="manual-input"  label="Unit" value="${
+                this.selectedUnit
+              }"
+              @nile-change="${this.handleUnitChange}"
+              >
+                <nile-option value="minutes"> Minutes </nile-option>
+                <nile-option value="hours"> Hours </nile-option>
+                <nile-option value="days"> Days </nile-option>
+                <nile-option value="weeks"> Weeks </nile-option>
+                <nile-option value="months"> Months </nile-option>
+          </nile-select>
+
+            </div>
+
+          <div class="button-contaner">
+            <nile-button class="apply-button"  ?disabled="${
+              !this.startDate || !this.endDate
+            }"  @click="${this.confimRange}"> Apply</nile-button>
+            </div>
+
+
+        </div>
+        </div>
+        `
+          : ''}
+        ${this.range && this.type === 'absolute'
+          ? html`
           <div class="calender-input">
             <span class="manual-input-label">From </span>
             <div class="from">
-              <nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}"></nile-input>
-              <nile-input class="manual-input" value="${this.formatTime(this.startDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"> </nile-input>
+              <nile-input class="manual-input" value="${this.formatDate(
+                this.startDate
+              )}" placeholder="DD/MM/YYYY" @nile-change="${
+              this.handleStartDateInput
+            }"></nile-input>
+              <nile-input class="manual-input" value="${this.formatTime(
+                this.startDate
+              )}" placeholder="HH:MM:SS" @nile-change="${
+              this.handleStartTimeInput
+            }"> </nile-input>
 
             </div>
 <br>
             <span class="manual-input-label">To </span>
             <div class="from">
-            <nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>
-            <nile-input class="manual-input" value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
+            <nile-input class="manual-input" value="${this.formatDate(
+              this.endDate
+            )}" placeholder="DD/MM/YYYY" @nile-change="${
+              this.handleEndDateInput
+            }"></nile-input>
+            <nile-input class="manual-input" value="${this.formatTime(
+              this.endDate
+            )}" placeholder="HH:MM:SS" @nile-change="${
+              this.handleEndTimeInput
+            }"> </nile-input>
           </div>
           <div class="button-contaner">
             <nile-button class="apply-button"  ?disabled="${
-                !this.startDate || !this.endDate
-              }"  @click="${this.confimRange}"> Apply</nile-button>
+              !this.startDate || !this.endDate
+            }"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
 
 
         </div>
         </div>
         `
-            : ''}
-        </div>
+          : ''}
+      </div>
     `;
   }
 }