Merge branch 'feature/chatStorage' of https://bitbucket.org/equilibriumito/gabinete-digital into developer

package-lock.json

@@ -19818,6 +19818,23 @@
         "glob": "^7.1.3"
       }
     },
+    "rocket.chat.realtime.api.rxjs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/rocket.chat.realtime.api.rxjs/-/rocket.chat.realtime.api.rxjs-2.1.1.tgz",
+      "integrity": "sha512-R+aAbUi66CBwsXuji0AsQGOrUx4STXw9I8lf4hpPK/mRocyjcA+r+ri0bDHGoB0FGnooSvkvauqpy+RjbB2dEg==",
+      "requires": {
+        "crypto-js": "^3.1.9-1",
+        "rxjs": "^6.4.0",
+        "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "crypto-js": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+          "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+        }
+      }
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

package.json

@@ -136,6 +136,7 @@
     "pdfjs": "^2.4.6",
     "pdfjs-dist": "^2.9.359",
     "puppeteer": "^10.1.0",
+    "rocket.chat.realtime.api.rxjs": "^2.1.1",
     "rxjs": "~6.6.3",
     "rxjs-compat": "^6.6.7",
     "sharp": "^0.29.1",

src/app/home/home.page.ts

@@ -17,7 +17,6 @@ import { File } from '@ionic-native/file/ngx';
 /* import { WebNotificationPopupService } from '../services/notification/web-notification-popup.service'; */
 import { DocumentCounterService } from '../services/worker/document-counter.service';
 import { PermissionService } from '../services/worker/permission.service';
-import { Network } from '@ionic-native/network/ngx';
 import { BackgroundService } from 'src/app/services/background.service';
 import { OfflineManagerService } from 'src/app/services/offline-manager.service';
 import { Storage } from '@ionic/storage';
@@ -27,7 +26,9 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
 import { SqliteService } from 'src/app/services/sqlite.service';
 import { Device } from '@capacitor/device';
 import { RouteService } from 'src/app/services/route.service';
-
+import { WsChatService } from 'src/app/services/chat/ws-chat.service';
+import { environment } from 'src/environments/environment';
+import { v4 as uuidv4 } from 'uuid'
 
 @Component({
   selector: 'app-home',
@@ -77,6 +78,7 @@ export class HomePage implements OnInit {
 
   status: string = "";
   audioName: string = "";
+
   constructor(
     private router: Router,
     public modalCtrl: AlertController,
@@ -97,7 +99,8 @@ export class HomePage implements OnInit {
     private processservice: ProcessesService,
     private screenOrientation: ScreenOrientation,
     private sqliteservice: SqliteService,
-    private RouteService: RouteService) {
+    private RouteService: RouteService,
+    private WsChatService: WsChatService) {
 
     /* this.webNotificationPopupService.askNotificationPermission() */
 
@@ -273,3 +276,4 @@ export class HomePage implements OnInit {
   }
 
 }
+

src/app/models/chatMethod.ts

@@ -0,0 +1,169 @@
+interface Ts {
+    $date: any;
+}
+
+interface U {
+    _id: string;
+    username: string;
+    name: string;
+}
+
+interface UpdatedAt {
+    $date: any;
+}
+
+interface Attachment {
+    ts: Date;
+    title_link_download: boolean;
+}
+
+export interface File {
+    type: string;
+    guid: string;
+    image_url: string;
+    subject: string;
+    start_date?: Date;
+    end_date?: Date;
+    venue: string;
+    id: string;
+}
+
+interface EditedAt {
+    $date: number;
+}
+
+interface EditedBy {
+    _id: string;
+    username: string;
+}
+
+
+
+interface Ts2 {
+    $date: number;
+}
+
+interface U2 {
+    _id: string;
+    username: string;
+    name: string;
+}
+
+interface UpdatedAt2 {
+    $date: number;
+}
+
+interface FirstUnread {
+    _id: string;
+    rid: string;
+    msg: string;
+    ts: Ts2;
+    u: U2;
+    _updatedAt: UpdatedAt2;
+    mentions: any[];
+    channels: any[];
+}
+
+export interface Message {
+    customFields:any;
+    _id: string;
+    rid: string;
+    msg: string;
+    ts: Ts;
+    u: U;
+    t: string;
+    _updatedAt: UpdatedAt;
+    mentions: any[];
+    channels: any[];
+    attachments: Attachment[];
+    file: File;
+    editedAt: EditedAt;
+    editedBy: EditedBy;
+    urls: any[];
+}
+
+
+
+
+export interface Lm {
+    $date: any;
+}
+
+
+
+
+export interface LastMessage {
+    _id: string;
+    rid: string;
+    msg: string;
+    ts: Ts;
+    u: U;
+    _updatedAt: UpdatedAt2;
+    mentions: any[];
+    channels: any[];
+    file: File;
+    attachments: Attachment[];
+}
+
+export interface CustomFields {
+}
+
+export interface Update {
+    _id: string;
+    t: string;
+    usernames: string[];
+    usersCount: number;
+    uids: string[];
+    default: boolean;
+    ro: boolean;
+    sysMes: boolean;
+    _updatedAt: UpdatedAt;
+    lm: Lm;
+    lastMessage: LastMessage;
+    name: string;
+    fname: string;
+    u: U2;
+    customFields: CustomFields;
+}
+
+export interface DeletedAt {
+    $date: any;
+}
+
+export interface Remove {
+    _id: string;
+    _deletedAt: DeletedAt;
+}
+
+export interface Result {
+    update: Update[];
+    remove: Remove[];
+}
+
+export interface Rooms {
+    msg: string;
+    id: string;
+    result: Result;
+}
+
+
+
+export interface ChatMessage {
+    msg: string;
+    id: string;
+    result: Message
+}
+
+
+
+
+
+export interface chatHistory {
+    msg: string;
+    id: string;
+    result: {
+        messages: Message[];
+        firstUnread: FirstUnread;
+        unreadNotLoaded: number;
+    };
+}

src/app/models/rochet-chat-cliente-service.ts

@@ -0,0 +1,20 @@
+export interface wsCallbacksParams {
+    type: 'Offline' | 'Online' | 'Open' | 'Onmessage',
+    funx: Function
+    runOnces?: boolean
+    requestId?: string
+    key?: string
+}
+
+
+export interface msgQueue {
+    message: object,
+    requestId: string,
+    loginRequired: boolean
+}
+
+export interface send  {
+    message: object
+    requestId?: string
+    loginRequired?: boolean
+}

src/app/models/user.model.ts

@@ -56,6 +56,8 @@ export class UserSession {
     TypeShare: number;
   }[]
   UserName: string
+  Password: string
+  RochetChatUser: string
   Profile: any;
   LoginPreference: 'None' | 'Password' | 'Pin' | null;
   PIN: string

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

@@ -4,7 +4,7 @@
 
 <ion-content class="height-100 container-wrapper">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-progress-bar type="indeterminate" *ngIf="wsChatMethodsService.loadingWholeList"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
@@ -25,9 +25,6 @@
                 <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
                 <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src="assets/images/theme/gov/icons-chat-new-group.svg" ></ion-icon>
               </button>
-              <button hidden title="Actualizar" *ngIf="hideRefreshBtn" class="btn-no-color" (click)="refreshing()">
-                <ion-icon class="title-icon font-awesome" name="reload-circle"></ion-icon>
-              </button>
             </div>
           </div>
         <ion-toolbar>
@@ -45,40 +42,40 @@
           <ion-list *ngSwitchCase="'Contactos'">
             <ion-item-sliding>
               <div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
-                  *ngFor="let dm of userDirectMessages"
+                *ngFor="let room of wsChatMethodsService.dm | keyvalue"
-                  [class.item-active]="dm._id == idSelected">
+                [class.item-active]="room.value.id == idSelected">
                   <div class="item-icon">
                     <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
-                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && dm._id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.value.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
-                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && dm._id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40-hover.svg"></ion-icon>
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.value.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40-hover.svg"></ion-icon>
                   </div>
-                    <div [class.highlight]="dm._id =='cjFv5XfreKz5j3fWW'"
+                  <div [class.highlight]="room.value.id =='cjFv5XfreKz5j3fWW'"
-                     (click)="openMessagesPage(dm._id)"
+                   (click)="openMessagesPage(room.value.id)"
                    class="item-content flex-grow-1 cursor-pointer"><!-- (click)="openMessages(dm)" -->
                     <div class="item-title-time">
-                        <div class="item-title" [class.item-title-active]="dm._id == idSelected">
+                      <div class="item-title" [class.item-title-active]="room.value.id == idSelected">
-                          <ion-label *ngFor="let user of dm.uids">
+                        <ion-label >
-                            <span *ngIf="user !=loggedUserChat.me.username">
+                          <span >
-                              <div *ngFor="let t of dmUsers">
+                            <div >
-                                <div *ngIf="user == t._id">
+                              <div >
-                                  {{t.name}}
+                                {{room.value.name}}
                               </div>
                             </div>
                         </span>
                         </ion-label>
                       </div>
-                        <div class="item-date" [class.item-date-active]="dm._id == idSelected">{{showDateDuration(dm._updatedAt)}}</div>
+                      <div class="item-date" [class.item-date-active]="room.value.id == idSelected">{{room.value.duration}}</div>
                     </div>
-                      <div *ngIf="dm.lastMessage" class="item-description" [class.item-description-active]="dm._id == idSelected">
+                    <div *ngIf="room.value.lastMessage" class="item-description" [class.item-description-active]="room.value.id == idSelected">
-                        <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
+                      <ion-label *ngIf="room.value.lastMessage">{{room.value.lastMessage.msg}}</ion-label>
-                        <ion-label *ngIf="dm.lastMessage.file">
+                      <ion-label *ngIf="room.value.lastMessage.file">
-                          <fa-icon *ngIf="dm.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="dm._id == idSelected"></fa-icon>
+                        <fa-icon *ngIf="room.value.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
-                          <fa-icon *ngIf="dm.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="dm._id == idSelected"></fa-icon>
+                        <fa-icon *ngIf="room.value.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
-                          <span> {{dm.lastMessage.file.name || dm.lastMessage.file.subject }}</span>
+                        <span> {{room.value.lastMessage.file.name || room.value.lastMessage.file.subject }}</span>
                       </ion-label>
-                        <ion-label *ngIf="dm.lastMessage.attachments">
+                      <ion-label *ngIf="room.value.lastMessage.attachments">
-                          <div *ngIf="dm.lastMessage.attachments[0].image_url">
+                        <div *ngIf="room.value.lastMessage.attachments[0].image_url">
-                            <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="dm._id == idSelected"></fa-icon>
+                          <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
                           <span> Fotografia</span>
                         </div>
                       </ion-label>
@@ -86,7 +83,7 @@
                   </div>
                 </div>
             </ion-item-sliding>
-              <ion-item-sliding *ngIf="showLoader || userDirectMessages.length < 1">
+            <ion-item-sliding *ngIf=" wsChatMethodsService.dmCount < 1">
                 <div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
                   <div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div>
                   <div class="item-content flex-grow-1 cursor-pointer">
@@ -103,36 +100,36 @@
             </ion-item-sliding>
           </ion-list>
           <ion-list *ngSwitchCase="'Grupos'">
-              <ion-item-sliding *ngIf="!showLoader">
+              <ion-item-sliding *ngIf="!wsChatMethodsService.loadingWholeList">
-                  <div *ngFor="let group of allGroups"
+                  <div *ngFor="let group of wsChatMethodsService.group | keyvalue"
-                  [class.item-active]="group._id ==idSelected"
+                  [class.item-active]="group.value.id ==idSelected"
                   class="item item-hover d-flex">
                     <div class="item-icon">
                       <!-- <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon> -->
 
                       <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
-                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
+                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.value.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
-                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
+                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.value.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
                     </div>
                     <div
-                     (click)="openGroupMessagesPage(group._id)" class="item-content flex-grow-1 cursor-pointer">
+                     (click)="openGroupMessagesPage(group.value.id)" class="item-content flex-grow-1 cursor-pointer">
                       <div class="item-title-time">
-                        <div class="item-title" [class.item-title-active]="group._id ==idSelected">
+                        <div class="item-title" [class.item-title-active]="group.value.id ==idSelected">
-                          <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
+                          <ion-label>{{group.value.name.split('-').join(' ')}}</ion-label>
                         </div>
-                        <div class="item-date" [class.item-date-active]="group._id ==idSelected" *ngIf="group.lastMessage && !group.customFields.countDownDate">{{showDateDuration(group._updatedAt)}}</div>
+                        <div class="item-date" [class.item-date-active]="group.value.id ==idSelected" *ngIf="group.value.lastMessage && !group.value.customFields.countDownDate">{{group.value.duration}}</div>
-                        <div class="item-date" [class.item-date-active]="group._id ==idSelected" *ngIf="group.customFields.countDownDate">{{countDownDate(group.customFields.countDownDate, group._id)}}</div>
+                        <div class="item-date" [class.item-date-active]="group.value.id ==idSelected" *ngIf="group.value.customFields.countDownDate">{{countDownDate(group.value.customFields.countDownDate, group.value.id)}}</div>
                       </div>
-                      <div *ngIf="group.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group._id ==idSelected">
+                      <div *ngIf="group.value.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group.value.id ==idSelected">
-                        <div class="item-message">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
+                        <div class="item-message">{{group.value.lastMessage.u.name}}: {{group.value.lastMessage.msg}} </div>
-                        <div class="item-files add-ellipsis" *ngIf="group.lastMessage.file">
+                        <div class="item-files add-ellipsis" *ngIf="group.value.file">
-                          <fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group._id == idSelected"></fa-icon>
+                          <fa-icon *ngIf="group.value.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.value.id == idSelected"></fa-icon>
-                          <fa-icon *ngIf="group.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group._id == idSelected"></fa-icon>
+                          <fa-icon *ngIf="group.value.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group.value.id == idSelected"></fa-icon>
-                          <span class="item-files-title"> {{group.lastMessage.file.name || group.lastMessage.file.subject}}</span>
+                          <span class="item-files-title"> {{group.value.lastMessage.file.name || group.value.file.subject}}</span>
                         </div>
-                        <div  class="item-files" *ngIf="group.lastMessage.attachments">
+                        <div  class="item-files" *ngIf="group.value.attachments">
-                          <div *ngIf="group.lastMessage.attachments[0].image_url">
+                          <div *ngIf="group.value.value.lastMessage.attachments[0].image_url">
-                            <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="group._id == idSelected"></fa-icon>
+                            <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="group.value.id == idSelected"></fa-icon>
                             <span> Fotografia</span>
                           </div>
                         </div>
@@ -140,7 +137,7 @@
                     </div>
                   </div>
               </ion-item-sliding>
-              <ion-item-sliding *ngIf="showLoader || allGroups.length < 1">
+              <ion-item-sliding *ngIf="wsChatMethodsService.loadingWholeList || wsChatMethodsService.groupCount < 1">
                 <div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
                   <div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-group-chat-grey.svg"></ion-icon></div>
                   <div class="item-content flex-grow-1 cursor-pointer">
@@ -178,7 +175,6 @@
           (showEmptyContainer)="showEmptyContainer()"
           (showEmptyContainer)="showEmptyContainer()"
           (openNewEventPage)="openNewEventPage($event)"
-          (getDirectMessages)="getDirectMessages($event)"
           [style.display]="showMessages ? 'flex' : 'none'"
           [roomId]="roomId"
           [showMessages]="showMessages"  #messagecontainer>
@@ -259,5 +255,3 @@
       </div>
   </div>
 </ion-content>
-
-

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

@@ -12,6 +12,7 @@ import {
 import { ModalController, Platform } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
+import { WsChatMethodsService} from 'src/app/services/chat/ws-chat-methods.service'
 import { GroupMessagesPage } from './group-messages/group-messages.page';
 import { ContactsPage } from './messages/contacts/contacts.page';
 import { MessagesPage } from './messages/messages.page';
@@ -123,9 +124,10 @@ export class ChatPage implements OnInit {
     private router: Router,
     private sqlservice: SqliteService,
     private platform: Platform,
-    private storageservice: StorageService
+    private storageservice: StorageService,
-
+    public wsChatMethodsService: WsChatMethodsService,
   ) {
+
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.headers = new HttpHeaders();
     window.onresize = (event) => {
@@ -133,33 +135,28 @@ export class ChatPage implements OnInit {
         this.modalController.dismiss();
       }
     };
+
     this.showLoader = true;
+
+    //this.load()
   }
 
   ngOnInit() {
 
-    console.log(this.loggedUserChat);
+    console.log(this.wsChatMethodsService.group);
+
 
     this.segment = "Contactos";
 
     this.authService.userData$.subscribe((res: any) => {
       this.loggedUser = res;
       console.log(this.loggedUser);
-      this.load();
-
-      this.getDirectMessagesDB();
     });
 
-    /* websocket functions */
-    //this.sendMsg();
-
-    /* Fim websocket functions */
     this.hideRefreshButton();
     this.getChatMembers();
 
-    //Teste
     let t = this.showDateDuration(new Date());
-    console.log(t);
 
     this.setStatus('away');
     /* if(this.dataService.get("newGroup")){
@@ -221,21 +218,6 @@ export class ChatPage implements OnInit {
     }
   }
 
-
-  /* loadMessage(){
-    this.chatService.messages.subscribe(msg => {
-      console.log("Response from websocket: " + msg);
-    });
-  } */
-  /* sendMsg() {
-    console.log("new message from client to websocket: ", this.message);
-    this.chatService.messages.next(this.message);
-    this.message.msg = "";
-  } */
-
-
-  /* Fim websockets functions */
-
   closeAllDesktopComponents() {
     this.showMessages = false;
     this.showContacts = false;
@@ -378,38 +360,21 @@ export class ChatPage implements OnInit {
   }
 
   onSegmentChange() {
-    this.load();
+    //this.load();
   }
 
   doRefresh(event) {
     setTimeout(() => {
-      this.load();
+      //this.load();
       event.target.complete();
     }, 1000);
   }
 
-  refreshing() {
-    this.load();
-  }
-
-  load() {
-    switch (this.segment) {
-      case "Contactos":
-        this.showLoader = true;
-        this.getDirectMessages();
-        break;
-
-      case "Grupos":
-        this.showLoader = true;
-        this.getGroups();
-        break;
-    }
-  }
   customRoom() {
     let params = new HttpParams();
     params = params.set("types", "c");
     this.chatService.customsRooms(params).subscribe(res => {
-      console.log(res);
+      //console.log(res);
     });
   }
 
@@ -423,9 +388,9 @@ export class ChatPage implements OnInit {
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
         });
-        console.log('DIRECTMESSAGE FROM DB', this.userDirectMessages);
+        //console.log('DIRECTMESSAGE FROM DB', this.userDirectMessages);
 
-        console.log('ROOMS FROM DB', rooms)
+        //console.log('ROOMS FROM DB', rooms)
       })
 
       this.storageservice.get('chatusers').then((users) => {
@@ -433,7 +398,7 @@ export class ChatPage implements OnInit {
       })
     } else {
       this.sqlservice.getAllChatRoom().then((rooms: any) => {
-        console.log('ROOMS FROM DB', rooms)
+        //console.log('ROOMS FROM DB', rooms)
         let roomsArray = [];
         rooms.forEach(element => {
           let roomListDB = {
@@ -453,13 +418,13 @@ export class ChatPage implements OnInit {
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
         });
-        console.log('DIRECTMESSAGE FROM DB', this.userDirectMessages);
+        //console.log('DIRECTMESSAGE FROM DB', this.userDirectMessages);
 
-        console.log('ROOMS FROM DB', rooms)
+        //console.log('ROOMS FROM DB', rooms)
       })
 
       this.sqlservice.getAllChatUsers().then((userslist: any) => {
-        console.log('USERS FOM DB 1', userslist)
+        //console.log('USERS FOM DB 1', userslist)
         let chatusersArray = [];
         userslist.forEach(element => {
           console.log('USERS FOM DB 2', element)
@@ -490,10 +455,11 @@ export class ChatPage implements OnInit {
           _updatedAt: element._updatedAt
         }
 
-        console.log(' Web TRANSFORM ROOM LIST', roomList)
+        //console.log(' Web TRANSFORM ROOM LIST', roomList)
         roomsArray.push(roomList)
       });
 
+      this.storageservice.remove('rooms');
       this.storageservice.store('rooms', roomsArray);
 
     } else {
@@ -506,81 +472,41 @@ export class ChatPage implements OnInit {
           updatedat: element._updatedAt
         }
 
-        console.log('TRANSFORM ROOM LIST', roomList)
+        //console.log('TRANSFORM ROOM LIST', roomList)
         this.sqlservice.addChatListRoom(roomList);
       });
     }
   }
 
-  transformDataUserList(users) {
+  async transformDataUserList(users) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
       let usersArray = [];
       users.forEach(element => {
-        console.log('TRANSFORM USER CHAT 1', element)
+        //console.log('TRANSFORM USER CHAT 1', element)
         let chatusers = {
           _id: element._id,
           name: element.name,
           username: element.username
         }
-        console.log('TRANSFORM USER CHAT 2', chatusers)
+        //console.log('TRANSFORM USER CHAT 2', chatusers)
         usersArray.push(chatusers);
       });
-      this.storageservice.store('chatusers',usersArray);
+      await this.storageservice.remove('chatusers');
+      await this.storageservice.store('chatusers',usersArray);
     } else {
       users.forEach(element => {
-        console.log('TRANSFORM USER CHAT 1', element)
+        //console.log('TRANSFORM USER CHAT 1', element)
         let chatusers = {
           id: element._id,
           name: element.name,
           username: element.username
         }
-        console.log('TRANSFORM USER CHAT 2', chatusers)
+        //console.log('TRANSFORM USER CHAT 2', chatusers)
         this.sqlservice.addChatListUsers(chatusers);
       });
     }
   }
 
-  async getDirectMessages(event?) {
-    this.chatService.getAllDirectMessages().subscribe(async (res: any) => {
-      this.showLoader = false;
-      this.transformDataRoomList(res.ims)
-      this.getDirectMessagesDB()
-      console.log('Chat list', res);
-
-      if (res != 200) {
-        /* if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
-          this.userDirectMessages = res.ims.sort((a, b) => {
-          var dateA = new Date(a._updatedAt).getTime();
-          var dateB = new Date(b._updatedAt).getTime();
-          return dateB - dateA;
-        });
-        }  */
-        //console.log(res.ims);
-
-        //console.log(this.userDirectMessages);
-
-        if (this.route.url != "/home/chat") {
-          //console.log("Timer message stop")
-        }
-        else {
-          //console.log('TIMER');
-          //Check if modal is opened
-          if (this.segment == "Contactos" && this.showMessages != true) {
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            await this.getDirectMessages();
-            //console.log('Timer contactos list running')
-          }
-          else {
-            //console.log('No timer!');
-          }
-        }
-      }
-      else {
-        await this.getDirectMessages();
-      }
-    });
-  }
-
   showDateDuration(start: any) {
     return this.timeService.showDateDuration(start);
   }
@@ -592,13 +518,13 @@ export class ChatPage implements OnInit {
   async getChatMembers() {
     //return await this.chatService.getMembers(roomId).toPromise();
     this.chatService.getAllUsers().subscribe(res => {
-      console.log('chatusers', res);
+      //console.log('chatusers', res);
       this.transformDataUserList(res['users'])
 
-      if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      /* if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
         this.dmUsers = res['users'].filter(data => data.username != this.loggedUserChat.me.username);
-      console.log(this.dmUsers);
+      //console.log(this.dmUsers);
-      }
+      }*/
 
     });
   }
@@ -607,6 +533,14 @@ export class ChatPage implements OnInit {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
       this.storageservice.get("grouprooms").then((rooms) =>{
 
+        let k = rooms.sort((a, b) => {
+          var dateA = new Date(a._updatedAt).getTime();
+          var dateB = new Date(b._updatedAt).getTime();
+          return dateB - dateA;
+        });
+
+        console.log('GROUPS FROM DB',  k)
+
 
         this.allGroups = rooms.sort((a, b) => {
           var dateA = new Date(a._updatedAt).getTime();
@@ -614,7 +548,8 @@ export class ChatPage implements OnInit {
           return dateB - dateA;
         });
 
-        console.log('GROUPS FROM DB',  this.allGroups)
+        
+        //console.log('GROUPS FROM DB',  this.allGroups)
       })
 
       this.storageservice.get('chatusers').then((users) => {
@@ -643,7 +578,7 @@ export class ChatPage implements OnInit {
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
         });
-        console.log('Group FROM DB', this.allGroups);
+        //console.log('Group FROM DB', this.allGroups);
 
       })
 
@@ -668,7 +603,7 @@ export class ChatPage implements OnInit {
 
   }
 
-  transformGroups(data) {
+  async transformGroups(data) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
       let groupsArray = [];
       data.forEach(element => {
@@ -686,7 +621,8 @@ export class ChatPage implements OnInit {
         groupsArray.push(roomList)
       });
 
-      this.storageservice.store('grouprooms', groupsArray);
+      await this.storageservice.remove('grouprooms');
+      await this.storageservice.store('grouprooms', groupsArray);
 
     } else {
       data.forEach(element => {
@@ -716,27 +652,31 @@ export class ChatPage implements OnInit {
         this.transformGroups(res.groups);
         this.getGroupsDB();
 
-        /* this.privateGroups = res.groups;
-        this.transformGroups(res.groups);
-        this.getGroupsDB();
-
         this.privateGroups = res.groups;
-        console.log('Chat list group' , res); */
+        console.log('Chat list group' , res);
+        /* this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
+          this.publicGroups = res.channels; */
+        //let all = this.privateGroups.concat(this.publicGroups);
+        /* this.allGroups = this.privateGroups.sort((a, b) => {
+          var dateA = new Date(a._updatedAt).getTime();
+          var dateB = new Date(b._updatedAt).getTime();
+          return dateB - dateA;
+        }); */
         //console.log(this.allGroups);
         /* }); */
         if (this.route.url != "/home/chat") {
-          console.log("Timer message stop")
+          //console.log("Timer message stop")
         }
         else {
           //Check if modal is opened
           if (this.segment == "Grupos" && this.showGroupMessages != true) {
             await new Promise(resolve => setTimeout(resolve, 1000));
-            await this.getGroups();
+            //await this.getGroups();
           }
         }
       }
       else {
-        await this.getGroups();
+        //await this.getGroups();
       }
     });
   }
@@ -786,7 +726,7 @@ export class ChatPage implements OnInit {
   async openMessagesModal(roomId: any) {
     this.closeAllDesktopComponents();
 
-    console.log(roomId);
+    //console.log(roomId);
 
     const modal = await this.modalController.create({
       component: MessagesPage,

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

@@ -11,7 +11,7 @@
         </div>
         <div class="middle-container" *ngIf="!showMessageOptions">
           <div class="middle add-ellipsis">
-            <ion-label class="title">{{roomName}}</ion-label>
+            <ion-label class="title">{{wsChatMethodsService.getGroupRoom(roomId).name}}</ion-label>
           </div>
         </div>
         <div class="middle-container-options" *ngIf="showMessageOptions">
@@ -53,13 +53,13 @@
 
   <div (click)="handleClick()" class="messages overflow-y-auto" #scrollMe>
     <div class="welcome-text">
-      <ion-label>Esta conversa passou a grupo TIAGO</ion-label><br />
+      <ion-label>Esta conversa passou a grupo</ion-label><br />
       <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 class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getGroupRoom(roomId).massages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.msg !=''" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.msg !=''" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
         <div class="title">
-          <ion-label>{{msg.u.name}}</ion-label>
+          <ion-label>{{msg.u.name ?? ""}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
         </div>
         <div class="message">
@@ -98,9 +98,33 @@
         </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">
+          </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)"> -->
+                  File
+                  <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' && msg.t != 'ul' && msg.t != 'ru' && msg.alias =='documento'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
         <div class="title">
-          <ion-label>{{msg.u.name}}</ion-label>
+          <ion-label>{{msg.u.name ?? ""}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
         </div>
         <div class="message">
@@ -108,12 +132,11 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
               <div (click)="openPreview(msg)">
-                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
+                <img *ngIf="msg.image_url" src="{{msg.image_url}}" alt="image" >
               </div>
               <div>
                 <div>
                   <div class="file">
-                    <!-- <canvas id="pdf_canvas"></canvas> -->
                     <div (click)="viewDocument(msg.file, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
                       <span *ngIf="msg.file.type">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
@@ -160,9 +183,17 @@
         </div>
         {{last ? scrollToBottom() : ''}}
       </div>
+      <div *ngIf="msg.t == 'au'" class="info-text-leave">
+        <div *ngFor="let user of allUsers">
+          <div *ngIf="msg.msg == user.username">
+            <ion-label>Adicionou {{user.name}}</ion-label><br />
+          </div>
+        </div>
+        {{last ? scrollToBottom() : ''}}
+      </div>
       <div *ngIf="msg.file">
         <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
-          <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
+          <ion-label class="info-meeting-small">{{msg.u.name ?? ""}} criou esta reunião</ion-label><br />
           <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
           <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
           <ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
-import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController,Platform } 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';
@@ -23,6 +23,9 @@ 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 { SqliteService } from 'src/app/services/sqlite.service';
+import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service';
 
 @Component({
   selector: 'app-group-messages',
@@ -63,6 +66,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showMessageOptions = false;
   selectedMsgId:string;
   roomCountDownDate:any;
+  downloadFile: any;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
@@ -82,7 +86,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileService: FileService,
     private toastService: ToastService,
     public ThemeService: ThemeService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private sqlservice: SqliteService,
+    private platform: Platform,
+    public wsChatMethodsService: WsChatMethodsService
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -92,6 +99,14 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
         this.modalController.dismiss();
       }
     };
+
+    this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory();
+    this.wsChatMethodsService.getGroupRoom(this.roomId).scrollDown = this.scrollToBottomClicked;
+    
+    setTimeout(()=>{
+      this.scrollToBottomClicked()
+    }, 50)
+
   }
 
   ngOnInit() {
@@ -102,6 +117,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.serverLongPull();
     this.setStatus('online');
     this.getChatMembers();
+
+    this.getRoomMessageDB(this.roomId);
   }
 
   setStatus(status:string){
@@ -201,7 +218,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     } catch(err) { }
   }
 
-  scrollToBottomClicked(): void {
+  scrollToBottomClicked = () => {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     } catch(err) { }
@@ -272,7 +289,9 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
-        this.messages = msgOnly.reverse();
+        //this.messages = msgOnly.reverse();
+        this.transformDataMSG(msgOnly.reverse());
+      this.getRoomMessageDB(this.roomId);
         this.showLoader = false;
       });
     }
@@ -303,18 +322,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
 
 
-  sendMessage(){
+  sendMessage() {
-    let body = {
+    this.wsChatMethodsService.getDmRoom(this.roomId).send(this.message)
-      "message": { "rid": this.roomId, "msg": this.message }
-    }
-
-    this.chatService.sendMessage(body).subscribe(res=> {
-      this.getRoomInfo();
-      this.scrollingOnce = true;
-
-    },(error) => {
-
-    });
     this.message = "";
   }
 
@@ -572,6 +581,78 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
  */
 
+  getRoomMessageDB(roomId) {
+    if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+    } else {
+      this.sqlservice.getAllChatMSG(roomId).then((msg: any) => {
+        console.log('ALL MSG DBBB', msg)
+        let chatmsgArray = [];
+        let array = []
+        msg.forEach(element => {
+          console.log('CHANNEL ELEMENT', element.channels)
+
+          let msgChat = {
+            _id: element.Id,
+            attachments: this.isJson(element.Attachments),
+            channels: this.isJson(element.Channels),
+            file: this.isJson(element.File),
+            mentions: this.isJson(element.Mentions),
+            msg: element.Msg,
+            rid: element.Rid,
+            ts: element.Ts,
+            u: this.isJson(element.U),
+            _updatedAt: element.UpdatedAt,
+            image_url: this.isJson(element.image_url)
+          }
+
+          chatmsgArray.push(msgChat)
+        });
+
+        this.messages = chatmsgArray;
+        console.log('GROUP CHAT MSG FROM DB', chatmsgArray)
+      })
+    }
+  }
+
+  isJson(str) {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return "";
+    }
+    return JSON.parse(str);
+  }
+
+  transformDataMSG(res) {
+    if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+    } else {
+      res.forEach(element => {
+
+        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: {
+            name: name,
+            path: `${IMAGE_DIR}/${name}`,
+            data: `data:image/jpeg;base64,${readFile.data}`,
+          }, */
+        }
+
+        this.sqlservice.addChatMSG(chatmsg)
+
+      });
+    }
+
+  }
+
   async serverLongPull(){
     this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res => {
 
@@ -585,8 +666,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       //showMessage(response.statusText);
       //this.loadMessages()
       let msgOnly = res['messages'].filter(data => data.t != 'au');
-      this.messages = msgOnly.reverse();
+      //this.messages = msgOnly.reverse();
-      console.log(this.messages);
+      console.log('MOBILE MSG ROCKET',this.messages);
+      this.transformDataMSG(msgOnly.reverse());
+      this.getRoomMessageDB(this.roomId);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){
         console.log("Timer message stop")
@@ -650,17 +733,51 @@ touchStart(card) {
   card.el.style['z-index'] = 11;
 }
 
-  async openPreview(msg) {
+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), ''));
+        console.log('FILE TYPE 44', this.downloadFile)
+
+        msg.file = {
+          guid: msg.file.guid,
+          image_url: this.downloadFile,
+          type: msg.file.type
+        }
+        this.sqlservice.updateChatMsg(msg._id, this.downloadFile);
+      }
+    });
+    console.log('FILE TYPE 44', this.downloadFile)
+  }
+}
+
+async openPreview(msg) {
+
+  if (msg.file.image_url === null || msg.file.image_url  === '' ) {
+    this.downloadFileMsg(msg)
+
+  } else {
     const modal = await this.modalController.create({
       component: ViewMediaPage,
       cssClass: 'modal modal-desktop',
       componentProps: {
-        image: msg.attachments[0].image_url,
+        image: msg.file.image_url,
         username: msg.u.name,
-        _updatedAt: msg._updatedAt,
+        _updatedAt: msg._updatedAt
       }
     });
     modal.present();
   }
+
+}
 }
 

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

@@ -12,9 +12,9 @@
           </button>
         </div>
         <div class="middle-container" *ngIf="!showMessageOptions">
-          <div class="middle" *ngFor="let users of dmUsers">
+          <div class="middle">
-            <ion-label class="title">{{users.name}}</ion-label>
+            <ion-label class="title">{{wsChatMethodsService.getDmRoom(roomId).name}}</ion-label>
-            <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
+            <!-- <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span> -->
           </div>
         </div>
         <div class="middle-container-options" *ngIf="showMessageOptions">
@@ -49,9 +49,9 @@
     </ion-refresher-content>
   </ion-refresher> -->
   <div (click)="handleClick()" class="messages" #scrollMe>
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last"
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getDmRoom(this.roomId).massages; 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}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="downloadFileMsg(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -61,13 +61,14 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments let i = index">
               <div (click)="openPreview(msg)">
-                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+                <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
+                <img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
               </div>
               <div>
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <div (click)="docIndex(i); viewDocument(msg.file, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
+                    <div (click)="docIndex(i); downloadFileMsg(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
                       <span *ngIf="msg.file.type">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
@@ -92,7 +93,7 @@
         </div>
       </div>
 
-      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
+      <!-- <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -101,7 +102,7 @@
           <ion-label>{{msg.msg}}</ion-label>
           {{last ? scrollToBottom() : ''}}
         </div>
-      </div>
+      </div> -->
 
       <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngIf="msg.alias =='documento'">
         <div class="title">
@@ -111,8 +112,10 @@
         <div>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments let i = index">
-              <div *ngIf="file.image_url" (click)="openPreview(msg)">
+              <div (click)="openPreview(msg)">
-                <img src="{{file.image_url}}" alt="image">
+                <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
+                File
+                <img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
               </div>
               <div>
                 <div>
@@ -195,7 +198,7 @@
     </ion-item>
   </ion-list>
   <audio hidden controls>
-    <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg">
+    <!-- <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg"> -->
   </audio>
   <!-- <button (click)="startRecording()">Start Recording</button>
   <button (click)="stopRecording()">Stop Recording</button> -->

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

@@ -27,7 +27,10 @@ import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.
 import { SqliteService } from 'src/app/services/sqlite.service';
 import { elementAt } from 'rxjs-compat/operator/elementAt';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
+import { HttpEventType } from '@angular/common/http';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
+import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
+import { MessageService } from 'src/app/services/chat/message.service';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -77,6 +80,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   duration = 0;
   @ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
   myAudio: any;
+  downloadfile: any;
+  downloadFile: any;
 
   constructor(
     public popoverController: PopoverController,
@@ -94,7 +99,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     public ThemeService: ThemeService,
     private changeDetectorRef: ChangeDetectorRef,
     private platform: Platform,
-    private sqlservice: SqliteService
+    private sqlservice: SqliteService,
+    public wsChatMethodsService: WsChatMethodsService
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -105,10 +111,18 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         this.modalController.dismiss();
       }
     };
+
+    this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
+    this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
+    
+    setTimeout(()=>{
+      this.scrollToBottomClicked()
+    }, 50)
+
   }
 
   ngOnInit() {
-    this.load();
+    //this.load();
     this.setStatus('online');
 
     //this.loadFiles();
@@ -118,7 +132,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       directory: Directory.Data,
       recursive: true
     });
-    this.getRoomMessageDB(this.roomId);
   }
 
   ngAfterViewInit() {
@@ -278,7 +291,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     } catch (err) { }
   }
 
-  scrollToBottomClicked(): void {
+  scrollToBottomClicked = () => {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     } catch (err) { }
@@ -330,8 +343,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
-
-
   sendMessage() {
     let body = {
       "message":
@@ -360,7 +371,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   viewDocument(file: any, url?: string) {
-    console.log(file);
 
     if (file.type == "application/webtrix") {
       this.openViewDocumentModal(file);
@@ -566,10 +576,45 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  /* 
+        this.fileService.downloadFile(element.file.guid).subscribe(async (event) => {
+          var name = element.file.guid;
+          if (event.type === HttpEventType.DownloadProgress) {
+            
+          } else if (event.type === HttpEventType.Response) {
+            var base64 = btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), '')
+            );
+
+            console.log('TRY ARRAY BUFFER NAME', name);
+            console.log('TRY ARRAY BUFFER', base64);
+
+            await Filesystem.writeFile({
+              path: `${IMAGE_DIR}/${name}`,
+              data: base64,
+              directory: Directory.Data
+            }).then((foo) => {
+
+              console.log('LSKE FS FILE SAVED', foo)
+
+            }).catch((error) => {
+              console.log('error LAKE FS FILE', error)
+            });
+
+          
+
+          const readFile = await Filesystem.readFile({
+            path: `${IMAGE_DIR}/${name}`,
+            directory: Directory.Data,
+          }); 
+          
+          
+        });*/
+
   getRoomMessageDB(roomId) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
       this.sqlservice.getAllChatMSG(roomId).then((msg: any) => {
+        console.log('ALL MSG DBBB', msg)
         let chatmsgArray = [];
         let array = []
         msg.forEach(element => {
@@ -585,7 +630,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
             rid: element.Rid,
             ts: element.Ts,
             u: this.isJson(element.U),
-            _updatedAt: element.UpdatedAt
+            _updatedAt: element.UpdatedAt,
+            image_url: this.isJson(element.image_url)
           }
 
           chatmsgArray.push(msgChat)
@@ -612,6 +658,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
       res.forEach(element => {
+
         let chatmsg = {
           _id: element._id,
           attachments: element.attachments,
@@ -622,10 +669,16 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
           rid: element.rid,
           ts: element.ts,
           u: element.u,
-          _updatedAt: element._updatedAt
+          _updatedAt: element._updatedAt,
+          /* image_url: {
+            name: name,
+            path: `${IMAGE_DIR}/${name}`,
+            data: `data:image/jpeg;base64,${readFile.data}`,
+          }, */
         }
 
         this.sqlservice.addChatMSG(chatmsg)
+
       });
     }
 
@@ -729,20 +782,54 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     card.el.style['z-index'] = 11;
   }
 
+  downloadFileMsg(msg: MessageService) {
+    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), ''));
+
+          msg.file = {
+            guid: msg.file.guid,
+            image_url: this.downloadFile,
+            type: msg.file.type
+          }
+          this.sqlservice.updateChatMsg(msg._id, this.downloadFile);
+        }
+
+      });
+
+    }
+
+  }
 
   async openPreview(msg) {
+
+    if (msg.file.image_url === null || msg.file.image_url  === '' ) {
+      this.downloadFileMsg(msg)
+
+    } else {
       const modal = await this.modalController.create({
         component: ViewMediaPage,
         cssClass: 'modal modal-desktop',
         componentProps: {
-        image: msg.attachments[0].image_url,
+          image: msg.file.image_url,
           username: msg.u.name,
-        _updatedAt: msg._updatedAt,
+          _updatedAt: msg._updatedAt
         }
       });
       modal.present();
     }
 
+  }
+
 
   imageSize(img) {
     var canvas = document.createElement('canvas');

src/app/pages/events/events.page.ts

@@ -211,7 +211,7 @@ export class EventsPage implements OnInit {
       let mdPessoalEvents = await this.eventService.getAllMdPessoalEvents(start, end).toPromise();
 
       const list = mdOficialEvents.concat(mdPessoalEvents);
-      console.log("getAllMdOficialPessoalEvents", list)
+     
       this.addEventToDb(list);
       this.listToPresent = list
 

src/app/pages/login/login.page.ts

@@ -11,6 +11,7 @@ import { ClearStoreService } from 'src/app/services/clear-store.service';
 import { ChangeProfileService } from 'src/app/services/change-profile.service';
 import { ThemeService } from 'src/app/services/theme.service';
 import { StorageService } from 'src/app/services/storage.service';
+import { ChatService } from 'src/app/services/chat.service';
 
 @Component({
   selector: 'app-login',
@@ -39,7 +40,7 @@ export class LoginPage implements OnInit {
     private clearStoreService: ClearStoreService,
     private changeProfileService: ChangeProfileService,
     public ThemeService: ThemeService,
-    private storageservice: StorageService,
+    private storageservice: StorageService
   ) {}
 
   ngOnInit() {
@@ -97,6 +98,7 @@ export class LoginPage implements OnInit {
 
         loader.remove()
 
+        // login to API successfully
         if (attempt) {
 
           if (attempt.UserId == SessionStore.user.UserId) {
@@ -117,7 +119,7 @@ export class LoginPage implements OnInit {
             this.changeProfileService.run()
             await this.authService.loginChat(this.userattempt);
             this.getToken();
-            this.router.navigate(['/pin']);
+            this.router.navigateByUrl('/pin', { replaceUrl: true });
           }
 
         }

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

@@ -113,8 +113,6 @@ export class NewPublicationPage implements OnInit {
     // this.takePicture();
   }
 
-  imageUrl;
-
   async takePicture() {
 
     const capturedImage = await Camera.getPhoto({
@@ -125,10 +123,8 @@ export class NewPublicationPage implements OnInit {
     });
 
     const response = await fetch(capturedImage.webPath!);
-    this.imageUrl = capturedImage.webPath
     const blob = await response.blob();
 
-
     this.convertBlobToBase64Worker.postMessage(blob);
     this.convertBlobToBase64Worker.onmessage = async (oEvent)=> {
       this.capturedImage = oEvent.data

src/app/services/aesencrypt.service.ts

@@ -22,7 +22,7 @@ export class AESEncrypt {
 
         //Decrypting the string contained in cipherParams using the PBKDF2 key
         var decrypted = CryptoJS.AES.encrypt(encryptData, key128Bits1000Iterations, { mode: CryptoJS.mode.CBC, iv: iv, padding: CryptoJS.pad.Pkcs7 });
-        console.log('AES encrypt',decrypted.toString());
+        // console.log('AES encrypt',decrypted.toString());
 
         return decrypted.toString();
     }

src/app/services/auth.service.ts

@@ -10,7 +10,7 @@ import { AlertController } from '@ionic/angular';
 import { SessionStore } from '../store/session.service';
 import { AESEncrypt } from '../services/aesencrypt.service';
 import { CookieService } from 'ngx-cookie-service';
-
+import { WsChatService } from 'src/app/services/chat/ws-chat.service';
 @Injectable({
   providedIn: 'root'
 })
@@ -19,7 +19,9 @@ export class AuthService {
   userId$ = new BehaviorSubject<any>('');
   headers: HttpHeaders;
   public ValidatedUser: UserSession;
-  public ValidatedUserChat:any;
+  public wsValidatedUserChat:any;
+  public ValidatedUserChat:any = {}
+  public isWsAuthenticated: boolean = false;
   opts:any;
 
   constructor(
@@ -29,12 +31,22 @@ export class AuthService {
     public alertController: AlertController,
     private aesencrypt: AESEncrypt,
     private cookieService: CookieService,
-    ) {
+    private WsChatService: WsChatService) {
 
       this.headers = new HttpHeaders();
 
       if (SessionStore.exist) {
         this.ValidatedUser = SessionStore.user
+
+        console.log('login', SessionStore.user.RochetChatUser, SessionStore.user.Password)
+        this.WsChatService.connect();
+        this.WsChatService.login().then((message) => {
+          console.log('rocket chat login successfully', message)
+          this.WsChatService.setStatus('busy')
+        }).catch((message)=>{
+          console.log('rocket chat login failed', message)
+        })
+
       }
 
       if (localStorage.getItem("userChat") != null) {
@@ -76,6 +88,9 @@ export class AuthService {
           session.Profile = 'MDGPR'
         }
 
+        session.Password = user.password
+        session.RochetChatUser = user.username.split('@')[0]
+
         session.BasicAuthKey = user.BasicAuthKey
 
         SessionStore.reset(session)
@@ -91,24 +106,36 @@ export class AuthService {
     }
 
     //Login to rocketChat server
-    async loginChat(user: UserForm): Promise<boolean> {
+    async loginChat(user: UserForm) {
       let postData = {
         "user": user.username,
         "password": user.password,
       }
 
-      console.log(postData);
-
       let responseChat = await this.httpService.post('login', postData).toPromise();
-      if(responseChat){
+
+      if(responseChat) {
+
+        setTimeout(()=>{
+          console.log('login', SessionStore.user.RochetChatUser, SessionStore.user.Password)
+
+          this.WsChatService.connect();
+          this.WsChatService.login().then((message) => {
+            console.log('rocket chat login successfully', message)
+            this.WsChatService.setStatus('online')
+          }).catch((message)=>{
+            console.log('rocket chat login failed', message)
+          })
+        }, 1)
+
         console.log('Login to Rocket chat OK');
+
         this.ValidatedUserChat = responseChat;
+
         localStorage.setItem('userChat', JSON.stringify(responseChat));
-        localStorage.setItem('Meteor.loginToken', responseChat['data'].authToken);
+
-        localStorage.setItem('Meteor.userId',responseChat['data'].userId);
-        this.cookieService.set('rc_token', responseChat['data'].authToken);
-        this.cookieService.set('rc_uid', responseChat['data'].userId);
         this.storageService.store(AuthConnstants.AUTH, responseChat);
+
         return true;
       }
       else{

src/app/services/chat.service.ts

@@ -8,7 +8,6 @@ import { environment } from 'src/environments/environment';
 import { Storage } from '@ionic/storage';
 import { Message } from 'src/app/models/message.model';
 import { Observable, Subject } from "rxjs/Rx";
-import { WebsocketService } from './websocket.service';
 
 @Injectable({
   providedIn: 'root'
@@ -31,7 +30,6 @@ export class ChatService {
     private authService: AuthService,
     private storage: Storage,
     private storageService:StorageService,
-    //private wsService: WebsocketService,
     )
     {
       this.loggedUserChat = authService.ValidatedUserChat;
@@ -42,11 +40,6 @@ export class ChatService {
         headers: this.headers,
       };
 
-      /* this.messages = <Subject<any>>this.wsService.connect(this.SERVER_URL).map((response: MessageEvent): any => {
-          let data = JSON.parse(response.data);
-          console.log(data);
-          return (JSON.stringify(data));
-        }); */
     }
 
     getDocumentDetails(url:string){

src/app/services/chat/chat-user.service.spec.ts

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

src/app/services/chat/chat-user.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChatUserService {
+
+  constructor() { }
+}

src/app/services/chat/message.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { MethodsService } from './methods.service';
+import { MessageService } from './message.service';
 
-describe('MethodsService', () => {
+describe('MessageService', () => {
-  let service: MethodsService;
+  let service: MessageService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(MethodsService);
+    service = TestBed.inject(MessageService);
   });
 
   it('should be created', () => {

src/app/services/chat/message.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Message } from 'src/app/models/chatMethod';
+import { chatHistory, ChatMessage, File } from 'src/app/models/chatMethod'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+
+  customFields
+  channels = []
+  mentions = []
+  msg = ''
+  rid = ''
+  ts = {}
+  u = {}
+  t = ''
+  _id  =''
+  _updatedAt = {}
+  file
+  attachments
+
+  constructor() { }
+
+  setData({customFields, channels, mentions, msg ,rid ,ts, u, t, _id, _updatedAt, file, attachments}:Message) {
+    this.customFields = customFields
+    this.channels = channels
+    this.mentions = mentions
+    this.msg = msg
+    this.rid = rid
+    this.ts = ts
+    this.u = u
+    this.t = t
+    this._id = _id
+    this._updatedAt = _updatedAt
+    this.file = file
+    this.attachments = attachments
+  }
+
+  delete() {}
+
+  showDateDuration() {}
+
+}

src/app/services/chat/methods.service.ts

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ChatService } from '../chat.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MethodsService {
-
-  constructor(private chatService: ChatService) {
-  }
-}

src/app/services/chat/room.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { SynchroService } from './synchro.service';
+import { RoomService } from './room.service';
 
-describe('SynchroService', () => {
+describe('RoomService', () => {
-  let service: SynchroService;
+  let service: RoomService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(SynchroService);
+    service = TestBed.inject(RoomService);
   });
 
   it('should be created', () => {

src/app/services/chat/room.service.ts

@@ -0,0 +1,314 @@
+import { Injectable } from '@angular/core'
+import { WsChatService } from 'src/app/services/chat/ws-chat.service';
+import { MessageService } from 'src/app/services/chat/message.service'
+import { ChatUserService } from 'src/app/services/chat/chat-user.service'
+import { showDateDuration } from 'src/plugin/showDateDuration'
+import { ToastsService } from '../toast.service';
+import { chatHistory, ChatMessage } from 'src/app/models/chatMethod'
+import { Storage } from '@ionic/storage';
+import { Platform } from '@ionic/angular';
+import { SqliteService } from 'src/app/services/sqlite.service';
+@Injectable({
+  providedIn: 'root'
+})
+export class RoomService {
+
+  massages: MessageService[] = []
+  storageMessage: any[] = [];
+  lastMessage: MessageService;
+
+  chatUser: ChatUserService[] = []
+  customFields: any;
+  id = ''
+  t = ''
+  name = ''
+  _updatedAt = {}
+  private hasLoadHistory = false
+  duration = ''
+
+  private ToastService = ToastsService
+  mgsArray = [];
+
+  scrollDown = () => { }
+
+  constructor(
+    public WsChatService: WsChatService,
+    private MessageService: MessageService,
+    private storage: Storage,
+    private platform: Platform,
+    private sqlservice: SqliteService,
+  ) { }
+
+  setData({ customFields, id, name, t, lastMessage, _updatedAt }) {
+    this.customFields = customFields
+    this.id = id
+    this.name = name
+    this.t = t
+    this.lastMessage = lastMessage
+    this._updatedAt = _updatedAt
+
+    this.calDateDuration()
+  }
+
+  receiveMessage() {
+
+    this.WsChatService.receiveLiveMessageFromRoom(
+      this.id,
+      (ChatMessage) => {
+        ChatMessage = ChatMessage.fields.args[0]
+        ChatMessage = this.fix_updatedAt(ChatMessage)
+        console.log('recivemessage', ChatMessage)
+
+        /* this.ToastService._chatMessage({message:'Nova mensagem', sender:'Gilson'}) */
+        const message = new MessageService()
+        message.setData(ChatMessage)
+        this.lastMessage.msg = message.msg
+        if (message.t == 'r') { this.name = message.msg }
+        this.calDateDuration(ChatMessage._updatedAt)
+        this.massages.push(message)
+
+        setTimeout(() => {
+          this.scrollDown()
+        }, 100)
+
+
+        // save to ionic storage
+        this.storage.get('chatmsg' + this.id).then((messages: any) => {
+          const newListMessages = messages.push(ChatMessage)
+
+          this.storage.set('chatmsg' + this.id, newListMessages).then((value) => {
+            console.log('MSG SAVED ON STORAGE', value)
+          });
+        })
+
+      }
+    )
+  }
+
+  send(msg) {
+    this.WsChatService.send(this.id, msg)
+  }
+
+  getMsgFromDBMobile() {
+    console.log('ALL MSG DBBB', this.id)
+    this.sqlservice.getAllChatMSG(this.id).then((msg: any = []) => {
+      let ad = [];
+      ad = msg
+      console.log('ALL MSG DBBB', ad.length)
+      msg.map(element => {
+        console.log('CHANNEL ELEMENT', element)
+        let msgChat = {
+          _id: element.Id,
+          attachments: this.isJson(element.Attachments),
+          channels: this.isJson(element.Channels),
+          file: {
+            guid: this.isJson(element.File).guid,
+            image_url: this.isJson(element.image_url),
+            type: this.isJson(element.File).type
+
+          },
+          mentions: this.isJson(element.Mentions),
+          msg: element.Msg,
+          rid: element.Rid,
+          ts: element.Ts,
+          u: this.isJson(element.U),
+          _updatedAt: this.isJson(element.UpdatedAt),
+        }
+
+        let mmessage = this.fix_updatedAt(msgChat)
+        console.log('FROM DB WEB', mmessage)
+        const wewMessage = new MessageService()
+        wewMessage.setData(mmessage)
+        this.massages.push(wewMessage)
+        console.log('loadHistory 222', this.massages)
+      });
+    });
+  }
+
+  isJson(str) {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return "";
+    }
+    return JSON.parse(str);
+  }
+
+  getMsgFromDB() {
+
+    this.storage.get('chatmsg' + this.id).then((message) => {
+
+      message.forEach(message => {
+
+        if (message.file) {
+          if (message.file.guid) {
+            this.storage.get(message.file.guid).then((image) => {
+              console.log('IMAGE FROM STORAGE', image)
+              message.file.image_url = image
+            });
+          }
+        }
+
+        let mmessage = this.fix_updatedAt(message)
+        console.log('FROM DB WEB', mmessage)
+        const wewMessage = new MessageService()
+        wewMessage.setData(mmessage)
+        this.massages.push(wewMessage)
+        console.log('loadHistory 222', this.massages)
+      });
+    })
+  }
+
+  
+
+  // runs onces only
+  loadHistory(limit = 100) {
+
+    if (this.hasLoadHistory) { return false }
+
+    /* this.WsChatService.loadHistory(this.id, limit).then((chatHistory:chatHistory) => {
+      console.log('loadHistory', chatHistory)
+
+      chatHistory.result.messages.reverse().forEach(message => {
+
+        message = this.fix_updatedAt(message)
+        const wewMessage = new MessageService()
+        wewMessage.setData(message)
+        this.massages.push(wewMessage)
+      });
+
+
+    }) */
+
+    this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory: chatHistory) => {
+
+      const mgsArray = chatHistory.result.messages.reverse();
+      if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+        await this.storage.remove('chatmsg' + this.id).then(() => {
+          console.log('MSG REMOVE ON STORAGE')
+        })
+        await this.storage.set('chatmsg' + this.id, mgsArray).then((value) => {
+          console.log('MSG SAVED ON STORAGE', value)
+          this.getMsgFromDB()
+        });
+      } else {
+        mgsArray.forEach((element) => {
+          console.log('SQLITE WEBSOCKET', element)
+          this.sqlservice.addChatMSG(element)
+        })
+        this.getMsgFromDBMobile()
+      }
+
+
+    })
+
+    setTimeout(() => {
+      this.scrollDown()
+    }, 50)
+
+    this.hasLoadHistory = true
+  }
+
+
+  updateMeessage(messageID, imgbase64) {
+
+  }
+
+  async returnData(res) {
+
+    return res;
+  }
+
+  async transformData(res) {
+
+    this.mgsArray = [];
+    res.forEach(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,
+            }
+
+            this.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,
+          }
+
+          this.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,
+        }
+
+        this.mgsArray.push(chatmsg)
+      }
+
+    });
+    await this.storage.remove('chatmsg').then(() => {
+      console.log('MSG REMOVE FROM STORAGE')
+    });
+    await this.storage.set('chatmsg', this.mgsArray).then((value) => {
+      console.log('MSG SAVED ON STORAGE', value)
+    });
+
+  }
+
+  ReactToMessage() { }
+
+  private calDateDuration(date = null) {
+    this.duration = showDateDuration(date || this._updatedAt);
+  }
+
+
+  private fix_updatedAt(message) {
+    if (message.result) {
+      console.log('FIX UPDATE ', message.result)
+      message.result._updatedAt = message.result._updatedAt['$date']
+    } else {
+      console.log('FIX UPDATE 11', message)
+      message._updatedAt = message._updatedAt['$date']
+    }
+    return message
+  }
+
+
+  // to add
+  countDownDate() { }
+
+}

src/app/services/chat/websocket.service.spec.ts

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

src/app/services/chat/websocket.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import * as Rx from 'rxjs/Rx';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WebsocketService {
+
+  constructor() { }
+
+  private subject: Rx.Subject<MessageEvent>;
+
+  public connect(url): Rx.Subject<MessageEvent> {
+    if(!this.subject){
+      this.subject = this.create(url);
+      console.log("Sucessful connect :"+url);
+    }
+    return this.subject;
+  }
+
+  private create(url): Rx.Subject<MessageEvent>{
+    let ws = new WebSocket(url);
+
+    let observable = Rx.Observable.create(
+      (obs: Rx.Observer<MessageEvent>) => {
+        ws.onmessage = obs.next.bind(obs);
+        ws.onerror = obs.error.bind(obs);
+        ws.onclose = obs.complete.bind(obs);
+        return ws.close.bind(ws)
+      })
+
+      let observer = {
+        next: (data: Object) => {
+          if(ws.readyState === WebSocket.OPEN){
+            ws.send(JSON.stringify(data));
+          }
+        }
+      }
+
+    return Rx.Subject.create(observer, observable);
+
+  }
+}

src/app/services/chat/ws-chat-methods.service.spec.ts

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

src/app/services/chat/ws-chat-methods.service.ts

@@ -0,0 +1,141 @@
+import { Injectable } from '@angular/core';
+import { RoomService } from './room.service';
+import { WsChatService } from 'src/app/services/chat/ws-chat.service';
+import { MessageService } from 'src/app/services/chat/message.service'
+import { SessionStore } from 'src/app/store/session.service';
+import { capitalizeTxt } from 'src/plugin/text'
+import { Rooms, Update as room } from 'src/app/models/chatMethod';
+import { Storage } from '@ionic/storage';
+import { Platform } from '@ionic/angular';
+import { SqliteService } from 'src/app/services/sqlite.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WsChatMethodsService {
+
+
+
+  dm: {[key: string]:  RoomService} = {}
+  group: {[key: string]:  RoomService} = {}
+
+  loadingWholeList = false
+
+  dmCount = 0;
+  groupCount = 0;
+
+  constructor(
+    private WsChatService: WsChatService,
+    private storage: Storage,
+    private platform: Platform,
+    private sqlservice: SqliteService,
+  ) {
+    (async()=>{
+      await this.getAllRooms();
+      this.subscribeToRoom()
+
+    })()
+
+  }
+
+  async getAllRooms () {
+    this.loadingWholeList = true
+
+    const rooms = await this.WsChatService.getRooms();
+
+    // console.log("ROOMS" + JSON.stringify(rooms))
+
+    rooms.result.update.forEach((roomData: room) => {
+      let room:RoomService;
+
+      //console.log(roomData);
+
+
+      room = new RoomService(this.WsChatService, new MessageService(), this.storage, this.platform, this.sqlservice)
+      room.setData({
+        customFields: roomData.customFields,
+        id: this.getRoomId(roomData),
+        name: this.getRoomName(roomData),
+        t: roomData.t,
+        lastMessage: this.getRoomLastMessage(roomData),
+        _updatedAt: new Date(roomData._updatedAt['$date'])
+      })
+
+      room.receiveMessage()
+
+      let roomId = this.getRoomId(roomData)
+
+      if(this.isIndividual(roomData)) {
+        this.dm[roomId] = room
+        this.dmCount++
+      } else {
+        this.group[roomId] = room
+        this.groupCount++
+      }
+
+
+
+    });
+
+    this.loadingWholeList = false
+  }
+
+  subscribeToRoom() {
+
+    for (const id in this.dm) {
+      this.WsChatService.streamRoomMessages(id).then((subscription)=>{
+        console.log('streamRoomMessages', subscription)
+      })
+    }
+
+    for (const id in this.group) {
+      this.WsChatService.streamRoomMessages(id).then((subscription)=>{
+        console.log('streamRoomMessages', subscription)
+      })
+    }
+
+    this.WsChatService.streamNotifyLogged().then((subscription=>{
+      console.log('streamRoomMessages', subscription)
+    }))
+  }
+
+  getDmRoom(id): RoomService {
+    try {
+      return this.dm[id]
+    } catch(e) {}
+  }
+
+  getGroupRoom(id): RoomService {
+    try {
+      return this.group[id]
+    } catch(e) {}
+  }
+
+  getRoomName(roomData: room) {
+    if(this.isIndividual(roomData)) {
+      const names: String[] = roomData.usernames
+      const roomName = names.filter((name)=>{
+        return name != SessionStore.user.RochetChatUser
+      })[0]
+
+      const firstName = capitalizeTxt(roomName.split('.')[0])
+      const lastName =  capitalizeTxt(roomName.split('.')[1])
+      return firstName + ' ' + lastName
+    } else {
+      return roomData.fname
+    }
+  }
+
+  getRoomId(roomData:room) {
+    return roomData._id
+  }
+
+  getRoomLastMessage(roomData: room) {
+    return roomData.lastMessage
+  }
+
+  private isIndividual(roomData: room) {
+    return !roomData.fname
+  }
+
+}

src/app/services/chat/ws-chat.service.spec.ts

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

src/app/services/chat/ws-chat.service.ts

@@ -0,0 +1,424 @@
+import { Injectable } from '@angular/core';
+import { v4 as uuidv4 } from 'uuid'
+import { wsCallbacksParams, msgQueue, send } from 'src/app/models/rochet-chat-cliente-service'
+import { deepFind } from 'src/plugin/deep'
+import { environment } from 'src/environments/environment';
+import { SessionStore } from 'src/app/store/session.service';
+import { chatHistory, Rooms } from 'src/app/models/chatMethod';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WsChatService {
+
+  isLogin = false;
+  loginResponse = {}
+
+  constructor() {}
+
+  connect() {
+    // dont connect if is already connected
+    if(this.ws.connected == true) {
+      return false
+    }
+
+    this.ws.connect();
+
+    const message = {
+      msg: "connect",
+      version: "1",
+      support: ["1"]
+    }
+
+    this.ws.send({message, loginRequired: false})
+    this.ws.send({message:{msg:"pong"}, loginRequired: false})
+
+    this.ws.registerCallback({
+      type:'Onmessage',
+      key: this.constructor.name+'ping/pong',
+       funx:(message: any) => {
+        if(message.msg == "ping") {
+          this.ws.send({message:{msg:"pong"}, loginRequired: false})
+        }
+      }
+    })
+
+  }
+
+  login() {
+    // dont login if is already login
+    if(this.isLogin == true) {
+      return new Promise((resolve, reject)=>{
+        resolve(this.loginResponse)
+      })
+    }
+
+    const requestId =  uuidv4()
+
+    const message = {
+      msg: "method",
+      method: "login",
+      id: requestId,
+      params: [
+        {
+          user: { username: SessionStore.user.RochetChatUser },
+          password: SessionStore.user.Password
+        }
+      ]
+    }
+    this.ws.send({message, requestId, loginRequired: false})
+
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId ) { // same request send
+
+          if(message.result) {
+            if(message.result.token) {
+
+              this.isLogin = true
+              this.loginResponse = message
+
+              this.ws.wsMsgQueue()
+
+              resolve(message)
+            }
+          } else {
+            this.isLogin = false
+            reject(message)
+          }
+
+          reject(message)
+
+          return true
+        }
+      }})
+    });
+
+  }
+
+  getRooms(roomOlder = 1480377601) {
+
+    const requestId =  uuidv4()
+
+    const message = {
+      "msg": "method",
+      "method": "rooms/get",
+      "id": requestId,
+      "params": [ { "$date": 1480377601 } ]
+    }
+
+    this.ws.send({message, requestId})
+
+    return new Promise<Rooms>((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+  }
+
+  logout() {
+    this.isLogin = false
+    this.ws.connected = false
+  }
+
+  // send message to room
+  send(roomId, msg) {
+
+    const requestId =  uuidv4()
+
+    var message = {
+      msg: "method",
+      method: "sendMessage",
+      id: requestId,
+      params: [{
+        _id: uuidv4(),
+        rid: roomId,
+        msg: msg
+      }]
+    }
+
+    this.ws.send({message, requestId});
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId || deepFind(message,'result.id') == requestId) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+  }
+
+  joinRoom(){}
+  deleteMessage() {}
+  createRoom() {}
+
+
+
+  loadHistory(roomId, limit: number = 50) {
+
+    const requestId =  uuidv4()
+
+    const message = {
+      msg: "method",
+      method: "loadHistory",
+      id: requestId,
+      params: [
+        roomId,
+        null,
+        limit,
+        {
+          "$date": 1480377601
+        }
+      ]
+    }
+
+    this.ws.send({message, requestId})
+
+    return new Promise<chatHistory>((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        // console.log(message)
+        if(message.id == requestId ) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+  }
+
+  setStatus(status: 'online' | 'busy' | 'away' | 'offline') {
+
+    const requestId =  uuidv4()
+
+    const message = {
+
+      msg: "method",
+      method: `UserPresence:setDefaultStatus`,
+      id: requestId,
+      params: [ status ]
+
+    }
+
+    this.ws.send({message, requestId})
+
+  }
+
+  subscribeNotifyRoom(roomId : string) {
+
+    const requestId =  uuidv4()
+
+    var message = {
+      "msg": "sub",
+      "id": requestId,
+      "name": "stream-notify-room",
+      "params":[
+      `${roomId}/event`,
+        false
+      ]
+    }
+
+    this.ws.send({message, requestId});
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.msg == 'ready' || deepFind(message, 'subs.0') == requestId) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+
+  }
+
+  receiveLiveMessageFromRoom(roomId, funx: Function) {
+
+    this.ws.registerCallback({
+      type:'Onmessage',
+      funx:(message)=>{
+        if(message.msg =='changed' && message.collection == 'stream-room-messages') {
+          if(message.fields.args[0].rid == roomId) {
+            funx(message)
+          }
+        }
+      }
+    })
+  }
+
+
+  streamRoomMessages(roomId : string) {
+
+    const requestId =  uuidv4()
+
+    const message = {
+      "msg": "sub",
+      "id": requestId,
+      "name": "stream-room-messages",
+      "params":[
+        `${roomId}`,
+          false
+      ]
+    }
+
+    this.ws.send({message, requestId});
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+  }
+
+  streamNotifyLogged() {
+
+    alert('HERE')
+
+    const requestId =  uuidv4()
+
+    const message = {
+      "msg": "sub",
+      "id": requestId,
+      "name": "stream-notify-logged",
+      "params":[
+        "user-status",
+          false
+      ]
+    }
+
+    this.ws.send({message, requestId});
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId) { // same request send
+          resolve(message)
+          return true
+        }
+      }})
+    });
+  }
+
+  streamNotifyRoom(roomId : string) {
+
+    const requestId =  uuidv4()
+
+    let message = {
+      "msg": "method",
+      "method": "stream-notify-room",
+      "id": requestId,
+      "params": [
+        `null/typing`,
+        "paulo.pinto",
+        true
+      ]
+    };
+
+    this.ws.send({message, requestId})
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId || deepFind(message,'result.id') == requestId) { // same request send
+          resolve('')
+          return true
+        }
+      }})
+    });
+
+  }
+
+  registerCallback(data:wsCallbacksParams) {
+    return this.ws.registerCallback(data)
+  }
+
+  // socket class ==================================================================
+  private socket!: WebSocket;
+  private wsMsgQueue : {[key: string]:  msgQueue} = {}
+  private wsCallbacks: {[key: string]:  wsCallbacksParams} = {}
+
+  private ws = {
+    connected: false,
+    registerCallback:(params: wsCallbacksParams) => {
+
+      let id = params.requestId || params.key || uuidv4()
+      this.wsCallbacks[id] = params
+
+      return id
+    },
+    connect:()=> {
+      this.socket = new WebSocket(environment.apiWsChatUrl);
+      // bind function
+      this.socket.onopen = this.ws.onopen;
+      this.socket.onmessage = this.ws.onmessage;
+      this.socket.onclose = this.ws.onclose;
+      this.socket.onerror = this.ws.onerror;
+    },
+    onopen:()=> {
+      this.ws.connected = true
+      console.log('================== welcome to socket server =====================')
+
+      this.ws.wsMsgQueue()
+    },
+    wsMsgQueue:()=> {
+
+      for (const [key, item] of Object.entries(this.wsMsgQueue)) {
+
+        if(item.loginRequired == true && this.isLogin == true) {
+          // console.log('run msgQueue ',index)
+          this.ws.send(item);
+          delete this.wsMsgQueue[key]
+        } else if(item.loginRequired == false) {
+          // console.log('run msgQueue ',index)
+          this.ws.send(item);
+          delete this.wsMsgQueue[key]
+        }
+      }
+    },
+    send: ({message, requestId = uuidv4(), loginRequired = true}:send) => {
+
+      if (this.ws.connected == false || loginRequired == true && this.isLogin == false) { // save data to send when back online
+        // console.log('save msgQueue this.ws.connected == false || loginRequired == true && this.isLogin == false',this.ws.connected, loginRequired, this.isLogin)
+        this.wsMsgQueue[requestId] = {message, requestId, loginRequired}
+      } else {
+        let messageStr = JSON.stringify(message)
+        this.socket.send(messageStr)
+      }
+      return requestId
+    },
+
+    onmessage:(event: any)=> {
+      const data = JSON.parse(event.data)
+
+      for (const [key, value] of Object.entries(this.wsCallbacks)) {
+        if(value.type== 'Onmessage') {
+          const dontRepeat = value.funx(data)
+
+          if(dontRepeat) {
+            delete this.wsCallbacks[key]
+          }
+
+        }
+
+      }
+
+    },
+
+    onclose:(event: any)=> {
+      this.ws.connected = false
+      this.isLogin = false
+
+      this.connect()
+      this.login()
+
+      console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+    },
+
+    onerror: (event: any) =>  {
+      console.log(`[error] ${event.message}`);
+    }
+
+  }}

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

@@ -12,7 +12,7 @@ import { ToastService } from '../toast.service';
 import { Camera,  CameraResultType, CameraSource, Photo} from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { environment } from 'src/environments/environment';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpHeaders, HttpParams } from '@angular/common/http';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -39,6 +39,8 @@ export class FileService {
   idroom: any;
 
   headers: HttpHeaders;
+  downloadProgess = 0;
+  downloadFilename: any;
 
   constructor(
     private fileLoaderService: FileLoaderService,
@@ -57,8 +59,10 @@ export class FileService {
 
   uploadFile(formData:any){
 
+    console.log('UPLOAD file', formData)
+
     //const geturl = environment.apiURL + 'Tasks/DelegateTask';
-    const geturl = environment.apiURL + 'lakefs/UploadFiles';
+    const geturl = environment.apiURL + 'ObjectServer/UploadFiles';
 
     let options = {
       headers: this.headers
@@ -83,6 +87,28 @@ export class FileService {
     return this.http.get<any>(`${geturl}`, options);
   }
 
+   downloadFile(guid:any) {
+
+    let downloadUrl = environment.apiURL +'objectserver/streamfiles?path='+guid;
+    var name = new Date().getTime();
+   return this.http.get(downloadUrl, {
+      responseType: "arraybuffer",
+      reportProgress: true, observe: 'events'
+    })
+
+  }
+
+  _arrayBufferToBase64( buffer ) {
+    var binary = '';
+    var bytes = new Uint8Array( buffer );
+    var len = bytes.byteLength;
+    for (var i = 0; i < len; i++) {
+        binary += String.fromCharCode( bytes[ i ] );
+    }
+    return window.btoa( binary );
+}
+
+
   async takePicture() {
     const capturedImage = await Camera.getPhoto({
       quality: 90,
@@ -227,6 +253,10 @@ export class FileService {
     this.capturedImage = this.images[0].data
 
     this.capturedImageTitle = new Date().getTime() + '.jpeg';
+    const formData = new FormData();
+      formData.append("blobFile", this.capturedImage);
+    let guid: any = await this.uploadFile(this.capturedImage).toPromise()
+      console.log(guid.path);
 
     let body = {
       "message":
@@ -237,7 +267,12 @@ export class FileService {
           "title": this.capturedImageTitle,
           "title_link_download": false,
           "image_url": this.capturedImage,
-        }]
+        }],
+        "file":{
+          "type": "application/img",
+          "guid": guid.path,
+          "image_url": ""
+        }
       }
     }
     console.log('BODY TAKE PICTURE CHAT', body)
@@ -322,6 +357,8 @@ export class FileService {
 
   addPictureToChat(roomId) {
 
+    console.log('add picture to chat')
+
     const input = this.fileLoaderService.createInput({
       accept: ['image/apng', 'image/jpeg', 'image/png']
     })
@@ -344,7 +381,7 @@ export class FileService {
       const formData = new FormData();
       formData.append("blobFile", file);
       let guid: any = await this.uploadFile(formData).toPromise()
-      console.log(guid.path);
+      console.log('add picture to chat',guid.path);
 
       /* const imageData =  await this.fileToBase64Service.convert(file)
       this.capturedImage = imageData; */
@@ -364,6 +401,7 @@ export class FileService {
           "file":{
             "type": "application/img",
             "guid": guid.path,
+            "image_url": ""
           }
         }
       }
@@ -373,8 +411,9 @@ export class FileService {
 
       this.chatService.sendMessage(body).subscribe(res=> {
 
-        //console.log(res);
+        console.log('Msg after send image',res);
       },(error) => {
+        console.log('Msg after send image error',error);
       });
       //console.log(this.capturedImage)
     };

src/app/services/socket/synchro.service.ts

@@ -1,215 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SessionStore } from 'src/app/store/session.service';
-import { v4 as uuidv4 } from 'uuid'
-import { BackgroundService } from '../background.service';
-import { environment } from 'src/environments/environment';
-import { EventTrigger } from '../eventTrigger.service'
-
-export interface wss {
-
-  url: string,
-  type: 'reflect' | 'emit'
-  header: {
-    id: string
-    bluePrint: string,
-    jwt: string
-  }
-
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-class SynchroService {
- /*  [x: string]: any;
-
-  private connection!: WebSocket;
-  private id: string = uuidv4();
-  public conected = false
-  private url: string = ''
-  callback = function () { }
-  private _connected = false;
-  private eventtrigger: EventTrigger;
-  private BackgroundService = new BackgroundService()
-  callBacks: {
-    type: 'Offline' | 'Online' | 'Onmessage' | 'Chat' | 'Notification' | 'Notifications' | '',
-    object?: string
-    funx: Function
-  }[] = []
-  private msgQueue = []
-
-  constructor() {
-    // alert(SessionStore.user.FullName)
-  }
-
-  get connected() {
-    return this._connected
-  }
-
-  setUrl() {
-
-    let header = {
-      id: '1234',
-      bluePrint: '12312123',
-      jwt: uuidv4()
-    }
-
-    let wss: wss = {
-      header,
-      url: 'wss://sychro-offline.herokuapp.com/ws/some_url/',
-      type: 'reflect'
-    }
-
-    this.url = `${wss.url}${wss.header.id}/${wss.header.jwt}/${wss.header.bluePrint}/${this.id}/`
-  }
-
-  registerCallback(type: 'Offline' | 'Online' | 'Onmessage' | 'Chat' | 'Notifications' | 'Notification', funx: Function, object = '') {
-    this.callBacks.push({
-      type,
-      funx,
-      object
-    })
-  }
-
-  connect() {
-
-    this.connection = new WebSocket(this.url);
-    // bind function
-    this.connection.onopen = this.onopen;
-    this.connection.onmessage = this.onmessage;
-    this.connection.onclose = this.onclose;
-    this.connection.onerror = this.onerror;
-  }
-
-  private onopen = () => {
-
-
-
-    //if (this._connected === true) {
-      //this.BackgroundService.online()
-      console.log('Online', this._connected)
-      this.callBacks.forEach((e) => {
-        if (e.type == 'Online') {
-          e.funx()
-        }
-      })
-    //}
-
-    console.log('open ======================= welcome to socket server')
-
-    this._connected = true
-
-    // send all saved data due to internet connection
-    this.msgQueue.forEach((item, index, object) => {
-      this.$send(item);
-      object.splice(index, 1);
-    })
-
-  }
-
-  public $send(object: any) {
-
-    if (!this._connected) { // save data to send when back online
-      this.msgQueue.push(object)
-    }
-
-    let payload = {
-      message: JSON.stringify(object) || '{"person.adress.country":"1Angola"}',
-      username: SessionStore.user.FullName,
-      idConnection: this.id
-    }
-
-
-    let sendData = JSON.stringify(payload);
-    console.log(sendData)
-
-    this.connection.send(sendData);
-  }
-
-  private onmessage = async (event: any) => {
-
-
-    let data = JSON.parse(event.data)
-    let payload = JSON.parse(data.message)
-    payload.message = JSON.parse(payload.message)
-    const idConnection = payload.idConnection
-    const username = payload.username
-
-    if (idConnection != this.id) {
-
-      if (window['platform'].is('desktop') || this.platform.is('mobileweb')) { }
-      else return false
-
-      if (environment.production) return false
-
-      this.callBacks.forEach((e) => {
-
-        if (payload.message[0]) {
-          if (payload.message[0].Service && payload.message[0].Object && payload.message[0].IdObject) {
-            if (e.type == '' && !e.object) {
-              if (username == SessionStore.user.FullName) {
-                e.funx(payload.message, data)
-              }
-            }
-
-            if (e.type == 'Notifications') {
-              e.funx(payload.message, data)
-            }
-
-          }
-        } else if (payload.message.Service && payload.message.Object && payload.message.IdObject) {
-          if (e.type == 'Notification' && e.object == payload.message.Object || e.type == 'Notification' && e.object == 'any') {
-            e.funx(payload.message, data)
-          }
-        }
-
-      })
-
-    }
-    this.callback()
-  }
-
-  private onclose = (event: any) => {
-    console.log('Websocket close')
-    setTimeout(() => {
-      if (event.wasClean) {
-        console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
-      } else {
-        // e.g. server process killed or network down
-        // event.code is usually 1006 in this case
-        console.log('[close] Connection died');
-        console.log('Reconnect')
-
-
-
-       // if (this._connected === false) {
-         // this.BackgroundService.offline();
-          console.log('Offline', this._connected)
-          this.callBacks.forEach((e) => {
-            if (e.type == 'Offline') {
-              e.funx()
-            }
-          })
-        //}
-
-
-        // status
-        this._connected = false
-        // reconnect
-        this.connect()
-
-      }
-    }, 100);
-  }
-
-  private onerror = (event: any) => {
-    console.log(`[error] ${event.message}`);
-  } */
-}
-
-
-/* export const synchro = new SynchroService()
-synchro.setUrl()
-synchro.connect()
-
-window['synchro'] = synchro */

src/app/services/sqlite.service.ts

@@ -172,7 +172,8 @@ export class SqliteService {
                 Rid varchar(255),
                 Ts varchar(255),
                 U Text,
-                UpdatedAt varchar(255)
+                UpdatedAt varchar(255),
+                image_url Text
               )`, [])
                 .then((res) => {
                   console.log("Sucess chat msg Table created: ", res)
@@ -278,8 +279,8 @@ export class SqliteService {
   public addChatMSG(data) {
     console.log('INSIDE DB CHAT MSG',data,)
     this.dbInstance.executeSql(`
-      INSERT OR REPLACE INTO ${this.chatmsg} (Id,Attachments,Channels,File,Mentions,Msg,Rid, Ts ,U, UpdatedAt) 
+      INSERT OR IGNORE INTO ${this.chatmsg} (Id,Attachments,Channels,File,Mentions,Msg,Rid, Ts ,U, UpdatedAt) 
-      VALUES ('${data._id}','${JSON.stringify(data.attachments)}','${JSON.stringify(data.channels)}','${JSON.stringify(data.file)}','${JSON.stringify(data.mentions)}','${data.msg}','${data.rid}','${data.ts}','${JSON.stringify(data.u)}','${data._updatedAt}')`, [])
+      VALUES ('${data._id}','${JSON.stringify(data.attachments)}','${JSON.stringify(data.channels)}','${JSON.stringify(data.file)}','${JSON.stringify(data.mentions)}','${data.msg}','${data.rid}','${data.ts}','${JSON.stringify(data.u)}','${JSON.stringify(data._updatedAt)}')`, [])
       .then(() => {
         console.log("chat msg add with Success");
 
@@ -318,6 +319,24 @@ export class SqliteService {
 
   }
 
+  //updateChatMsg
+  public updateChatMsg(id, data) {
+    let jsonId = JSON.stringify(id)
+    let jsondata = JSON.stringify(data)
+    try {
+      console.log("update action data", data)
+      this.dbInstance.executeSql(`
+      UPDATE ${this.chatmsg} SET image_url = ? WHERE Id = ${jsonId}`, [jsondata])
+        .then(() => {
+          console.log("ChatMsg update with Success");
+
+        }, (e) => {
+          console.log(JSON.stringify(e.err));
+        });
+    } catch(error) {}
+
+  }
+
 
   //updateprocess
   public updateProcess(data) {

src/app/services/toast.service.ts

@@ -10,8 +10,6 @@ export class ToastService {
 
   constructor(
     public toastController: ToastController,
-    private animationController: AnimationController,
-    private modalController: ModalController,
   ) { }
 
   ngOnInit() {}
@@ -91,6 +89,39 @@ export class ToastService {
 
   }
 
+  async _chatMessage(message?: any, sender?:string) {
+
+    let notification = document.createElement('div')
+    notification.className = 'notification'
+    notification.innerHTML = `
+
+    <div class="main-content width-100 pa-20">
+      <p class="message d-flex align-bottom success">
+        <ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
+        <p class="text">{{ message.message }}</p>
+      </p>
+      <p class="text">{{ message.sender }} </p>
+
+    </div>
+    `
+
+    document.body.append(notification)
+    notification.querySelector('.text').innerHTML =  message || 'Processo efetuado'
+    setTimeout(()=>{
+      /* if (callback) {
+        callback()
+      } */
+
+      notification.style.right = "-100%"
+
+      setTimeout(()=>{
+        notification.remove()
+      },1000)
+
+    },6000)
+
+  }
+
   async successMessage(message?: any, callback?) {
 
     let notification = document.createElement('div')
@@ -219,7 +250,7 @@ export class ToastService {
       </div>
     `;
 
-    console.log(document.querySelector('body').classList)
+    // console.log(document.querySelector('body').classList)
     document.body.append(loader)
 
     loader.addEventListener('click', ()=>{
@@ -230,3 +261,6 @@ export class ToastService {
   }
 
 }
+
+
+export const ToastsService = new ToastService(new ToastController())

src/app/services/websocket.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import * as Rx from "rxjs/Rx";
+import { Observable, Subject } from "rxjs/Rx";
 
 @Injectable({
   providedIn: 'root'
@@ -7,11 +8,13 @@ import * as Rx from "rxjs/Rx";
 export class WebsocketService {
 
   message = '';
-  messages = [];
+  public messages: Subject<any>;
   currentUser = '';
   private subject: Rx.Subject<MessageEvent>;
 
-  constructor() { }
+  constructor() {
+    console.log("CHAT WEBSOCKET");
+   }
 
   public connect(url): Rx.Subject<MessageEvent> {
     if (!this.subject) {

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

@@ -3,7 +3,7 @@
     <div class="main-header">
       <div class="header-top">
         <div class="middle">
-          <ion-label class="title">{{roomName}}</ion-label>
+          <ion-label class="title">{{wsChatMethodsService.getGroupRoom(roomId).name}}</ion-label>
         </div>
         <div class="right">
           <button title="Menu" class="btn-no-color" (click)="openGroupMessagesOptions()">
@@ -23,10 +23,10 @@
           </ion-label>
         </div>
       </div>
-      <div *ngIf="room.customFields.countDownDate" class="d-flex align-items-center yellow-orange pl-10">
+      <!-- <div *ngIf="room.customFields.countDownDate" class="d-flex align-items-center yellow-orange pl-10">
         <i class="far fa-clock font-15" ></i>
         <ion-label class="font-15 pl-10" color="warning">{{countDownDate()}}</ion-label>
-      </div>
+      </div> -->
     </div>
   </ion-toolbar>
 </ion-header>
@@ -44,8 +44,8 @@
       <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">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getGroupRoom(roomId).massages; let last = last">
-      <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.msg !=''" >
+      <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.msg !=''" >
         <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">
@@ -93,7 +93,7 @@
       </div>
 
 
-      <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.alias =='documento'" >
+      <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.alias =='documento'" >
         <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">
@@ -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">
@@ -162,6 +191,14 @@
         </div>
         {{last ? scrollToBottom() : ''}}
       </div>
+      <div *ngIf="msg.t == 'au'" class="info-text-leave">
+        <div *ngFor="let user of allUsers">
+          <div *ngIf="msg.msg == user.username">
+            <ion-label>Adicionou {{user.name}}</ion-label><br />
+          </div>
+        </div>
+        {{last ? scrollToBottom() : ''}}
+      </div>
       <div *ngIf="msg.file" >
         <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
           <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
@@ -206,16 +243,16 @@
           <ion-fab-button title="Nova Reunião" (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <!-- <ion-fab-button title="Adicionar um ficheiro" (click)="addFile()" color="light">
+          <ion-fab-button (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button title="Anexar Fotografia" (click)="addImage()" color="light">
+          <ion-fab-button (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button title="Tirar Fotografia" class="hide-desktop" (click)="takePicture()" color="light">
+          <ion-fab-button class="hide-desktop" (click)="takePicture()" color="light">
             <ion-icon name="camera"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <ion-fab-button title="Anexar documento da Gestão Documental" (click)="addFileWebtrix()" color="light">
+          <ion-fab-button (click)="addFileWebtrix()" color="light">
             <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>

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

@@ -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,10 @@ 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 { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service';
+import { MessageService } from 'src/app/services/chat/message.service';
 
 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -38,41 +42,42 @@ if( pdfjsLib !== undefined ){
 })
 export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   showLoader: boolean;
-  isGroupCreated:boolean;
+  isGroupCreated: boolean;
   loggedUser: any;
-  message:any;
+  message: any;
-  messages:any;
+  messages: any;
-  allUsers:any[] = [];
+  allUsers: any[] = [];
-  documents:SearchList[] = [];
+  documents: SearchList[] = [];
 
 
-  room:any = new Array();
+  room: any = new Array();
-  roomName:any;
+  roomName: any;
-  members:any;
+  members: any;
 
-  capturedImage:any;
+  capturedImage: any;
-  capturedImageTitle:any;
+  capturedImageTitle: any;
 
-  loggedUserChat:any;
+  loggedUserChat: any;
-  scrollingOnce:boolean = true;
+  scrollingOnce: boolean = true;
   private scrollChangeCallback: () => void;
   currentPosition: any;
   startPosition: number;
   scrollToBottomBtn = false;
-  roomCountDownDate:string;
+  roomCountDownDate: string;
-  roomCountDownTime:string;
+  roomCountDownTime: string;
 
-  @Input() roomId:string;
+  @Input() roomId: string;
-  @Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
+  @Output() closeAllDesktopComponents: EventEmitter<any> = new EventEmitter<any>();
-  @Output() showEmptyContainer:EventEmitter<any> = new EventEmitter<any>();
+  @Output() showEmptyContainer: EventEmitter<any> = new EventEmitter<any>();
-  @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
+  @Output() openGroupContacts: EventEmitter<any> = new EventEmitter<any>();
-  @Output() openEditGroupPage:EventEmitter<any> = new EventEmitter<any>();
+  @Output() openEditGroupPage: EventEmitter<any> = new EventEmitter<any>();
-  @Output() openNewEventPage:EventEmitter<any> = new EventEmitter<any>();
+  @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
-  @Output() getGroups: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 +95,9 @@ 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,
+    public wsChatMethodsService: WsChatMethodsService
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -101,26 +108,39 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   ngOnChanges(changes: SimpleChanges): void {
     this.getRoomInfo();
     //this.scrollToBottom();
+    this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory();
+    this.wsChatMethodsService.getGroupRoom(this.roomId).getMsgFromDB();
+    console.log('MESSAGES'+this.wsChatMethodsService.getGroupRoom(this.roomId).massages);
+    this.wsChatMethodsService.getGroupRoom(this.roomId).scrollDown = this.scrollToBottomClicked
+
+    setTimeout(()=>{
+      this.scrollToBottomClicked()
+    }, 50)
+
   }
 
   ngOnInit() {
+    this.loggedUser = this.loggedUserChat;
+    //console.log(this.wsChatMethodsService.getRoom(this.roomId).massages);
+
     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 +152,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 {
+  scrollToBottomClicked = () => {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
-    } catch(err) { }
+    } catch (err) { }
   }
 
   async goToEvent(eventId: any) {
@@ -182,10 +202,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 +216,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 +226,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 +238,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'];
+    this.room = room['room'];
-    if(this.room.name){
+    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'){
+    if (room.t === 'p') {
-      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+      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{
+    else {
-      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res => {
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -267,7 +287,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }
   }
 
-  loadGroupMessages(roomId){
+  loadGroupMessages(roomId) {
     //console.log('here'+room.t);
 
     this.showLoader = true;
@@ -275,10 +295,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     /* if(room.t === 'p'){
       console.log('private'); */
 
-      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
+    this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res => {
       console.log(res);
       let msgOnly = res['messages'].filter(data => data.t != 'au');
-        this.messages = msgOnly.reverse();
+      //this.messages = msgOnly.reverse();
       //console.log(res);
 
       this.showLoader = false;
@@ -293,32 +313,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     } */
   }
 
-  sendMessage(){
+  sendMessage() {
-    let body = {
+    this.wsChatMethodsService.getDmRoom(this.roomId).send(this.message)
-      "message":
-      {
-        "rid": this.roomId,
-        "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=> {
-     /*  this.loadGroupMessages(); */
-     //this.getRoomInfo();
-     this.scrollingOnce = true;
-    });
     this.message = "";
   }
 
-  deleteMessage(msgId:string){
+  deleteMessage(msgId: string) {
     let body = {
       "roomId": this.roomId,
       "msgId": msgId,
@@ -374,26 +374,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 +405,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
   }
 
-  openSendGroupMessageOptions(ev?: any){
+  openSendGroupMessageOptions(ev?: any) {
-    if(window.innerWidth <= 701){
+    if (window.innerWidth <= 701) {
       console.log('mobile');
       this.openChatOptions(ev);
     }
-    else{
+    else {
       console.log('desktop');
       this._openChatOptions();
     }
@@ -428,9 +428,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 +450,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 +470,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
     await modal.present();
 
-    modal.onDidDismiss().then(()=>{
+    modal.onDidDismiss().then(() => {
       //this.getRoomInfo();
       this.loadGroupMessages(this.roomId)
     });
@@ -504,9 +504,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)
@@ -540,23 +540,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 +567,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       }
     });
     await modal.present();
-    modal.onDidDismiss().then(async res=>{
+    modal.onDidDismiss().then(async res => {
-      if(res){
+      if (res) {
         const data = res.data;
         this.documents.push(data.selected);
         console.log(res.data.selected);
@@ -576,7 +576,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 +595,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 +605,17 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
   }
 
-  viewDocument(file:any, url?:string){
+  viewDocument(file: any, url?: string) {
-    if(file.type == "application/webtrix") {
+    if (file.type == "application/webtrix") {
       this.openViewDocumentModal(file);
     }
-     else{
+    else {
       let fullUrl = "https://www.tabularium.pt" + url;
       this.fileService.viewDocumentByUrl(fullUrl);
     }
   }
 
-  async openViewDocumentModal(file:any){
+  async openViewDocumentModal(file: any) {
     let task = {
       serialNumber: '',
       taskStartDate: '',
@@ -637,7 +637,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       "ApplicationId": file.ApplicationId,
       "CreateDate": "",
       "Data": null,
-        "Description":"",
+      "Description": "",
       "Link": null,
       "SourceId": file.DocId,
       "SourceName": file.Assunto,
@@ -664,19 +664,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 +721,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 +731,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,47 +751,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
   }
 
-  async serverLongPull(){
-
-    if(this.route.url != "/home/chat" && document.querySelector('app-group-messages')){
-      console.log("Timer message stop")
-    }
-    else
-    {
-
-      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);
-          // 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();
-          }
-
-        }
-        else {
-          alert('HEY2')
-          // Got message
-          //let message = await response.text();
-          //this.loadMessages()
-          await this.serverLongPull();
-        }
-      }, (error)=>{
-        console.log(error);
-        this.serverLongPull();
-      });
-    }
-  }
-
 
   sliderOpts = {
     zoom: false,
@@ -800,9 +759,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     centeredSlides: true
   };
   zoomActive = false;
-zoomScale = 1;
+  zoomScale = 1;
 
-sliderZoomOpts = {
+  sliderZoomOpts = {
     allowSlidePrev: false,
     allowSlideNext: false,
     zoom: {
@@ -811,13 +770,13 @@ sliderZoomOpts = {
     on: {
       zoomChange: (scale, imageEl, slideEl) => {
         this.zoomActive = true;
-      this.zoomScale = scale/5;
+        this.zoomScale = scale / 5;
         this.changeDetectorRef.detectChanges();
       }
     }
-}
+  }
 
-async touchEnd(zoomslides: IonSlides, card) {
+  async touchEnd(zoomslides: IonSlides, card) {
     // Zoom back to normal
     const slider = await zoomslides.getSwiper();
     const zoom = slider.zoom;
@@ -828,25 +787,63 @@ async touchEnd(zoomslides: IonSlides, card) {
 
     this.zoomActive = false;
     this.changeDetectorRef.detectChanges();
-}
+  }
 
-touchStart(card) {
+  touchStart(card) {
     // Make card appear above backdrop
     card.el.style['z-index'] = 11;
-}
+  }
 
-async openPreview(msg) {
+  downloadFileMsg(msg: MessageService) {
+    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), ''));
+          
+          msg.file = {
+            guid: msg.file.guid,
+            image_url: this.downloadFile,
+            type: msg.file.type
+          }
+
+          await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
+            console.log('IMAGE SAVED')
+          });
+        }
+
+      });
+
+    }
+
+  }
+
+  async openPreview(msg) {
+
+    if (msg.file.image_url === null || msg.file.image_url  === '' ) {
+      this.downloadFileMsg(msg)
+
+    } else {
       const modal = await this.modalController.create({
         component: ViewMediaPage,
         cssClass: 'modal modal-desktop',
         componentProps: {
-      image: msg.attachments[0].image_url,
+          image: msg.file.image_url,
           username: msg.u.name,
-      _updatedAt: msg._updatedAt,
+          _updatedAt: msg._updatedAt
         }
       });
       modal.present();
-}
+    }
+
+  }
 
 }
 

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

@@ -2,14 +2,15 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <div class="middle" *ngFor="let users of dmUsers">
+        <div class="middle">
-          <ion-label class="title">{{users.name}}</ion-label>
+          <ion-label class="title">{{ wsChatMethodsService.getDmRoom(roomId).name }}</ion-label>
-          <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
+          <!-- <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span> -->
         </div>
         <div hidden class="right">
           <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
+            </ion-icon>
           </button>
         </div>
       </div>
@@ -37,10 +38,11 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of  wsChatMethodsService.getDmRoom(roomId).massages; let last = last">
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
         <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>
+          <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>
@@ -54,9 +56,11 @@
           {{last ? scrollToBottom() : ''}}
         </div>
       </div>
-      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.alias == 'documento'">
+      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'
+        *ngIf="msg.alias == 'documento'">
         <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>
+          <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>
@@ -69,16 +73,23 @@
           <!-- <ion-label>{{msg.msg}}</ion-label> -->
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <div (click)="openPreview(msg)">
+
-                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <div (click)="downloadFileMsg(msg)" dfsdvsvs>
+                <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
+                <img src={{msg.image_url}} alt="image">
+                <!-- <div (click)="openPreview(msg)">
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image"> -->
               </div>
               <div *ngIf="msg.file">
                 <div class="file">
-                    <div (click)="viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
+                  <div (click)="viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer"
+                    *ngIf="msg.file">
                     <span *ngIf="msg.file.type">
                       <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                       <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
-                        <fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
+                      <fa-icon
+                        *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
+                        icon="file-word" class="excel-icon"></fa-icon>
                       <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
                       <ion-icon *ngIf="msg.file.type == 'application/meeting'" src="assets/icon/webtrix.svg"></ion-icon>
                     </span>
@@ -89,7 +100,8 @@
                   <ion-label *ngIf="msg.file">
                     <span *ngIf="file.description">{{file.description}}</span>
                     <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
-                      <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
+                    <span
+                      *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
                   </ion-label>
                 </div>
               </div>
@@ -99,12 +111,53 @@
         </div>
 
       </div>
-      <div *ngIf="msg.file" >
+
+      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
+        <div *ngIf="msg.file">
+          <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)"> -->
+                    File
+                    <img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
+                  </div>
+                </div>
+              </div>
+              {{last ? scrollToBottom() : ''}}
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div *ngIf="msg.file">
         <div class="info-meeting" *ngIf="msg.file.type == 'application/meeting'">
           <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
-          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
+          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
-          <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
+            <ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label>
-          <ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
+          </button><br />
+          <ion-label class="info-meeting-medium">
+            <ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a
+            {{showDateDuration(msg.file.end_date)}}
+          </ion-label><br />
+          <ion-label class="info-meeting-medium">
+            <ion-icon></ion-icon>
+            <ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}
+          </ion-label><br />
         </div>
         {{last ? scrollToBottom() : ''}}
       </div>
@@ -134,16 +187,16 @@
           <ion-fab-button title="Nova Reunião" (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <!-- <ion-fab-button title="Adicionar um ficheiro" hidden (click)="addFile()" color="light">
+          <ion-fab-button hidden (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button title="Anexar Fotografia" (click)="addImage()" color="light">
+          <ion-fab-button (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button title="Tirar Fotografia" (click)="takePicture()" color="light">
+          <ion-fab-button (click)="takePicture()" color="light">
             <ion-icon name="camera"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <ion-fab-button title="Anexar documento da Gestão Documental" (click)="addFileWebtrix()" color="light">
+          <ion-fab-button (click)="addFileWebtrix()" color="light">
             <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
@@ -152,7 +205,8 @@
 
     <div class="width-100">
       <ion-item class="ion-no-padding type-message" lines="none">
-        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-textarea (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem"
+          class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
         <button hidden class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
@@ -160,14 +214,17 @@
     </div>
     <div>
       <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button title="Enviar Mensagem" *ngIf="!message" class="btn-no-color">
+      <button *ngIf="!message" class="btn-no-color">
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
     </div>
   </div>
 </ion-footer>
-

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

@@ -1,4 +1,4 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef,ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef, ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonSlides, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -13,13 +13,22 @@ import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
 import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { TimeService } from 'src/app/services/functions/time.service';
 import { FileService } from 'src/app/services/functions/file.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpHeaders } from '@angular/common/http';
 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';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
+import { SqliteService } from 'src/app/services/sqlite.service';
+import { StorageService } from 'src/app/services/storage.service';
+import { Directory, Filesystem } from '@capacitor/filesystem';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
+import { Storage } from '@ionic/storage';
+import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
+import { WsChatService } from 'src/app/services/chat/ws-chat.service'
+import { MessageService } from 'src/app/services/chat/message.service';
+import { element } from 'protractor';
 
+const IMAGE_DIR = 'stored-images';
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
@@ -34,24 +43,25 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   loggedUser: any;
 
   message = '';
-  messages:any;
+  messages: any;
-  dm:any;
+  dm: any;
-  userPresence='';
+  userPresence = '';
-  dmUsers:any;
+  dmUsers: any;
   checktimeOut: boolean;
-  members:any;
+  members: any;
+  downloadProgess = 0;
 
-  @Input() roomId:string;
+  @Input() roomId: string;
-  @Input() showMessages:string;
+  @Input() showMessages: string;
 
-  @Output() openNewEventPage:EventEmitter<any> = new EventEmitter<any>();
+  @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
-  @Output() getDirectMessages:EventEmitter<any> = new EventEmitter<any>();
+  @Output() getDirectMessages: EventEmitter<any> = new EventEmitter<any>();
 
 
   chatMessageStore = ChatMessageStore
   chatUserStorage = ChatUserStorage
 
-  scrollingOnce:boolean = true;
+  scrollingOnce: boolean = true;
   private scrollChangeCallback: () => void;
   currentPosition: any;
   startPosition: number;
@@ -59,6 +69,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   scrollToBottomBtn = false;
   longPressActive = false;
   frameUrl: any;
+  downloadFile: any;
+  massages: MessageService[] = []
 
   constructor(
     public popoverController: PopoverController,
@@ -73,39 +85,53 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private timeService: TimeService,
     private fileService: FileService,
     private gestureController: GestureController,
-    private http:HttpClient,
+    private http: HttpClient,
     public ThemeService: ThemeService,
     private changeDetectorRef: ChangeDetectorRef,
+    private sqliteservice: SqliteService,
+    private storageservice: StorageService,
     private router: Router,
+    private storage: Storage,
+    public wsChatMethodsService: WsChatMethodsService,
+    public WsChatService: WsChatService
   ) {
+
     this.loggedUser = authService.ValidatedUserChat['data'];
 
-   /*  this.dm = this.navParams.get('dm'); */
   }
   ngOnChanges(changes: SimpleChanges): void {
-    this.load();
+    this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
+    this.wsChatMethodsService.getDmRoom(this.roomId).getMsgFromDB()
+    this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
+    /* console.log('DATATATA', this.wsChatMethodsService.getDmRoom(this.roomId).massages)
+    this.wsChatMethodsService.getDmRoom(this.roomId).massages.forEach((element) => {
+      console.log('DATATATA 11', element)
+    }) */
+    
+    
+    //this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
+    //this.getMessageDB()
+
+
+    setTimeout(() => {
+      this.scrollToBottomClicked()
+    }, 50)
+
 
-    //throw new Error('Method not implemented.');
   }
 
   ngOnInit() {
-
     this.scrollToBottom();
-
-    /* setInterval(()=>{ */
-      this.load();
-    /* }, 9000); */
-    console.log(this.roomId);
-    console.log("Chat route", this.route.url)
-
     this.setStatus('online');
+
   }
 
-  onPressingMessage(){
+
+  onPressingMessage() {
     const gesture = this.gestureController.create({
       el: this.messageContainer.nativeElement,
       gestureName: 'long-press',
-      onStart: ev =>{
+      onStart: ev => {
         this.longPressActive = true;
         console.log('Pressing');
       },
@@ -116,7 +142,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     });
   }
 
-  setStatus(status:string){
+  setStatus(status: string) {
     let body = {
       message: '',
       status: status,
@@ -126,36 +152,37 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     })
   }
 
-  notImplemented(){
+  notImplemented() {
     this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
 
-  load = ()=>{
+  load = () => {
     this.checktimeOut = true;
     this.serverLongPull();
     this.getChatMembers();
   }
 
 
-  doRefresh(ev:any){
+  doRefresh(ev: any) {
     this.load();
     ev.target.complete();
   }
 
-  scrollToBottom(): void {
+  scrollToBottom = () => {
     try {
-      if(this.scrollingOnce){
+      if (this.scrollingOnce) {
         this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
         //this.scrollingOnce = false;
       }
-    } catch(err) { }
+    } catch (err) { }
   }
 
-  scrollToBottomClicked(): void {
+  scrollToBottomClicked = () => {
+    console.log('scroll')
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
       //this.scrollingOnce = false;
-    } catch(err) { }
+    } catch (err) { }
   }
 
   ngAfterViewInit() {
@@ -175,10 +202,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       //alert('UP');
       this.scrollingOnce = false;
     }
-    if((containerHeight - 100) > scroll){
+    if ((containerHeight - 100) > scroll) {
       this.scrollToBottomBtn = true;
     }
-    else{
+    else {
       this.scrollToBottomBtn = false;
     }
     this.currentPosition = scroll;
@@ -190,7 +217,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
-  openBookMeetingComponent(){
+  openBookMeetingComponent() {
     let data = {
       roomId: this.roomId,
       members: this.members
@@ -198,7 +225,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.openNewEventPage.emit(data);
   }
 
-  showDateDuration(start:any){
+  showDateDuration(start: any) {
     return this.timeService.showDateDuration(start);
   }
 
@@ -223,19 +250,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   sendMessage() {
-    let body = {
+    this.wsChatMethodsService.getDmRoom(this.roomId).send(this.message)
-      "message":
-      {
-        "rid": this.roomId, "msg": this.message,
-      }
-    }
-    this.chatService.sendMessage(body).subscribe(res=> {
-      this.scrollingOnce = true;
-    });
     this.message = "";
   }
 
-  deleteMessage(msgId:string){
+  deleteMessage(msgId: string) {
     let body = {
       "roomId": this.roomId,
       "msgId": msgId,
@@ -247,38 +266,21 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }); */
   }
 
-  loadMessages(){
+  async viewDocument(msg: any, url?: string) {
-    //this.showLoader = true;
+    if (msg.file.type == "application/img") {
-    const roomId = this.roomId
+      let response: any = await this.fileService.getFile(msg.file.guid).toPromise();
-    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
-      console.log(res);
-      this.messages = res['messages'].reverse();
-      this.chatMessageStore.add(roomId, this.messages)
-
-      console.log(this.messages);
-      //this.serverLongPull(res)
-      /* this.chatService.subscribe(this.roomId).then(res => {
-        console.log("Real fake msg", res)
-      }); */
-      //this.showLoader = false;
-    })
-  }
-
-  async viewDocument(msg:any, url?:string){
-    if(msg.file.type == "application/img"){
-      let response:any = await this.fileService.getFile(msg.file.guid).toPromise();
       console.log(response);
       alert(response);
 
       //this.openPreview(msg);
 
     }
-    else if(msg.file.type == "application/webtrix") {
+    else if (msg.file.type == "application/webtrix") {
       this.openViewDocumentModal(msg.file);
     }
-     else{
+    else {
       let fullUrl;
-       fullUrl = "https://www.tabularium.pt" + url;
+      fullUrl = "https://gabinetedigitalchat.dyndns.info" + url;
       //fullUrl = "http://www.africau.edu/images/default/sample.pdf";
 
       this.frameUrl = fullUrl;
@@ -288,7 +290,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
 
-  async openViewDocumentModal(file:any){
+  async openViewDocumentModal(file: any) {
     let task = {
       serialNumber: '',
       taskStartDate: '',
@@ -310,7 +312,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       "ApplicationId": file.ApplicationId,
       "CreateDate": "",
       "Data": null,
-        "Description":"",
+      "Description": "",
       "Link": null,
       "SourceId": file.DocId,
       "SourceName": file.Assunto,
@@ -341,7 +343,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     console.log(this.roomId);
 
     //this.showLoader = true;
-    this.chatService.getMembers(this.roomId).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res => {
       this.members = res['members'];
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
@@ -363,7 +365,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     return await popover.present();
   }
 
-  async addContacts(){
+  async addContacts() {
     const modal = await this.modalController.create({
       component: ContactsPage,
       componentProps: {},
@@ -376,12 +378,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     modal.onDidDismiss();
   }
 
-  openSendMessageOptions(ev?:any){
+  openSendMessageOptions(ev?: any) {
-    if(window.innerWidth < 701){
+    if (window.innerWidth < 701) {
       console.log('mobile');
       this.openChatOptions(ev);
     }
-    else{
+    else {
       console.log('desktop');
       this._openChatOptions();
     }
@@ -450,23 +452,23 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
 
 
-  takePicture(){
+  takePicture() {
     const roomId = this.roomId
     this.fileService.addCameraPictureToChat(roomId);
   }
-  addImage(){
+  addImage() {
     const roomId = this.roomId;
     this.fileService.addPictureToChat(roomId);
     //this.fileService.loadPicture();
     //this.fileService.addPictureToChat(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
@@ -511,9 +513,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       }
     });
     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,
@@ -521,25 +523,24 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         }
         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.fileService.addDocumentToChat(this.roomId);
         //this.loadDocument();
       }
-      else if(res['data'] == 'documentoGestaoDocumental'){
+      else if (res['data'] == 'documentoGestaoDocumental') {
 
         this.fileService.addDocGestaoDocumentalToChat(this.roomId);
         this.showLoader = false;
         //this.addDocGestaoDocumental();
       }
-      this.loadMessages();
 
     });
   }
@@ -549,50 +550,48 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     const roomId = this.roomId;
 
     this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
-      //console.log(res['success']);
+      console.log('serverLongPull', res['success']);
 
 
       if (res['success'] == true) {
         // Show Error
         //showMessage(response.statusText);
-      this.loadMessages()
+        /* this.messages = res['messages'].reverse();
-      this.messages = res['messages'].reverse();
+        this.chatMessageStore.add(roomId, this.messages) */
-      this.chatMessageStore.add(roomId, this.messages)
+        console.log('MSG FROM ROCKET ', res['messages'].reverse())
+        /* this.transformData(res['messages'].reverse());
+        this.getMessageDB(); */
 
         //console.log(this.messages);
         // Reconnect in one second
-      if(this.route.url != "/home/chat"){
+        if (this.route.url != "/home/chat") {
           console.log("Timer message stop")
         }
-      else{
+        else {
-        if(document.querySelector('app-messages')){
+          if (document.querySelector('app-messages')) {
             await new Promise(resolve => setTimeout(resolve, 5000));
-          await this.serverLongPull();
+            // await this.serverLongPull();
             this.getDirectMessages.emit();
             console.log('Timer message running')
           }
         }
-    } /* else {
+      }
-      // Got message
+    }, (error) => {
-      //let message = await response.text();
-      //this.loadMessages()
-      await this.serverLongPull();
-    } */
-  }, (error)=>{
       console.log(error);
-    this.serverLongPull();
-
     });
-  }sliderOpts = {
+
+  }
+
+  sliderOpts = {
     zoom: false,
     slidesPerView: 1.5,
     spaceBetween: 20,
     centeredSlides: true
   };
   zoomActive = false;
-zoomScale = 1;
+  zoomScale = 1;
 
-sliderZoomOpts = {
+  sliderZoomOpts = {
     allowSlidePrev: false,
     allowSlideNext: false,
     zoom: {
@@ -601,13 +600,13 @@ sliderZoomOpts = {
     on: {
       zoomChange: (scale, imageEl, slideEl) => {
         this.zoomActive = true;
-      this.zoomScale = scale/5;
+        this.zoomScale = scale / 5;
         this.changeDetectorRef.detectChanges();
       }
     }
-}
+  }
 
-async touchEnd(zoomslides: IonSlides, card) {
+  async touchEnd(zoomslides: IonSlides, card) {
     // Zoom back to normal
     const slider = await zoomslides.getSwiper();
     const zoom = slider.zoom;
@@ -618,25 +617,63 @@ async touchEnd(zoomslides: IonSlides, card) {
 
     this.zoomActive = false;
     this.changeDetectorRef.detectChanges();
-}
+  }
 
-touchStart(card) {
+  touchStart(card) {
     // Make card appear above backdrop
     card.el.style['z-index'] = 11;
-}
+  }
+
+  downloadFileMsg(msg: MessageService) {
+    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), ''));
+          
+          msg.file = {
+            guid: msg.file.guid,
+            image_url: this.downloadFile,
+            type: msg.file.type
+          }
+
+          await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
+            console.log('IMAGE SAVED')
+          });
+        }
+
+      });
+
+    }
+
+  }
 
   async openPreview(msg) {
+
+    if (msg.file.image_url === null || msg.file.image_url  === '' ) {
+      this.downloadFileMsg(msg)
+
+    } else {
       const modal = await this.modalController.create({
         component: ViewMediaPage,
         cssClass: 'modal modal-desktop',
         componentProps: {
-        image: msg.attachments[0].image_url,
+          image: msg.file.image_url,
           username: msg.u.name,
           _updatedAt: msg._updatedAt
         }
       });
       modal.present();
     }
+
+  }
 }
 
 

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

@@ -6,9 +6,9 @@
     </button>
   </div>
   <div class="buttons">
-    <button hidden (click)="takePicture()" full class="btn-ok" shape="round" >Tirar Fotografia</button>
+    <button  (click)="takePicture()" full class="btn-ok" shape="round" >Tirar Fotografia</button>
-    <button hidden (click)="addFile()" class="btn-ok" shape="round" >Anexar Documento</button>
+    <button  (click)="addFile()" class="btn-ok" shape="round" >Anexar Documento</button>
-    <button hidden (click)="anexarFoto()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
+    <button  (click)="anexarFoto()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
     <button (click)="addDocGestaoDocumental()" class="btn-ok" shape="round" >Gestão Documental</button>
     <div class="solid"></div>
     <button (click)="bookMeeting()" class="btn-ok" shape="round" >Novo Evento</button>

src/environments/environment.prod.ts

@@ -2,6 +2,7 @@ export const environment = {
   production: true,
   apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/',
   apiChatUrl: 'https://gabinetedigitalchat.dyndns.info/api/v1/',
+  apiWsChatUrl: 'wss://gabinetedigitalchat.dyndns.info/websocket',
   domain: 'gabinetedigital.local',
   defaultuser: '',//paulo.pinto paulo.pinto@gabinetedigital.local
   defaultuserpwd: '', //tabteste@006,

src/environments/environment.ts

@@ -7,6 +7,7 @@ export const environment = {
   apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/',
   //apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V5/api/',
   apiChatUrl: 'https://gabinetedigitalchat.dyndns.info/api/v1/',
+  apiWsChatUrl: 'wss://gabinetedigitalchat.dyndns.info/websocket',
   //apiChatUrl: 'https://www.tabularium.pt/api/v1/',
   /* apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/', */
   domain: 'gabinetedigital.local', //gabinetedigital.local

src/index.html

@@ -66,6 +66,15 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script type="module" src="./assets/js/index.js"></script>
+
+  <script>
+    Object.defineProperty(String.prototype, 'capitalize', {
+        value: function() {
+          return this.charAt(0).toUpperCase() + this.slice(1);
+        },
+        enumerable: false
+    });
+  </script>
 </head>
 
 <body class='gov'>

src/plugin/deep.js

@@ -0,0 +1,18 @@
+function deepFind(obj, path) {
+    var paths = path.split('.')
+      , current = obj
+      , i;
+  
+    for (i = 0; i < paths.length; ++i) {
+      if (current[paths[i]] == undefined) {
+        return undefined;
+      } else {
+        current = current[paths[i]];
+      }
+    }
+    return current;
+}
+  
+module.exports = {
+  deepFind: deepFind,
+};

src/plugin/showDateDuration.js

@@ -0,0 +1,42 @@
+
+function addZero(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+}
+
+function showDateDuration(start) {
+    let end;
+    end = new Date();
+    start = new Date(start);
+    let customizedDate;
+
+
+    const totalSeconds     = Math.floor((end - (start))/1000);;
+    const totalMinutes     = Math.floor(totalSeconds/60);
+    const totalHours       = Math.floor(totalMinutes/60);
+    const totalDays        = Math.floor(totalHours/24);
+
+    const hours   = totalHours - ( totalDays * 24 );
+    const minutes = totalMinutes - ( totalDays * 24 * 60 ) - ( hours * 60 );
+    const seconds = totalSeconds - ( totalDays * 24 * 60 * 60 ) - ( hours * 60 * 60 ) - ( minutes * 60 );
+
+    if(totalDays == 0){
+      if(start.getDate() == new Date().getDate()){
+        let time = start.getHours() + ":" + addZero(start.getUTCMinutes());
+        return time;
+      }
+      else{
+        return 'Ontem';
+      }
+    }
+    else{
+      let date = addZero(start.getDate()) + "/" + addZero(start.getMonth()+1) + "/" + start.getFullYear();
+      return date;
+    }
+}
+
+module.exports = {
+    showDateDuration: showDateDuration
+};

src/plugin/text.js

@@ -0,0 +1,7 @@
+function capitalizeTxt(txt) {
+    return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
+}
+
+module.exports = {
+  capitalizeTxt: capitalizeTxt
+}

test/Agenda.spec.ts

@@ -19,91 +19,91 @@ describe('Puppeteer tests', () => {
         // await page.goto(process.env.PUPPETEER_HOST)
     })
 
-    test('Login', async()=> {
+    // test('Login', async()=> {
-        await loginTest(page)
+    //     await loginTest(page)
-	},30000)
+	// },30000)
 
-    test('[table] Open create event component', async () => {
+    // test('[table] Open create event component', async () => {
 
-        await page.setViewport({width: 1200, height: 720});
+    //     await page.setViewport({width: 1200, height: 720});
-        await page.goto(process.env.PUPPETEER_HOST); // wait until page load
+    //     await page.goto(process.env.PUPPETEER_HOST); // wait until page load
-        await page.waitForSelector('ion-app')
+    //     await page.waitForSelector('ion-app')
 
-        // wait for footer button
+    //     // wait for footer button
-        await page.click('ion-tab-bar ion-tab-button:nth-child(2)')
+    //     await page.click('ion-tab-bar ion-tab-button:nth-child(2)')
-        await page.waitForSelector('app-agenda')
+    //     await page.waitForSelector('app-agenda')
         
-        // click add event
+    //     // click add event
-        await page.click('ion-content  ion-row .cy-add-event')
+    //     await page.click('ion-content  ion-row .cy-add-event')
-        // wait for component
+    //     // wait for component
-        await page.waitForSelector('app-new-event')
+    //     await page.waitForSelector('app-new-event')
         
-        expect(3 + 2).toBe(5);
+    //     expect(3 + 2).toBe(5);
-    },30000);
+    // },30000);
 
 
-    test('[table] Create Event', async () => {
+    // test('[table] Create Event', async () => {
 
-        await page.setViewport({width: 1200, height: 720});
+    //     await page.setViewport({width: 1200, height: 720});
-        await page.goto(process.env.PUPPETEER_HOST); // wait until page load
+    //     await page.goto(process.env.PUPPETEER_HOST); // wait until page load
-        await page.waitForSelector('ion-app')
+    //     await page.waitForSelector('ion-app')
 
-        // wait for footer button
+    //     // wait for footer button
-        await page.click('ion-tab-bar ion-tab-button:nth-child(2)')
+    //     await page.click('ion-tab-bar ion-tab-button:nth-child(2)')
-        await page.waitForSelector('app-agenda')
+    //     await page.waitForSelector('app-agenda')
-        // click add event
+    //     // click add event
-        await page.click('ion-content  ion-row .cy-add-event')
+    //     await page.click('ion-content  ion-row .cy-add-event')
-        // wait for component
+    //     // wait for component
-        await page.waitForSelector('app-new-event')
+    //     await page.waitForSelector('app-new-event')
 
-        // subject
+    //     // subject
-        await page.type('app-new-event .ion-item-container input', faker.commerce.productDescription() )
+    //     await page.type('app-new-event .ion-item-container input', faker.commerce.productDescription() )
-        // Location
+    //     // Location
-        await page.type('app-new-event .container-div:nth-child(2) input', faker.address.state()+" "+faker.address.city() )
+    //     await page.type('app-new-event .container-div:nth-child(2) input', faker.address.state()+" "+faker.address.city() )
-        // Select Calendar
+    //     // Select Calendar
-        // await page.click('app-new-event .container-div:nth-child(3) .mat-form-field-flex')
+    //     // await page.click('app-new-event .container-div:nth-child(3) .mat-form-field-flex')
-        // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
+    //     // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
-        // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
+    //     // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
-        // select event type
+    //     // select event type
-        // await page.click('app-new-event .container-div:nth-child(4) .mat-form-field-flex')
+    //     // await page.click('app-new-event .container-div:nth-child(4) .mat-form-field-flex')
-        // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
+    //     // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
-        // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
+    //     // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
 
-        // select start day
+    //     // select start day
-        // await page.click('app-new-event .container-div:nth-child(5) button')
+    //     // await page.click('app-new-event .container-div:nth-child(5) button')
-        // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
+    //     // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
-        // await page.click('.mat-calendar-next-button')
+    //     // await page.click('.mat-calendar-next-button')
-        // let selectedFDay = Math.floor(Math.random()*(25-1+1)+1);
+    //     // let selectedFDay = Math.floor(Math.random()*(25-1+1)+1);
-        // let days = await page.$$(` .mat-calendar-body-cell `)
+    //     // let days = await page.$$(` .mat-calendar-body-cell `)
-        // await days[selectedFDay].click()
+    //     // await days[selectedFDay].click()
-        // await page.click('.cdk-overlay-connected-position-bounding-box .actions  button')
+    //     // await page.click('.cdk-overlay-connected-position-bounding-box .actions  button')
 
-        // select end day
+    //     // select end day
-        // await page.click('app-new-event .container-div:nth-child(6) button')
+    //     // await page.click('app-new-event .container-div:nth-child(6) button')
-        // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
+    //     // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
-        // await page.click('.mat-calendar-next-button')
+    //     // await page.click('.mat-calendar-next-button')
-        // days = await page.$$(` .mat-calendar-body-cell `)
+    //     // days = await page.$$(` .mat-calendar-body-cell `)
-        // await days[selectedFDay+1].click()
+    //     // await days[selectedFDay+1].click()
-        // await page.click('.cdk-overlay-connected-position-bounding-box .actions  button')
+    //     // await page.click('.cdk-overlay-connected-position-bounding-box .actions  button')
 
-        // await page.click('app-new-event .container-div:nth-child(7) .mat-form-field-flex')
+    //     // await page.click('app-new-event .container-div:nth-child(7) .mat-form-field-flex')
-        // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
+    //     // await page.waitForSelector('.cdk-overlay-connected-position-bounding-box')
-        // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
+    //     // await page.click('.cdk-overlay-connected-position-bounding-box mat-option')
 
-        await page.click('app-new-event .container-div:nth-child(8) .add-people')
+    //     await page.click('app-new-event .container-div:nth-child(8) .add-people')
-        await page.waitForSelector('app-attendee-modal .ng-star-inserted:nth-child(2)')
+    //     await page.waitForSelector('app-attendee-modal .ng-star-inserted:nth-child(2)')
-        await page.click('app-attendee-modal .ng-star-inserted:nth-child(2)')
+    //     await page.click('app-attendee-modal .ng-star-inserted:nth-child(2)')
-        // save
+    //     // save
-        await page.click('app-attendee-modal ion-footer ion-buttons:nth-child(2)')
+    //     await page.click('app-attendee-modal ion-footer ion-buttons:nth-child(2)')
-        // save
+    //     // save
-        let buttons = await page.$$('app-new-event ion-footer ion-buttons')
+    //     let buttons = await page.$$('app-new-event ion-footer ion-buttons')
-        buttons[1].click()
+    //     buttons[1].click()
 
-        await page.waitForSelector('.notification .success')
+    //     await page.waitForSelector('.notification .success')
 
 
-        expect(3 + 2).toBe(5);
+    //     expect(3 + 2).toBe(5);
-    },60000);
+    // },60000);
 
 });