Use timespan for temporal items
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details

2022.01
Willem Dantuma 2021-01-25 20:30:13 +01:00
parent b17bce1cd2
commit fe356441d0
2 changed files with 33 additions and 17 deletions

View File

@ -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>

View File

@ -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) {