Basic working version

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

@@ -0,0 +1,30 @@
+<div class="spacer"></div>
+<div *ngIf="item;let item">
+  <div class="card border-0">
+    <div class="card-body">
+      <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
+      <div class="card menu-card">
+        <h1>{{item.name}}</h1>
+      </div>
+      <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
+          <div *ngIf="layers.length>1">
+            <select (change)="onLayerChanged($event.target.value)">
+              <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
+            </select>
+          </div>
+          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+        </div>
+      </div>
+      <div class="card menu-card">
+        <ul class="p-0 mt-2">
+          <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <li *ngIf="hasNext()"><a href="#" (click)="handleNextTemporal($event)" class="mt-1 mr-1" i18n>Next</a></li>
+          <li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss

@@ -0,0 +1,41 @@
+@import "~bootstrap/scss/bootstrap.scss";
+
+.big-icon {
+  width: 100%;
+  color: white;
+  font-size: 9rem;
+  padding: 3rem;
+  text-align: center;
+}
+
+.card-title {
+  font-size: 1rem;
+}
+
+ul {
+  list-style:none;
+}
+
+li {
+  margin-top:1rem;
+}
+
+.spacer {
+  display:none;
+  height:4rem;
+}
+
+@media screen and (min-width:44rem) {
+  .spacer {
+    display:block;
+  }
+}
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}
+

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts

@@ -0,0 +1,51 @@
+import { Component, Injectable } from '@angular/core';
+import { Location } from '@angular/common';
+import { Store } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, ItemService, FolderService } from '@farmmaps/common';
+import { Router } from '@angular/router';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { ITemporalItemLayer} from '../../models/item.layer';
+import * as mapActions from '../../actions/map.actions';
+
+
+@ForItemType("vnd.farmmaps.itemtype.temporal")
+@Injectable()
+@Component({
+  selector: 'fm-map-selected-item-temporal',
+  templateUrl: './selected-item-temporal.component.html',
+  styleUrls: ['./selected-item-temporal.component.scss']
+})
+export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent {
+
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+    super(store, itemTypeService,location,router);
+  }
+  public selectedLayer: number = 0;
+
+  onLayerChanged(layerIndex: number) {
+    this.selectedLayer = layerIndex;
+    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
+  }
+
+  hasNext():boolean {
+    let temporalItemLayer = this.itemLayer as  ITemporalItemLayer;
+    return temporalItemLayer && temporalItemLayer.nextItemLayer != null;
+  }
+
+  hasPrevious():boolean {
+    let temporalItemLayer = this.itemLayer as  ITemporalItemLayer;
+    return temporalItemLayer && temporalItemLayer.previousItemLayer != null;
+  }
+
+  handleNextTemporal(event:MouseEvent) {
+    this.store.dispatch(new mapActions.NextTemporal());
+    event.preventDefault();    
+  }
+
+  handlePreviousTemporal(event:MouseEvent) {
+    this.store.dispatch(new mapActions.PreviousTemporal());
+    event.preventDefault();
+  }
+}