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.
107 lines
4.0 KiB
107 lines
4.0 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 log = require("loglevel");
|
|
import * as DOMPurify from "dompurify";
|
|
|
|
export class UserView implements Observer {
|
|
private readonly _model: Model;
|
|
private readonly _chatModel: ChatModel;
|
|
private readonly _element: HTMLElement;
|
|
// private userBoxes: any[] = [];
|
|
|
|
|
|
constructor(model: Model, chatModel: ChatModel, element: HTMLElement) {
|
|
this._model = model;
|
|
this._chatModel = chatModel;
|
|
this._element = element;
|
|
}
|
|
|
|
|
|
|
|
|
|
update(data: ActiveUserViewModel[]): void {
|
|
let template = TemplateFactory.getTemplate('user-contact-online-template');
|
|
let html: string = "";
|
|
data.forEach((element: ActiveUserViewModel) => {
|
|
html += template(element);
|
|
});
|
|
// this._element.innerHTML = html;
|
|
$(this._element).html(DOMPurify.sanitize(html));
|
|
this.addUserCallBacks();
|
|
console.log(this._element.innerHTML);
|
|
}
|
|
|
|
private helper(): void {
|
|
|
|
}
|
|
|
|
private addUserCallBacks(): void {
|
|
let userBoxes = document.getElementsByClassName('user-box');
|
|
for (let i = 0; i < userBoxes.length; i++) {
|
|
let userBox = userBoxes[i];
|
|
userBoxes[i].addEventListener('click', this.userCallBack.bind(this, userBox));
|
|
}
|
|
}
|
|
|
|
|
|
private userCallBack(el: Element): void {
|
|
let current = document.getElementsByClassName('user-box active');
|
|
|
|
let passphrase: string = '';
|
|
if (current.length > 0) {
|
|
let passphraseInput = document.getElementById('passphrase') as any;
|
|
|
|
if (passphraseInput == null) {
|
|
log.error('passphraseInput element reference is null');
|
|
return;
|
|
}
|
|
passphrase = passphraseInput.value
|
|
if (passphrase == '' || passphrase == null) {
|
|
// alert('Please input passphrase')
|
|
// alertify.error('Please enter a passphrase');
|
|
log.error('passphrase is empty or null');
|
|
return;
|
|
}
|
|
current[0].className = current[0].className.replace(" active", "");
|
|
|
|
}
|
|
// Add the active class to the current/clicked button
|
|
else if (current.length == 0) {
|
|
let elem = document.getElementById('passphrase-initial') as any;
|
|
if(elem == null)
|
|
{
|
|
log.error('passphraseInput element reference is null');
|
|
return;
|
|
}
|
|
passphrase = elem.value;
|
|
if (passphrase == '' || passphrase == null) {
|
|
// // alert('Please input passphrase')
|
|
// // alertify.error('Please enter a passphrase');
|
|
log.error('passphrase is empty or null');
|
|
return;
|
|
}
|
|
// @ts-ignore: Object is possibly 'null'.
|
|
document.getElementById('no-user-selected').hidden = true;
|
|
// @ts-ignore: Object is possibly 'null'.
|
|
document.getElementById('chat-card').hidden = false;
|
|
// @ts-ignore: Object is possibly 'null'.
|
|
elem.hidden = true;
|
|
}
|
|
// console.log(this.getElementsByClassName('to-user-span'));
|
|
let elem = el.getElementsByClassName('to-user-span')[0] as HTMLElement;
|
|
let userName = elem.innerText;
|
|
// @ts-ignore: Object is possibly 'null'.
|
|
document.getElementById('user-name-span').innerText = userName;
|
|
this._chatModel.getmessages(userName, passphrase, null);
|
|
// populateMessages(userName, passphrase);
|
|
sessionStorage.setItem('selectedUser', userName);
|
|
el.className += " active";
|
|
}
|
|
|
|
}
|