From a098f72b1a3a6219a34bde99ea656e888e31f78e Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Thu, 25 Feb 2021 19:57:09 +0100 Subject: [PATCH] Start of thumbnail upload dialog --- package-lock.json | 21 ++++------ package.json | 7 ++-- .../selected-item.component.html | 5 +-- projects/common/src/fm/common.module.ts | 4 +- .../thumbnail-upload-modal.component.html | 5 +++ .../thumbnail-upload-modal.component.scss | 0 .../thumbnail-upload-modal.component.spec.ts | 25 +++++++++++ .../thumbnail-upload-modal.component.ts | 15 +++++++ .../thumbnail/thumbnail.component.html | 26 +++++++++--- .../thumbnail/thumbnail.component.scss | 28 +++++++++++++ .../thumbnail/thumbnail.component.ts | 41 ++++++++++++++++--- 11 files changed, 143 insertions(+), 34 deletions(-) create mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html create mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss create mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts create mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts diff --git a/package-lock.json b/package-lock.json index 24825d9..b9f9c48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,25 +1865,23 @@ } }, "@farmmaps/common": { - "version": "0.0.1-prerelease.530", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.530.tgz", - "integrity": "sha512-cvUKFctQvl91gE5zCJvzxhcnZ35XpletqFmxOFwj6qxLr975qs/Ia9VrzwjkqoIoXlsO9xlM/0Cn1PnPsF7nIg==", + "version": "file:dist/common", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.530", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.530.tgz", - "integrity": "sha512-LU4yzsTvja85GciySpJB5LjUD7fndEsnd2KKj0q9+IFZl9jOFfVcP+/3nImsYYmV9CK6sczNdevaSxQW+lpseQ==", + "version": "0.0.1-prerelease.540", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.540.tgz", + "integrity": "sha512-D7NQlURyrKQYbHBlaZoPN6ZOpQHq8meXmMev+a1e8e2oNRTamf21/nKXdzYDgv2d2un56gb+Iaty05y2Gnb5bw==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.530", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.530.tgz", - "integrity": "sha512-4OG3yv6vOMJZ5dLZ2e8W9P1F1qvzcYBA/zCIA+kxfS0iiOfrOIiJgDvXPhMot+swATSsWeY4Txh6ydh6KmTzlg==", + "version": "0.0.1-prerelease.540", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.540.tgz", + "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", diff --git a/package.json b/package.json index 784b731..947a9cc 100644 --- a/package.json +++ b/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-map": ">=0.0.1-prerelease.530 <0.0.1", - "@farmmaps/common-map3d": ">=0.0.1-prerelease.530 <0.0.1", + "@farmmaps/common": "file:dist/common", + "@farmmaps/common-map": ">=0.0.1-prerelease.540 <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", diff --git a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html index e52559e..c32bc37 100644 --- a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html +++ b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html @@ -1,9 +1,6 @@
- -
- -
+
diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index ba7a2bb..9f1b898 100644 --- a/projects/common/src/fm/common.module.ts +++ b/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, diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html new file mode 100644 index 0000000..804f1f8 --- /dev/null +++ b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts new file mode 100644 index 0000000..2303a0f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ThumbnailUploadModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ThumbnailUploadModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts new file mode 100644 index 0000000..037b281 --- /dev/null +++ b/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 { + } + +} diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.html b/projects/common/src/fm/components/thumbnail/thumbnail.component.html index 16a806e..0bba7fd 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.html +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.html @@ -1,6 +1,22 @@ -
- -
- +
+
+ +
+
-
\ No newline at end of file +
+ +
+

Select period

+ +
+
+ +
+
+ + +
+ \ No newline at end of file diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.scss b/projects/common/src/fm/components/thumbnail/thumbnail.component.scss index e69de29..6ce8ec0 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.scss +++ b/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; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts index 9163846..d386ba0 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts +++ b/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, public itemTypeService: ItemTypeService) { + constructor(public store: Store, 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); + } } \ No newline at end of file