From 486950977be6c0468ab79dc94f42faca28c8fc66 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 15 May 2018 16:09:01 -0400 Subject: [PATCH] Feat(#23) Add anomaly detail's management + pictures. --- .../building-anomaly-detail-pictures.html | 27 +++ .../building-anomaly-detail-pictures.scss | 19 ++ .../building-anomaly-detail-pictures.ts | 188 ++++++++++++++++++ src/components/components.module.ts | 7 +- .../inspection-building-anomaly-picture.ts | 1 + .../building-anomaly-detail.html | 9 +- .../building-anomaly-detail.module.ts | 2 + .../building-anomaly-detail.ts | 1 + .../intervention-implantation-plan.html | 11 - 9 files changed, 250 insertions(+), 15 deletions(-) create mode 100644 src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.html create mode 100644 src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.scss create mode 100644 src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.ts diff --git a/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.html b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.html new file mode 100644 index 00000000..8b2db752 --- /dev/null +++ b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.html @@ -0,0 +1,27 @@ + + + + + Photo(s) + + + + + + + + + + + + + + + + diff --git a/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.scss b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.scss new file mode 100644 index 00000000..3969ece8 --- /dev/null +++ b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.scss @@ -0,0 +1,19 @@ +building-anomaly-detail-pictures { + .block { + position: relative; + .deleteIcon { + padding-left: 4px; + padding-right: 4px; + position: absolute !important; + border: 1px solid gray; + background: white; + right: 10px; + top: 10px; + /*color: #ffffff !important; + margin-left: 80% !important;*/ + } + .deleteIcon:before { + font-size: 30px !important; + } + } +} diff --git a/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.ts b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.ts new file mode 100644 index 00000000..ef240cac --- /dev/null +++ b/src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.ts @@ -0,0 +1,188 @@ +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; +import {InspectionBuildingAnomalyPictureRepositoryProvider} from '../../providers/repositories/inspection-building-anomaly-picture-repository-provider.service'; +import {InspectionBuildingAnomalyPicture} from '../../models/inspection-building-anomaly-picture'; +import {UUID} from 'angular2-uuid'; +import {Camera, CameraOptions} from '@ionic-native/camera'; +import {WindowRefService} from '../../providers/Base/window-ref.service'; +import {Platform} from 'ionic-angular'; +import {PhotoViewer} from '@ionic-native/photo-viewer'; +import {DomSanitizer} from '@angular/platform-browser'; +import {MessageToolsProvider} from '../../providers/message-tools/message-tools'; + + +@Component({ + selector: 'building-anomaly-detail-pictures', + templateUrl: 'building-anomaly-detail-pictures.html', + providers:[ + {provide: NG_VALUE_ACCESSOR, useExisting: BuildingAnomalyDetailPicturesComponent, multi: true} + ] +}) +export class BuildingAnomalyDetailPicturesComponent implements ControlValueAccessor { + @ViewChild('filePicker') inputRef: ElementRef; + + private changed = new Array<(value: string) => void>(); + private touched = new Array<() => void>(); + private options: CameraOptions = { + quality: 100, + destinationType: this.camera.DestinationType.DATA_URL, + encodingType: this.camera.EncodingType.JPEG, + mediaType: this.camera.MediaType.PICTURE, + allowEdit: false, + saveToPhotoAlbum: false, + correctOrientation: true, + targetWidth: 680, + targetHeight: 680, + }; + + public isLoading: boolean = true; + public idBuildingAnomaly: string; + public pictures: InspectionBuildingAnomalyPicture[] = []; + public isUsingCordova: boolean = false; + + get value(): string { + return this.idBuildingAnomaly; + } + + set value(value: string) { + if (value != this.idBuildingAnomaly && value != '') { + console.log("accessor valeur", value); + this.idBuildingAnomaly = value; + this.loadPictures(); + } + else if (value == '') { + this.pictures = []; + } + } + + constructor( + private msg: MessageToolsProvider, + private camera: Camera, + private photoViewer: PhotoViewer, + private sanitizer: DomSanitizer, + private platform: Platform, + private windowRef: WindowRefService, + private repo: InspectionBuildingAnomalyPictureRepositoryProvider) { + + this.isUsingCordova = this.platform.is('cordova'); + } + + async ionViewDidLoad(){ + } + + async loadPictures(){ + this.isLoading = true; + this.pictures = await this.repo.getList(this.idBuildingAnomaly); + this.isLoading = false; + } + + touch() { + this.touched.forEach(f => f()); + } + + writeValue(value: string) { + if (value != this.idBuildingAnomaly && value != '') { + console.log("accessor valeur", value); + this.idBuildingAnomaly = value; + this.loadPictures(); + } + else if (value == '') { + this.pictures = []; + } + } + + registerOnChange(fn: (value: string) => void) { + this.changed.push(fn); + } + + registerOnTouched(fn: () => void) { + this.touched.push(fn); + } + + public addPicture(pic: string){ + let picture = new InspectionBuildingAnomalyPicture(); + picture.id = UUID.UUID(); + picture.idBuildingAnomaly = this.idBuildingAnomaly; + picture.pictureData = pic; + this.pictures.push(picture); + this.pictures.reverse(); + this.repo.save(picture); + } + + private selectPictureNative() { + let options = this.options; + options.sourceType = this.camera.PictureSourceType.PHOTOLIBRARY; + this.getPicture(options); + } + + public async onDeletePhotos(index){ + if (await this.msg.ShowMessageBox("Demande de confirmation", "Êtes-vous sur de vouloir supprimer cette photo?")){ + let picture =this.pictures[index]; + await this.repo.delete(picture.id); + this.pictures.splice(index); + } + } + + selectPicture(): void { + if (this.isUsingCordova) + this.selectPictureNative(); + else + this.popFileSelector(); + } + + takeNewPicture(): void { + let options = this.options; + options.sourceType = this.camera.PictureSourceType.CAMERA; + this.getPicture(options); + } + + onClickPicture(pic: string): void { + this.photoViewer.show('data:image/jpeg;base64,' + pic, 'Plan d\'implantation'); // this is so not working. + } + + private popFileSelector(): void { + this.inputRef.nativeElement.click(); + } + + onFileSelected(e: any): void { + const files = e.target.files; + const reader = this.windowRef.nativeClass('FileReader'); + + if (files.length) { + reader.addEventListener('load', this.onFileLoaded.bind(this)); + reader.readAsDataURL(files[0]); + } + } + + private onFileLoaded(response): void { + console.log(response); + let imageUri: string = response.target.result; + if (imageUri.indexOf(';base64,') > 0) + imageUri = imageUri.substr(imageUri.indexOf(';base64,') + 8); + this.addPicture(imageUri); + } + + private getPicture(options: CameraOptions) { + try { + this.camera.getPicture(options).then((imageData) => { + this.addPicture(imageData); + }, (err) => { + alert(err); + }); + } + catch(error) + { + alert(JSON.stringify(error)); + } + } + + public hasImageUrl(pic: string): boolean{ + return !(pic === "" || pic == null); + } + + public getImageUrl(pic: string){ + return pic === "" || pic == null + ? '' + : this.sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + pic); + } +} diff --git a/src/components/components.module.ts b/src/components/components.module.ts index f4dc9954..09fd4255 100644 --- a/src/components/components.module.ts +++ b/src/components/components.module.ts @@ -8,12 +8,14 @@ import {Camera} from '@ionic-native/camera' import {PhotoViewer} from '@ionic-native/photo-viewer'; import { IonicImageViewerModule } from 'ionic-img-viewer'; import {WindowRefService} from '../providers/Base/window-ref.service'; +import { BuildingAnomalyDetailPicturesComponent } from './building-anomaly-detail-pictures/building-anomaly-detail-pictures'; @NgModule({ declarations: [ SearchBoxComponent, SearchListComponent, - PictureViewerComponent + PictureViewerComponent, + BuildingAnomalyDetailPicturesComponent ], imports: [ FormsModule, @@ -24,7 +26,8 @@ import {WindowRefService} from '../providers/Base/window-ref.service'; exports: [ SearchBoxComponent, SearchListComponent, - PictureViewerComponent + PictureViewerComponent, + BuildingAnomalyDetailPicturesComponent ], providers: [ WindowRefService, diff --git a/src/models/inspection-building-anomaly-picture.ts b/src/models/inspection-building-anomaly-picture.ts index dcb60d39..c666019f 100644 --- a/src/models/inspection-building-anomaly-picture.ts +++ b/src/models/inspection-building-anomaly-picture.ts @@ -2,4 +2,5 @@ export class InspectionBuildingAnomalyPicture { id: string; idBuildingAnomaly: string; idPicture: string; + pictureData: string; } diff --git a/src/pages/building-anomaly-detail/building-anomaly-detail.html b/src/pages/building-anomaly-detail/building-anomaly-detail.html index 59f521b4..3fd03ff9 100644 --- a/src/pages/building-anomaly-detail/building-anomaly-detail.html +++ b/src/pages/building-anomaly-detail/building-anomaly-detail.html @@ -13,8 +13,8 @@ - - + +