mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
Fixe merge conflit
This commit is contained in:
Peter Maquiran
@@ -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,
|
||||
|
||||
@@ -14,6 +14,18 @@ const routes: Routes = [
|
||||
},
|
||||
{
|
||||
path: 'newchat',
|
||||
loadChildren: () => import('./newchat/newchat.module').then( m => m.NewchatPageModule)
|
||||
},
|
||||
{
|
||||
path: 'new-group',
|
||||
loadChildren: () => import('./new-group/new-group.module').then( m => m.NewGroupPageModule)
|
||||
},
|
||||
{
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
<ion-label class="title">Chat</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
|
||||
<ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" [routerLink]="['/home/chat/newchat']"></ion-icon>
|
||||
<ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
|
||||
<ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,26 +36,110 @@
|
||||
<ion-list *ngSwitchCase="'Contactos'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item *ngFor="let user of userConnectedList" (click)="starConversation(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>
|
||||
</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(dm)" class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<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>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -64,3 +148,4 @@
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
@@ -1,26 +1,4 @@
|
||||
.iconschatnew-group{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
.iconschatgroup-chat-40 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.iconschatnew-conversation{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
.iconschatchat-40 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
@@ -67,4 +45,60 @@
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
|
||||
.iconschatnew-group{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
.iconschatnew-conversation{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
overflow: auto;
|
||||
|
||||
.item-icon{
|
||||
width: 40px;
|
||||
float: left;
|
||||
|
||||
.icon{
|
||||
margin-top: 10px;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
.item-content{
|
||||
width: 317px;
|
||||
margin: 0 auto;
|
||||
float:right
|
||||
}
|
||||
.item-title-time{
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item-title{
|
||||
width: 80%;
|
||||
float: left;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
}
|
||||
.item-date{
|
||||
width: 20%;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
}
|
||||
.item-description{
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
+137
-13
@@ -1,8 +1,14 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chat',
|
||||
@@ -10,49 +16,123 @@ import { ConversationPage } from './conversation/conversation.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.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 starConversation(selectedUser) {
|
||||
this.showLoader = false;
|
||||
});
|
||||
} */
|
||||
|
||||
async startConversation(selectedUser) {
|
||||
const modal = await this.modalController.create({
|
||||
component: ConversationPage,
|
||||
cssClass: 'conversation',
|
||||
@@ -64,4 +144,48 @@ export class ChatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async selectContact(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async newGroup(){
|
||||
const modal = await this.modalController.create({
|
||||
component: NewGroupPage,
|
||||
cssClass: 'new-group',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +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
|
||||
},
|
||||
{
|
||||
path: 'group-contacts',
|
||||
loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
@@ -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 { GroupMessagesPageRoutingModule } from './group-messages-routing.module';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modules';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
PopoverModule,
|
||||
GroupMessagesPageRoutingModule
|
||||
],
|
||||
declarations: [GroupMessagesPage]
|
||||
})
|
||||
export class GroupMessagesPageModule {}
|
||||
@@ -0,0 +1,114 @@
|
||||
<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">Grupo de Trabalho A</ion-label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<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>
|
||||
<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>
|
||||
<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 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-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,162 @@
|
||||
@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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
describe('GroupMessagesPage', () => {
|
||||
let component: GroupMessagesPage;
|
||||
let fixture: ComponentFixture<GroupMessagesPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupMessagesPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupMessagesPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
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',
|
||||
templateUrl: './group-messages.page.html',
|
||||
styleUrls: ['./group-messages.page.scss'],
|
||||
})
|
||||
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,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
async actionSheet() {
|
||||
const actionSheet = await this.actionSheetController.create({
|
||||
cssClass: 'my-custom-class',
|
||||
buttons: [{
|
||||
text: 'Sair do grupo',
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Alterar nome do grupo',
|
||||
handler: () => {
|
||||
console.log('Share clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Apagar o grupo',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
},
|
||||
]
|
||||
});
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
async openOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: ChatPopoverPage,
|
||||
cssClass: 'chat-popover',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
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],
|
||||
})
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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,22 @@
|
||||
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';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
ContactsPageRoutingModule
|
||||
],
|
||||
declarations: [ContactsPage]
|
||||
})
|
||||
export class ContactsPageModule {}
|
||||
@@ -0,0 +1,53 @@
|
||||
<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 { 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,152 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contacts',
|
||||
templateUrl: './contacts.page.html',
|
||||
styleUrls: ['./contacts.page.scss'],
|
||||
})
|
||||
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 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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupChatPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupChatPageRoutingModule {}
|
||||
@@ -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 { GroupChatPageRoutingModule } from './group-chat-routing.module';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
GroupChatPageRoutingModule
|
||||
],
|
||||
declarations: [GroupChatPage]
|
||||
})
|
||||
export class GroupChatPageModule {}
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
</ion-content>
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
|
||||
describe('GroupChatPage', () => {
|
||||
let component: GroupChatPage;
|
||||
let fixture: ComponentFixture<GroupChatPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupChatPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupChatPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-chat',
|
||||
templateUrl: './group-chat.page.html',
|
||||
styleUrls: ['./group-chat.page.scss'],
|
||||
})
|
||||
export class GroupChatPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NewGroupPage
|
||||
},
|
||||
{
|
||||
path: 'contacts',
|
||||
loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
|
||||
},
|
||||
{
|
||||
path: 'group-chat',
|
||||
loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule)
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class NewGroupPageRoutingModule {}
|
||||
@@ -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 { NewGroupPageRoutingModule } from './new-group-routing.module';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
NewGroupPageRoutingModule
|
||||
],
|
||||
declarations: [NewGroupPage]
|
||||
})
|
||||
export class NewGroupPageModule {}
|
||||
@@ -0,0 +1,39 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="left">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="addContacts()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<div class="item-container">
|
||||
<ion-input placeholder="Título"></ion-input>
|
||||
</div>
|
||||
<div class="item-container-no-border">
|
||||
<ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
|
||||
<ion-label>Grupo Ultra-secreto</ion-label>
|
||||
</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-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,154 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
padding-top: 15px;
|
||||
border: 0!important;
|
||||
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 140px;
|
||||
margin: 5px 0 0px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.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);
|
||||
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
background: #fff;
|
||||
|
||||
.left{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 221px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 15px;
|
||||
color: #0782c9;
|
||||
margin: 8px 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
|
||||
.item-container{
|
||||
width: 360px;
|
||||
margin: 15px auto;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.item-container-no-border{
|
||||
display: flex;
|
||||
width: 360px;
|
||||
margin: 25px auto;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-container-no-border ion-label{
|
||||
padding-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.container-div{
|
||||
margin-bottom: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.ion-item-class-2{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
|
||||
.ion-icon-class{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.ion-input-class{
|
||||
width: 315px;
|
||||
height: 45px;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
|
||||
describe('NewGroupPage', () => {
|
||||
let component: NewGroupPage;
|
||||
let fixture: ComponentFixture<NewGroupPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NewGroupPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(NewGroupPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,174 @@
|
||||
import { analyzeAndValidateNgModules } from '@angular/compiler';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
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({
|
||||
selector: 'app-new-group',
|
||||
templateUrl: './new-group.page.html',
|
||||
styleUrls: ['./new-group.page.scss'],
|
||||
})
|
||||
export class NewGroupPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
displayDuration: any;
|
||||
showDuration: boolean;
|
||||
selectedDuration = ['','',''];
|
||||
|
||||
constructor(
|
||||
private pickerController: PickerController,
|
||||
private popoverController: PopoverController,
|
||||
private modalController: ModalController,
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
_ionChange(event){
|
||||
this.showDuration = event.detail.checked;
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
async addContacts(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@@ -15,6 +15,7 @@ import { NewchatPage } from './newchat.page';
|
||||
IonicModule,
|
||||
NewchatPageRoutingModule
|
||||
],
|
||||
declarations: [NewchatPage]
|
||||
declarations: [NewchatPage],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NewchatPageModule {}
|
||||
|
||||
@@ -1,20 +1,51 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button icon="chevron-back"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Nova Conversa</ion-title>
|
||||
<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-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<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-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Tiago Kayaya
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Gilson Manuel
|
||||
</ion-item>
|
||||
</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>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -1,3 +1,67 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
ion-searchbar{
|
||||
--border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,27 @@ import { ConversationPage } from '../conversation/conversation.page';
|
||||
styleUrls: ['./newchat.page.scss'],
|
||||
})
|
||||
export class NewchatPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
userList: any[];
|
||||
|
||||
contacts:any;
|
||||
currentPageClass = this;
|
||||
triggerAlphaScrollChange: number = 0;
|
||||
|
||||
constructor(
|
||||
private chatService: ChatService,
|
||||
private modalController: ModalController,
|
||||
private router:Router) { }
|
||||
private router:Router) {
|
||||
this.contacts = [
|
||||
{
|
||||
'name': 'Affenpinscher'
|
||||
},
|
||||
{
|
||||
'name': 'Afghan Hound'
|
||||
},
|
||||
// ...
|
||||
];
|
||||
}
|
||||
|
||||
result:any;
|
||||
searchCountryString:any;
|
||||
@@ -25,6 +40,16 @@ export class NewchatPage implements OnInit {
|
||||
ngOnInit() {
|
||||
this.getUsers();
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
doRefresh(event) {
|
||||
this.getUsers();
|
||||
|
||||
setTimeout(() => {
|
||||
event.target.complete();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
getUsers(){
|
||||
this.result = this.chatService.getAllUsers().subscribe((res:any)=>{
|
||||
@@ -60,6 +85,14 @@ export class NewchatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
|
||||
onItemClick(item) {
|
||||
// This is an example of how you could manually trigger ngOnChange
|
||||
// for the component. If you modify "listData" it won't perform
|
||||
// an ngOnChange, you will have to trigger manually to refresh the component.
|
||||
this.triggerAlphaScrollChange++;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -16,16 +16,16 @@
|
||||
<div *ngIf="loadedEvent">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<form [formGroup]="ionicForm" novalidate>
|
||||
<!-- <form [formGroup]="ionicForm" novalidate>
|
||||
<ion-item>
|
||||
<ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
|
||||
<ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
|
||||
</ion-item>
|
||||
<!-- Error messages -->
|
||||
//Error messages
|
||||
<span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
|
||||
Campo obrigatório
|
||||
</span>
|
||||
</form>
|
||||
</form> -->
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Descrição</ion-label>
|
||||
<ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
|
||||
|
||||
@@ -123,13 +123,6 @@ export class EventsPage implements OnInit {
|
||||
event.target.complete();
|
||||
}
|
||||
|
||||
|
||||
sortArrayISODate(myArray: any){
|
||||
return myArray.sort(function(a, b) {
|
||||
return (a.Data < b.Data) ? -1 : ((a.Data > b.Data) ? 1 : 0);
|
||||
});
|
||||
}
|
||||
|
||||
onSegmentChange(){
|
||||
this.RefreshEvents();
|
||||
}
|
||||
@@ -143,9 +136,11 @@ 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;
|
||||
console.log(res)
|
||||
console.log(res[0])
|
||||
this.currentEvent = res[0].Subject;
|
||||
|
||||
if(res.length > 0){
|
||||
this.currentEvent = res[0].Subject;
|
||||
}
|
||||
|
||||
this.totalEvent = this.eventsList.length;
|
||||
this.showLoader = false;
|
||||
});
|
||||
@@ -266,7 +261,9 @@ export class EventsPage implements OnInit {
|
||||
LoadList()
|
||||
{
|
||||
this.processes.GetTasksList("Expediente", false).subscribe(result => {
|
||||
this.taskslist = new Array();
|
||||
|
||||
const AllResult = new Array();
|
||||
|
||||
result.forEach(element => {
|
||||
let task: DailyWorkTask = {
|
||||
"SerialNumber": element.serialNumber,
|
||||
@@ -276,9 +273,27 @@ export class EventsPage implements OnInit {
|
||||
"DocumentURL": element.formURL,
|
||||
"Remetente": element.workflowInstanceDataFields.Remetente
|
||||
}
|
||||
this.taskslist.push(task);
|
||||
// CreateDate
|
||||
AllResult.push(task);
|
||||
});
|
||||
|
||||
console.log(AllResult);
|
||||
|
||||
this.taskslist = this.sortArrayISODate(AllResult).reverse()
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
sortArrayISODate(myArray: any){
|
||||
return myArray.sort(function(a, b) {
|
||||
return (a.CreateDate < b.CreateDate) ? -1 : ((a.CreateDate > b.CreateDate) ? 1 : 0);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -50,7 +50,7 @@
|
||||
<ion-datetime
|
||||
placeholder="Início"
|
||||
[(ngModel)]="postData.StartDate"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
displayFormat="D H:mm"
|
||||
minuteValues="0,15,30,45"
|
||||
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
|
||||
min="2018"
|
||||
|
||||
@@ -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,6 +57,7 @@ export class LoginPage implements OnInit {
|
||||
|
||||
loginRocketChat(){
|
||||
this.authService.loginChat(this.postData).subscribe((res: any) =>{
|
||||
this.storageService.store(AuthConnstants.AUTH, res.data);
|
||||
console.log('Login to Rocket chat OK');
|
||||
},(error:any) =>{
|
||||
console.log('Network error');
|
||||
@@ -66,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()){
|
||||
@@ -78,11 +79,10 @@ 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
|
||||
{
|
||||
{
|
||||
//this.toastService.presentToast('Não foi possível fazer login"');
|
||||
this.presentAlert('O nome de utilizador e palavra-passe estão incorretas ou verifique a sua conexão com a internet e volte a tentar.');
|
||||
}
|
||||
@@ -91,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';
|
||||
|
||||
@@ -68,6 +68,7 @@ export class SearchPage implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description Basic search
|
||||
*/
|
||||
|
||||
@@ -5,5 +5,14 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="input-text d-flex ion-align-items-center">
|
||||
<ion-input class="search-input" type="search" placeholder="Pesquisar" (change)="filterContact($event)"></ion-input>
|
||||
</div>
|
||||
<ul>
|
||||
<li *ngFor="let contact of showContacts">
|
||||
{{ contact.Name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.main-container{
|
||||
padding: 0px 20px;
|
||||
.input-text {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
ul{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding-top: 10px;
|
||||
li{
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
margin: 0px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
list-style: none;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
|
||||
import { ContactsService } from 'src/app/services/contacts.service';
|
||||
import { EventPerson } from 'src/app/models/eventperson.model';
|
||||
@Component({
|
||||
selector: 'app-sender',
|
||||
templateUrl: './sender.page.html',
|
||||
@@ -9,9 +10,37 @@ import { ModalController } from '@ionic/angular';
|
||||
})
|
||||
export class SenderPage implements OnInit {
|
||||
|
||||
constructor(private modalController:ModalController) { }
|
||||
contacts: EventPerson[];
|
||||
showContacts: EventPerson[];
|
||||
|
||||
|
||||
constructor(private modalController:ModalController,
|
||||
private ContactsService: ContactsService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getSender();
|
||||
}
|
||||
|
||||
getSender(){
|
||||
this.ContactsService.getContacts("").subscribe(res=>{
|
||||
this.contacts = res;
|
||||
});
|
||||
}
|
||||
|
||||
filterContact(findName){
|
||||
console.log(findName)
|
||||
// const persons = this.contacts.filter((person) => {
|
||||
|
||||
// if (person.Name.indexOf(findName) == 0){
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// });
|
||||
|
||||
// this.showContacts = persons;
|
||||
|
||||
}
|
||||
|
||||
close(){
|
||||
|
||||
Reference in New Issue
Block a user