MOBILE-3638 chat: Migrate chat page
Dani Palou
parent
49146a26fc
commit
e180445b96
|
|
@ -3,7 +3,7 @@
|
||||||
<ion-title>{{ 'addon.messages.groupinfo' | translate }}</ion-title>
|
<ion-title>{{ 'addon.messages.groupinfo' | translate }}</ion-title>
|
||||||
<ion-buttons slot="end">
|
<ion-buttons slot="end">
|
||||||
<ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
|
<ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
|
||||||
<ion-icon name="close" slot="icon-only"></ion-icon>
|
<ion-icon name="fas-times" slot="icon-only"></ion-icon>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
:host {
|
:host {
|
||||||
ion-content {
|
ion-content {
|
||||||
background-color: var(--background-lighter);
|
--background: var(--background-lighter);
|
||||||
|
|
||||||
&::part(scroll) {
|
&::part(scroll) {
|
||||||
padding-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,10 @@ const routes: Routes = [
|
||||||
path: ':courseId/:cmId',
|
path: ':courseId/:cmId',
|
||||||
component: AddonModChatIndexPage,
|
component: AddonModChatIndexPage,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: ':courseId/:cmId/chat',
|
||||||
|
loadChildren: () => import('./pages/chat/chat.module').then(m => m.AddonModChatChatPageModule),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,12 @@ import { NgModule } from '@angular/core';
|
||||||
import { AddonModChatIndexComponent } from './index/index';
|
import { AddonModChatIndexComponent } from './index/index';
|
||||||
import { CoreSharedModule } from '@/core/shared.module';
|
import { CoreSharedModule } from '@/core/shared.module';
|
||||||
import { CoreCourseComponentsModule } from '@features/course/components/components.module';
|
import { CoreCourseComponentsModule } from '@features/course/components/components.module';
|
||||||
|
import { AddonModChatUsersModalComponent } from './users-modal/users-modal';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AddonModChatIndexComponent,
|
AddonModChatIndexComponent,
|
||||||
|
AddonModChatUsersModalComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CoreSharedModule,
|
CoreSharedModule,
|
||||||
|
|
@ -29,6 +31,7 @@ import { CoreCourseComponentsModule } from '@features/course/components/componen
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
AddonModChatIndexComponent,
|
AddonModChatIndexComponent,
|
||||||
|
AddonModChatUsersModalComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class AddonModChatComponentsModule {}
|
export class AddonModChatComponentsModule {}
|
||||||
|
|
|
||||||
|
|
@ -107,6 +107,7 @@ export class AddonModChatIndexComponent extends CoreCourseModuleMainActivityComp
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
title,
|
title,
|
||||||
|
chatId: this.chat!.id,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>{{ 'addon.mod_chat.currentusers' | translate }}</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
|
||||||
|
<ion-icon slot="icon-only" name="fas-times"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content>
|
||||||
|
<core-loading [hideUntil]="usersLoaded">
|
||||||
|
<ion-item class="ion-text-wrap" *ngFor="let user of users"
|
||||||
|
[class.addon-mod-chat-user]="currentUserId != user.id && isOnline">
|
||||||
|
|
||||||
|
<core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
|
||||||
|
<ion-label>
|
||||||
|
<h2>{{ user.fullname }}</h2>
|
||||||
|
<ng-container *ngIf="currentUserId != user.id && isOnline">
|
||||||
|
<ion-button fill="clear" (click)="talkTo(user)">
|
||||||
|
<ion-icon name="fas-comments" slot="start"></ion-icon>
|
||||||
|
{{ 'addon.mod_chat.talk' | translate }}
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" (click)="beepTo(user)">
|
||||||
|
<ion-icon name="fas-bell" slot="start"></ion-icon>
|
||||||
|
{{ 'addon.mod_chat.beep' | translate }}
|
||||||
|
</ion-button>
|
||||||
|
</ng-container>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</core-loading>
|
||||||
|
</ion-content>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
// (C) Copyright 2015 Moodle Pty Ltd.
|
||||||
|
//
|
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
// you may not use this file except in compliance with the License.
|
||||||
|
// You may obtain a copy of the License at
|
||||||
|
//
|
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
//
|
||||||
|
// Unless required by applicable law or agreed to in writing, software
|
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
// See the License for the specific language governing permissions and
|
||||||
|
// limitations under the License.
|
||||||
|
|
||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { CoreApp } from '@services/app';
|
||||||
|
import { CoreSites } from '@services/sites';
|
||||||
|
import { CoreDomUtils } from '@services/utils/dom';
|
||||||
|
import { ModalController, Network, NgZone } from '@singletons';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { AddonModChat, AddonModChatUser } from '../../services/chat';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* MMdal that displays the chat session users.
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'addon-mod-chat-users-modal',
|
||||||
|
templateUrl: 'users-modal.html',
|
||||||
|
})
|
||||||
|
export class AddonModChatUsersModalComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
|
@Input() sessionId!: string;
|
||||||
|
@Input() cmId!: number;
|
||||||
|
|
||||||
|
users: AddonModChatUser[] = [];
|
||||||
|
usersLoaded = false;
|
||||||
|
currentUserId: number;
|
||||||
|
isOnline: boolean;
|
||||||
|
|
||||||
|
protected onlineSubscription: Subscription;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.isOnline = CoreApp.isOnline();
|
||||||
|
this.currentUserId = CoreSites.getCurrentSiteUserId();
|
||||||
|
this.onlineSubscription = Network.onChange().subscribe(() => {
|
||||||
|
// Execute the callback in the Angular zone, so change detection doesn't stop working.
|
||||||
|
NgZone.run(() => {
|
||||||
|
this.isOnline = CoreApp.isOnline();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const data = await AddonModChat.getChatUsers(this.sessionId, { cmId: this.cmId });
|
||||||
|
|
||||||
|
this.users = data.users;
|
||||||
|
} catch (error) {
|
||||||
|
CoreDomUtils.showErrorModalDefault(error, 'addon.mod_chat.errorwhilegettingchatusers', true);
|
||||||
|
} finally {
|
||||||
|
this.usersLoaded = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close the chat users modal.
|
||||||
|
*/
|
||||||
|
closeModal(): void {
|
||||||
|
ModalController.dismiss(<AddonModChatUsersModalResult> { users: this.users });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add "To user:".
|
||||||
|
*
|
||||||
|
* @param user User object.
|
||||||
|
*/
|
||||||
|
talkTo(user: AddonModChatUser): void {
|
||||||
|
ModalController.dismiss(<AddonModChatUsersModalResult> { talkTo: user.fullname, users: this.users });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Beep a user.
|
||||||
|
*
|
||||||
|
* @param user User object.
|
||||||
|
*/
|
||||||
|
beepTo(user: AddonModChatUser): void {
|
||||||
|
ModalController.dismiss(<AddonModChatUsersModalResult> { beepTo: user.id, users: this.users });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.onlineSubscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AddonModChatUsersModalResult = {
|
||||||
|
users: AddonModChatUser[];
|
||||||
|
talkTo?: string;
|
||||||
|
beepTo?: number;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>
|
||||||
|
<core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
|
||||||
|
</core-format-text>
|
||||||
|
</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
|
||||||
|
<ion-icon name="fas-users" slot="icon-only"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content class="has-footer">
|
||||||
|
<core-loading [hideUntil]="loaded" class="safe-area-page">
|
||||||
|
<ion-list class="addon-messages-discussion-container" aria-live="polite">
|
||||||
|
<ng-container *ngFor="let message of messages; index as index; last as last">
|
||||||
|
|
||||||
|
<h6 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate: "strftimedayshort" }}
|
||||||
|
</h6>
|
||||||
|
|
||||||
|
<div class="ion-text-center addon-mod_chat-notice" *ngIf="message.special">
|
||||||
|
<ion-badge class="ion-text-wrap" color="success" *ngIf="message.system && message.message == 'enter'">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-sign-in-alt"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
{{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
|
||||||
|
<ion-badge class="ion-text-wrap" color="danger" *ngIf="message.system && message.message == 'exit'">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-sign-out-alt"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
{{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
|
||||||
|
<ion-badge class="ion-text-wrap" color="primary" *ngIf="message.beep == 'all'">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-bell"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
{{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }}
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
|
||||||
|
<ion-badge class="ion-text-wrap" color="primary"
|
||||||
|
*ngIf="message.userid != currentUserId && message.beep == currentUserId">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-bell"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
{{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
|
||||||
|
<ion-badge class="ion-text-wrap" color="light"
|
||||||
|
*ngIf="message.userid == currentUserId && message.beep && message.beep != 'all'">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-bell"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
{{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }}
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
|
||||||
|
<ion-badge class="ion-text-wrap" color="info" *ngIf="!message.system && !message.beep">
|
||||||
|
<span>
|
||||||
|
<ion-icon name="fas-asterisk"></ion-icon>
|
||||||
|
{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
|
||||||
|
<strong>
|
||||||
|
{{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
|
||||||
|
[contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()">
|
||||||
|
</core-format-text>
|
||||||
|
</strong>
|
||||||
|
</span>
|
||||||
|
</ion-badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-item *ngIf="!message.special" class="ion-text-wrap addon-message"
|
||||||
|
[class.addon-message-mine]="message.userid == currentUserId"
|
||||||
|
[class.addon-message-not-mine]="message.userid != currentUserId"
|
||||||
|
[class.addon-message-no-user]="!message.showUserData"
|
||||||
|
[@coreSlideInOut]="message.userid == currentUserId ? '' : 'fromLeft'">
|
||||||
|
<ion-label>
|
||||||
|
<!-- User data. -->
|
||||||
|
<h2 class="addon-message-user">
|
||||||
|
<core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
|
||||||
|
</core-user-avatar>
|
||||||
|
<div *ngIf="message.showUserData">{{ message.userfullname }}</div>
|
||||||
|
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="addon-message-text">
|
||||||
|
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
|
||||||
|
[courseId]="courseId" (afterRender)="last && scrollToBottom()">
|
||||||
|
</core-format-text>
|
||||||
|
</p>
|
||||||
|
</ion-label>
|
||||||
|
<div class="tail" *ngIf="message.showTail"></div>
|
||||||
|
</ion-item>
|
||||||
|
</ng-container>
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
<core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments"
|
||||||
|
[message]="'addon.mod_chat.nomessages' | translate">
|
||||||
|
</core-empty-box>
|
||||||
|
</core-loading>
|
||||||
|
</ion-content>
|
||||||
|
<ion-footer color="light" class="footer-adjustable">
|
||||||
|
<ion-toolbar color="light">
|
||||||
|
<p class="ion-text-center" *ngIf="!isOnline">
|
||||||
|
{{ 'addon.mod_chat.mustbeonlinetosendmessages' | translate }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<core-send-message-form [sendDisabled]="sending" *ngIf="isOnline && polling && loaded" [message]="newMessage"
|
||||||
|
(onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate" (onResize)="resizeContent()">
|
||||||
|
</core-send-message-form>
|
||||||
|
|
||||||
|
<ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" color="light">
|
||||||
|
{{ 'core.login.reconnect' | translate }}
|
||||||
|
</ion-button>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-footer>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
:host {
|
||||||
|
.addon-mod_chat-notice {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,403 @@
|
||||||
|
// (C) Copyright 2015 Moodle Pty Ltd.
|
||||||
|
//
|
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
// you may not use this file except in compliance with the License.
|
||||||
|
// You may obtain a copy of the License at
|
||||||
|
//
|
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
//
|
||||||
|
// Unless required by applicable law or agreed to in writing, software
|
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
// See the License for the specific language governing permissions and
|
||||||
|
// limitations under the License.
|
||||||
|
|
||||||
|
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
|
||||||
|
import { CoreAnimations } from '@components/animations';
|
||||||
|
import { CoreSendMessageFormComponent } from '@components/send-message-form/send-message-form';
|
||||||
|
import { IonContent } from '@ionic/angular';
|
||||||
|
import { CoreApp } from '@services/app';
|
||||||
|
import { CoreNavigator } from '@services/navigator';
|
||||||
|
import { CoreSites } from '@services/sites';
|
||||||
|
import { CoreDomUtils } from '@services/utils/dom';
|
||||||
|
import { CoreUtils } from '@services/utils/utils';
|
||||||
|
import { ModalController, Network, NgZone } from '@singletons';
|
||||||
|
import { CoreEventObserver, CoreEvents } from '@singletons/events';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { AddonModChatUsersModalComponent, AddonModChatUsersModalResult } from '../../components/users-modal/users-modal';
|
||||||
|
import { AddonModChat, AddonModChatProvider, AddonModChatUser } from '../../services/chat';
|
||||||
|
import { AddonModChatFormattedMessage, AddonModChatHelper } from '../../services/chat-helper';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Page that displays a chat session.
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'page-addon-mod-chat-chat',
|
||||||
|
templateUrl: 'chat.html',
|
||||||
|
animations: [CoreAnimations.SLIDE_IN_OUT],
|
||||||
|
styleUrls: ['chat.scss', '../../../../messages/pages/discussion/discussion.scss'],
|
||||||
|
})
|
||||||
|
export class AddonModChatChatPage implements OnInit, OnDestroy {
|
||||||
|
|
||||||
|
@ViewChild(IonContent) content?: IonContent;
|
||||||
|
@ViewChild(CoreSendMessageFormComponent) sendMessageForm?: CoreSendMessageFormComponent;
|
||||||
|
|
||||||
|
loaded = false;
|
||||||
|
title = '';
|
||||||
|
messages: AddonModChatFormattedMessage[] = [];
|
||||||
|
newMessage?: string;
|
||||||
|
polling?: number;
|
||||||
|
isOnline: boolean;
|
||||||
|
currentUserId: number;
|
||||||
|
sending = false;
|
||||||
|
courseId!: number;
|
||||||
|
cmId!: number;
|
||||||
|
|
||||||
|
protected logger;
|
||||||
|
protected chatId!: number;
|
||||||
|
protected sessionId?: string;
|
||||||
|
protected lastTime = 0;
|
||||||
|
protected oldContentHeight = 0;
|
||||||
|
protected onlineSubscription: Subscription;
|
||||||
|
protected keyboardObserver: CoreEventObserver;
|
||||||
|
protected viewDestroyed = false;
|
||||||
|
protected pollingRunning = false;
|
||||||
|
protected users: AddonModChatUser[] = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.currentUserId = CoreSites.getCurrentSiteUserId();
|
||||||
|
this.isOnline = CoreApp.isOnline();
|
||||||
|
this.onlineSubscription = Network.onChange().subscribe(() => {
|
||||||
|
// Execute the callback in the Angular zone, so change detection doesn't stop working.
|
||||||
|
NgZone.run(() => {
|
||||||
|
this.isOnline = CoreApp.isOnline();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Recalculate footer position when keyboard is shown or hidden.
|
||||||
|
this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, () => {
|
||||||
|
// @todo probably not needed.
|
||||||
|
// this.content.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.courseId = CoreNavigator.getRouteNumberParam('courseId')!;
|
||||||
|
this.cmId = CoreNavigator.getRouteNumberParam('cmId')!;
|
||||||
|
this.chatId = CoreNavigator.getRouteNumberParam('chatId')!;
|
||||||
|
this.title = CoreNavigator.getRouteParam('title') || '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loginUser();
|
||||||
|
|
||||||
|
await this.fetchMessages();
|
||||||
|
|
||||||
|
this.startPolling();
|
||||||
|
} catch (error) {
|
||||||
|
CoreDomUtils.showErrorModalDefault(error, 'addon.mod_chat.errorwhileconnecting', true);
|
||||||
|
CoreNavigator.back();
|
||||||
|
} finally {
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs when the page has fully entered and is now the active page.
|
||||||
|
* This event will fire, whether it was the first load or a cached page.
|
||||||
|
*/
|
||||||
|
ionViewDidEnter(): void {
|
||||||
|
this.startPolling();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs when the page is about to leave and no longer be the active page.
|
||||||
|
*/
|
||||||
|
ionViewWillLeave(): void {
|
||||||
|
CoreEvents.trigger(CoreEvents.ACTIVITY_DATA_SENT, { module: 'chat' });
|
||||||
|
this.stopPolling();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convenience function to login the user.
|
||||||
|
*
|
||||||
|
* @return Promise resolved when done.
|
||||||
|
*/
|
||||||
|
protected async loginUser(): Promise<void> {
|
||||||
|
this.sessionId = await AddonModChat.loginUser(this.chatId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convenience function to fetch chat messages.
|
||||||
|
*
|
||||||
|
* @return Promise resolved when done.
|
||||||
|
*/
|
||||||
|
protected async fetchMessages(): Promise<void> {
|
||||||
|
const messagesInfo = await AddonModChat.getLatestMessages(this.sessionId!, this.lastTime);
|
||||||
|
|
||||||
|
this.lastTime = messagesInfo.chatnewlasttime || 0;
|
||||||
|
|
||||||
|
const messages = await AddonModChat.getMessagesUserData(messagesInfo.messages, this.courseId);
|
||||||
|
|
||||||
|
if (!messages.length) {
|
||||||
|
// No messages yet, nothing else to do.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const previousLength = this.messages.length;
|
||||||
|
this.messages = this.messages.concat(messages);
|
||||||
|
|
||||||
|
// Calculate which messages need to display the date or user data.
|
||||||
|
for (let index = previousLength; index < this.messages.length; index++) {
|
||||||
|
const prevMessage = index > 0 ? this.messages[index - 1] : undefined;
|
||||||
|
|
||||||
|
this.messages[index] = AddonModChatHelper.formatMessage(this.currentUserId, this.messages[index], prevMessage);
|
||||||
|
|
||||||
|
const message = this.messages[index];
|
||||||
|
|
||||||
|
if (message.beep && message.beep != String(this.currentUserId)) {
|
||||||
|
this.loadMessageBeepWho(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.messages[this.messages.length - 1].showTail = true;
|
||||||
|
|
||||||
|
// New messages or beeps, scroll to bottom.
|
||||||
|
setTimeout(() => this.scrollToBottom());
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async loadMessageBeepWho(message: AddonModChatFormattedMessage): Promise<void> {
|
||||||
|
message.beepWho = await this.getUserFullname(message.beep!);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display the chat users modal.
|
||||||
|
*/
|
||||||
|
async showChatUsers(): Promise<void> {
|
||||||
|
// Create the toc modal.
|
||||||
|
const modal = await ModalController.create({
|
||||||
|
component: AddonModChatUsersModalComponent,
|
||||||
|
componentProps: {
|
||||||
|
sessionId: this.sessionId,
|
||||||
|
cmId: this.cmId,
|
||||||
|
},
|
||||||
|
cssClass: 'core-modal-lateral',
|
||||||
|
showBackdrop: true,
|
||||||
|
backdropDismiss: true,
|
||||||
|
// @todo enterAnimation: 'core-modal-lateral-transition',
|
||||||
|
// @todo leaveAnimation: 'core-modal-lateral-transition',
|
||||||
|
});
|
||||||
|
|
||||||
|
await modal.present();
|
||||||
|
|
||||||
|
const result = await modal.onDidDismiss<AddonModChatUsersModalResult>();
|
||||||
|
|
||||||
|
if (result.data) {
|
||||||
|
if (result.data.talkTo) {
|
||||||
|
this.newMessage = `To ${result.data.talkTo}: ` + (this.sendMessageForm?.message || '');
|
||||||
|
}
|
||||||
|
if (result.data.beepTo) {
|
||||||
|
this.sendMessage('', result.data.beepTo);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.users = result.data.users;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the user fullname for a beep.
|
||||||
|
*
|
||||||
|
* @param id User Id before parsing.
|
||||||
|
* @return User fullname.
|
||||||
|
*/
|
||||||
|
protected async getUserFullname(id: string): Promise<string> {
|
||||||
|
const idNumber = parseInt(id, 10);
|
||||||
|
|
||||||
|
if (isNaN(idNumber)) {
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = this.users.find((user) => user.id == idNumber);
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
return user.fullname;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await AddonModChat.getChatUsers(this.sessionId!, { cmId: this.cmId });
|
||||||
|
|
||||||
|
this.users = data.users;
|
||||||
|
const user = this.users.find((user) => user.id == idNumber);
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
return user.fullname;
|
||||||
|
}
|
||||||
|
|
||||||
|
return id;
|
||||||
|
} catch (error) {
|
||||||
|
// Ignore errors.
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start the polling to get chat messages periodically.
|
||||||
|
*/
|
||||||
|
protected startPolling(): void {
|
||||||
|
// We already have the polling in place.
|
||||||
|
if (this.polling) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start polling.
|
||||||
|
this.polling = window.setInterval(() => {
|
||||||
|
CoreUtils.ignoreErrors(this.fetchMessagesInterval());
|
||||||
|
}, AddonModChatProvider.POLL_INTERVAL);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stop polling for messages.
|
||||||
|
*/
|
||||||
|
protected stopPolling(): void {
|
||||||
|
clearInterval(this.polling);
|
||||||
|
this.polling = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convenience function to be called every certain time to fetch chat messages.
|
||||||
|
*
|
||||||
|
* @return Promise resolved when done.
|
||||||
|
*/
|
||||||
|
protected async fetchMessagesInterval(): Promise<void> {
|
||||||
|
if (!this.isOnline || this.pollingRunning) {
|
||||||
|
// Obviously we cannot check for new messages when the app is offline.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pollingRunning = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.fetchMessages();
|
||||||
|
} catch {
|
||||||
|
try {
|
||||||
|
// Try to login, it might have failed because the session expired.
|
||||||
|
await this.loginUser();
|
||||||
|
|
||||||
|
await this.fetchMessages();
|
||||||
|
} catch (error) {
|
||||||
|
// Fail again. Stop polling if needed.
|
||||||
|
this.stopPolling();
|
||||||
|
CoreDomUtils.showErrorModalDefault(error, 'addon.mod_chat.errorwhileretrievingmessages', true);
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
this.pollingRunning = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send a message to the chat.
|
||||||
|
*
|
||||||
|
* @param text Text of the nessage.
|
||||||
|
* @param beep ID of the user to beep.
|
||||||
|
*/
|
||||||
|
async sendMessage(text: string, beep: number = 0): Promise<void> {
|
||||||
|
if (!this.isOnline) {
|
||||||
|
// Silent error, the view should prevent this.
|
||||||
|
return;
|
||||||
|
} else if (beep === 0 && !text.trim()) {
|
||||||
|
// Silent error.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sending = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await AddonModChat.sendMessage(this.sessionId!, text, beep);
|
||||||
|
|
||||||
|
// Update messages to show the sent message.
|
||||||
|
CoreUtils.ignoreErrors(this.fetchMessagesInterval());
|
||||||
|
} catch (error) {
|
||||||
|
// Only close the keyboard if an error happens, we want the user to be able to send multiple
|
||||||
|
// messages without the keyboard being closed.
|
||||||
|
CoreApp.closeKeyboard();
|
||||||
|
|
||||||
|
this.newMessage = text;
|
||||||
|
CoreDomUtils.showErrorModalDefault(error, 'addon.mod_chat.errorwhilesendingmessage', true);
|
||||||
|
} finally {
|
||||||
|
this.sending = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Try to reconnect.
|
||||||
|
*
|
||||||
|
* @return Promise resolved when done.
|
||||||
|
*/
|
||||||
|
async reconnect(): Promise<void> {
|
||||||
|
const modal = await CoreDomUtils.showModalLoading();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Call startPolling would take a while for the first execution, so we'll execute it manually to check if it works now.
|
||||||
|
await this.fetchMessagesInterval();
|
||||||
|
|
||||||
|
// It works, start the polling again.
|
||||||
|
this.startPolling();
|
||||||
|
} catch {
|
||||||
|
// Ignore errors.
|
||||||
|
} finally {
|
||||||
|
modal.dismiss();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll bottom when render has finished.
|
||||||
|
*/
|
||||||
|
scrollToBottom(): void {
|
||||||
|
// Need a timeout to leave time to the view to be rendered.
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!this.viewDestroyed) {
|
||||||
|
this.content?.scrollToBottom();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Content or scroll has been resized. For content, only call it if it's been added on top.
|
||||||
|
*/
|
||||||
|
resizeContent(): void {
|
||||||
|
// @todo probably not needed.
|
||||||
|
// let top = this.content.getContentDimensions().scrollTop;
|
||||||
|
// this.content.resize();
|
||||||
|
|
||||||
|
// // Wait for new content height to be calculated.
|
||||||
|
// setTimeout(() => {
|
||||||
|
// // Visible content size changed, maintain the bottom position.
|
||||||
|
// if (!this.viewDestroyed && this.content && this.domUtils.getContentHeight(this.content) != this.oldContentHeight) {
|
||||||
|
// if (!top) {
|
||||||
|
// top = this.content.getContentDimensions().scrollTop;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// top += this.oldContentHeight - this.domUtils.getContentHeight(this.content);
|
||||||
|
// this.oldContentHeight = this.domUtils.getContentHeight(this.content);
|
||||||
|
|
||||||
|
// this.content.scrollTo(0, top, 0);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.onlineSubscription && this.onlineSubscription.unsubscribe();
|
||||||
|
this.keyboardObserver && this.keyboardObserver.off();
|
||||||
|
this.stopPolling();
|
||||||
|
this.viewDestroyed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue