add show total users in rocket chat server

src/app/pages/chat/conversation/conversation-routing.module.ts

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

src/app/pages/chat/conversation/conversation.module.ts

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

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

@@ -0,0 +1,49 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button (click)="close()" defaultHref="/home/chat" icon="chevron-back"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{chatUser.name}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-row *ngFor="let message of messages" class="chat-container">
+    <ion-col size="9" *ngIf="message.user !== currentUser" class="message other-message">
+      <p><b>{{message.user}}</b></p>
+      <span>{{message.msg}}</span>
+      <div class="message-date">{{message.createdAt | date: 'HH:mm'}}</div>
+    </ion-col>
+    <ion-col offset="3" size="9" *ngIf="message.user === currentUser" class="message my-message">
+      <ion-label>
+        <p><b>{{message.user}}</b></p>
+      <span>{{message.msg}}</span>
+      <div class="message-date">{{message.createdAt | date: 'HH:mm'}}</div>
+    </ion-label>
+    </ion-col>
+
+  </ion-row>
+
+</ion-content>
+<ion-footer class="ion-no-border">
+  <ion-toolbar>
+    <ion-row align-items-center>
+      <ion-col>
+        <ion-item button lines="none">
+          <img src="assets/images/icons-arrow-arrow-down-25.svg">
+        </ion-item>
+      </ion-col>
+      <ion-col>
+        <ion-item lines="none" class="div-message">
+          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" name="mic-outline"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col>
+        <ion-item button lines="none" [disabled]="message === ''">
+            <img src="assets/images/icons-chat-send.svg">
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/chat/conversation/conversation.page.scss

@@ -0,0 +1,55 @@
+ion-content{
+    background-color:#fefefe;
+}
+.chat-container{
+    margin: 10px 10px 0 10px;
+}
+.message {
+    padding: 5px 5px 5px 10px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    white-space: pre-wrap;
+  }
+   
+  .my-message {
+    background: var(--ion-color-primary);
+    color: #fff;
+  }
+  .my-message p{
+      margin: 0;
+      padding: 0;
+      color: #9ab8e9;
+  }
+  .message-date{
+      font-size: 10px;
+      text-align: right;
+      margin-right: 5px;
+  }
+   
+  .other-message {
+    background: #f2f3f7;
+    color: #333;
+  }
+  .other-message p{
+    margin: 0;
+    padding: 0;
+    color:#959ba7;
+}
+   
+  .message-input {
+    margin-top: 0px;
+    
+    background: #fff;
+    padding: 0;
+    margin: 0;
+  }
+  
+  
+  .div-message{
+    border: 1px solid var(--ion-color-medium);
+    border-radius: 20px;
+  }
+   
+  
+ 
+

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

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

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

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ModalController, NavParams } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+
+@Component({
+  selector: 'app-conversation',
+  templateUrl: './conversation.page.html',
+  styleUrls: ['./conversation.page.scss'],
+})
+export class ConversationPage implements OnInit {
+
+  message = '';
+  messages = [];
+  currentUser = '';
+
+  constructor(
+    private authService: AuthService,
+    private router:Router,
+    private modalController: ModalController,
+    private navParams: NavParams) { }
+
+  loggedUser: any;
+  chatUser: any;
+
+  ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    })
+    this.chatUser = this.navParams.get('user');
+    console.log(this.navParams.get('user'));
+
+    console.log(this.chatUser.name);
+    
+
+    /* console.log("ON");
+    this.socket.connect();
+
+    //Set current user
+    let name = `User-${new Date().getTime()}`;
+    this.currentUser=name;
+
+    this.socket.emit('set-name', name);
+
+    //Reat from event calling "fromEvent"
+    this.socket.fromEvent('users-changed').subscribe(data =>{
+      console.log('gOT data:', data);
+    });
+
+    //Add message to the array of messages
+    this.socket.fromEvent('message').subscribe(message =>{
+      console.log('New:', message);
+      this.messages.push(message);
+    }); */
+    
+  }
+  close(){
+    this.router.navigate(['/home/chat']);
+    this.modalController.dismiss(null);
+  }
+  sendMessage(){
+
+  }
+  /* sendMessage(){
+    this.socket.emit('send-message', {text: this.message});
+    this.message="";
+  }
+
+  ionViewWillLeave(){
+    this.socket.disconnect();
+  } */
+
+}