Added chat integration with socket.io

src/app/app-routing.module.ts

@@ -1,42 +1,46 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
-  },
-  {
-    path: '',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  },
+  {
+    path: 'chat',
     loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
   },
- /*  {
-    path: 'cal-modal',
-    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
-  }, */
-  /* {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  }, */
-
-  /* 
-  {
-    path: 'gabinete-digital-menu',
-    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
-  },
-
-
-  {
-    path: 'view-event',
-    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
-  }, */
-
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+
+ /*  {
+    path: 'cal-modal',
+    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
+  }, */
+  /* {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  }, */
+
+  /* 
+  {
+    path: 'gabinete-digital-menu',
+    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
+  },
+
+
+  {
+    path: 'view-event',
+    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
+  }, */
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})

src/app/app.module.ts

@@ -12,10 +12,13 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
+import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
+const config: SocketIoConfig = { url: 'http://localhost:3001', options: {} };
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, SocketIoModule.forRoot(config)],
   providers: [
     StatusBar,
     SplashScreen,

src/app/components/calendar/calendar.component.html

@@ -1,22 +1,2 @@
 <div class="container">
-  <div class="calendar">
-    <div class="month">
-      <i class="fas fa-angle-left prev"></i>
-      <div class="date">
-        <h1>Janeiro de 2020</h1>
-        <p>Segunda-feira, 7 de Stembro</p>
-      </div>
-      <i class="fas fa-angle-right next"></i>
-    </div>
-    <div class="weekdays">
-      <div>D</div>
-      <div>S</div>
-      <div>T</div>
-      <div>Q</div>
-      <div>Q</div>
-      <div>S</div>
-      <div>S</div>
-    </div>
-    <div class="days"></div>
-  </div>
 </div>

src/app/components/calendar/calendar.component.scss

@@ -0,0 +1,20 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Quicksand", sans-serif;
+  }
+  
+  html {
+    font-size: 62.5%;
+  }
+  
+  .container {
+    width: 100%;
+    height: 100vh;
+    background-color: #12121f;
+    color: #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }

src/app/components/calendar/calendar.component.ts

@@ -7,8 +7,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CalendarComponent implements OnInit {
 
+  date = new Date();
+  months = [
+    "Janeiro",
+    "Fevereiro",
+    "Março",
+    "Abril",
+    "Maio",
+    "Junho",
+    "Julho",
+    "Agosto",
+    "Setembro",
+    "Outubro",
+    "Novembro",
+    "Dezembro",
+  ];
+  weekdays = [
+    "Domingo", 
+    "Segunda-feira", 
+    "Terça-feira", 
+    "Quarta-feira", 
+    "Quinta-feira", 
+    "Sexta-feira", 
+    "Sábado"
+  ];
+  currentMonth = this.months[this.date.getMonth()];
+  customDate = this.weekdays[this.date.getDay()]+ ", "  + this.date.getDate() +" de "  + ( this.months[this.date.getMonth()]);
+  
   constructor() { }
 
-  ngOnInit() {}
-
+  ngOnInit() {
+  }
 }

src/app/home/home-routing.module.ts

@@ -103,7 +103,7 @@ const routes: Routes = [
           }
         ]
       },
-      {
+     /*  {
         path: 'expediente',
         children: [
           {
@@ -111,12 +111,16 @@ const routes: Routes = [
             loadChildren: ()=> import('../pages/gabinete-digital/expediente/expediente.module').then(m => m.ExpedientePageModule)
           }
         ]
-      },
-      /* PROVISORIO */
-     /*  {
-        path: 'view-event',
-        loadChildren: ()=> import('../pages/view-event/view-event.module').then(m => m.ViewEventPageModule)
       }, */
+      {
+        path: 'chat',
+        children: [
+          {
+            path:'',
+            loadChildren: ()=> import('../pages/chat/chat.module').then(m => m.ChatPageModule)
+          }
+        ]
+      },
     ]
   },
   {

src/app/home/home.page.html

@@ -14,9 +14,13 @@
           <ion-label>Gabinete Digital</ion-label>
         </ion-tab-button>
         <!-- <ion-tab-button tab="search">
-            <ion-icon name="search"></ion-icon>
-            <ion-label>Pesquisa</ion-label>
-          </ion-tab-button> -->
+          <ion-icon name="search"></ion-icon>
+          <ion-label>Pesquisa</ion-label>
+        </ion-tab-button> -->
+        <ion-tab-button tab="chat">
+          <ion-icon name="chatbubbles"></ion-icon>
+          <ion-label>Chat</ion-label>
+        </ion-tab-button>
     </ion-tab-bar>
   
   </ion-tabs>

src/app/pages/agenda/agenda.page.html

@@ -27,8 +27,9 @@
   </ion-toolbar>
 </ion-header>
   <ion-content>
-    
-    <app-cal-modal></app-cal-modal>
+
+   <!--  Calendar is here -->
+
     <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
       <ion-refresher-content>
@@ -55,7 +56,6 @@
             </ion-button>
           </ion-col>
         </ion-row>
-        <app-calendar></app-calendar>
       
         <calendar
           [eventSource]="eventSource"

src/app/pages/agenda/agenda.page.scss

@@ -139,3 +139,10 @@ input:checked + .slider .mdgpr
   border-radius: 50%;
   border: 1px solid #e16817;
 }
+
+/*
+
+Calendar
+
+*/
+

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

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

src/app/pages/chat/chat.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 { ChatPageRoutingModule } from './chat-routing.module';
+
+import { ChatPage } from './chat.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ChatPageRoutingModule
+  ],
+  declarations: [ChatPage]
+})
+export class ChatPageModule {}

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

@@ -0,0 +1,39 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>chat</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 size="10">
+        <ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+      </ion-col>
+      <ion-col size="2">
+        <ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
+          (click)="sendMessage()">
+          <ion-icon name="send" slot="icon-only"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,50 @@
+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;
+    border: 1px solid var(--ion-color-medium);
+    border-radius: 20px;
+    background: #fff;
+    padding: 0;
+    margin: 0;
+  }
+   
+  
+ 
+

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

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

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

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { Socket } from 'ngx-socket-io';
+import { ToastController } from '@ionic/angular';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { fromEvent } from 'rxjs';
+
+@Component({
+  selector: 'app-chat',
+  templateUrl: './chat.page.html',
+  styleUrls: ['./chat.page.scss'],
+})
+export class ChatPage implements OnInit {
+
+  message = '';
+  messages = [];
+  currentUser = '';
+
+  constructor(private websocket:WebsocketService, private socket: Socket) { }
+
+  ngOnInit() {
+    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);
+    });
+
+    
+  }
+  sendMessage(){
+    this.socket.emit('send-message', {text: this.message});
+    this.message="";
+  }
+
+  ionViewWillLeave(){
+    this.socket.disconnect();
+  }
+
+}

src/app/services/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/websocket.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import * as io from 'socket.io-client';
+import { Observable } from 'rxjs';
+import { Socket } from 'ngx-socket-io';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WebsocketService {
+
+  message = '';
+  messages = [];
+  currentUser = '';
+
+  constructor(private socket: Socket) { }
+
+  connect(){
+    return this.socket.connect();
+  }
+
+}