previewImages

package-lock.json

@@ -16205,6 +16205,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "ngx-image-cropper": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-5.0.1.tgz",
+      "integrity": "sha512-WGfDJsYizOq3VE82JJkqjSjfvp+o2xrzsOwwm2rVtqNO64SvNJ8/PHP7ctkIjZmEkfjBfFE+eNZR82lLJJ+47w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-socket-io": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-3.4.0.tgz",

package.json

@@ -117,6 +117,7 @@
     "moment": "^2.29.1",
     "ng2-pdf-viewer": "^7.0.1",
     "ngx-cookie-service": "^12.0.3",
+    "ngx-image-cropper": "^5.0.1",
     "ngx-socket-io": "^3.2.0",
     "pdfjs": "^2.4.6",
     "pdfjs-dist": "^2.9.359",

src/app/app-routing.module.ts

@@ -203,6 +203,10 @@ const routes = [
   {
     path: 'event-details-documents-options',
     loadChildren: () => import('./shared/popover/event-details-documents-options/event-details-documents-options.module').then( m => m.EventDetailsDocumentsOptionsPageModule)
+  },
+  {
+    path: 'preview-camera',
+    loadChildren: () => import('./modals/preview-camera/preview-camera.module').then( m => m.PreviewCameraPageModule)
   },
 
 

src/app/modals/preview-camera/preview-camera-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PreviewCameraPage } from './preview-camera.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PreviewCameraPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PreviewCameraPageRoutingModule {}

src/app/modals/preview-camera/preview-camera.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PreviewCameraPageRoutingModule } from './preview-camera-routing.module';
+
+import { PreviewCameraPage } from './preview-camera.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PreviewCameraPageRoutingModule
+  ],
+  declarations: [PreviewCameraPage]
+})
+export class PreviewCameraPageModule {}

src/app/modals/preview-camera/preview-camera.page.html

@@ -0,0 +1,51 @@
+<ion-card >
+
+<ion-card-content >
+  <ion-card-header >
+    <ion-toolbar>
+      <ion-title>{{username}}   <span>{{_updatedAt}}</span> </ion-title>
+    </ion-toolbar>
+  </ion-card-header>
+  
+    <img src="{{image}}" />
+ 
+
+  <!-- <ion-slides #slider [options]="slideOpts">
+    <ion-slide >
+      <div class="swiper-zoom-container">
+        
+      </div>
+    </ion-slide>
+  </ion-slides> -->
+</ion-card-content>
+
+<ion-footer>
+  <ion-row>
+    <ion-col size="3" class="ion-text-center">
+      <ion-button (click)="zoom(false)" fill="clear" color="light">
+        <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
+        <ion-icon class="redla" name="chatbox-outline"></ion-icon>
+      </ion-button>
+    </ion-col>
+    <ion-col size="3" class="ion-text-center">
+      <ion-button (click)="zoom(false)" fill="clear" color="light">
+        <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
+        <ion-icon class="redla" name="call-outline"></ion-icon>
+      </ion-button>
+    </ion-col>
+    <ion-col size="3" class="ion-text-center">
+      <ion-button (click)="close()" fill="clear" color="light">
+       
+        <ion-icon class="redla" name="close-circle-outline"></ion-icon>
+      
+      </ion-button>
+    </ion-col>
+    <ion-col size="3" class="ion-text-center">
+      <ion-button (click)="zoom(true)" fill="clear" color="light">
+        <ion-icon class="redla" name="alert-circle-outline"></ion-icon>
+      
+      </ion-button>
+    </ion-col>
+  </ion-row>
+</ion-footer>
+</ion-card>

src/app/modals/preview-camera/preview-camera.page.scss

@@ -0,0 +1,22 @@
+
+
+ion-content {
+    --background:black;
+    --color: red;
+}
+ 
+ion-footer {
+    margin-bottom: 10px;
+}
+ 
+ion-slides {
+    height: 100%;
+}
+
+.redla{
+
+    color: rgb(255, 38, 0);
+    // background-color: rgb(255, 72, 0);
+}
+
+

src/app/modals/preview-camera/preview-camera.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PreviewCameraPage } from './preview-camera.page';
+
+describe('PreviewCameraPage', () => {
+  let component: PreviewCameraPage;
+  let fixture: ComponentFixture<PreviewCameraPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PreviewCameraPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreviewCameraPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modals/preview-camera/preview-camera.page.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonSlides, ModalController, NavParams } from '@ionic/angular';
+
+@Component({
+  selector: 'app-preview-camera',
+  templateUrl: './preview-camera.page.html',
+  styleUrls: ['./preview-camera.page.scss'],
+})
+export class PreviewCameraPage implements OnInit {
+
+  constructor( private modalController: ModalController,
+    private navParams:NavParams) { }
+
+ 
+@ViewChild(IonSlides) slides : IonSlides
+  image: any;
+  username: string
+  _updatedAt: string
+
+// @Input('img') img: any
+// @Input() username: string;
+// @Input() date: string;
+
+  slideOpts = {
+  zoom: true
+
+  }
+
+ngOnInit() {
+  this.image = this.navParams.get('image')
+  this.username = this.navParams.get('username')
+  this._updatedAt = this.navParams.get('_updatedAt')
+  console.log(this.image)
+}
+
+ionViewDidEnter(){
+  this.slides.update()
+}
+
+async zoom(zoomIn: boolean){
+  const slider = await this.slides.getSwiper() //is swipper =!
+  const zoom = slider.zoom
+  zoomIn ? zoom.in(): zoom.out()
+  }
+
+close(){
+  this.modalController.dismiss()
+    }
+}
+
+

src/app/pages/chat/chat.page.html

@@ -125,6 +125,7 @@
                     </div>
                   </div>
               </ion-item-sliding>
+              am i here?!
           </ion-list>
         </div>
        <!--  <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->

src/app/pages/chat/group-messages/group-messages.page.html

@@ -57,7 +57,7 @@
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -66,7 +66,7 @@
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
               <div>
                 <div>
                   <div class="file">
@@ -152,4 +152,5 @@
       </button>
     </div>
   </div>
+  in group!
 </ion-footer>

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -278,3 +278,36 @@
  }
 
 }
+.preview-slides {
+  margin-top: 20%;
+  background: #e6e6e6;
+ 
+  img {
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+}
+
+.transparent-modal {
+    .modal-wrapper {
+        --background: rgba(44, 39, 45, 0.2);
+    }
+}
+
+
+.image-slide,
+.image-card {
+    overflow: visible;
+}
+ 
+.image-card {
+    z-index: 9;
+}
+ 
+.backdrop {
+    height: 200%;
+    width: 100%;
+    background: black;
+    position: absolute;
+    z-index: 10;
+}

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, } from '@angular/core';
-import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
+import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -20,6 +20,7 @@ import { NewEventPage } from '../../agenda/new-event/new-event.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -27,6 +28,8 @@ import { ThemeService } from 'src/app/services/theme.service'
   styleUrls: ['./group-messages.page.scss'],
 })
 export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
+
+
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -75,7 +78,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileToBase64Service: FileToBase64Service,
     private fileService: FileService,
     private toastService: ToastService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -580,4 +584,59 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   });
   }
 
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
 }
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(img) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: img.attachments[0].image_url,
+        username: img.u.username,
+        _updatedAt: img._updatedAt
+      }
+    });
+    modal.present();
+  }
+}
+

src/app/pages/chat/messages/messages.page.html

@@ -50,8 +50,8 @@
   </ion-refresher> -->
   <div (click)="handleClick()" class="messages" #scrollMe>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
-    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId"  >
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -138,6 +138,7 @@
   <button (click)="stopRecording()">Stop Recording</button> -->
   <div class="container width-100 d-flex">
     <div>
+      aqui
       <button class="btn-no-color" (click)="openChatOptions()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
@@ -163,4 +164,5 @@
       </button>
     </div>
   </div>
+  in message!
 </ion-footer>

src/app/pages/chat/messages/messages.page.ts

@@ -1,6 +1,6 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
-import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { GestureController, Gesture, ModalController, NavParams, PopoverController, IonSlides } from '@ionic/angular';
 import { map } from 'rxjs/operators';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -23,6 +23,7 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 @Component({
   selector: 'app-messages',
@@ -83,7 +84,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileService: FileService,
     private gestureController: GestureController,
     private processes: ProcessesService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -583,4 +585,62 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
 }
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(msg) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: msg.attachments[0].image_url,
+        username: msg.u.username,
+        _updatedAt: msg._updatedAt
+      }
+    });
+    modal.present();
+  }
+}
+
+
+

src/app/pages/publications/new-publication/new-publication.page.html

@@ -29,7 +29,7 @@
         <ion-item lines="none">
           <ion-thumbnail slot="start">
           
-              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" ></ion-img>
+              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" (click)="openPreview(photo)" ></ion-img>
            
           </ion-thumbnail>
           <ion-label>
@@ -58,7 +58,7 @@
       </div>
 
       <div class="ion-item-container-no-border">
-        <ion-label (click)="takePicture()">
+        <ion-label (click)="takePictures()">
           <div class="attach-icon">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
             <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
@@ -79,7 +79,7 @@
           <div class="attach-document cursor-pointer">
             <ion-label>Anexar Fotografia</ion-label>
           </div>
-        <!-- </ion-label> -->
+      </ion-label> 
       </div>
     </div>
 

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { ModalController, NavParams, Platform, LoadingController } from '@ionic/angular';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ModalController, NavParams, Platform, LoadingController, IonSlides } from '@ionic/angular';
 
 /* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -19,6 +19,7 @@ import { ThemeService } from 'src/app/services/theme.service';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 
 import { Filesystem, Directory } from '@capacitor/filesystem';
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -35,6 +36,9 @@ interface LocalFile {
 export class NewPublicationPage implements OnInit {
   images: LocalFile[] = [];
 
+  files: Set<File>;
+  photos: any[] = [];
+
   // date picker
   public date: any;
   public disabled = false;
@@ -70,7 +74,7 @@ export class NewPublicationPage implements OnInit {
 
   capturedImage: any = '';
   capturedImageTitle: any;
-  public photos: any[] = [];
+  // public photos: any[] = [];
 
   constructor(
     private modalController: ModalController,
@@ -83,6 +87,7 @@ export class NewPublicationPage implements OnInit {
     public ThemeService: ThemeService,
     private platform: Platform,
     private loadingCtrl: LoadingController,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
 
     this.publicationType = this.navParams.get('publicationType');
@@ -98,6 +103,7 @@ export class NewPublicationPage implements OnInit {
       directory: Directory.Data,
       recursive: true
     });
+    this.loadPicture() 
 
     // this.takePicture();
   }
@@ -116,7 +122,7 @@ export class NewPublicationPage implements OnInit {
 
   }
 
-  convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+  convertBlobToBase64s = (blob: Blob) => new Promise((resolve, reject) => {
     const reader = new FileReader;
     reader.onerror = reject;
     reader.onload = () => {
@@ -143,7 +149,7 @@ export class NewPublicationPage implements OnInit {
       webviewPath: capturedImage.webPath
     });
 
-    this.capturedImage = await this.convertBlobToBase64(blob);
+    this.capturedImage = await this.convertBlobToBase64s(blob);
     this.capturedImageTitle = new Date().getTime() + '.jpeg';
   }
 
@@ -388,18 +394,18 @@ private async savePicture(photo: Photo) {
       console.log(this.pub, 'pub')
     }
   }
+//  async openGallery() {
+//     const modal = await this.modalController.create({
+//       component: GalleryPage,
+//       componentProps:{
+//       },
+//       cssClass: 'new-publication',
+//       backdropDismiss: false
+//     });
+//     await modal.present();
+//     modal.onDidDismiss();
+//    } 
 
-  /* async openGallery() {
-    const modal = await this.modalController.create({
-      component: GalleryPage,
-      componentProps:{
-      },
-      cssClass: 'new-publication',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  } */
 
   /* async takePicture(){
    const image = await Plugins.Camera.getPhoto({
@@ -511,4 +517,121 @@ private async savePicture(photo: Photo) {
     this.capturedImage = this.images[0].data
     //}
   }
+
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
+}
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(photo) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: photo.attachments[0].image_url,
+        username: photo.u.username,
+        _updatedAt: photo._updatedAt
+      }
+    });
+    modal.present();
+  }
+
+  async takePictures() {
+    const capturedImage = await Camera.getPhoto({
+      quality: 90,
+      // allowEditing: true,
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera
+
+    });
+    const response = await fetch(capturedImage.webPath!);
+    const blob = await response.blob();
+
+      this.photos.unshift({
+        filepath: "soon...",
+        webviewPath: capturedImage.webPath
+      });
+
+      this.capturedImage = await this.convertBlobToBase64(blob);
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+
+    let data = {
+      image:this.capturedImage,
+      name: this.capturedImageTitle
+    }
+
+    return data;
+    alert(data)
+  }
+
+  convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+    const reader = new FileReader;
+    reader.onerror = reject;
+    reader.onload = () => {
+        resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+
+  loadPicture() {
+    const input = this.fileLoaderService.createInput({
+      accept: ['image/apng', 'image/jpeg', 'image/png']
+    })
+
+    input.onchange = async () => {
+      const file = this.fileLoaderService.getFirstFile(input)
+
+      console.log(file);
+
+      const imageData =  await this.fileToBase64Service.convert(file)
+      this.capturedImage = imageData;
+      this.capturedImageTitle = file.name;
+
+      let data = {
+        image:this.capturedImage,
+        name: this.capturedImageTitle
+      }
+
+      return data;
+
+      console.log(data)
+    };
+  }
 }