From fe356441d0594adbb334198ad0899962c08cc04b Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Mon, 25 Jan 2021 20:30:13 +0100
Subject: [PATCH] Use timespan for temporal items

---
 .../selected-item-temporal.component.html     | 12 +++---
 .../selected-item-temporal.component.ts       | 38 +++++++++++++------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
index 7563cfe..d5e32f1 100644
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@@ -11,14 +11,14 @@
         <div class="card menu-card">
           <h5>Date image: {{item.dataDate | date:'shortDate'}}</h5>
           <div class="d-flex justify-content-between">
-            <div *ngIf="hasPrevious()">
-              <button type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)">
-                <i class="fal fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ previousDate() | date:'shortDate'}}
+            <div>
+              <button  *ngIf="hasPrevious()" type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)">
+                <i class="fal fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ previousDate() }}
               </button>
             </div>
-            <div *ngIf="hasNext()">
-              <button type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)">
-                {{ nextDate()| date:'shortDate' }}&nbsp;<i class="fal fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
+            <div>
+              <button  *ngIf="hasNext()" type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)">
+                {{ nextDate()}}&nbsp;<i class="fal fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
               </button>
             </div>
           </div>
diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts
index ba52853..ccc4571 100644
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts
@@ -1,8 +1,8 @@
 import { Component, Injectable } from '@angular/core';
-import { Location } from '@angular/common';
+import { Location,DatePipe } from '@angular/common';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, ItemService, FolderService,IItem } from '@farmmaps/common';
+import { commonReducers, ItemTypeService, ItemService, FolderService,IItem,TimespanService } from '@farmmaps/common';
 import { Router } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
@@ -19,7 +19,7 @@ import * as mapActions from '../../actions/map.actions';
 })
 export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService, private timespanService$:TimespanService,private datePipe$: DatePipe) {
     super(store, itemTypeService,location,router);
   }
 
@@ -32,11 +32,19 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent
     return temporalItemLayer && temporalItemLayer.nextItemLayer != null;
   }
 
-  nextDate():Date {
+  nextDate():string {
     let temporalItemLayer = this.itemLayer as  ITemporalItemLayer;
-    if(temporalItemLayer.nextItemLayer.item) 
-      return new Date(Date.parse(temporalItemLayer.nextItemLayer.item.dataDate)) ;
-    return null;
+    if(temporalItemLayer.nextItemLayer.item) {
+      if(temporalItemLayer.nextItemLayer.item.dataDate && temporalItemLayer.nextItemLayer.item.dataEndDate) {
+        let sd = new Date(Date.parse(temporalItemLayer.nextItemLayer.item.dataDate));
+        let ed = new Date(Date.parse(temporalItemLayer.nextItemLayer.item.dataEndDate));
+        return this.timespanService$.getCaption(sd,ed);
+      } else {
+        let d = new Date(Date.parse(temporalItemLayer.nextItemLayer.item.dataDate));
+        return this.datePipe$.transform(d, "shortDate");  
+      }
+    }
+    return "";
   }
 
   hasPrevious():boolean {
@@ -44,11 +52,19 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent
     return temporalItemLayer && temporalItemLayer.previousItemLayer != null;
   }
 
-  previousDate():Date {
+  previousDate():string {
     let temporalItemLayer = this.itemLayer as  ITemporalItemLayer;
-    if(temporalItemLayer.previousItemLayer.item) 
-      return new Date(Date.parse(temporalItemLayer.previousItemLayer.item.dataDate));
-    return null;
+    if(temporalItemLayer.previousItemLayer.item)  {
+      if(temporalItemLayer.previousItemLayer.item.dataDate && temporalItemLayer.previousItemLayer.item.dataEndDate) {
+        let sd = new Date(Date.parse(temporalItemLayer.previousItemLayer.item.dataDate));
+        let ed = new Date(Date.parse(temporalItemLayer.previousItemLayer.item.dataEndDate));
+        return this.timespanService$.getCaption(sd,ed);
+      } else {
+        let d = new Date(Date.parse(temporalItemLayer.previousItemLayer.item.dataDate));
+        return this.datePipe$.transform(d, "shortDate");  
+      }
+    }
+    return "";
   }
 
   handleNextTemporal(event:MouseEvent) {