FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Start of thumbnail upload dialog

Browse Source
This commit is contained in:
Willem Dantuma 2021-02-25 19:57:09 +01:00
parent b537239c96
commit a098f72b1a
11 changed files with 143 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

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

7
package.json
View File

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

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

@ -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)" />
<div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
</div>
<fm-thumbnail [item]="item" [edit]="true"></fm-thumbnail>
</div>
<div class="card">
<div class="card-body">

4
projects/common/src/fm/common.module.ts
View File

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

5
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html Normal file
View File

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

0
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss Normal file
View File

25
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts Normal file
View File

@ -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();
});
});

15
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts Normal file
View File

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

26
projects/common/src/fm/components/thumbnail/thumbnail.component.html
View File

@ -1,6 +1,22 @@
<div class="thumbnail">
<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)">
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
<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="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-outline-primary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
</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>

28
projects/common/src/fm/components/thumbnail/thumbnail.component.scss
View File

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

41
projects/common/src/fm/components/thumbnail/thumbnail.component.ts
View File

@ -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);
}
}