Feat(#23) Add anomaly detail's management + pictures.

CAUCA-9-1-1 · May 15, 2018 · 3e17de5 · 3e17de5
1 parent 65f0acb
commit 3e17de5
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 15 deletions.
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
@@ -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);" />
+
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -13,8 +13,8 @@
 
 
 
-<ion-content>
-  <ion-list [formGroup]="form">
+<ion-content [formGroup]="form">
+  <ion-list>
 
     <button ion-item (click)="onSelectAnomaly()">
       <ion-label item-start fixed>Thème</ion-label>
@@ -29,6 +29,11 @@
     </ion-item-group>
 
   </ion-list>
+
+  <building-anomaly-detail-pictures formControlName="id">
+    Loading...
+  </building-anomaly-detail-pictures>
+
 </ion-content>
 
 

diff --git a/src/pages/building-anomaly-detail/building-anomaly-detail.module.ts b/src/pages/building-anomaly-detail/building-anomaly-detail.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { BuildingAnomalyDetailPage } from './building-anomaly-detail';
+import {ComponentsModule} from '../../components/components.module';
 
 @NgModule({
   declarations: [
     BuildingAnomalyDetailPage,
   ],
   imports: [
+    ComponentsModule,
     IonicPageModule.forChild(BuildingAnomalyDetailPage),
   ],
 })

diff --git a/src/pages/building-anomaly-detail/building-anomaly-detail.ts b/src/pages/building-anomaly-detail/building-anomaly-detail.ts
@@ -58,6 +58,7 @@ export class BuildingAnomalyDetailPage {
 
   private createForm() {
     this.form = this.fb.group({
+      id: [''],
       theme: ['', [Validators.required, Validators.maxLength(50)]],
       notes: ['', [Validators.maxLength(500)]],
     });

diff --git a/src/pages/intervention-implantation-plan/intervention-implantation-plan.html b/src/pages/intervention-implantation-plan/intervention-implantation-plan.html
@@ -1,9 +1,3 @@
-<!--
-  Generated template for the InterventionImplantationPlanPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
   <ion-navbar>
     <ion-icon name="menu" menuToggle left></ion-icon>
@@ -15,11 +9,6 @@
 
 
 <ion-content [formGroup]="form" ion-fixed>
-  <!--<ion-list>
-    <ion-list-header>
-      Plan d'implantation
-    </ion-list-header>
-  </ion-list>-->
   <picture-viewer formControlName="picture">
   </picture-viewer>
 </ion-content>