add image to chat

src/app/modals/chat-options-features/chat-options-features.page.html

@@ -7,7 +7,7 @@
   <div class="buttons">
     <button hidden (click)="notImplemented()" full class="btn-cancel" shape="round" >Tirar Fotografia</button>
     <button hidden (click)="notImplemented()" class="btn-cancel" shape="round" >Digitalizar Documento</button>
-    <button hidden (click)="notImplemented()" full class="btn-cancel" shape="round" >Anexar Fotografia</button>
+    <button (click)="anexarFoto()" full class="btn-cancel" shape="round" >Anexar Fotografia</button>
     <button hidden (click)="getDoc()" class="btn-cancel" shape="round" >Anexar Documento</button>
     <div class="solid"></div>
     <button (click)="bookMeeting()" class="btn-cancel" shape="round" >Marcar reunião</button>

src/app/modals/chat-options-features/chat-options-features.page.ts

@@ -5,6 +5,9 @@ import { SearchList } from 'src/app/models/search-document';
 import { NewEventPage } from 'src/app/pages/agenda/new-event/new-event.page';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { AlertService } from 'src/app/services/alert.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { FileLoaderService } from 'src/app/services/file/file-loader.service';
+import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 import { environment } from 'src/environments/environment';
 
 @Component({
@@ -18,11 +21,17 @@ export class ChatOptionsFeaturesPage implements OnInit {
   members: any;
   attendees: EventPerson[] = [];
 
+  capturedImage:any;
+  capturedImageTitle:any;
+
   constructor(
     private popoverController: PopoverController,
     private modalController: ModalController,
     private alertService: AlertService,
     private navParams: NavParams,
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
+    private chatService: ChatService,
   ) {
 
     this.members = this.navParams.get('members');
@@ -59,6 +68,73 @@ export class ChatOptionsFeaturesPage implements OnInit {
 
   }
 
+  anexarFoto(){
+    this.modalController.dismiss('picture');
+  }
+
+  laodPicture() {
+    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 body = {
+        "message":
+        {
+          "rid": "J5WDHyrYWHQrybbno",
+          "msg": "this.message",
+          "attachments": [{
+            "title": this.capturedImageTitle ,
+            "text": "description",
+            "title_link_download": false,
+            "image_url": this.capturedImage,
+          }]
+        }
+      }
+
+      this.chatService.sendMessage(body).subscribe(res=> {
+        console.log(res);
+      },(error) => {
+
+      });
+      //console.log(this.capturedImage)
+    };
+  }
+
+  sendMessage(){
+    let body = {
+      "message":
+      {
+        "rid": "J5WDHyrYWHQrybbno",
+        "msg": "this.message",
+        /* "attachments": [{
+          "color": "#ff0000",
+          "text": "Yay for gruggy!",
+          "title": "Attachment Example",
+          "title_link": "https://youtube.com",
+          "title_link_download": false,
+          "image_url": "https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png",
+        }] */
+      }
+    }
+
+    this.chatService.sendMessage(body).subscribe(res=> {
+      console.log(res);
+
+
+    },(error) => {
+
+    });
+  }
+
   /* getGroupContacts(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers

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

@@ -47,6 +47,11 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          <div *ngIf="msg.attachments">
+            <div *ngFor="let file of msg.attachments">
+              <img src="{{file.image_url}}" alt="image" >
+            </div>
+          </div>
           {{last ? scrollToBottom() : ''}}
         </div>
       </div>
@@ -72,9 +77,6 @@
       </div>
     </div>
   </div>
-  <div *ngIf="leaveStatus" class="info-text-leave">
-    <ion-label>{{leaveStatus}}</ion-label>
-  </div>
 
 </ion-content>
 <!--

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

@@ -11,6 +11,8 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
 import {Router} from '@angular/router'
 import { EditGroupPage } from '../edit-group/edit-group.page';
 import { TimeService } from 'src/app/services/functions/time.service';
+import { FileLoaderService } from 'src/app/services/file/file-loader.service';
+import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 
 @Component({
   selector: 'app-group-messages',
@@ -22,7 +24,6 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   isGroupCreated:boolean;
   loggedUser: any;
   message:any;
-  leaveStatus:any;
   messages:any;
 
   room:any;
@@ -40,6 +41,9 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   currentPosition: any;
   startPosition: number;
 
+  capturedImage:any;
+  capturedImageTitle:any;
+
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
@@ -53,6 +57,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private alertService: AlertService,
     private route: Router,
     private timeService: TimeService,
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -258,7 +264,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     await modal.present();
     modal.onDidDismiss().then(res=>{
       if(res.data == 'leave'){
-        this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
+        console.log('saiu do grupo');
       }
       else if(res.data == 'cancel'){
         console.log('cancel');
@@ -269,6 +275,43 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  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 body = {
+        "message":
+        {
+          "rid": this.roomId,
+          "msg": "",
+          "attachments": [{
+            //"title": this.capturedImageTitle ,
+            //"text": "description",
+            "title_link_download": false,
+            "image_url": this.capturedImage,
+          }]
+        }
+      }
+
+      this.chatService.sendMessage(body).subscribe(res=> {
+        console.log(res);
+      },(error) => {
+
+      });
+      //console.log(this.capturedImage)
+    };
+  }
+
   async openChatOptions(ev?: any) {
     console.log(this.members);
 
@@ -283,7 +326,12 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       },
       translucent: true
     });
-    return await popover.present();
+    await popover.present();
+    await popover.onDidDismiss().then((res)=>{
+      if(res['data'] == "picture"){
+        this.loadPicture();
+      }
+    });
   }
 
   async addContacts(){

src/app/services/functions/file.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FileService } from './file.service';
+
+describe('FileService', () => {
+  let service: FileService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FileService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/functions/file.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { FileLoaderService } from '../file/file-loader.service';
+import { FileToBase64Service } from '../file/file-to-base64.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+
+  capturedImage:any;
+  capturedImageTitle:any;
+
+  constructor(
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
+  ) { }
+
+  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;
+    };
+  }
+}

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

@@ -46,6 +46,11 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          <div *ngIf="msg.attachments">
+            <div *ngFor="let file of msg.attachments">
+              <img src="{{file.image_url}}" alt="image" >
+            </div>
+          </div>
           {{last ? scrollToBottom() : ''}}
         </div>
       </div>
@@ -71,9 +76,6 @@
       </div>
     </div>
   </div>
-  <!-- <div *ngIf="leaveStatus" class="info-text-leave">
-    <ion-label>{{leaveStatus}}</ion-label>
-  </div> -->
 
 </ion-content>
 

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

@@ -11,6 +11,8 @@ import { Router } from '@angular/router'
 import { ChatOptionsPopoverPage } from '../../popover/chat-options-popover/chat-options-popover.page';
 import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/chat-options-features.page';
 import { TimeService } from 'src/app/services/functions/time.service';
+import { FileLoaderService } from 'src/app/services/file/file-loader.service';
+import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 
 @Component({
   selector: 'app-group-messages',
@@ -22,7 +24,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   isGroupCreated:boolean;
   loggedUser: any;
   message:any;
-  leaveStatus:any;
   messages:any;
   allUsers:any[] = [];
 
@@ -31,6 +32,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   roomName:any;
   members:any;
 
+  capturedImage:any;
+  capturedImageTitle:any;
+
   loggedUserChat:any;
   scrollingOnce:boolean = true;
   private scrollChangeCallback: () => void;
@@ -58,6 +62,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     private alertService: AlertService,
     private route: Router,
     private timeService: TimeService,
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -218,20 +224,19 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   sendMessage(){
-
     let body = {
       "message":
       {
         "rid": this.roomId,
         "msg": this.message,
-        "attachments": [{
+        /* "attachments": [{
           "color": "#ff0000",
           "text": "Yay for gruggy!",
           "title": "Attachment Example",
           "title_link": "https://youtube.com",
           "title_link_download": false,
-          "image_url": "http://res.guggy.com/logo_128.png",
-        }]
+          "image_url": "https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png",
+        }] */
       }
     }
 
@@ -292,7 +297,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     modal.onDidDismiss().then(res=>{
       console.log(res);
       if(res.data == 'leave'){
-        //this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
         this.getRoomInfo();
         this.closeAllDesktopComponents.emit();
         this.showEmptyContainer.emit();
@@ -355,6 +359,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
   }
   async openChatOptions(ev: any) {
+    alert('THIS');
     const popover = await this.popoverController.create({
       component: ChatOptionsPopoverPage,
       cssClass: 'chat-options-popover',
@@ -365,7 +370,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       },
       translucent: true
     });
-    return await popover.present();
+    await popover.present();
+    await popover.onDidDismiss().then(()=>{
+      alert('THIS2');
+    });
   }
   async addContacts(){
     console.log(this.members);
@@ -416,6 +424,43 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
  */
 
+  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 body = {
+        "message":
+        {
+          "rid": this.roomId,
+          "msg": "",
+          "attachments": [{
+            //"title": this.capturedImageTitle ,
+            //"text": "description",
+            "title_link_download": false,
+            "image_url": this.capturedImage,
+          }]
+        }
+      }
+
+      this.chatService.sendMessage(body).subscribe(res=> {
+        console.log(res);
+      },(error) => {
+
+      });
+      //console.log(this.capturedImage)
+    };
+  }
+
   async _openChatOptions() {
 
     const enterAnimation = (baseEl: any) => {
@@ -463,6 +508,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
         }
         this.openNewEventPage.emit(data);
       }
+      else if(res['data'] == 'picture'){
+        this.loadPicture();
+      }
 
     });
   }

src/app/shared/popover/chat-options-popover/chat-options-popover.page.html

@@ -7,7 +7,7 @@
   <div class="buttons">
     <button hidden (click)="notImplemented()" full class="btn-ok" shape="round" >Tirar Fotografia</button>
     <button hidden (click)="notImplemented()" class="btn-ok" shape="round" >Digitalizar Documento</button>
-    <button hidden (click)="notImplemented()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
+    <button (click)="anexarFoto()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
     <button hidden (click)="getDoc()" class="btn-ok" shape="round" >Anexar Documento</button>
     <div class="solid"></div>
     <button (click)="bookMeeting()" class="btn-ok" shape="round" >Marcar reunião</button>

src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts

@@ -45,6 +45,15 @@ export class ChatOptionsPopoverPage implements OnInit {
     this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
 
+  anexarFoto(){
+    if( window.innerWidth < 701){
+      this.popoverController.dismiss('picture');
+    }
+    else{
+      this.modalController.dismiss('picture');
+    }
+  }
+
   close(){
     if( window.innerWidth < 701){
       this.popoverController.dismiss();