You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.5 KiB
41 lines
1.5 KiB
import { Observer } from "../observe/Observer";
|
|
import { Model } from "../model/AbstractModel";
|
|
import { Subject } from "../observe/Observable";
|
|
import { View } from "./AbstractView";
|
|
import { Controller } from "../controller/AbstractController";
|
|
import { TemplateFactory } from "../template/TemplateFactory";
|
|
import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
|
|
import { ChatModel } from "../model/ChatModel";
|
|
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
|
|
import * as log from 'loglevel';
|
|
import * as DOMPurify from 'dompurify';
|
|
import markdownit = require('markdown-it');
|
|
var md = new markdownit();
|
|
|
|
export class ChatView implements Observer {
|
|
private readonly _model: ChatModel;
|
|
private readonly _element: HTMLElement;
|
|
private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
|
|
|
|
|
|
constructor(model: ChatModel, element: HTMLElement) {
|
|
this._model = model;
|
|
this._element = element;
|
|
}
|
|
|
|
|
|
update(data: ChatMessageViewModel[]): void {
|
|
log.info('ChatView: updating view');
|
|
let html: string = "";
|
|
data.forEach((vm: ChatMessageViewModel) => {
|
|
html += this._messageSendTemplate(vm);
|
|
});
|
|
|
|
/** Very Important!!!
|
|
* Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
|
|
*/
|
|
html = DOMPurify.sanitize(md.render(html));
|
|
this._element.innerHTML = html;
|
|
log.debug(this._element.innerHTML);
|
|
}
|
|
}
|