Start of thumbnail upload dialog

package-lock.json

@@ -1865,25 +1865,23 @@
       }
     },
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.530",
+      "version": "file:dist/common",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.530.tgz",
-      "integrity": "sha512-cvUKFctQvl91gE5zCJvzxhcnZ35XpletqFmxOFwj6qxLr975qs/Ia9VrzwjkqoIoXlsO9xlM/0Cn1PnPsF7nIg==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@farmmaps/common-map": {
-      "version": "0.0.1-prerelease.530",
+      "version": "0.0.1-prerelease.540",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.530.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.540.tgz",
-      "integrity": "sha512-LU4yzsTvja85GciySpJB5LjUD7fndEsnd2KKj0q9+IFZl9jOFfVcP+/3nImsYYmV9CK6sczNdevaSxQW+lpseQ==",
+      "integrity": "sha512-D7NQlURyrKQYbHBlaZoPN6ZOpQHq8meXmMev+a1e8e2oNRTamf21/nKXdzYDgv2d2un56gb+Iaty05y2Gnb5bw==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@farmmaps/common-map3d": {
-      "version": "0.0.1-prerelease.530",
+      "version": "0.0.1-prerelease.540",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.530.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.540.tgz",
-      "integrity": "sha512-4OG3yv6vOMJZ5dLZ2e8W9P1F1qvzcYBA/zCIA+kxfS0iiOfrOIiJgDvXPhMot+swATSsWeY4Txh6ydh6KmTzlg==",
+      "integrity": "sha512-RQXWh2sDQBMJewHVOYEahRshRnpGLBELyaztsR90s6I/dUgCVO4lUjLh1g8RBPFmE4jegnHl2Bn13168akuJZw==",
       "requires": {
         "tslib": "^2.0.0"
       }
@@ -8590,11 +8588,6 @@
         "tslib": "^2.0.0"
       }
     },
-    "ngx-bootstrap": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.2.tgz",
-      "integrity": "sha512-6YHXtdXkGH3w0NQoaUgNYAcrj064Lv5RTO284ha/hvpNTrh55yQz2cVh0VvwBk3MjyY2tdmLH4SuCJDszYdYiw=="
-    },
     "ngx-openlayers": {
       "version": "1.0.0-next.17",
       "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.17.tgz",

package.json

@@ -19,9 +19,9 @@
     "@angular/platform-browser": "~10.2.4",
     "@angular/platform-browser-dynamic": "~10.2.4",
     "@angular/router": "~10.2.4",
-    "@farmmaps/common": ">=0.0.1-prerelease.530 <0.0.1",
+    "@farmmaps/common": "file:dist/common",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.530 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.540 <0.0.1",
-    "@farmmaps/common-map3d": ">=0.0.1-prerelease.530 <0.0.1",
+    "@farmmaps/common-map3d": ">=0.0.1-prerelease.540 <0.0.1",
     "@microsoft/signalr": "^3.1.3",
     "@ng-bootstrap/ng-bootstrap": "^7.0",
     "@ngrx/effects": "^10.0",
@@ -32,7 +32,6 @@
     "cesium": "^1.77.0",
     "core-js": "^2.6.11",
     "ngrx-store-localstorage": "^10.0",
-    "ngx-bootstrap": "^5.6.1",
     "ngx-openlayers": "1.0.0-next.17",
     "ngx-uploadx": "^3.5.1",
     "ol": "6.5.0",

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

@@ -1,9 +1,6 @@
 <div *ngIf="item;let item">
   <div class="card border-0">
-    <img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
+    <fm-thumbnail [item]="item" [edit]="true"></fm-thumbnail>
-    <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
-      <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
-    </div>
   </div>
   <div class="card">
     <div class="card-body">

projects/common/src/fm/common.module.ts

@@ -60,6 +60,7 @@ import { AppMenuComponent } from './components/app-menu/app-menu.component';
 import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component';
 import { HelpMenuComponent} from './components/help-menu/help-menu.component';
 import { BackButtonComponent } from './components/back-button/back-button.component';
+import { ThumbnailUploadModalComponent } from './components/thumbnail-upload-modal/thumbnail-upload-modal.component';
 
 export {
   SafePipe,
@@ -138,7 +139,8 @@ export {
     NotificationMenuComponent,
     HelpMenuComponent,
     BackButtonComponent,
-    ThumbnailComponent
+    ThumbnailComponent,
+    ThumbnailUploadModalComponent
   ],
   exports: [
     NgbModule,

projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html

@@ -0,0 +1,5 @@
+<div>
+  
+   
+  
+  </div>

projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThumbnailUploadModalComponent } from './thumbnail-upload-modal.component';
+
+describe('ThumbnailUploadModalComponent', () => {
+  let component: ThumbnailUploadModalComponent;
+  let fixture: ComponentFixture<ThumbnailUploadModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ThumbnailUploadModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThumbnailUploadModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fm-thumbnail-upload-modal',
+  templateUrl: './thumbnail-upload-modal.component.html',
+  styleUrls: ['./thumbnail-upload-modal.component.scss']
+})
+export class ThumbnailUploadModalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/common/src/fm/components/thumbnail/thumbnail.component.html

@@ -1,6 +1,22 @@
-<div class="thumbnail">
+<div #thumbnail class="thumbnail" [style.background-color]="itemTypeService.getColor(item.itemType)" >
+    <div class="content">
         <img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
-    <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
+        <div *ngIf="!item.thumbnail" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
-      <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
+        <div *ngIf="canEdit()" class="edit btn btn-outline-primary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
     </div>
 </div>
+<ng-template #thumbnail_upload let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title" i18n>Select period</h4>
+        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        
+      </div>
+      <div class="modal-footer">
+        <!-- <button type="submit" class="btn btn-primary" (click)="handleSelect($event)" i18n>Select</button> -->
+        <button type="button" class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonClose">Close</button>
+      </div> 
+</ng-template>

projects/common/src/fm/components/thumbnail/thumbnail.component.scss

@@ -0,0 +1,28 @@
+.thumbnail {
+    width: 100%;
+    position: relative;
+    padding-top: 75%;    
+}
+
+.content { 
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+}
+
+.large-icon i {
+    color: white;
+}
+
+.edit {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    line-height: 2.5rem;
+}

projects/common/src/fm/components/thumbnail/thumbnail.component.ts

@@ -1,6 +1,7 @@
-import { Component,Input } from '@angular/core';
+import { Component,Input ,ViewChild,ElementRef} from '@angular/core';
 import { Store } from '@ngrx/store';
-import { IItem } from '../../models/item';
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
+import { IListItem  } from '../../models/list.item';
 import { commonReducers,ItemTypeService } from '../../../public-api'
 
 @Component({
@@ -11,12 +12,40 @@ import { commonReducers,ItemTypeService } from '../../../public-api'
   
   
   export class ThumbnailComponent {
-    @Input() public item: IItem;
+    @Input() public item: IListItem;
+    @Input() public edit: boolean = false;
+    @ViewChild('thumbnail') el:ElementRef;
+    @ViewChild('thumbnail_upload') modal:ElementRef;
 
-    constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService) {
+    constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,private modalService: NgbModal) {
     }
 
-    getThumbnailUrl(item:IItem):string {
+    getThumbnailUrl(item:IListItem):string {
         return item.url+'/thumbnail?v=' + Date.parse(item.updated);
     }
+
+    getFontSize():string {        
+        if(this.el) {
+            var h = this.el.nativeElement.offsetHeight - (this.el.nativeElement.offsetHeight / 5 )
+            return  h + "px";
+        } else {
+            return "1em";
+        }
+    }
+
+    getLineHeight():string {
+        if(this.el) {
+            return  this.el.nativeElement.offsetHeight + "px";
+        } else {
+            return "1em";
+        }
+    }
+
+    canEdit():boolean {
+        return this.edit && this.item != null;
+    }
+
+    onEditClick() {
+       this.modalService.open(this.modal);
+    }
   }