mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 05:16:07 +00:00
Merge branch 'feature/chat' into developer
This commit is contained in:
tiago.kayaya
@@ -196,7 +196,7 @@ export class AgendaPage implements OnInit {
|
||||
this.eventSource=[];
|
||||
if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
|
||||
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");;
|
||||
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
|
||||
this.eventsListPessoal.forEach(element => {
|
||||
this.eventSource.push({
|
||||
title: element.Subject,
|
||||
|
||||
@@ -22,6 +22,10 @@ const routes: Routes = [
|
||||
},
|
||||
{
|
||||
path: 'group-messages',
|
||||
loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule)
|
||||
},
|
||||
{
|
||||
path: 'messages',
|
||||
loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
|
||||
<!-- [routerLink]="['/home/chat/newchat']" -->
|
||||
<ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,21 +36,41 @@
|
||||
<ion-list *ngSwitchCase="'Contactos'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item *ngFor="let user of userConnectedList" (click)="startConversation(user)">
|
||||
<!-- <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 class="item-content">
|
||||
<div (click)="openMessages(dm)" class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário Assuntos Sociais</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">{{dm.lastMessage._updatedAt | date: 'HH:mm'}}</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<ion-label>{{dm.lastMessage.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div 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 class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário para o sector Agricola</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
</div>
|
||||
@@ -59,21 +78,53 @@
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div 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 class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário para o sector Adminstrativo</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</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>{{group.name}}</ion-label>
|
||||
</div>
|
||||
<div class="item-date">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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>
|
||||
@@ -88,7 +139,7 @@
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
|
||||
@@ -63,6 +63,7 @@
|
||||
.item{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
overflow: auto;
|
||||
|
||||
.item-icon{
|
||||
width: 40px;
|
||||
|
||||
+108
-15
@@ -1,9 +1,12 @@
|
||||
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';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { ConversationPage } from './conversation/conversation.page';
|
||||
import { GroupMessagesPage } from './group-messages/group-messages.page';
|
||||
import { ContactsPage } from './messages/contacts/contacts.page';
|
||||
import { MessagesPage } from './messages/messages.page';
|
||||
import { NewGroupPage } from './new-group/new-group.page';
|
||||
import { NewchatPage } from './newchat/newchat.page';
|
||||
|
||||
@@ -13,48 +16,121 @@ 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();
|
||||
setInterval(()=>{
|
||||
this.getDirectMessages();
|
||||
this.getGroups();
|
||||
}, 2000);
|
||||
}
|
||||
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;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getConnectedUsers(){
|
||||
getDirectMessages(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.result = this.chatService.getAllDirectMessages().subscribe((res:any)=>{
|
||||
this.userDirectMessages = res.ims;
|
||||
console.log(res);
|
||||
|
||||
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;
|
||||
});
|
||||
} */
|
||||
|
||||
/* 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(this.userConnectedList);
|
||||
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
} */
|
||||
|
||||
async startConversation(selectedUser) {
|
||||
const modal = await this.modalController.create({
|
||||
@@ -70,8 +146,8 @@ export class ChatPage implements OnInit {
|
||||
}
|
||||
async selectContact(){
|
||||
const modal = await this.modalController.create({
|
||||
component: NewchatPage,
|
||||
cssClass: 'newchat',
|
||||
component: ContactsPage,
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
@@ -86,11 +162,28 @@ export class ChatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async openGroupMessages(){
|
||||
async openMessages(dm:any){
|
||||
console.log(dm);
|
||||
|
||||
const modal = await this.modalController.create({
|
||||
component: MessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
componentProps: {
|
||||
dm: dm,
|
||||
},
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
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();
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupContactsPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupContactsPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
GroupContactsPageRoutingModule
|
||||
],
|
||||
declarations: [GroupContactsPage]
|
||||
})
|
||||
export class GroupContactsPageModule {}
|
||||
@@ -0,0 +1,51 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Contactos</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="groupMessages()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<!-- <ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
</ion-list> -->
|
||||
|
||||
<ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
|
||||
<div *virtualItem="let user" class="item-checkbox">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>{{user.first}} {{user.last}}</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,127 @@
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
padding: 30px 20px 0px 20px;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.div-title{
|
||||
width: 221px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-search{
|
||||
--padding-top:0 !important;
|
||||
--padding-bottom:0 !important;
|
||||
--padding-start:0 !important;
|
||||
--padding-end:0 !important;
|
||||
|
||||
.search{
|
||||
border: 1px solid #ebebeb;
|
||||
margin: 5px 20px 5px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.search ion-searchbar{
|
||||
/* border: 1px solid green; */
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: none;
|
||||
overflow: auto;
|
||||
--icon-color:#0d89d1;
|
||||
}
|
||||
|
||||
}
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.main-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 0 0 0;
|
||||
|
||||
.item-divider{
|
||||
background: #ebebeb;
|
||||
font-size: 15px;
|
||||
margin: 10px 0 10px 0;
|
||||
padding:5px 0 5px 20px;
|
||||
|
||||
}
|
||||
|
||||
.item-checkbox{
|
||||
display: flex;
|
||||
margin: 10px 20px 10px 20px !important;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.item-checkbox ion-checkbox{
|
||||
--border-color: #0d89d1;
|
||||
--background-checked:#0d89d1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item-checkbox p{
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
width: 330px;
|
||||
padding-left: 10px;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
float: left;
|
||||
}
|
||||
.item-checkbox ion-icon{
|
||||
font-size: 10px;
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
|
||||
describe('GroupContactsPage', () => {
|
||||
let component: GroupContactsPage;
|
||||
let fixture: ComponentFixture<GroupContactsPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupContactsPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupContactsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { GroupMessagesPage } from '../group-messages.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-contacts',
|
||||
templateUrl: './group-contacts.page.html',
|
||||
styleUrls: ['./group-contacts.page.scss'],
|
||||
})
|
||||
export class GroupContactsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
users = [];
|
||||
|
||||
contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
|
||||
|
||||
headers: HttpHeaders;
|
||||
options:any;
|
||||
|
||||
contacts: Contact[] = [
|
||||
{
|
||||
first: 'Ana',
|
||||
last: 'Manuel',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Abdullah',
|
||||
last: 'Hill',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Batur',
|
||||
last: 'Oymen',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Bianca',
|
||||
last: 'Costa',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Zaya',
|
||||
last: 'Mary',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Tiago',
|
||||
last: 'Kayaya',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private http: HttpClient,
|
||||
)
|
||||
{
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
|
||||
this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
|
||||
this.headers = this.headers.set('Accept','application/json');
|
||||
this.headers = this.headers.set('content-type','application/json');
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUsers();
|
||||
|
||||
}
|
||||
|
||||
loadUsers(){
|
||||
this.options = {
|
||||
headers: this.headers,
|
||||
};
|
||||
/* this.http.get('https://randomuser.me/api/?results=100', this.options)
|
||||
.subscribe(res => {
|
||||
this.users = res['results'].sort((a,b) => {
|
||||
if(a.name.first < b.name.first){
|
||||
return -1;
|
||||
}
|
||||
if(a.name.first > b.name.first){
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
console.log(res);
|
||||
console.log(this.users);
|
||||
}); */
|
||||
this.users = this.contacts.sort((a,b) => {
|
||||
if(a.first < b.first){
|
||||
return -1;
|
||||
}
|
||||
if(a.first > b.first){
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
separateLetter(record, recordIndex, records){
|
||||
/* if(recordIndex == 0){
|
||||
return record.name.first[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].name.first[0];
|
||||
let first_current = record.name.first[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null; */
|
||||
if(recordIndex == 0){
|
||||
return record.first[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].first[0];
|
||||
let first_current = record.first[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
doRefresh(event){
|
||||
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
onChange(event){
|
||||
|
||||
}
|
||||
clicked(){
|
||||
console.log('clicked');
|
||||
|
||||
}
|
||||
async groupMessages(){
|
||||
const modal = await this.modalController.create({
|
||||
component: GroupMessagesPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,17 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupMessagesPage
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupMessagesPage
|
||||
},
|
||||
{
|
||||
path: 'group-contacts',
|
||||
loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
|
||||
];
|
||||
}
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupMessagesPageRoutingModule {}
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Grupo de Trabalho A</ion-label>
|
||||
@@ -10,36 +10,104 @@
|
||||
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon (click)="addContacts()" src="assets/icon/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label *ngFor="let contact of contacts" >
|
||||
{{contact}}
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<p>HHHHH</p>
|
||||
|
||||
|
||||
|
||||
<div class="welcome-text">
|
||||
<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">
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src='assets/images/1.jpg' tappable>
|
||||
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Presidente da República</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Pois é, momentos históricos</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Ministro do interior</ion-label>
|
||||
<span class="time">16:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Grande momento</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer class="ion-no-border">
|
||||
<ion-footer>
|
||||
<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-row align-items-center class="row">
|
||||
<ion-col size="1">
|
||||
<ion-label class="ion-no-padding" lines="none">
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item lines="none" class="div-message">
|
||||
<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-icon slot="end" name="mic-outline"></ion-icon>
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></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 size="2">
|
||||
<!-- [disabled]="message === ''" -->
|
||||
<ion-label>
|
||||
<ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import '~src/function.scss';
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
@@ -14,7 +15,7 @@
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
|
||||
.title-content{
|
||||
.header-top{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
@@ -34,6 +35,30 @@
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.header-bottom{
|
||||
width: 310px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon{
|
||||
width: 30px;
|
||||
font-size: 25px;
|
||||
float: left;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
.header-bottom-contacts{
|
||||
width: 275px;
|
||||
font-size: 15px;
|
||||
color: #797979;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
@@ -50,4 +75,88 @@
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
ion-content{
|
||||
.welcome-text{
|
||||
/* width: 322px; */
|
||||
width: em(422px);
|
||||
background: #ebebeb;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.2rem;
|
||||
margin: 20px 39px 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.messages{
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
overflow: auto;
|
||||
|
||||
.incoming, .outgoing{
|
||||
width: 305px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.incoming{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
|
||||
}
|
||||
}
|
||||
.outgoing{
|
||||
margin: 10px 20px 10px 75px;
|
||||
background: #e4f4fe;
|
||||
float: right;
|
||||
}
|
||||
.title{
|
||||
color: #0782c9;
|
||||
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.time{
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer{
|
||||
.row{
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chat-icon-options{
|
||||
display:block !important;
|
||||
font-size: 25px;
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat-icon-send{
|
||||
font-size: 45px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-message{
|
||||
display: flex;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
ion-textarea{
|
||||
margin: 0 !important;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
|
||||
import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
|
||||
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
|
||||
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
|
||||
import { ContactsPage } from '../new-group/contacts/contacts.page';
|
||||
import { NewGroupPage } from '../new-group/new-group.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-messages',
|
||||
@@ -10,9 +13,11 @@ import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popove
|
||||
export class GroupMessagesPage implements OnInit {
|
||||
|
||||
message:any;
|
||||
contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
|
||||
|
||||
constructor(
|
||||
private menu: MenuController,
|
||||
private modalController: ModalController,
|
||||
private actionSheetController: ActionSheetController,
|
||||
public popoverController: PopoverController,
|
||||
) { }
|
||||
@@ -53,6 +58,27 @@ export class GroupMessagesPage implements OnInit {
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
async openChatOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: ChatOptionsPopoverPage,
|
||||
cssClass: 'chat-options-popover',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
async addContacts(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ContactsPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ContactsPageRoutingModule {}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { ContactsPageRoutingModule } from './contacts-routing.module';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
PipesModule,
|
||||
ContactsPageRoutingModule
|
||||
],
|
||||
declarations: [ContactsPage]
|
||||
})
|
||||
export class ContactsPageModule {}
|
||||
@@ -0,0 +1,46 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Nova Conversa</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
|
||||
<div (click)="createRoom(user.username)" *virtualItem="let user" class="item-user">
|
||||
<p>{{user.name}}</p>
|
||||
<span class="icon">
|
||||
<ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,136 @@
|
||||
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
padding: 30px 20px 0px 20px;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.div-title{
|
||||
width: 221px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-search{
|
||||
--padding-top:0 !important;
|
||||
--padding-bottom:0 !important;
|
||||
--padding-start:0 !important;
|
||||
--padding-end:0 !important;
|
||||
|
||||
.search{
|
||||
border: 1px solid #ebebeb;
|
||||
margin: 5px 20px 5px 20px;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.search ion-searchbar{
|
||||
/* border: 1px solid green; */
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: none;
|
||||
overflow: hidden;
|
||||
--icon-color:#0d89d1;
|
||||
}
|
||||
|
||||
}
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.main-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 0 0 0;
|
||||
|
||||
.item-divider{
|
||||
background: #ebebeb;
|
||||
font-size: 15px;
|
||||
margin: 10px 0 10px 0;
|
||||
padding:5px 0 5px 20px;
|
||||
|
||||
}
|
||||
|
||||
.item-user{
|
||||
display: flex;
|
||||
margin: 10px 20px 10px 20px !important;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-user p{
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
width: 90%;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
float: left;
|
||||
}
|
||||
.item-user .icon{
|
||||
width: 10%;
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
text-align: right;
|
||||
overflow: auto;
|
||||
}
|
||||
.online{
|
||||
color:#99e47b;
|
||||
}
|
||||
.offline{
|
||||
color:#cbced1;
|
||||
}
|
||||
.away{
|
||||
color:#ffd21f;
|
||||
}
|
||||
.invisible{
|
||||
color:#cbced1;
|
||||
}
|
||||
.busy{
|
||||
color:#f5455c;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
|
||||
describe('ContactsPage', () => {
|
||||
let component: ContactsPage;
|
||||
let fixture: ComponentFixture<ContactsPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ContactsPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ContactsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,153 @@
|
||||
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';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { GroupMessagesPage } from '../../group-messages/group-messages.page';
|
||||
import { MessagesPage } from '../messages.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contacts',
|
||||
templateUrl: './contacts.page.html',
|
||||
styleUrls: ['./contacts.page.scss'],
|
||||
})
|
||||
export class ContactsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
loggedUser: any;
|
||||
users = [];
|
||||
|
||||
headers: HttpHeaders;
|
||||
options:any;
|
||||
contacts:any;
|
||||
textSearch:string;
|
||||
room:any;
|
||||
dm:any;
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private http: HttpClient,
|
||||
private chatService: ChatService,
|
||||
private authService: AuthService,
|
||||
)
|
||||
{
|
||||
this.authService.userData$.subscribe((res:any)=>{
|
||||
this.loggedUser=res;
|
||||
});
|
||||
this.textSearch="";
|
||||
this.dm=null;
|
||||
this.room=null;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUsers();
|
||||
|
||||
}
|
||||
onChange(event){
|
||||
this.textSearch = event.detail.value;
|
||||
}
|
||||
|
||||
loadUsers(){
|
||||
this.options = {
|
||||
headers: this.headers,
|
||||
};
|
||||
this.chatService.getAllUsers().subscribe((res:any)=>{
|
||||
console.log(res.users);
|
||||
this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
|
||||
this.users = this.contacts.sort((a,b) => {
|
||||
if(a.name < b.name){
|
||||
return -1;
|
||||
}
|
||||
if(a.name > b.name){
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
|
||||
separateLetter(record, recordIndex, records){
|
||||
if(recordIndex == 0){
|
||||
return record.name[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].name[0];
|
||||
let first_current = record.name[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
doRefresh(event){
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
clicked(){
|
||||
console.log('clicked');
|
||||
}
|
||||
|
||||
createRoom(username:string){
|
||||
let body = {
|
||||
username: username,
|
||||
}
|
||||
this.chatService.createRoom(body).subscribe(res => {
|
||||
console.log(res);
|
||||
this.room = res['room'];
|
||||
this.getDirectMessage(this.room._id);
|
||||
});
|
||||
}
|
||||
getDirectMessage(roomId:any){
|
||||
console.log(roomId);
|
||||
|
||||
this.chatService.getAllDirectMessages().subscribe(res=>{
|
||||
let result = res['ims'].filter(data => data._id == roomId);
|
||||
this.dm = result[0];
|
||||
console.log(this.dm);
|
||||
this.openModal(this.dm);
|
||||
});
|
||||
}
|
||||
async openModal(dm:any){
|
||||
this.close();
|
||||
console.log(dm);
|
||||
|
||||
const modal = await this.modalController.create({
|
||||
component: MessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
componentProps: {
|
||||
dm: dm,
|
||||
},
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
async openMessages(username:string){
|
||||
/* this.close(); */
|
||||
|
||||
let dm:any;
|
||||
//Create new room
|
||||
this.createRoom(username);
|
||||
//Get direct messages (dm)
|
||||
/* this.getDirectMessage(this.room._id); */
|
||||
console.log(this.dm);
|
||||
|
||||
|
||||
/* const modal = await this.modalController.create({
|
||||
component: MessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
componentProps: {
|
||||
dm: dm,
|
||||
},
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss(); */
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MessagesPage
|
||||
},
{
|
||||
path: 'contacts',
|
||||
loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class MessagesPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MessagesPageRoutingModule } from './messages-routing.module';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
MessagesPageRoutingModule
|
||||
],
|
||||
declarations: [MessagesPage]
|
||||
})
|
||||
export class MessagesPageModule {}
|
||||
@@ -0,0 +1,113 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom" (click)="addContacts()">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label class="text-color-blue">Adicionar contacto</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<img src='assets/images/1.jpg' tappable>
|
||||
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
|
||||
</div>
|
||||
</div> -->
|
||||
<div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Presidente da República</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Pois é, momentos históricos</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Ministro do interior</ion-label>
|
||||
<span class="time">16:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Grande momento</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</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>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-row align-items-center class="row">
|
||||
<ion-col size="1">
|
||||
<ion-label class="ion-no-padding" lines="none">
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<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 (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,194 @@
|
||||
@import '~src/function.scss';
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
padding: 30px 20px 0px 20px;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
|
||||
.header-top{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
background: #fff;
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 280px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
color: #0782c9;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.header-bottom{
|
||||
width: 310px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon{
|
||||
width: 30px;
|
||||
font-size: 25px;
|
||||
float: left;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
.header-bottom-contacts{
|
||||
width: 275px;
|
||||
font-size: 15px;
|
||||
color: #797979;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
ion-content{
|
||||
.welcome-text{
|
||||
/* width: 322px; */
|
||||
width: em(422px);
|
||||
background: #ebebeb;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.2rem;
|
||||
margin: 20px 39px 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.messages{
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
overflow: auto;
|
||||
|
||||
//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-true{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
|
||||
}
|
||||
}
|
||||
.incoming-false{
|
||||
margin: 10px 20px 10px 75px;
|
||||
background: #e4f4fe;
|
||||
float: right;
|
||||
}
|
||||
.title{
|
||||
display: inline;
|
||||
color: #0782c9;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.time{
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer{
|
||||
.row{
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chat-icon-options{
|
||||
display:block !important;
|
||||
font-size: 25px;
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat-icon-send{
|
||||
font-size: 45px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-message{
|
||||
display: flex;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
ion-textarea{
|
||||
margin: 0 !important;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-color-blue{
|
||||
font-size: 15px;
|
||||
color: #0782c9;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.user-status-online{
|
||||
display: block;
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
|
||||
describe('MessagesPage', () => {
|
||||
let component: MessagesPage;
|
||||
let fixture: ComponentFixture<MessagesPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MessagesPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MessagesPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,144 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-messages',
|
||||
templateUrl: './messages.page.html',
|
||||
styleUrls: ['./messages.page.scss'],
|
||||
})
|
||||
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=> {
|
||||
this.loadMessages();
|
||||
});
|
||||
this.message = "";
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
async addContacts(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
async openChatOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: ChatOptionsPopoverPage,
|
||||
cssClass: 'chat-options-popover',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -12,8 +12,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="header-search">
|
||||
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@@ -25,32 +27,26 @@
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<ion-list>
|
||||
<!-- <ion-item *ngFor="let user of searchedItem">
|
||||
<!-- <ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem">
|
||||
{{user.name}}
|
||||
</ion-item> -->
|
||||
<div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>Tiago Kayaya</p>
|
||||
</ion-item>
|
||||
</ion-list> -->
|
||||
|
||||
<ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
<div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
|
||||
|
||||
<div *virtualItem="let user" class="item-checkbox">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>Gilson Manuel</p>
|
||||
<p>{{user.first}} {{user.last}}</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
</ion-list>
|
||||
<!-- <ion-alpha-scroll
|
||||
[listData]="contacts"
|
||||
key="name"
|
||||
[itemTemplate]="alphaScrollItemTemplateRef"
|
||||
[currentPageClass]="currentPageClass"
|
||||
[triggerChange]="triggerAlphaScrollChange">
|
||||
|
||||
<ng-template #alphaScrollItemTemplateRef let-item>
|
||||
<ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
|
||||
</ng-template>
|
||||
|
||||
</ion-alpha-scroll> -->
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
@@ -53,19 +51,55 @@ ion-content{
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 20px 0 20px;
|
||||
.toolbar-search{
|
||||
--padding-top:0 !important;
|
||||
--padding-bottom:0 !important;
|
||||
--padding-start:0 !important;
|
||||
--padding-end:0 !important;
|
||||
|
||||
.search{
|
||||
border: 1px solid #ebebeb;
|
||||
margin: 5px 20px 5px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.search ion-searchbar{
|
||||
/* border: 1px solid green; */
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: none;
|
||||
overflow: auto;
|
||||
--icon-color:#0d89d1;
|
||||
}
|
||||
|
||||
}
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.main-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 0 0 0;
|
||||
|
||||
.item-divider{
|
||||
background: #ebebeb;
|
||||
font-size: 15px;
|
||||
margin: 10px 0 10px 0;
|
||||
padding:5px 0 5px 20px;
|
||||
|
||||
}
|
||||
|
||||
.item-checkbox{
|
||||
width: 100%;
|
||||
margin: 15px 0 15px 0;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
margin: 10px 20px 10px 20px !important;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.item-checkbox ion-checkbox{
|
||||
@@ -77,26 +111,17 @@ ion-content{
|
||||
.item-checkbox p{
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
width: 270px;
|
||||
width: 330px;
|
||||
padding-left: 10px;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
float: left;
|
||||
}
|
||||
.item-checkbox ion-icon{
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
font-size: 10px;
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.header-search{
|
||||
margin-top: 15px;
|
||||
|
||||
ion-searchbar{
|
||||
width: 380px;
|
||||
margin: 0px auto;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: /* inset */ .5px .5px 5px #ebebeb;
|
||||
overflow: auto;
|
||||
--icon-color:#0d89d1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { GroupMessagesPage } from '../../group-messages/group-messages.page';
|
||||
@@ -9,16 +10,119 @@ import { GroupMessagesPage } from '../../group-messages/group-messages.page';
|
||||
})
|
||||
export class ContactsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
users = [];
|
||||
|
||||
contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
|
||||
|
||||
headers: HttpHeaders;
|
||||
options:any;
|
||||
|
||||
contacts: Contact[] = [
|
||||
{
|
||||
first: 'Ana',
|
||||
last: 'Manuel',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Abdullah',
|
||||
last: 'Hill',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Batur',
|
||||
last: 'Oymen',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Bianca',
|
||||
last: 'Costa',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Zaya',
|
||||
last: 'Mary',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
},
|
||||
{
|
||||
first: 'Tiago',
|
||||
last: 'Kayaya',
|
||||
url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
|
||||
}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
) {
|
||||
private modalController: ModalController,
|
||||
private http: HttpClient,
|
||||
)
|
||||
{
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
|
||||
this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
|
||||
this.headers = this.headers.set('Accept','application/json');
|
||||
this.headers = this.headers.set('content-type','application/json');
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUsers();
|
||||
|
||||
}
|
||||
|
||||
loadUsers(){
|
||||
this.options = {
|
||||
headers: this.headers,
|
||||
};
|
||||
/* this.http.get('https://randomuser.me/api/?results=100', this.options)
|
||||
.subscribe(res => {
|
||||
this.users = res['results'].sort((a,b) => {
|
||||
if(a.name.first < b.name.first){
|
||||
return -1;
|
||||
}
|
||||
if(a.name.first > b.name.first){
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
console.log(res);
|
||||
console.log(this.users);
|
||||
}); */
|
||||
this.users = this.contacts.sort((a,b) => {
|
||||
if(a.first < b.first){
|
||||
return -1;
|
||||
}
|
||||
if(a.first > b.first){
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
separateLetter(record, recordIndex, records){
|
||||
/* if(recordIndex == 0){
|
||||
return record.name.first[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].name.first[0];
|
||||
let first_current = record.name.first[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null; */
|
||||
if(recordIndex == 0){
|
||||
return record.first[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].first[0];
|
||||
let first_current = record.first[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
doRefresh(event){
|
||||
|
||||
}
|
||||
|
||||
@@ -19,26 +19,18 @@
|
||||
<div class="item-container">
|
||||
<ion-input placeholder="Título"></ion-input>
|
||||
</div>
|
||||
<ion-item class="ion-no-padding item-container-no-border" lines="none">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<div class="item-container-no-border">
|
||||
<ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
|
||||
<ion-label>Grupo Ultra-secreto</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
<div class="container-div">
|
||||
<div *ngIf="showDuration" class="container-div">
|
||||
<div class="ion-item-class-2">
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
<ion-datetime
|
||||
placeholder="Duração"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
minuteValues="0,15,30,45"
|
||||
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
|
||||
min="2018"
|
||||
max="2022"
|
||||
>
|
||||
</ion-datetime>
|
||||
<ion-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -107,21 +107,19 @@ ion-content{
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.item-container-no-border{
|
||||
display: flex;
|
||||
width: 360px;
|
||||
margin: 15px auto;
|
||||
margin: 25px auto;
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.item-container-no-border ion-checkbox{
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-container-no-border ion-label{
|
||||
padding-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { analyzeAndValidateNgModules } from '@angular/compiler';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ModalController, PickerController, PopoverController } from '@ionic/angular';
|
||||
import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
|
||||
import { ContactsPage } from './contacts/contacts.page';
|
||||
|
||||
@Component({
|
||||
@@ -9,8 +11,13 @@ import { ContactsPage } from './contacts/contacts.page';
|
||||
})
|
||||
export class NewGroupPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
displayDuration: any;
|
||||
showDuration: boolean;
|
||||
selectedDuration = ['','',''];
|
||||
|
||||
constructor(
|
||||
private pickerController: PickerController,
|
||||
private popoverController: PopoverController,
|
||||
private modalController: ModalController,
|
||||
) {
|
||||
|
||||
@@ -18,6 +25,9 @@ export class NewGroupPage implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
_ionChange(event){
|
||||
this.showDuration = event.detail.checked;
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
@@ -35,5 +45,130 @@ export class NewGroupPage implements OnInit {
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
async setDuration(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: GroupDurationPage,
|
||||
cssClass: 'group-duration',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
async showPicker(){
|
||||
const picker = await this.pickerController.create({
|
||||
cssClass: '',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel'
|
||||
},
|
||||
{
|
||||
text: 'Ok',
|
||||
cssClass: 'btn-cancel',
|
||||
handler:(value:any)=>{
|
||||
console.log('button done pressed');
|
||||
this.selectedDuration = [
|
||||
value.days.value,
|
||||
value.hours.value,
|
||||
value.minutes.value,
|
||||
]
|
||||
console.log(this.selectedDuration);
|
||||
if(value.days.value != null && value.hours.value != null && value.minutes.value != null){
|
||||
if(value.days.value > 0){
|
||||
if(value.days.value == 1){
|
||||
if(value.hours.value == 1){
|
||||
this.displayDuration = value.days.value + " day " +
|
||||
value.hours.value + " hora " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
else{
|
||||
this.displayDuration = value.days.value + " days " +
|
||||
value.hours.value + " horas " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(value.hours.value == 1){
|
||||
this.displayDuration = value.days.value + " days " +
|
||||
value.hours.value + " hora " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
else{
|
||||
this.displayDuration = value.days.value + " days " +
|
||||
value.hours.value + " horas " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(value.hours.value == 1){
|
||||
this.displayDuration = value.hours.value + " hora " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
else{
|
||||
this.displayDuration = value.hours.value + " horas " +
|
||||
value.minutes.value + " minutos";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
name: 'days',
|
||||
prefix: 'Dias',
|
||||
options: [
|
||||
{ text: '0', value: 0 },
|
||||
{ text: '1', value: 1 },
|
||||
{ text: '2', value: 2 },
|
||||
{ text: '3', value: 3 },
|
||||
{ text: '4', value: 4 },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'hours',
|
||||
prefix: 'Horas',
|
||||
options: [
|
||||
{ text: '0', value: 0 },
|
||||
{ text: '1', value: 1 },
|
||||
{ text: '2', value: 2 },
|
||||
{ text: '3', value: 3 },
|
||||
{ text: '4', value: 4 },
|
||||
{ text: '5', value: 5 },
|
||||
{ text: '6', value: 6 },
|
||||
{ text: '7', value: 7 },
|
||||
{ text: '8', value: 8 },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'minutes',
|
||||
prefix: 'Minutos',
|
||||
selectedIndex: 3,
|
||||
options: [
|
||||
{ text: '0', value: 0 },
|
||||
{ text: '5', value: 5 },
|
||||
{ text: '10', value: 10 },
|
||||
{ text: '15', value: 15 },
|
||||
{ text: '20', value: 20 },
|
||||
{ text: '25', value: 25 },
|
||||
{ text: '30', value: 30 },
|
||||
{ text: '35', value: 35 },
|
||||
{ text: '45', value: 45 },
|
||||
{ text: '50', value: 50 },
|
||||
{ text: '55', value: 55 },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
await picker.present();
|
||||
picker.onDidDismiss().then(async data =>{
|
||||
let day = await picker.getColumn('days');
|
||||
let hour = await picker.getColumn('hours');
|
||||
let minutes = await picker.getColumn('minutes');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -131,7 +131,9 @@ export class EventsPage implements OnInit {
|
||||
if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'pt') /* + ' 00:00:00' */, formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventsList = res;
|
||||
this.currentEvent = res[0].Subject;
|
||||
if(res.length > 0){
|
||||
this.currentEvent = res[0].Subject;
|
||||
}
|
||||
this.totalEvent = this.eventsList.length;
|
||||
this.showLoader = false;
|
||||
});
|
||||
|
||||
@@ -23,7 +23,7 @@ export class LoginPage implements OnInit {
|
||||
userattempt: User;
|
||||
|
||||
public body = {"user": this.username,"password": this.password};
|
||||
public postData = {"user": "admin","password": this.password};
|
||||
public postData = {"user": this.username,"password": this.password};
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
@@ -57,7 +57,7 @@ export class LoginPage implements OnInit {
|
||||
|
||||
loginRocketChat(){
|
||||
this.authService.loginChat(this.postData).subscribe((res: any) =>{
|
||||
this.storageService.store(res);
|
||||
this.storageService.store(AuthConnstants.AUTH, res.data);
|
||||
console.log('Login to Rocket chat OK');
|
||||
},(error:any) =>{
|
||||
console.log('Network error');
|
||||
@@ -67,7 +67,7 @@ export class LoginPage implements OnInit {
|
||||
|
||||
|
||||
async Login(){
|
||||
try {
|
||||
/* try { */
|
||||
//Go to our home in home/feed.
|
||||
//this.router.navigate(['/home/events']);
|
||||
if(this.validateInput()){
|
||||
@@ -79,8 +79,7 @@ export class LoginPage implements OnInit {
|
||||
}
|
||||
if (await this.authService.login(this.userattempt)){
|
||||
this.loginRocketChat();
|
||||
console.log('Log Gabinete Digital OK');
|
||||
this.router.navigate(['/home/events']);
|
||||
this.router.navigate(['/home/events']);this.presentAlert('1');
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -92,8 +91,9 @@ export class LoginPage implements OnInit {
|
||||
//this.toastService.presentToast('Preencha todos campos');
|
||||
this.presentAlert('Por favor, insira o seu nome de utilizador e palavra-passe.');
|
||||
}
|
||||
} catch (error) {
|
||||
this.presentAlert('Ocorreu um erro ao fazer login. Contacte o administrador de sistema.');
|
||||
}
|
||||
/* } catch (error) {
|
||||
error
|
||||
this.presentAlert('Ocorreu um erro ao fazer login. Contacte o administrador de sistema. '+ error);
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,9 +10,10 @@ import { Image } from 'src/app/models/image';
|
||||
import { ThrowStmt } from '@angular/compiler';
|
||||
import { PhotoService } from 'src/app/services/photo.service';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
|
||||
//Capacitor
|
||||
/* const { Camera } = Plugins; */
|
||||
|
||||
//Cordova
|
||||
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
|
||||
import { PublicationFolder } from 'src/app/models/publicationfolder';
|
||||
import { ViewPublicationsPage } from '../view-publications/view-publications.page';
|
||||
|
||||
-3
@@ -70,9 +70,6 @@ export class PublicationDetailPage implements OnInit {
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
doRefresh(event){
|
||||
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
|
||||
Reference in New Issue
Block a user