-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(#23) Add anomaly detail's management + pictures.
- Loading branch information
1 parent
58a9b78
commit 4869509
Showing
9 changed files
with
250 additions
and
15 deletions.
There are no files selected for viewing
27 changes: 27 additions & 0 deletions
27
src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<ion-spinner [style.display]="isLoading ? 'block' : 'none'" item-start></ion-spinner> | ||
|
||
<ion-list> | ||
<ion-item-divider> | ||
Photo(s) | ||
<button item-end ion-button icon-start (click)="selectPicture()"> | ||
<ion-icon class="footer-button-camera" name="image"></ion-icon> | ||
Choisir... | ||
</button> | ||
<button item-end ion-button icon-start (click)="takeNewPicture()" *ngIf="isUsingCordova"> | ||
<ion-icon class="footer-button-camera" name="camera"></ion-icon> | ||
Nouvelle... | ||
</button> | ||
</ion-item-divider> | ||
<ion-item> | ||
<ion-slides *ngIf="pictures.length > 0" pager [loop]="true"> | ||
<ion-slide *ngFor="let picture of pictures; let id = index;"> | ||
<ion-card class="block"> | ||
<ion-icon name="trash" class="deleteIcon" (click)="onDeletePhotos(id)"></ion-icon> | ||
<img class="selected-picture" [src]="getImageUrl(picture.pictureData)" (click)="onClickPicture(picture.pictureData)" *ngIf="hasImageUrl(picture.pictureData)"> | ||
</ion-card> | ||
</ion-slide> | ||
</ion-slides> | ||
</ion-item> | ||
</ion-list> | ||
<input type="file" id="fileElem" #filePicker accept="image/*" style="display:none" (change)="onFileSelected($event);" /> | ||
|
19 changes: 19 additions & 0 deletions
19
src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
} |
188 changes: 188 additions & 0 deletions
188
src/components/building-anomaly-detail-pictures/building-anomaly-detail-pictures.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
src/pages/building-anomaly-detail/building-anomaly-detail.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters