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

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

@@ -46,64 +46,64 @@
         <div class=" aside overflow-y-auto d-flex flex-wrap flex-grow-1">
         <div class="width-100" [ngSwitch]="segment">
           <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"
-                  [class.item-active]="dm._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' && dm._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'"
-                     (click)="openMessagesPage(dm._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">
-                          <ion-label *ngFor="let user of dm.uids">
-                            <span *ngIf="user !=loggedUserChat.me.username">
-                              <div *ngFor="let t of dmUsers">
-                                <div *ngIf="user == t._id">
-                                  {{t.name}}
-                                </div>
+            <ion-item-sliding>
+              <div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
+                *ngFor="let room of ChatServiceGPR.individual | keyvalue"
+                [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' && 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' && 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]="room.value.id =='cjFv5XfreKz5j3fWW'"
+                   (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]="room.value.id == idSelected">
+                        <ion-label >
+                          <span >
+                            <div >
+                              <div >
+                                {{room.value.name}}
                               </div>
-                          </span>
-                          </ion-label>
+                            </div>
+                        </span>
+                        </ion-label>
+                      </div>
+                      <div class="item-date" [class.item-date-active]="room.value.id == idSelected">{{room.value.duration}}</div>
+                    </div>
+                    <div *ngIf="room.value.lastMessage" class="item-description" [class.item-description-active]="room.value.id == idSelected">
+                      <ion-label *ngIf="room.value.lastMessage">{{room.value.lastMessage.msg}}</ion-label>
+                      <ion-label *ngIf="room.value.lastMessage.file">
+                        <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="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> {{room.value.lastMessage.file.name || room.value.lastMessage.file.subject }}</span>
+                      </ion-label>
+                      <ion-label *ngIf="room.value.lastMessage.attachments">
+                        <div *ngIf="room.value.lastMessage.attachments[0].image_url">
+                          <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
+                          <span> Fotografia</span>
                         </div>
-                        <div class="item-date" [class.item-date-active]="dm._id == idSelected">{{showDateDuration(dm._updatedAt)}}</div>
-                      </div>
-                      <div *ngIf="dm.lastMessage" class="item-description" [class.item-description-active]="dm._id == idSelected">
-                        <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
-                        <ion-label *ngIf="dm.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="dm.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="dm._id == idSelected"></fa-icon>
-                          <span> {{dm.lastMessage.file.name || dm.lastMessage.file.subject }}</span>
-                        </ion-label>
-                        <ion-label *ngIf="dm.lastMessage.attachments">
-                          <div *ngIf="dm.lastMessage.attachments[0].image_url">
-                            <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="dm._id == idSelected"></fa-icon>
-                            <span> Fotografia</span>
-                          </div>
-                        </ion-label>
-                      </div>
+                      </ion-label> 
                     </div>
                   </div>
-              </ion-item-sliding>
-              <ion-item-sliding *ngIf="showLoader || userDirectMessages.length < 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">
-                      <div class="item-title-time">
-                        <div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
-                        <div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
-                      </div>
-                      <div class="item-description d-flex align-items-center">
-                        <fa-icon icon="file-alt" class="file-icon"></fa-icon>
-                        <ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
-                      </div>
+                </div>
+            </ion-item-sliding>
+            <ion-item-sliding *ngIf=" ChatServiceGPR.individualCount < 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">
+                    <div class="item-title-time">
+                      <div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
+                      <div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
+                    </div>
+                    <div class="item-description d-flex align-items-center">
+                      <fa-icon icon="file-alt" class="file-icon"></fa-icon>
+                      <ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
                     </div>
                   </div>
-              </ion-item-sliding>
+                </div>
+            </ion-item-sliding>
           </ion-list>
           <ion-list *ngSwitchCase="'Grupos'">
               <ion-item-sliding *ngIf="!showLoader">
@@ -262,5 +262,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 { ChatService as ChatServiceGPR} from 'src/app/services/chat/chat.service'
 import { GroupMessagesPage } from './group-messages/group-messages.page';
 import { ContactsPage } from './messages/contacts/contacts.page';
 import { MessagesPage } from './messages/messages.page';
@@ -126,9 +127,11 @@ export class ChatPage implements OnInit {
     private sqlservice: SqliteService,
     private platform: Platform,
     private storageservice: StorageService,
+    public ChatServiceGPR: ChatServiceGPR,
     private wsService: WebsocketService,
 
   ) {
+
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.headers = new HttpHeaders();
     window.onresize = (event) => {
@@ -136,6 +139,7 @@ export class ChatPage implements OnInit {
         this.modalController.dismiss();
       }
     };
+
     this.showLoader = true;
 
     console.log("CHAT PAGE");
@@ -143,6 +147,8 @@ export class ChatPage implements OnInit {
     wsService.messages.subscribe(msg => {
       console.log("Response from Websocket server: "+msg);
     });
+
+    this.load()
   }
 
   ngOnInit() {
@@ -583,7 +589,7 @@ export class ChatPage implements OnInit {
           //Check if modal is opened
           if (this.segment == "Contactos" && this.showMessages != true) {
             await new Promise(resolve => setTimeout(resolve, 1000));
-            await this.getDirectMessages();
+            //await this.getDirectMessages();
             //console.log('Timer contactos list running')
           }
           else {
@@ -592,7 +598,7 @@ export class ChatPage implements OnInit {
         }
       }
       else {
-        await this.getDirectMessages();
+        //await this.getDirectMessages();
       }
     });
   }
@@ -747,12 +753,12 @@ export class ChatPage implements OnInit {
           //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();
       }
     });
   }

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

@@ -49,7 +49,7 @@
     </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 ChatServiceGPR.getRoom(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 class="title">

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

@@ -28,6 +28,7 @@ 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 { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
+import { ChatService as ChatServiceGPR} from 'src/app/services/chat/chat.service'
 
 const IMAGE_DIR = 'stored-images';
 
@@ -94,7 +95,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     public ThemeService: ThemeService,
     private changeDetectorRef: ChangeDetectorRef,
     private platform: Platform,
-    private sqlservice: SqliteService
+    private sqlservice: SqliteService,
+    public ChatServiceGPR: ChatServiceGPR
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -105,10 +107,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         this.modalController.dismiss();
       }
     };
+
+    this.ChatServiceGPR.getRoom(this.roomId).loadHistory()
+
   }
 
   ngOnInit() {
-    this.load();
+    //this.load();
     this.setStatus('online');
 
     //this.loadFiles();