From a098f72b1a3a6219a34bde99ea656e888e31f78e Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Thu, 25 Feb 2021 19:57:09 +0100 Subject: [PATCH 1/6] 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 From 7768387f58853537aa16847502d8a8703bee67f7 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 1 Mar 2021 16:56:48 +0100 Subject: [PATCH 2/6] Basic edit-image-modal --- package-lock.json | 34 +++++++++------ package.json | 7 +-- projects/common/package.json | 3 +- projects/common/src/fm/common.module.ts | 9 ++-- .../edit-image-modal.component.html | 29 +++++++++++++ .../edit-image-modal.component.scss | 4 ++ .../edit-image-modal.component.spec.ts | 25 +++++++++++ .../edit-image-modal.component.ts | 43 +++++++++++++++++++ .../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 | 19 ++------ .../thumbnail/thumbnail.component.ts | 9 ++-- 14 files changed, 142 insertions(+), 85 deletions(-) create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts delete 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 cd019a5..4033f1f 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.542", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.542.tgz", + "integrity": "sha512-UTz3FnIKEJ9PGgGTGy8UuWqY+ZBY6cW4oIL9VgHrUg9yXtfRt2zT9kaNDTeSUVOiLWcocGbJZX7zt5gjM/50PQ==", "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.542", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.542.tgz", + "integrity": "sha512-igy1g7ritVE2+hgc6jIO4+OriCeV6k2MubQcoszWWG4F6RZYuMgKciIWSdlDZ8yvZsA8WMdtxlT5vJ3wgvmesA==", "requires": { "tslib": "^2.0.0" } @@ -8604,10 +8602,20 @@ "ts-md5": "^1.2.4" } }, - "ngx-bootstrap": { - "version": "5.6.2", - "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.2.tgz", - "integrity": "sha512-6YHXtdXkGH3w0NQoaUgNYAcrj064Lv5RTO284ha/hvpNTrh55yQz2cVh0VvwBk3MjyY2tdmLH4SuCJDszYdYiw==" + "ngx-image-cropper": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-3.3.5.tgz", + "integrity": "sha512-0yRVKG5XAbVo3rOaj/iFDlekGsxEqXKU9iXFbjyvHvRT2DFs+AjwtyvINsHCWw+4ed9yA4Y+wLIUNqzA0bfxLw==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } }, "ngx-openlayers": { "version": "1.0.0-next.17", diff --git a/package.json b/package.json index f698582..ff2e82a 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,10 @@ "bootstrap": "^4.4.1", "cesium": "^1.77.0", "core-js": "^2.6.11", + "moment": "^2.27.0", "ngrx-store-localstorage": "^10.0", + "ngx-avatar": "^4.0.0", + "ngx-image-cropper": "^3.3.5", "ngx-openlayers": "1.0.0-next.17", "ngx-uploadx": "^3.5.1", "ol": "6.5.0", @@ -40,9 +43,7 @@ "rxjs": "^6.5.4", "tassign": "^1.0.0", "tslib": "^2.0.0", - "zone.js": "~0.10.2", - "moment": "^2.27.0", - "ngx-avatar": "^4.0.0" + "zone.js": "~0.10.2" }, "devDependencies": { "@angular-builders/custom-webpack": "~10.0.1", diff --git a/projects/common/package.json b/projects/common/package.json index a0e9f57..10f7777 100644 --- a/projects/common/package.json +++ b/projects/common/package.json @@ -18,6 +18,7 @@ "ngx-uploadx": "^3.3.4", "angular-oauth2-oidc": "^10.0.3", "moment": "^2.27.0", - "ngx-avatar": "^4.0.0" + "ngx-avatar": "^4.0.0", + "ngx-image-cropper": "^3.3.5" } } diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 24eaec2..3097b6d 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -60,9 +60,11 @@ 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'; +import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component'; import { AvatarComponent } from './components/avatar/avatar.component'; import { AvatarModule } from 'ngx-avatar'; +import { ImageCropperModule } from 'ngx-image-cropper'; + export { SafePipe, @@ -120,7 +122,8 @@ export { NgbModule, FormsModule, UploadxModule, - AvatarModule + AvatarModule, + ImageCropperModule ], declarations: [ AppComponent, @@ -144,7 +147,7 @@ export { HelpMenuComponent, BackButtonComponent, ThumbnailComponent, - ThumbnailUploadModalComponent, + EditImageModalComponent, AvatarComponent ], exports: [ diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html new file mode 100644 index 0000000..7f6b828 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html @@ -0,0 +1,29 @@ + +
+

Edit image

+ +
+
+
+ +
+ + Select image +
+
+ + +
+ diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss new file mode 100644 index 0000000..66b7237 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss @@ -0,0 +1,4 @@ +.cropper { + position: relative; + height: calc(60vh); +} \ No newline at end of file diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts new file mode 100644 index 0000000..7395ec0 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditImageModalComponent } from './edit-image-modal.component'; + +describe('EditImageModalComponent', () => { + let component: EditImageModalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditImageModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditImageModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts new file mode 100644 index 0000000..fbbb878 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; +import {NgbModal} from "@ng-bootstrap/ng-bootstrap" +import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper'; + +@Component({ + selector: 'fm-edit-image-modal', + templateUrl: './edit-image-modal.component.html', + styleUrls: ['./edit-image-modal.component.scss'] +}) +export class EditImageModalComponent implements OnInit { + + @ViewChild('upload_modal') modal:ElementRef; + + constructor(private modalService: NgbModal) { } + + ngOnInit(): void { + } + + open(endpoint:string,aspectRatio:number) { + this.aspectRatio= aspectRatio; + this.modalService.open(this.modal,{ size: 'lg' }); + } + + aspectRatio:number = 4/3; + + imageChangedEvent: any = ''; + croppedImage: any = ''; + + fileChangeEvent(event: any): void { + this.imageChangedEvent = event; + } + imageCropped(event: ImageCroppedEvent) { + this.croppedImage = event.base64; + } + imageLoaded(image: LoadedImage) { + } + cropperReady() { + // cropper ready + } + loadImageFailed() { + // show message + } +} 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 deleted file mode 100644 index 804f1f8..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
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 deleted file mode 100644 index e69de29..0000000 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 deleted file mode 100644 index 2303a0f..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 037b281..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -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 0bba7fd..466182e 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.html +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.html @@ -2,21 +2,8 @@
-
+
- -
-

Select period

- -
-
- -
-
- - -
- \ 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 d386ba0..bf80e2a 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts @@ -1,8 +1,9 @@ import { Component,Input ,ViewChild,ElementRef} from '@angular/core'; import { Store } from '@ngrx/store'; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap" + import { IListItem } from '../../models/list.item'; import { commonReducers,ItemTypeService } from '../../../public-api' +import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component'; @Component({ selector: 'fm-thumbnail', @@ -15,9 +16,9 @@ import { commonReducers,ItemTypeService } from '../../../public-api' @Input() public item: IListItem; @Input() public edit: boolean = false; @ViewChild('thumbnail') el:ElementRef; - @ViewChild('thumbnail_upload') modal:ElementRef; + @ViewChild('modal') modal:EditImageModalComponent; - constructor(public store: Store, public itemTypeService: ItemTypeService,private modalService: NgbModal) { + constructor(public store: Store, public itemTypeService: ItemTypeService) { } getThumbnailUrl(item:IListItem):string { @@ -46,6 +47,6 @@ import { commonReducers,ItemTypeService } from '../../../public-api' } onEditClick() { - this.modalService.open(this.modal); + this.modal.open(this.item.url+"/thumbnail",4/3); } } \ No newline at end of file From 01488ae2e01ca2bf0c8ff17817b1f2c98d60baaa Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 1 Mar 2021 17:01:57 +0100 Subject: [PATCH 3/6] Remove background color --- .../common/src/fm/components/user-menu/user-menu.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss index 481addf..0b0f03c 100644 --- a/projects/common/src/fm/components/user-menu/user-menu.component.scss +++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss @@ -1,5 +1,4 @@ .menu-button { - background-color: purple; display: inline-block; width: 2.5em; height: 2.5em; From 47f3238edd1470897d5e3cbffc2a340ba9baf5d1 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 1 Mar 2021 17:25:40 +0100 Subject: [PATCH 4/6] Add no-image placeholder --- .../edit-image-modal/edit-image-modal.component.html | 8 ++++++-- .../edit-image-modal/edit-image-modal.component.scss | 9 +++++++++ .../edit-image-modal/edit-image-modal.component.ts | 3 ++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html index 7f6b828..4e8be55 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html @@ -5,8 +5,12 @@
-
+
+
+ +
No image selected
+
Select image
- +
diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss index 66b7237..be7e1fd 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss @@ -1,4 +1,13 @@ .cropper { position: relative; height: calc(60vh); +} + +.no-image { + text-align: center; +} + +.no-image i { + font-size: calc(50vh); + color: gray; } \ No newline at end of file diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts index fbbb878..8591dde 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts @@ -21,8 +21,8 @@ export class EditImageModalComponent implements OnInit { this.modalService.open(this.modal,{ size: 'lg' }); } + isImageLoaded:boolean = false; aspectRatio:number = 4/3; - imageChangedEvent: any = ''; croppedImage: any = ''; @@ -33,6 +33,7 @@ export class EditImageModalComponent implements OnInit { this.croppedImage = event.base64; } imageLoaded(image: LoadedImage) { + this.isImageLoaded=true; } cropperReady() { // cropper ready From 2f1c5210ea8a44421da7add4d6d511ac8573cfae Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 1 Mar 2021 22:03:18 +0100 Subject: [PATCH 5/6] Save image --- .../common/src/fm/common-service.module.ts | 2 + .../edit-image-modal.component.html | 5 ++- .../edit-image-modal.component.ts | 32 +++++++++++--- .../thumbnail/thumbnail.component.html | 2 +- .../thumbnail/thumbnail.component.ts | 12 +++-- .../common/src/fm/services/image.service.ts | 44 +++++++++++++++++++ src/configuration.json | 4 +- 7 files changed, 86 insertions(+), 15 deletions(-) create mode 100644 projects/common/src/fm/services/image.service.ts diff --git a/projects/common/src/fm/common-service.module.ts b/projects/common/src/fm/common-service.module.ts index a5e6ebd..8e8bddf 100644 --- a/projects/common/src/fm/common-service.module.ts +++ b/projects/common/src/fm/common-service.module.ts @@ -16,6 +16,7 @@ import { ItemService } from './services/item.service'; import { EventService } from './services/event.service'; import { TypeaheadService } from './services/typeahead.service'; import { UserService } from './services/user.service'; +import { ImageService } from './services/image.service'; import { WeatherService} from './services/weather.service'; import { AppConfig } from './shared/app.config'; import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor"; @@ -42,6 +43,7 @@ export { EventService, TypeaheadService, UserService, + ImageService, WeatherService, AppConfig, AccessTokenInterceptor, diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html index 4e8be55..413e5d7 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html @@ -16,18 +16,19 @@ [maintainAspectRatio]="true" format="jpeg" [aspectRatio]="aspectRatio" - [autoCrop]="false" + [autoCrop]="true" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded($event)" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" + [imageURL]="imageUrl" >
Select image
- +
diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts index 8591dde..4f9c44c 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; +import { Component, OnInit,ViewChild,ElementRef,EventEmitter, Output } from '@angular/core'; +import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http"; import {NgbModal} from "@ng-bootstrap/ng-bootstrap" import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper'; +import {ImageService } from '../../services/image.service'; @Component({ selector: 'fm-edit-image-modal', @@ -9,23 +11,28 @@ import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper'; }) export class EditImageModalComponent implements OnInit { + @Output() changed = new EventEmitter(); @ViewChild('upload_modal') modal:ElementRef; - constructor(private modalService: NgbModal) { } + constructor(private modalService: NgbModal,public imageService:ImageService) { } + + isImageLoaded:boolean = false; + aspectRatio:number = 4/3; + imageChangedEvent: any = ''; + croppedImage: string = ''; + endpointUrl:string = null; + imageUrl:string = null; ngOnInit(): void { } open(endpoint:string,aspectRatio:number) { + this.endpointUrl = endpoint; + this.imageUrl = endpoint; this.aspectRatio= aspectRatio; this.modalService.open(this.modal,{ size: 'lg' }); } - isImageLoaded:boolean = false; - aspectRatio:number = 4/3; - imageChangedEvent: any = ''; - croppedImage: any = ''; - fileChangeEvent(event: any): void { this.imageChangedEvent = event; } @@ -41,4 +48,15 @@ export class EditImageModalComponent implements OnInit { loadImageFailed() { // show message } + + save() { + if(this.croppedImage) { + + var body = this.croppedImage.substr(23); + this.imageService.putImage(this.endpointUrl,this.imageService.b64toBlob(body,"image/jpeg")).subscribe(() => { + this.changed.emit({}); + }); + (this.modal as any).close('Save click'); + } + } } diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.html b/projects/common/src/fm/components/thumbnail/thumbnail.component.html index 466182e..a5a560a 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.html +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.html @@ -6,4 +6,4 @@
- + diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts index bf80e2a..4caa5cc 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts @@ -4,6 +4,7 @@ import { Store } from '@ngrx/store'; import { IListItem } from '../../models/list.item'; import { commonReducers,ItemTypeService } from '../../../public-api' import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component'; +import { AppConfig } from "../../shared/app.config"; @Component({ selector: 'fm-thumbnail', @@ -18,11 +19,11 @@ import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.com @ViewChild('thumbnail') el:ElementRef; @ViewChild('modal') modal:EditImageModalComponent; - constructor(public store: Store, public itemTypeService: ItemTypeService) { + constructor(public store: Store, public itemTypeService: ItemTypeService,public appConfig: AppConfig,) { } getThumbnailUrl(item:IListItem):string { - return item.url+'/thumbnail?v=' + Date.parse(item.updated); + return this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated); } getFontSize():string { @@ -47,6 +48,11 @@ import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.com } onEditClick() { - this.modal.open(this.item.url+"/thumbnail",4/3); + var endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`; + this.modal.open(endpoint,4/3); + } + + onChanged() { + console.log("changed"); } } \ No newline at end of file diff --git a/projects/common/src/fm/services/image.service.ts b/projects/common/src/fm/services/image.service.ts new file mode 100644 index 0000000..24b7a96 --- /dev/null +++ b/projects/common/src/fm/services/image.service.ts @@ -0,0 +1,44 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { IUser } from '../models/user'; +import { HttpClient,HttpHeaders } from "@angular/common/http"; +import { AppConfig } from "../shared/app.config"; + +@Injectable({ + providedIn: 'root', +}) +export class ImageService { + constructor(public httpClient: HttpClient, public appConfig: AppConfig) { + } + + ApiEndpoint() { + return this.appConfig.getConfig("apiEndPoint"); + } + + putImage(endpoint:string,blob:Blob) { + const formData = new FormData(); + formData.append('file', blob,blob.type); + return this.httpClient.put(endpoint,formData); + } + + b64toBlob(b64Data:string, contentType?:string):Blob { + const sliceSize = 512; + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; + } +} diff --git a/src/configuration.json b/src/configuration.json index 61c0dff..c38ec06 100644 --- a/src/configuration.json +++ b/src/configuration.json @@ -1,9 +1,9 @@ { "issuer": "https://accounts.test.farmmaps.eu", "clientId": "farmmapsdev", - "audience": "https://test.farmmaps.eu", + "audience": "http://localhost:8082", "requireHttps": true, - "apiEndPoint": "https://test.farmmaps.eu", + "apiEndPoint": "http://localhost:8082", "grantType":"code" } \ No newline at end of file From cabdeaa8757820bae388a899b39e1bf1705aec1c Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 2 Mar 2021 08:09:42 +0100 Subject: [PATCH 6/6] Reload image on change --- package-lock.json | 16 +++++++++------- package.json | 6 +++--- .../selected-item/selected-item.component.html | 2 +- .../edit-image-modal.component.ts | 2 +- .../components/thumbnail/thumbnail.component.ts | 9 ++++++--- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4033f1f..090ffc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,23 +1865,25 @@ } }, "@farmmaps/common": { - "version": "file:dist/common", + "version": "0.0.1-prerelease.548", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.548.tgz", + "integrity": "sha512-gI+5kwpdimDkJUqU51PsyfZ0My5QRrEtwHGpCivd4kHxBZJ053cz6vHFnH1HquxesIXBVmDxjyeYGCrxhXVIOA==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.542", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.542.tgz", - "integrity": "sha512-UTz3FnIKEJ9PGgGTGy8UuWqY+ZBY6cW4oIL9VgHrUg9yXtfRt2zT9kaNDTeSUVOiLWcocGbJZX7zt5gjM/50PQ==", + "version": "0.0.1-prerelease.548", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.548.tgz", + "integrity": "sha512-rrlYUZvq4r1ANlbinucdasy5iRidOt8DI9V7ra4pKcgZqlsD5hteeosX45DnDlbSvcNzTtY3A0E28e4WXd25jA==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.542", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.542.tgz", - "integrity": "sha512-igy1g7ritVE2+hgc6jIO4+OriCeV6k2MubQcoszWWG4F6RZYuMgKciIWSdlDZ8yvZsA8WMdtxlT5vJ3wgvmesA==", + "version": "0.0.1-prerelease.548", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.548.tgz", + "integrity": "sha512-l3XQMSclt6x0fIjKw4K9j1IAr+L+0alHLd/9p80jfCkhB0qo1jZf/TorA636PSYB9NIBioiXOKMDVqTuPi+s/w==", "requires": { "tslib": "^2.0.0" } diff --git a/package.json b/package.json index ff2e82a..1ad2d5b 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": "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", + "@farmmaps/common": ">=0.0.1-prerelease.548 <0.0.1", + "@farmmaps/common-map": ">=0.0.1-prerelease.548 <0.0.1", + "@farmmaps/common-map3d": ">=0.0.1-prerelease.548 <0.0.1", "@microsoft/signalr": "^3.1.3", "@ng-bootstrap/ng-bootstrap": "^7.0", "@ngrx/effects": "^10.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 c32bc37..025f82f 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,6 +1,6 @@
- +
diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts index 4f9c44c..3b8e7fb 100644 --- a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts @@ -56,7 +56,7 @@ export class EditImageModalComponent implements OnInit { this.imageService.putImage(this.endpointUrl,this.imageService.b64toBlob(body,"image/jpeg")).subscribe(() => { this.changed.emit({}); }); - (this.modal as any).close('Save click'); + this,this.modalService.dismissAll("Save"); } } } diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts index 4caa5cc..075be8e 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts @@ -1,4 +1,4 @@ -import { Component,Input ,ViewChild,ElementRef} from '@angular/core'; +import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef} from '@angular/core'; import { Store } from '@ngrx/store'; import { IListItem } from '../../models/list.item'; @@ -19,7 +19,7 @@ import { AppConfig } from "../../shared/app.config"; @ViewChild('thumbnail') el:ElementRef; @ViewChild('modal') modal:EditImageModalComponent; - constructor(public store: Store, public itemTypeService: ItemTypeService,public appConfig: AppConfig,) { + constructor(public store: Store, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef) { } getThumbnailUrl(item:IListItem):string { @@ -53,6 +53,9 @@ import { AppConfig } from "../../shared/app.config"; } onChanged() { - console.log("changed"); + if(this.item) { + this.item.updated = new Date(new Date().getTime()).toISOString(); + this.changeDetector.detectChanges(); + } } } \ No newline at end of file