peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Websocket with storage

Browse Source
This commit is contained in:
Eudes Inácio
2022-01-20 14:31:49 +01:00
parent 4d9db4f198
commit e86d9d8b35
3 changed files with 247 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/services/chat/room.service.ts
+54 -26
View File
@@ -12,28 +12,30 @@ import { Storage } from '@ionic/storage';
export class RoomService {
massages: MessageService[] = []
storageMessage: any[] = [];
lastMessage: MessageService;
chatUser: ChatUserService[] = []
customFields:any;
customFields: any;
id = ''
t = ''
name = ''
_updatedAt = {}
private hasLoadHistory = false
duration = ''
duration = ''
private ToastService = ToastsService
mgsArray = [];
scrollDown = () => {}
scrollDown = () => { }
constructor(
public WsChatService: WsChatService,
private MessageService: MessageService,
private storage: Storage,
) {}
) { }
setData({customFields, id, name, t, lastMessage, _updatedAt}) {
setData({ customFields, id, name, t, lastMessage, _updatedAt }) {
this.customFields = customFields
this.id = id
this.name = name
@@ -57,11 +59,11 @@ export class RoomService {
const message = new MessageService()
message.setData(ChatMessage)
this.lastMessage.msg = message.msg
if(message.t == 'r'){this.name = message.msg}
if (message.t == 'r') { this.name = message.msg }
this.calDateDuration(ChatMessage._updatedAt)
this.massages.push(message)
setTimeout(()=>{
setTimeout(() => {
this.scrollDown()
}, 100)
@@ -74,19 +76,34 @@ export class RoomService {
}
// runs onces only
loadHistory(limit= 100) {
loadHistory(limit = 100) {
if(this.hasLoadHistory){ return false}
if (this.hasLoadHistory) { return false }
this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory:chatHistory) => {
this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory: chatHistory) => {
await this.transformData(chatHistory.result.messages.reverse());
//await this.transformData(chatHistory.result.messages.reverse());
/* console.log('loadHistory 111', chatHistory.result.messages.reverse())
this.mgsArray = chatHistory.result.messages.reverse();
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
console.log('MSG SAVED ON STORAGE', value)
}); */
/* await this.storage.get('chatmsg').then((message) => {
message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
});
}) */
chatHistory.result.messages.reverse().forEach(message => {
message = this.fix_updatedAt(message)
console.log('loadHistory', message)
this.storageMessage.push(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
@@ -95,18 +112,27 @@ export class RoomService {
})
setTimeout(()=>{
setTimeout(() => {
this.scrollDown()
}, 50)
this.hasLoadHistory = true
}
updateMeessage(messageID, imgbase64) {
}
async returnData(res) {
return res;
}
async transformData(res) {
let mgsArray = [];
this.mgsArray = [];
res.forEach(async element => {
console.log('TRANSFORM DATA ELEMENT' ,element)
if (element.file) {
if (element.file.guid) {
@@ -125,11 +151,11 @@ export class RoomService {
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt,
_updatedAt: element._updatedAt ,
}
mgsArray.push(this.fix_updatedAt(chatmsg));
this.mgsArray.push(chatmsg);
})
} else {
@@ -145,8 +171,8 @@ export class RoomService {
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(this.fix_updatedAt(chatmsg))
this.mgsArray.push(chatmsg)
}
} else {
let chatmsg = {
@@ -161,20 +187,20 @@ export class RoomService {
_updatedAt: element._updatedAt,
}
mgsArray.push(this.fix_updatedAt(chatmsg))
this.mgsArray.push(chatmsg)
}
});
await this.storage.remove('chatmsg').then(() => {
console.log('MSG REMOVE FROM STORAGE')
});
await this.storage.set('chatmsg', mgsArray).then((value) => {
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
console.log('MSG SAVED ON STORAGE', value)
});
}
ReactToMessage() {}
ReactToMessage() { }
private calDateDuration(date = null) {
this.duration = showDateDuration(date || this._updatedAt);
@@ -182,9 +208,11 @@ export class RoomService {
private fix_updatedAt(message) {
if(message.result) {
if (message.result) {
console.log('FIX UPDATE ', message.result)
message.result._updatedAt = message.result._updatedAt['$date']
} else{
} else {
console.log('FIX UPDATE 11', message)
message._updatedAt = message._updatedAt['$date']
}
return message
@@ -192,6 +220,6 @@ export class RoomService {
// to add
countDownDate(){}
countDownDate() { }
}
src/app/shared/chat/messages/messages.page.html
+24 -22
View File
@@ -38,7 +38,7 @@
</ion-refresher-content>
</ion-refresher>
<div class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getDmRoom(roomId).massages; let last = last">
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -113,30 +113,32 @@
</div>
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
<div *ngIf="msg.file.type == 'application/img'">
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
</fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.file" class="message-attachments">
<div>
<div (click)="openPreview(msg)">
<!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
TTTT
<img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
<div *ngIf="msg.file">
<div *ngIf="msg.file.type == 'application/img'">
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
</fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.file" class="message-attachments">
<div>
<div (click)="openPreview(msg)">
<!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
TTTT
<img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
{{last ? scrollToBottom() : ''}}
</div>
</div>
</div>
src/app/shared/chat/messages/messages.page.ts
+169 -48
View File
@@ -23,8 +23,10 @@ import { StorageService } from 'src/app/services/storage.service';
import { Directory, Filesystem } from '@capacitor/filesystem';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { Storage } from '@ionic/storage';
import { WsChatMethodsService} from 'src/app/services/chat/ws-chat-methods.service'
import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
import { WsChatService } from 'src/app/services/chat/ws-chat.service'
import { MessageService } from 'src/app/services/chat/message.service';
import { element } from 'protractor';
const IMAGE_DIR = 'stored-images';
@Component({
@@ -68,6 +70,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
longPressActive = false;
frameUrl: any;
downloadFile: any;
massages: MessageService[] = []
constructor(
public popoverController: PopoverController,
@@ -100,21 +103,30 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
this.getMessageDB();
/* console.log('DATATATA', this.wsChatMethodsService.getDmRoom(this.roomId).massages)
this.wsChatMethodsService.getDmRoom(this.roomId).massages.forEach((element) => {
console.log('DATATATA 11', element)
}) */
//this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
//this.getMessageDB()
setTimeout(()=>{
setTimeout(() => {
this.scrollToBottomClicked()
}, 50)
}
ngOnInit() {
this.scrollToBottom();
this.setStatus('online');
}
onPressingMessage() {
const gesture = this.gestureController.create({
el: this.messageContainer.nativeElement,
@@ -242,7 +254,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
this.message = "";
}
deleteMessage(msgId:string) {
deleteMessage(msgId: string) {
let body = {
"roomId": this.roomId,
"msgId": msgId,
@@ -254,23 +266,128 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
}); */
}
getMessageDB() {
this.storage.get('chatmsg').then((msg) => {
async getMessageDB() {
await this.storage.get('chatmsg').then((message) => {
this.transformData(message)
/* message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
}); */
})
/* await this.storage.get('chatmsg').then((msg) => {
console.log('FROM DB WEB', msg)
let msgArray = [];
msgArray = msg;
msgArray.filter(data => data._id != this.roomId);
this.messages = msgArray;
console.log("MSG CHAT WEB", this.messages)
})
if (msg) {
msgArray = msg;
msgArray.filter(data => data._id != this.roomId);
this.messages = msgArray;
console.log("MSG CHAT WEB", this.messages)
} else {
this.getMessageDB()
}
}) */
}
private fix_updatedAt(message) {
if (message.result) {
console.log('FIX UPDATE ', message.result)
message.result._updatedAt = message.result._updatedAt['$date']
} else {
console.log('FIX UPDATE 11', message)
message._updatedAt = message._updatedAt['$date']
}
return message
}
async transformData(res) {
let mgsArray = [];
res.forEach(async element => {
console.log('TRANSFORM DATA ELEMENT' ,element)
if (element.file) {
if (element.file.guid) {
await this.storage.get(element.file.guid).then((image) => {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
file: {
guid: element.file.guid,
image_url: image,
type: element.file.type
},
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt ,
}
mgsArray.push(chatmsg);
})
} else {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
file: element.file,
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(chatmsg)
}
} else {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(chatmsg)
}
});
await this.storage.remove('chatmsg').then(() => {
console.log('MSG REMOVE FROM STORAGE')
});
await this.storage.set('chatmsg', mgsArray).then((message) => {
message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
});
});
}
/* async transformData(res) {
console.log('TRANSFORM DATA', res)
let mgsArray = [];
res.map(async element => {
console.log('TRANSFORM DATA ELEMENT', element)
if (element.file) {
if (element.file.guid) {
@@ -309,7 +426,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(chatmsg)
}
} else {
@@ -336,11 +453,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
console.log('MSG SAVED ON STORAGE', value)
});
}
} */
async viewDocument(msg:any, url?:string){
if(msg.file.type == "application/img"){
let response:any = await this.fileService.getFile(msg.file.guid).toPromise();
async viewDocument(msg: any, url?: string) {
if (msg.file.type == "application/img") {
let response: any = await this.fileService.getFile(msg.file.guid).toPromise();
console.log(response);
alert(response);
@@ -625,34 +742,35 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
console.log('serverLongPull', res['success']);
if (res['success'] == true) {
// Show Error
//showMessage(response.statusText);
/* this.messages = res['messages'].reverse();
this.chatMessageStore.add(roomId, this.messages) */
console.log('MSG FROM ROCKET ', res['messages'].reverse())
/* this.transformData(res['messages'].reverse());
this.getMessageDB(); */
if (res['success'] == true) {
// Show Error
//showMessage(response.statusText);
/* this.messages = res['messages'].reverse();
this.chatMessageStore.add(roomId, this.messages) */
console.log('MSG FROM ROCKET ', res['messages'].reverse())
/* this.transformData(res['messages'].reverse());
this.getMessageDB(); */
//console.log(this.messages);
// Reconnect in one second
if(this.route.url != "/home/chat"){
console.log("Timer message stop")
}
else{
if(document.querySelector('app-messages')){
await new Promise(resolve => setTimeout(resolve, 5000));
// await this.serverLongPull();
this.getDirectMessages.emit();
console.log('Timer message running')
//console.log(this.messages);
// Reconnect in one second
if (this.route.url != "/home/chat") {
console.log("Timer message stop")
}
}
}
}, (error) => {
console.log(error);
});
else {
if (document.querySelector('app-messages')) {
await new Promise(resolve => setTimeout(resolve, 5000));
// await this.serverLongPull();
this.getDirectMessages.emit();
console.log('Timer message running')
}
}
}
}, (error) => {
console.log(error);
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
@@ -709,7 +827,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
} else if (event.type === HttpEventType.Response) {
this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
this.storage.set(msg.file.guid, this.downloadFile);
await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
console.log('IMAGE SAVED')
});
}
});
@@ -721,12 +841,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
async openPreview(msg) {
if (msg.file.image_url === null) {
this.downloadFileMsg(msg)
} else {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
image: msg.file.image_url,
username: msg.u.name,
_updatedAt: msg._updatedAt
}