Add feature to set date format to local settings

apache · Nov 5, 2024 · 45903cc · 45903cc
1 parent 230340c
commit 45903cc
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 23 deletions.
diff --git a/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html
@@ -34,24 +34,23 @@
             data-cy="time-selector-menu"
             (menuClosed)="menuTrigger.closeMenu()"
         >
-            <div *ngIf="timeStringMode === 'advanced'">
-                <div class="formatted-datetime">
-                    <span class="formatted-date">{{
-                        timeString.startDate
-                    }}</span
-                    >&nbsp;
-                    <span class="formatted-time" *ngIf="enableTimeChange">{{
+            <div
+                *ngIf="timeStringMode === 'advanced'"
+                class="formatted-datetime"
+            >
+                <span class="formatted-date">{{ timeString.startDate }}</span>
+                <span *ngIf="enableTimeChange">
+                    &nbsp;<span class="formatted-time">{{
                         timeString.startTime
                     }}</span>
-                </div>
-                -
-                <div class="formatted-datetime">
-                    <span class="formatted-date">{{ timeString.endDate }}</span
-                    >&nbsp;
-                    <span class="formatted-time" *ngIf="enableTimeChange">{{
+                </span>
+                <span class="formatted-date">&nbsp;-&nbsp;</span>
+                <span class="formatted-date">{{ timeString.endDate }}</span>
+                <span *ngIf="enableTimeChange">
+                    &nbsp;<span class="formatted-time">{{
                         timeString.endTime
                     }}</span>
-                </div>
+                </span>
             </div>
             <div class="formatted-datetime" *ngIf="timeStringMode === 'simple'">
                 {{ simpleTimeString }}
@@ -69,6 +68,7 @@
                 (timeSettingsEmitter)="applyCurrentDateRange($event)"
                 [quickSelections]="quickSelections"
                 [enableTimeChange]="enableTimeChange"
+                [maxDayRange]="maxDayRange"
                 class="w-100"
             >
             </sp-time-selector-menu>

diff --git a/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss b/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss
@@ -63,8 +63,9 @@
 }
 
 .formatted-datetime {
-    display: inline;
+    display: inline-flex;
     background: var(--color-bg-2);
     border-radius: 5px;
     padding: 5px;
+    white-space: nowrap;
 }
diff --git a/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts
@@ -60,6 +60,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     @Input()
     enableTimeChange = true;
 
+    @Input()
+    maxDayRange = 0;
+
     @Input()
     quickSelections: QuickTimeSelection[] = [];
 
@@ -75,6 +78,12 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     simpleTimeString: string = '';
     timeString: TimeString;
     timeStringMode: 'simple' | 'advanced' = 'simple';
+    dateFormat: Intl.DateTimeFormatOptions = {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+    };
 
     constructor(private timeSelectionService: TimeSelectionService) {}
 
@@ -158,12 +167,19 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
             const startDate = new Date(this.timeSettings.startTime);
             const endDate = new Date(this.timeSettings.endTime);
             this.timeString = {
-                startDate: startDate.toLocaleDateString(),
-                endDate: endDate.toLocaleDateString(),
+                startDate: this.formatDate(startDate),
+                endDate: this.formatDate(endDate),
                 startTime: startDate.toLocaleTimeString(),
                 endTime: endDate.toLocaleTimeString(),
             };
+
             this.timeStringMode = 'advanced';
         }
     }
+
+    private formatDate(date: Date): string {
+        return this.enableTimeChange
+            ? date.toLocaleDateString()
+            : date.toLocaleDateString(navigator.language, this.dateFormat);
+    }
 }
diff --git a/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts
@@ -40,13 +40,10 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     @Input() labels: TimeSelectorLabel;
 
     @Input()
-    enableTimeChange = true;
+    enableTimeChange: boolean;
 
     @Input()
-    enableMaxDayRange: boolean = true;
-
-    @Input()
-    maxDayRange = 0;
+    maxDayRange: number;
 
     @Output() timeSettingsEmitter = new EventEmitter<TimeSettings>();
 

diff --git a/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html
@@ -48,6 +48,7 @@
                     [labels]="labels"
                     (timeSettingsEmitter)="timeSettingsEmitter.emit($event)"
                     [enableTimeChange]="enableTimeChange"
+                    [maxDayRange]="maxDayRange"
                     class="w-100"
                 >
                     <ng-content> </ng-content>

diff --git a/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts
@@ -45,7 +45,10 @@ export class TimeRangeSelectorMenuComponent implements OnInit {
     labels: TimeSelectorLabel;
 
     @Input()
-    enableTimeChange = true;
+    enableTimeChange: boolean;
+
+    @Input()
+    maxDayRange: number;
 
     @Output()
     timeSettingsEmitter: EventEmitter<TimeSettings> =