mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 05:16:07 +00:00
improvements
This commit is contained in:
tiago.kayaya
@@ -36,30 +36,34 @@
|
||||
<ion-list *ngSwitchCase="'Contactos'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item *ngFor="let user of userConnectedList" (click)="openMessages()">
|
||||
<!-- <ion-item *ngFor="let user of userConnectedList" (click)="openMessages()">
|
||||
<ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
|
||||
<div>
|
||||
<h3>{{user.name}}</h3>
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</ion-item>
|
||||
<div class="item">
|
||||
</ion-item> -->
|
||||
<div *ngFor="let dm of userDirectMessages" class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
<div (click)="openMessages()" class="item-content">
|
||||
<div (click)="openMessages(dm)" class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário para o sector Geral</ion-label>
|
||||
<ion-label *ngFor="let user of dm.usernames">
|
||||
<span *ngIf="user !=loggedUser.me.username">
|
||||
{{user}}
|
||||
</span>
|
||||
</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
<div class="item-date">{{dm.lastMessage._updatedAt | date: 'HH:mm'}}</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
<ion-label>{{dm.lastMessage.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<!-- <div class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
@@ -90,37 +94,37 @@
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</ion-list>
|
||||
<ion-list *ngSwitchCase="'Grupos'" >
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item *ngFor="let group of groupList">
|
||||
<!-- <ion-item *ngFor="let group of allGroups">
|
||||
<ion-icon slot="start" src="assets/images/icons-chat-group-chat-40.svg" class="iconschatgroup-chat-40"></ion-icon>
|
||||
<div>
|
||||
<h3>{{group.name}}</h3>
|
||||
<p>Grande momento.</p>
|
||||
</div>
|
||||
</ion-item>
|
||||
<div class="item">
|
||||
</ion-item> -->
|
||||
<div *ngFor="let group of allGroups" class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
<div (click)="openGroupMessages()" class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário para o sector Produtivo</ion-label>
|
||||
<ion-label>{{group.name}}</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
<div class="item-date">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
<ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<!-- <div class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
@@ -135,7 +139,7 @@
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
@@ -15,51 +16,122 @@ import { NewchatPage } from './newchat/newchat.page';
|
||||
styleUrls: ['./chat.page.scss'],
|
||||
})
|
||||
export class ChatPage implements OnInit {
|
||||
|
||||
headers: HttpHeaders;
|
||||
options:any;
|
||||
X_User_Id:any;
|
||||
X_Auth_Token:any;
|
||||
|
||||
showLoader: boolean;
|
||||
loggedUser: any;
|
||||
/* Set segment variable */
|
||||
segment:string;
|
||||
groupList: any[];
|
||||
allGroups: any[];
|
||||
privateGroups: any[];
|
||||
publicGroups: any[];
|
||||
userConnectedList: any[];
|
||||
userRooms: any[];
|
||||
userChannels: any[];
|
||||
userDirectMessages: any[];
|
||||
result:any;
|
||||
dmUsers:any;
|
||||
|
||||
constructor(
|
||||
private http:HttpClient,
|
||||
private chatService: ChatService,
|
||||
private modalController: ModalController,
|
||||
private authService: AuthService
|
||||
) { }
|
||||
private authService: AuthService,
|
||||
|
||||
) {
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
|
||||
this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.segment = "Contactos";
|
||||
this.authService.userData$.subscribe((res:any)=>{
|
||||
this.loggedUser=res;
|
||||
console.log(this.loggedUser);
|
||||
|
||||
});
|
||||
this.doRefresh();
|
||||
/* this.authService.getUserData(); */
|
||||
|
||||
this.loadJoinedRooms();
|
||||
}
|
||||
loadJoinedRooms(){
|
||||
this.chatService.loadJoinedRooms().subscribe(res => {
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
onSegmentChange(){
|
||||
this.doRefresh();
|
||||
}
|
||||
doRefresh(){
|
||||
/* this.getGroups(); */
|
||||
this.getConnectedUsers();
|
||||
this.getDirectMessages();
|
||||
/* this.getConnectedRooms(); */
|
||||
/* this.getConnectedChannels(); */
|
||||
this.getGroups();
|
||||
/* this.getConnectedUsers(); */
|
||||
}
|
||||
/* getGroups(){
|
||||
getGroups(){
|
||||
this.showLoader = true;
|
||||
this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
|
||||
this.groupList = res.groups;
|
||||
this.privateGroups = res.groups;
|
||||
this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
|
||||
this.publicGroups = res.channels;
|
||||
this.allGroups = this.privateGroups.concat(this.publicGroups);
|
||||
this.showLoader = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
getDirectMessages(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.result = this.chatService.getAllDirectMessages().subscribe((res:any)=>{
|
||||
this.userDirectMessages = res.ims;
|
||||
console.log(this.userDirectMessages);
|
||||
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
getChatMembers(){
|
||||
this.chatService.getMembers(this.userDirectMessages[0]._id).subscribe(res=> {
|
||||
this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
|
||||
console.log(res);
|
||||
console.log(this.dmUsers);
|
||||
});
|
||||
}
|
||||
/* getConnectedChannels(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
|
||||
this.userChannels = res.channels;
|
||||
console.log(res);
|
||||
|
||||
this.showLoader = false;
|
||||
});
|
||||
} */
|
||||
|
||||
getConnectedUsers(){
|
||||
/* getConnectedRooms(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.result = this.chatService.getAllRooms().subscribe((res:any)=>{
|
||||
this.userRooms = res.update;
|
||||
console.log(res.update);
|
||||
|
||||
this.showLoader = false;
|
||||
});
|
||||
} */
|
||||
|
||||
/* getConnectedUsers(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.result = this.chatService.getAllConnectedUsers().subscribe((res:any)=>{
|
||||
/* this.userConnectedList = res.users; */
|
||||
/* console.log(res); */
|
||||
this.userConnectedList = res.users;
|
||||
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
} */
|
||||
|
||||
async startConversation(selectedUser) {
|
||||
const modal = await this.modalController.create({
|
||||
@@ -91,20 +163,26 @@ export class ChatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async openMessages(){
|
||||
async openMessages(dm:any){
|
||||
const modal = await this.modalController.create({
|
||||
component: MessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
componentProps: {
|
||||
dm: dm,
|
||||
},
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async openGroupMessages(){
|
||||
async openGroupMessages(user:any){
|
||||
const modal = await this.modalController.create({
|
||||
component: GroupMessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
componentProps: {
|
||||
user: user,
|
||||
},
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Bruno Faria</ion-label>
|
||||
<span><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
|
||||
<ion-label class="title" *ngFor="let users of dmUsers">{{users.name}}</ion-label>
|
||||
<span *ngIf="userPresence =='online'"><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
@@ -24,8 +24,13 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="messages">
|
||||
<div class="incoming">
|
||||
<div class="messages" #scrollMe>
|
||||
<!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
|
||||
<ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
|
||||
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll> -->
|
||||
<!-- <div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
@@ -34,17 +39,17 @@
|
||||
<img src='assets/images/1.jpg' tappable>
|
||||
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
</div> -->
|
||||
<div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<!-- <div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Presidente da República</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
@@ -79,7 +84,7 @@
|
||||
<div>
|
||||
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
@@ -93,14 +98,14 @@
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
|
||||
<ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<!-- [disabled]="message === ''" -->
|
||||
<ion-label>
|
||||
<ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
@@ -100,20 +100,33 @@
|
||||
font-family: Roboto;
|
||||
overflow: auto;
|
||||
|
||||
.incoming, .outgoing{
|
||||
//set scroll do bottom
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-wrap: break-word;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
|
||||
.incoming-true, .incoming-false{
|
||||
width: 305px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.incoming{
|
||||
.incoming-true{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
|
||||
}
|
||||
}
|
||||
.outgoing{
|
||||
.incoming-false{
|
||||
margin: 10px 20px 10px 75px;
|
||||
background: #e4f4fe;
|
||||
float: right;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, PopoverController } from '@ionic/angular';
|
||||
import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
|
||||
import { Status } from 'src/app/models/chat/status.model';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
|
||||
import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
|
||||
import { ContactsPage } from '../new-group/contacts/contacts.page';
|
||||
@@ -9,24 +12,108 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
|
||||
templateUrl: './messages.page.html',
|
||||
styleUrls: ['./messages.page.scss'],
|
||||
})
|
||||
export class MessagesPage implements OnInit {
|
||||
export class MessagesPage implements OnInit, AfterViewChecked {
|
||||
|
||||
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
|
||||
|
||||
loggedUser: any;
|
||||
|
||||
message = '';
|
||||
messages:any;
|
||||
dm:any;
|
||||
userPresence='';
|
||||
dmUsers:any;
|
||||
|
||||
|
||||
constructor(
|
||||
public popoverController: PopoverController,
|
||||
private modalController: ModalController,
|
||||
) { }
|
||||
private navParams: NavParams,
|
||||
private chatService: ChatService,
|
||||
private authService: AuthService,
|
||||
) {
|
||||
this.dm = this.navParams.get('dm');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.scrollToBottom();
|
||||
|
||||
this.authService.userData$.subscribe((res:any)=>{
|
||||
this.loggedUser=res;
|
||||
console.log(this.loggedUser);
|
||||
});
|
||||
|
||||
console.log(this.dm);
|
||||
|
||||
setInterval(()=>{
|
||||
this.checkUserPresence();
|
||||
this.loadMessages();
|
||||
}, 2000);
|
||||
|
||||
this.getChatMembers();
|
||||
|
||||
|
||||
}
|
||||
loadUser(){
|
||||
console.log('working');
|
||||
|
||||
}
|
||||
ngAfterViewChecked() {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
scrollToBottom(): void {
|
||||
try {
|
||||
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
|
||||
} catch(err) { }
|
||||
}
|
||||
loadMoreMessages(ev:any){
|
||||
|
||||
}
|
||||
|
||||
checkUserPresence(){
|
||||
this.chatService.getUserPresence(this.dm.lastMessage.u._id).subscribe(res=>{
|
||||
this.userPresence = res['presence'];
|
||||
});
|
||||
}
|
||||
sendMessage(){
|
||||
|
||||
let body = {
|
||||
"message":
|
||||
{
|
||||
"rid": this.dm._id, "msg": this.message
|
||||
}
|
||||
}
|
||||
|
||||
this.chatService.sendMessage(body).subscribe(res=> {
|
||||
/* console.log(res); */
|
||||
this.loadMessages();
|
||||
});
|
||||
}
|
||||
|
||||
loadMessages(){
|
||||
this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
|
||||
console.log(res);
|
||||
this.messages = res['messages'].reverse();
|
||||
})
|
||||
}
|
||||
getChatMembers(){
|
||||
this.chatService.getMembers(this.dm._id).subscribe(res=> {
|
||||
this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
|
||||
console.log(res);
|
||||
console.log(this.dmUsers);
|
||||
});
|
||||
}
|
||||
|
||||
async openMessagesOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: MessagesOptionsPage,
|
||||
componentProps: {
|
||||
roomId: this.dm._id,
|
||||
},
|
||||
cssClass: 'messages-options',
|
||||
event: ev,
|
||||
translucent: true
|
||||
translucent: true,
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user