Use of offset value in the UI (#5)

Added recognition of the offset value in the UI. It will be displayed if available.

Caveat: Search will not take offset into account. A new year's picture taken in Sydney the 1st of January 2019 00:15:00 GMT+11, is technically taken in 31st of December 2018 in UTC. Therefore this picture won't show of in seaches where the after: parameter is set to 1st of january 2019.

This is both correct and wrong at the same time.

UTC-wise it is correct, local time it is not correct. I guess most people would find local time most untuitive, so there is room for improvement of the search. :)

src/backend/model/messenger/EmailMessenger.ts

@@ -5,6 +5,7 @@ import {MediaDTOWithThPath, Messenger} from './Messenger';
 import {backendTexts} from '../../../common/BackendTexts';
 import {DynamicConfig} from '../../../common/entities/DynamicConfig';
 import {DefaultMessengers} from '../../../common/entities/job/JobDTO';
+import {Utils} from '../../../common/Utils';
 
 export class EmailMessenger extends Messenger<{
   emailTo: string,
@@ -69,7 +70,7 @@ export class EmailMessenger extends Messenger<{
         (media[i].metadata as PhotoMetadata).positionData?.country :
         ((media[i].metadata as PhotoMetadata).positionData?.city ?
           (media[i].metadata as PhotoMetadata).positionData?.city : '');
-      const caption = (new Date(media[i].metadata.creationDate)).getFullYear() + (location ? ', ' + location : '');
+      const caption = Utils.getFullYear(media[i].metadata.creationDate, media[i].metadata.creationDateOffset) + (location ? ', ' + location : '');
       attachments.push({
         filename: media[i].name,
         path: media[i].thumbnailPath,

src/common/Utils.ts

@@ -110,6 +110,20 @@ export class Utils {
     return d;
   }
 
+  static getUTCFullYear(d: number | Date, offset: string) {
+    if (!(d instanceof Date)) {
+      d = new Date(d);
+    }
+    return new Date(new Date(d).toISOString().substring(0,19) + (offset ? offset : '')).getUTCFullYear();
+  }
+
+  static getFullYear(d: number | Date, offset: string) {
+    if (!(d instanceof Date)) {
+      d = new Date(d);
+    }
+    return new Date(new Date(d).toISOString().substring(0,19) + (offset ? offset : '')).getFullYear();
+  }
+
   static renderDataSize(size: number): string {
     const postFixes = ['B', 'KB', 'MB', 'GB', 'TB'];
     let index = 0;

src/frontend/app/ui/duplicates/duplicates.component.html

@@ -24,7 +24,8 @@
                 {{media.metadata.fileSize | fileSize}}
               </div>
               <div class="col-3 align-self-center" [title]="media.metadata.creationDate">
-                {{media.metadata.creationDate | date}}, {{media.metadata.creationDate | date:'mediumTime'}}
+                {{ media.metadata.creationDate | date : 'longDate' : (media.metadata.creationDateOffset ? media.metadata.creationDateOffset : 'UTC') }}, 
+                {{ media.metadata.creationDate | date : (media.metadata.creationDateOffset ? 'HH:mm:ss ZZZZZ' : 'HH:mm:ss') : (media.metadata.creationDateOffset ? media.metadata.creationDateOffset : 'UTC') }}
               </div>
             </a>
           </div>

src/frontend/app/ui/gallery/filter/filter.service.ts

@@ -205,7 +205,7 @@ export class FilterService {
     const startMediaDate = new Date(floorDate(minDate));
 
     prefiltered.media.forEach(m => {
-      const key = Math.floor((floorDate(m.metadata.creationDate) - startMediaDate.getTime()) / 1000 / usedDiv);
+      const key = Math.floor((floorDate(m.metadata.creationDate) - startMediaDate.getTime()) / 1000 / usedDiv); //TODO
 
       const getDate = (index: number) => {
         let d: Date;

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts

@@ -496,7 +496,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
       case LightBoxTitleTexts.persons:
         return m.metadata.faces?.map(f => f.name)?.join(', ');
       case LightBoxTitleTexts.date:
-        return this.datePipe.transform(m.metadata.creationDate, 'longDate');
+        return this.datePipe.transform(m.metadata.creationDate, 'longDate', m.metadata.creationDateOffset);
       case LightBoxTitleTexts.location:
         return (
           m.metadata.positionData?.city ||

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

@@ -54,10 +54,10 @@
     </div>
     <div class="col-11">
       <div class="details-main">
-        {{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate') : 'UTC' }}
+        {{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate') : (media.metadata.creationDateOffset ? media.metadata.creationDateOffset : 'UTC') }}
       </div>
       <div class="details-sub  text-secondary row">
-        <div class="col-12">{{ media.metadata.creationDate | date : 'EEEE, HH:mm:ss' : 'UTC' }}</div>
+        <div class="col-12">{{ media.metadata.creationDate | date : (media.metadata.creationDateOffset ? 'EEEE, HH:mm:ss ZZZZZ' : 'EEEE, HH:mm:ss') : (media.metadata.creationDateOffset ? media.metadata.creationDateOffset : 'UTC') }}</div>
       </div>
     </div>
   </div>

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts

@@ -148,7 +148,7 @@ export class InfoPanelLightboxComponent implements OnInit, OnChanges {
   isThisYear(): boolean {
     return (
         new Date().getFullYear() ===
-        new Date(this.media.metadata.creationDate).getUTCFullYear()
+        Utils.getUTCFullYear(this.media.metadata.creationDate, this.media.metadata.creationDateOffset)
     );
   }
 

src/frontend/app/ui/gallery/navigator/sorting.service.ts

@@ -184,7 +184,7 @@ export class GallerySortingService {
   private getGroupByNameFn(grouping: GroupingMethod) {
     switch (grouping.method) {
       case SortByTypes.Date:
-        return (m: MediaDTO) => this.datePipe.transform(m.metadata.creationDate, 'longDate', 'UTC');
+        return (m: MediaDTO) => this.datePipe.transform(m.metadata.creationDate, 'longDate', m.metadata.creationDateOffset);
 
       case SortByTypes.Name:
         return (m: MediaDTO) => m.name.at(0).toUpperCase();