Storage add suceffuly to chat

2026-04-19 21:06:06 +00:00 · 2022-01-13 17:28:35 +01:00
parent 85c1430857
commit 9f5a0da607
9 changed files with 505 additions and 322 deletions
@@ -140,6 +140,35 @@
        </div>
      </div>

+      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
+        <div *ngIf="msg.file.type == 'application/img'">
+          <div class="message-item-options d-flex justify-content-end">
+            <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
+            </fa-icon>
+            <mat-menu #beforeMenu="matMenu" xPosition="before">
+              <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
+            </mat-menu>
+          </div>
+          <div class="title">
+            <ion-label>{{msg.u.name}}</ion-label>
+            <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
+          </div>
+          <div>
+            <ion-label>{{msg.msg}}</ion-label>
+            <div *ngIf="msg.file" class="message-attachments">
+              <div>
+                <div (click)="openPreview(msg)">
+                  <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
+                  TTTT
+                  <img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
+                </div>
+              </div>
+            </div>
+            {{last ? scrollToBottom() : ''}}
+          </div>
+        </div>
+      </div>
+


      <div *ngIf="msg.t == 'r'" class="info-text">
@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges,ChangeDetectorRef,Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
+import { Component, OnChanges, OnInit, Input, SimpleChanges, ChangeDetectorRef, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
 import { ActionSheetController, AnimationController, IonSlides, MenuController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -22,6 +22,8 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
+import { HttpEventType } from '@angular/common/http';
+import { Storage } from '@ionic/storage';

 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -38,41 +40,42 @@ if( pdfjsLib !== undefined ){
 })
 export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy {
  showLoader: boolean;
-  isGroupCreated:boolean;
+  isGroupCreated: boolean;
  loggedUser: any;
-  message:any;
-  messages:any;
-  allUsers:any[] = [];
-  documents:SearchList[] = [];
+  message: any;
+  messages: any;
+  allUsers: any[] = [];
+  documents: SearchList[] = [];


-  room:any = new Array();
-  roomName:any;
-  members:any;
+  room: any = new Array();
+  roomName: any;
+  members: any;

-  capturedImage:any;
-  capturedImageTitle:any;
+  capturedImage: any;
+  capturedImageTitle: any;

-  loggedUserChat:any;
-  scrollingOnce:boolean = true;
+  loggedUserChat: any;
+  scrollingOnce: boolean = true;
  private scrollChangeCallback: () => void;
  currentPosition: any;
  startPosition: number;
  scrollToBottomBtn = false;
-  roomCountDownDate:string;
-  roomCountDownTime:string;
+  roomCountDownDate: string;
+  roomCountDownTime: string;

-  @Input() roomId:string;
-  @Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
-  @Output() showEmptyContainer:EventEmitter<any> = new EventEmitter<any>();
-  @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
-  @Output() openEditGroupPage:EventEmitter<any> = new EventEmitter<any>();
-  @Output() openNewEventPage:EventEmitter<any> = new EventEmitter<any>();
-  @Output() getGroups:EventEmitter<any> = new EventEmitter<any>();
+  @Input() roomId: string;
+  @Output() closeAllDesktopComponents: EventEmitter<any> = new EventEmitter<any>();
+  @Output() showEmptyContainer: EventEmitter<any> = new EventEmitter<any>();
+  @Output() openGroupContacts: EventEmitter<any> = new EventEmitter<any>();
+  @Output() openEditGroupPage: EventEmitter<any> = new EventEmitter<any>();
+  @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
+  @Output() getGroups: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;

  pdfurl = "http://www.africau.edu/images/default/sample.pdf";
+  downloadFile: any;

  constructor(
    private menu: MenuController,
@@ -90,7 +93,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    private processesService: ProcessesService,
    private fileService: FileService,
    public ThemeService: ThemeService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private storage: Storage
  ) {
    this.loggedUserChat = authService.ValidatedUserChat['data'];
    this.isGroupCreated = true;
@@ -104,23 +108,25 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
  }

  ngOnInit() {
-    this.loggedUser=this.loggedUserChat;
+    this.loggedUser = this.loggedUserChat;
    this.getRoomInfo();
    this.serverLongPull();
    this.setStatus('online');
    this.getChatMembers();
+    //this.getMessageDB();
+
  }

-  showDateDuration(start:any){
+  showDateDuration(start: any) {
    return this.timeService.showDateDuration(start);
  }

-  countDownDate(){
+  countDownDate() {
    //this.roomCountDownTime = this.timeService.countDownDateTimer(this.roomCountDownDate, this.room._id);
    return this.timeService.countDownDateTimer(this.roomCountDownDate, this.roomId);
  }

-  setStatus(status:string){
+  setStatus(status: string) {
    let body = {
      message: '',
      status: status,
@@ -132,16 +138,16 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

  scrollToBottom(): void {
    try {
-      if(this.scrollingOnce){
+      if (this.scrollingOnce) {
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
      }
-    } catch(err) { }
+    } catch (err) { }
  }

  scrollToBottomClicked(): void {
    try {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
-    } catch(err) { }
+    } catch (err) { }
  }

  async goToEvent(eventId: any) {
@@ -182,10 +188,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      //alert('UP');
      this.scrollingOnce = false;
    }
-    if((containerHeight - 100) > scroll){
+    if ((containerHeight - 100) > scroll) {
      this.scrollToBottomBtn = true;
    }
-    else{
+    else {
      this.scrollToBottomBtn = false;
    }
    this.currentPosition = scroll;
@@ -196,9 +202,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    window.removeEventListener('scroll', this.scrollChangeCallback, true);
  }

-  async getChatMembers(){
+  async getChatMembers() {
    //return await this.chatService.getMembers(roomId).toPromise();
-    this.chatService.getAllUsers().subscribe(res=> {
+    this.chatService.getAllUsers().subscribe(res => {
      //console.log(res);

      this.allUsers = res['users'].filter(data => data.username != this.loggedUserChat.me.username);
@@ -206,11 +212,11 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    });
  }

-  openGroupContactsPage(){
+  openGroupContactsPage() {
    this.openGroupContacts.emit(this.roomId);
  }

-  openBookMeetingComponent(){
+  openBookMeetingComponent() {
    let data = {
      roomId: this.roomId,
      members: this.members
@@ -218,48 +224,48 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    this.openNewEventPage.emit(data);
  }

-  close(){
+  close() {
    this.modalController.dismiss();
  }

-  doRefresh(ev:any){
+  doRefresh(ev: any) {
    this.getRoomInfo();
    ev.target.complete();
  }

-  get watch(){
+  get watch() {
    this.getRoomInfo();
    console.log('here watching');
    return this.roomId;
  }

-  async getRoomInfo(){
+  async getRoomInfo() {
    let room = await this.chatService.getRoomInfo(this.roomId).toPromise();
-    this.room=room['room'];
-    if(this.room.name){
+    this.room = room['room'];
+    if (this.room.name) {
      this.roomName = this.room.name.split('-').join(' ');
    }

-    if(this.room.customFields.countDownDate){
+    if (this.room.customFields.countDownDate) {
      this.roomCountDownDate = this.room.customFields.countDownDate;
    }

    this.getGroupContacts(this.room);
  }

-  getGroupContacts(room:any){
+  getGroupContacts(room: any) {
    this.showLoader = true;
    //If group is private call getGroupMembers
-    if(room.t === 'p'){
-      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+    if (room.t === 'p') {
+      this.chatService.getGroupMembers(this.roomId).subscribe(res => {
        //console.log(res);
        this.members = res['members'];
        this.showLoader = false;
      });
    }
    //Otherwise call getChannelMembers for públic groups
-    else{
-      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+    else {
+      this.chatService.getChannelMembers(this.roomId).subscribe(res => {
        console.log(res);
        this.members = res['members'];
        this.showLoader = false;
@@ -267,7 +273,89 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    }
  }

-  loadGroupMessages(roomId){
+  getMessageDB() {
+    this.storage.get('chatmsg').then((msg) => {
+      console.log('GROUP FROM DB WEB', msg)
+      let msgArray = [];
+      msgArray = msg;
+      msgArray.filter(data => data._id != this.roomId);
+      this.messages = msgArray.reverse();
+      console.log("GROUP MSG CHAT WEB", this.messages)
+    })
+
+  }
+
+  async transformData(res) {
+    let mgsArray = [];
+    res.map(async element => {
+
+      if (element.file) {
+        if (element.file.guid) {
+          await this.storage.get(element.file.guid).then((image) => {
+            let chatmsg = {
+              _id: element._id,
+              attachments: element.attachments,
+              channels: element.channels,
+              file: {
+                guid: element.file.guid,
+                image_url: image,
+                type: element.file.type
+              },
+              mentions: element.mentions,
+              msg: element.msg,
+              rid: element.rid,
+              ts: element.ts,
+              u: element.u,
+              _updatedAt: element._updatedAt,
+
+            }
+
+            mgsArray.push(chatmsg)
+
+          })
+        } else {
+          let chatmsg = {
+            _id: element._id,
+            attachments: element.attachments,
+            channels: element.channels,
+            file: element.file,
+            mentions: element.mentions,
+            msg: element.msg,
+            rid: element.rid,
+            ts: element.ts,
+            u: element.u,
+            _updatedAt: element._updatedAt,
+          }
+  
+          mgsArray.push(chatmsg)
+        }
+      } else {
+        let chatmsg = {
+          _id: element._id,
+          attachments: element.attachments,
+          channels: element.channels,
+          mentions: element.mentions,
+          msg: element.msg,
+          rid: element.rid,
+          ts: element.ts,
+          u: element.u,
+          _updatedAt: element._updatedAt,
+        }
+
+        mgsArray.push(chatmsg)
+      }
+
+    });
+    await this.storage.remove('chatmsg').then(() => {
+      console.log('GROUP MSG REMOVE FROM STORAGE')
+    });
+    await this.storage.set('chatmsg', mgsArray).then((value) => {
+      console.log('GROUP MSG SAVED ON STORAGE', value)
+    });
+
+  }
+
+  loadGroupMessages(roomId) {
    //console.log('here'+room.t);

    this.showLoader = true;
@@ -275,15 +363,17 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    /* if(room.t === 'p'){
      console.log('private'); */

-      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
-        console.log(res);
-        let msgOnly = res['messages'].filter(data => data.t != 'au');
-        this.messages = msgOnly.reverse();
-        //console.log(res);
+    this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res => {
+      console.log(res);
+      let msgOnly = res['messages'].filter(data => data.t != 'au');
+      //this.messages = msgOnly.reverse();
+      //console.log(res);
+      this.transformData(msgOnly.reverse())
+      this.getMessageDB();

-        this.showLoader = false;
-      });
-  /*   } */
+      this.showLoader = false;
+    });
+    /*   } */
    //Otherwise call getChannelMembers for públic groups
    /* else{
      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
@@ -293,7 +383,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    } */
  }

-  sendMessage(){
+  sendMessage() {
    let body = {
      "message":
      {
@@ -310,15 +400,15 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      }
    }

-    this.chatService.sendMessage(body).subscribe(res=> {
-     /*  this.loadGroupMessages(); */
-     //this.getRoomInfo();
-     this.scrollingOnce = true;
+    this.chatService.sendMessage(body).subscribe(res => {
+      /*  this.loadGroupMessages(); */
+      //this.getRoomInfo();
+      this.scrollingOnce = true;
    });
    this.message = "";
  }

-  deleteMessage(msgId:string){
+  deleteMessage(msgId: string) {
    let body = {
      "roomId": this.roomId,
      "msgId": msgId,
@@ -374,26 +464,26 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      }
    });
    await modal.present();
-    modal.onDidDismiss().then(res=>{
+    modal.onDidDismiss().then(res => {
      console.log(res);
-      if(res.data == 'leave'){
+      if (res.data == 'leave') {
        this.getRoomInfo();
        this.closeAllDesktopComponents.emit();
        this.showEmptyContainer.emit();
      }
-      else if(res.data == 'delete'){
+      else if (res.data == 'delete') {
        this.closeAllDesktopComponents.emit();
        this.showEmptyContainer.emit();
      }
-      else if(res.data == 'cancel'){
+      else if (res.data == 'cancel') {
        console.log('CANCEL');
      }
-      else if(res.data == 'edit'){
+      else if (res.data == 'edit') {
        console.log(this.roomId);
        //this.closeAllDesktopComponents.emit();
        this.openEditGroupPage.emit(this.roomId);
      }
-      else{
+      else {
        this.roomName = res.data.name.split('-').join(' ');
        console.log(this.roomName);

@@ -405,12 +495,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    });
  }

-  openSendGroupMessageOptions(ev?: any){
-    if(window.innerWidth <= 701){
+  openSendGroupMessageOptions(ev?: any) {
+    if (window.innerWidth <= 701) {
      console.log('mobile');
      this.openChatOptions(ev);
    }
-    else{
+    else {
      console.log('desktop');
      this._openChatOptions();
    }
@@ -428,9 +518,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      translucent: true
    });
    await popover.present();
-    popover.onDidDismiss().then(res=>{
+    popover.onDidDismiss().then(res => {
      console.log(res);
-      if(res.data){
+      if (res.data) {
        this.loadGroupMessages(this.roomId);
        //this.getRoomInfo();
        //this.modalController.dismiss();
@@ -450,10 +540,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      translucent: true
    });
    await popover.present();
-    await popover.onDidDismiss().then(()=>{
+    await popover.onDidDismiss().then(() => {
    });
  }
-  async addContacts(){
+  async addContacts() {
    console.log(this.members);

    const modal = await this.modalController.create({
@@ -470,7 +560,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

    await modal.present();

-    modal.onDidDismiss().then(()=>{
+    modal.onDidDismiss().then(() => {
      //this.getRoomInfo();
      this.loadGroupMessages(this.roomId)
    });
@@ -486,7 +576,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

      console.log(file);

-      const imageData =  await this.fileToBase64Service.convert(file)
+      const imageData = await this.fileToBase64Service.convert(file)
      this.capturedImage = imageData;
      this.capturedImageTitle = file.name;

@@ -504,9 +594,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
        }
      }

-      this.chatService.sendMessage(body).subscribe(res=> {
+      this.chatService.sendMessage(body).subscribe(res => {
        console.log(res);
-      },(error) => {
+      }, (error) => {

      });
      //console.log(this.capturedImage)
@@ -523,7 +613,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

      console.log(file);

-      const imageData =  await this.fileToBase64Service.convert(file)
+      const imageData = await this.fileToBase64Service.convert(file)
      this.capturedImage = imageData;
      this.capturedImageTitle = file.name;

@@ -540,23 +630,23 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
            "thumb_url": "https://static.ichimura.ed.jp/uploads/2017/10/pdf-icon.png",
            "message_link": this.capturedImage,
          }],
-          "file":{
+          "file": {
            "name": this.capturedImageTitle,
            "type": "application/pdf",
          }
        }
      }

-      this.chatService.sendMessage(body).subscribe(res=> {
+      this.chatService.sendMessage(body).subscribe(res => {
        //console.log(res);
-      },(error) => {
+      }, (error) => {

      });
      //console.log(this.capturedImage)
    };
  }

-  async addDocGestaoDocumental(){
+  async addDocGestaoDocumental() {
    const modal = await this.modalController.create({
      component: SearchPage,
      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
@@ -567,8 +657,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      }
    });
    await modal.present();
-    modal.onDidDismiss().then(async res=>{
-      if(res){
+    modal.onDidDismiss().then(async res => {
+      if (res) {
        const data = res.data;
        this.documents.push(data.selected);
        console.log(res.data.selected);
@@ -576,7 +666,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
        console.log(res.data.selected.ApplicationType);

        let url = await this.processesService.GetDocumentUrl(res.data.selected.Id, res.data.selected.ApplicationType).toPromise();
-        let url_no_options: string = url.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+        let url_no_options: string = url.replace("webTRIX.Viewer", "webTRIX.Viewer.Branch1");
        console.log(url_no_options);
        //console.log('Oie');

@@ -595,9 +685,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
            }]
          }
        }
-        this.chatService.sendMessage(body).subscribe(res=> {
+        this.chatService.sendMessage(body).subscribe(res => {
          console.log(res);
-        },(error) => {
+        }, (error) => {

        });

@@ -605,17 +695,17 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    });
  }

-  viewDocument(file:any, url?:string){
-    if(file.type == "application/webtrix") {
-       this.openViewDocumentModal(file);
-     }
-     else{
-       let fullUrl = "https://www.tabularium.pt" + url;
-       this.fileService.viewDocumentByUrl(fullUrl);
-     }
+  viewDocument(file: any, url?: string) {
+    if (file.type == "application/webtrix") {
+      this.openViewDocumentModal(file);
+    }
+    else {
+      let fullUrl = "https://www.tabularium.pt" + url;
+      this.fileService.viewDocumentByUrl(fullUrl);
+    }
  }

-  async openViewDocumentModal(file:any){
+  async openViewDocumentModal(file: any) {
    let task = {
      serialNumber: '',
      taskStartDate: '',
@@ -631,17 +721,17 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    }

    let doc = {
-        "Id": "",
-        "ParentId": "",
-        "Source": 1,
-        "ApplicationId": file.ApplicationId,
-        "CreateDate": "",
-        "Data": null,
-        "Description":"",
-        "Link": null,
-        "SourceId": file.DocId,
-        "SourceName": file.Assunto,
-        "Stakeholders": "",
+      "Id": "",
+      "ParentId": "",
+      "Source": 1,
+      "ApplicationId": file.ApplicationId,
+      "CreateDate": "",
+      "Data": null,
+      "Description": "",
+      "Link": null,
+      "SourceId": file.DocId,
+      "SourceName": file.Assunto,
+      "Stakeholders": "",
    }

    const modal = await this.modalController.create({
@@ -664,19 +754,19 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    await modal.present();
  }

-  takePicture(){
+  takePicture() {
    this.fileService.addCameraPictureToChat(this.roomId);
  }
-  addImage(){
+  addImage() {
    this.fileService.addPictureToChat(this.roomId);
  }
-  addFile(){
+  addFile() {
    this.fileService.addDocumentToChat(this.roomId);
  }
-  addFileWebtrix(){
+  addFileWebtrix() {
    this.fileService.addDocGestaoDocumentalToChat(this.roomId);
  }
-  bookMeeting(){
+  bookMeeting() {
    let data = {
      roomId: this.roomId,
      members: this.members
@@ -721,9 +811,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    });

    await modal.present();
-    modal.onDidDismiss().then((res)=>{
+    modal.onDidDismiss().then((res) => {
      //console.log(res['data']);
-      if(res['data'] == 'meeting'){
+      if (res['data'] == 'meeting') {
        //this.closeAllDesktopComponents.emit();
        let data = {
          roomId: this.roomId,
@@ -731,18 +821,18 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
        }
        this.openNewEventPage.emit(data);
      }
-      else if(res['data'] == 'take-picture'){
+      else if (res['data'] == 'take-picture') {
        this.fileService.addCameraPictureToChat(this.roomId);
        //this.loadPicture();
      }
-      else if(res['data'] == 'add-picture'){
+      else if (res['data'] == 'add-picture') {
        this.fileService.addPictureToChat(this.roomId);
        //this.loadPicture();
      }
-      else if(res['data'] == 'add-document'){
+      else if (res['data'] == 'add-document') {
        this.loadDocument();
      }
-      else if(res['data'] == 'documentoGestaoDocumental'){
+      else if (res['data'] == 'documentoGestaoDocumental') {
        this.fileService.addDocGestaoDocumentalToChat(this.roomId);
        //this.addDocGestaoDocumental();
      }
@@ -751,30 +841,30 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    });
  }

-  async serverLongPull(){
+  async serverLongPull() {

-    if(this.route.url != "/home/chat" && document.querySelector('app-group-messages')){
+    if (this.route.url != "/home/chat" && document.querySelector('app-group-messages')) {
      console.log("Timer message stop")
    }
-    else
-    {
+    else {

-      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res =>
-      {
-        if(res['success'] == true) {
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res => {
+        if (res['success'] == true) {
          // Show Error
          //showMessage(response.statusText);
          //this.loadMessages()
          let msgOnly = res['messages'].filter(data => data.t != 'au');
-          this.messages = msgOnly.reverse();
-          console.log(this.messages);
+          //this.messages = msgOnly.reverse();
+          console.log('GROUP MSG FROM ROCKET',msgOnly.reverse());
+          this.transformData(msgOnly.reverse());
+          this.getMessageDB();
          // Reconnect in one second

-          if(document.querySelector('app-group-messages')){
-              await new Promise(resolve => setTimeout(resolve,5000));
-              this.getGroups.emit();
-              console.log('Timer message running')
-              await this.serverLongPull();
+          if (document.querySelector('app-group-messages')) {
+            await new Promise(resolve => setTimeout(resolve, 5000));
+            this.getGroups.emit();
+            console.log('Timer message running')
+            await this.serverLongPull();
          }

        }
@@ -785,7 +875,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
          //this.loadMessages()
          await this.serverLongPull();
        }
-      }, (error)=>{
+      }, (error) => {
        console.log(error);
        this.serverLongPull();
      });
@@ -800,53 +890,81 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    centeredSlides: true
  };
  zoomActive = false;
-zoomScale = 1;
+  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();
+  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();
+  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;
+    // Card back to normal
+    card.el.style['z-index'] = 9;

-  this.zoomActive = false;
-  this.changeDetectorRef.detectChanges();
-}
+    this.zoomActive = false;
+    this.changeDetectorRef.detectChanges();
+  }

-touchStart(card) {
-  // Make card appear above backdrop
-  card.el.style['z-index'] = 11;
-}
+  touchStart(card) {
+    // Make card appear above backdrop
+    card.el.style['z-index'] = 11;
+  }
+
+  downloadFileMsg(msg) {
+    console.log('FILE TYPE', msg.file.type)
+    this.downloadFile = "";
+    if (msg.file.type == "application/img") {
+      this.fileService.downloadFile(msg.file.guid).subscribe(async (event) => {
+        console.log('FILE TYPE 22', msg.file.guid)
+        var name = msg.file.guid;
+
+        if (event.type === HttpEventType.DownloadProgress) {
+          //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
+          console.log('FILE TYPE 33', msg.file.type)
+        } else if (event.type === HttpEventType.Response) {
+          this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+
+          this.storage.set(msg.file.guid, this.downloadFile);
+        }
+
+      });

-async openPreview(msg) {
-  const modal = await this.modalController.create({
-    component:  ViewMediaPage,
-    cssClass: 'modal modal-desktop',
-    componentProps: {
-      image: msg.attachments[0].image_url,
-      username: msg.u.name,
-      _updatedAt: msg._updatedAt,
    }
-  });
-  modal.present();
-}
+
+  }
+
+  async openPreview(msg) {
+    if (msg.file.image_url != null) {
+      const modal = await this.modalController.create({
+        component: ViewMediaPage,
+        cssClass: 'modal modal-desktop',
+        componentProps: {
+          image: msg.attachments[0].image_url,
+          username: msg.u.name,
+          _updatedAt: msg._updatedAt,
+        }
+      });
+      modal.present();
+      
+    } else {
+      this.downloadFileMsg(msg)
+    }
+  }

 }

@@ -109,7 +109,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    console.log("Chat route", this.route.url)

    this.setStatus('online');
-    //this.getMessageDB();
+    this.getMessageDB();
  }

  onPressingMessage() {
@@ -300,6 +300,21 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
            mgsArray.push(chatmsg)

          })
+        } else {
+          let chatmsg = {
+            _id: element._id,
+            attachments: element.attachments,
+            channels: element.channels,
+            file: element.file,
+            mentions: element.mentions,
+            msg: element.msg,
+            rid: element.rid,
+            ts: element.ts,
+            u: element.u,
+            _updatedAt: element._updatedAt,
+          }
+  
+          mgsArray.push(chatmsg)
        }
      } else {
        let chatmsg = {
@@ -348,79 +363,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy

  async viewDocument(msg: any, url?: string) {
    console.log('FILE TYPE', msg.file.type)
-    this.downloadFile = "";
    if (msg.file.type == "application/img") {
-      this.fileService.downloadFile(msg.file.guid).subscribe(async (event) => {
-        console.log('FILE TYPE 22', msg.file.guid)
-        var name = msg.file.guid;
-
-        if (event.type === HttpEventType.DownloadProgress) {
-          //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
-          console.log('FILE TYPE 33', msg.file.type)
-        } else if (event.type === HttpEventType.Response) {
-          this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
-          console.log('FILE TYPE 44', this.downloadFile)
-
-          console.log('TRY ARRAY BUFFER NAME', name);
-          console.log('TRY ARRAY BUFFER', this.downloadFile);
-
-          await Filesystem.writeFile({
-            path: `${IMAGE_DIR}/${name}`,
-            data: this.downloadFile,
-            directory: Directory.Data
-          }).then((foo) => {
-            console.log('SAVED FILE WEB', foo)
-          }).catch((error) => {
-            console.log('SAVED FILE WEB error ', error)
-          });
-
-          const readFile = await Filesystem.readdir({
-            path: `${IMAGE_DIR}/${name}`,
-            directory: Directory.Data,
-          }).then((foo) => {
-            console.log('GET FILE WEB', foo)
-          });
-
-          this.storage.get('chatmsg').then(async (msg) => {
-            let msgArray = [];
-            msgArray = msg;
-            msgArray.filter(data => data._id != this.roomId);
-            this.messages = msgArray.reverse();
-            console.log("MSG CHAT WEB", this.messages)
-
-            let newmgsArray = [];
-            msgArray.forEach(async element => {
-              console.log('GET FILE TRANSFORM', element.file.guid)
-              try {
-                if (element.file.guid == msg.file.guid) {
-                  let chatmsg = {
-                    _id: element._id,
-                    attachments: element.attachments,
-                    channels: element.channels,
-                    file: element.file,
-                    mentions: element.mentions,
-                    msg: element.msg,
-                    rid: element.rid,
-                    ts: element.ts,
-                    u: element.u,
-                    _updatedAt: element._updatedAt,
-                    image_url: this.downloadFile
-                  }
-                  newmgsArray.push(chatmsg)
-                }
-              } catch (error) {
-
-              }
-            });
-            await this.storage.remove('chatmsg');
-            await this.storage.set('chatmsg', newmgsArray);
-          })
-        }
-
-        this.getMessageDB();
-      });
-
-      //this.openPreview(msg);
+      this.downloadFileMsg(msg)

    }
    else if (msg.file.type == "application/webtrix") {
@@ -793,36 +737,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
          console.log('FILE TYPE 33', msg.file.type)
        } else if (event.type === HttpEventType.Response) {
          this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
-          console.log('FILE TYPE 44', this.downloadFile)
-
-          console.log('TRY ARRAY BUFFER NAME', name);
-          console.log('TRY ARRAY BUFFER', this.downloadFile);

          this.storage.set(msg.file.guid, this.downloadFile);
-
-          await Filesystem.writeFile({
-            path: `${IMAGE_DIR}/${name}`,
-            data: this.downloadFile,
-            directory: Directory.Data
-          }).then((foo) => {
-            console.log('SAVED FILE WEB', foo)
-          }).catch((error) => {
-            console.log('SAVED FILE WEB error ', error)
-          });
-
-          const readFile = await Filesystem.readFile({
-            path: `${IMAGE_DIR}/${name}`,
-            directory: Directory.Data,
-          }).then((foo) => {
-            console.log('GET FILE WEB', foo)
-
-          });
        }

      });

-      console.log('FILE TYPE 44', this.downloadFile)
-
    }

  }