temp commmit
This commit is contained in:
parent
e40e1a5c7a
commit
785a8a55e8
@ -35,7 +35,7 @@
|
|||||||
"dompurify": "global:DOMPurify",
|
"dompurify": "global:DOMPurify",
|
||||||
"fuse.js": "global:Fuse",
|
"fuse.js": "global:Fuse",
|
||||||
"sjcl": "global:sjcl",
|
"sjcl": "global:sjcl",
|
||||||
"sprintf-js": "global:sprintf2",
|
"sprintf-js": "global:sprintf",
|
||||||
"alertifyjs": "global:alertify"
|
"alertifyjs": "global:alertify"
|
||||||
}
|
}
|
||||||
}
|
}
|
9
chatto/src/main/javascript/ts/src/SprintfTest.d.ts
vendored
Normal file
9
chatto/src/main/javascript/ts/src/SprintfTest.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { sprintf } from "sprintf-js";
|
||||||
|
|
||||||
|
// export as namespace sprintf;
|
||||||
|
// export = sprintf;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
// const Hls: typeof Hls;
|
||||||
|
var Sprintf: typeof sprintf;
|
||||||
|
}
|
@ -21,12 +21,20 @@ import { FuseSearchService } from "./service/FuseSearchService";
|
|||||||
import { ChatMessageDTO } from "./dto/ChatMessageDTO";
|
import { ChatMessageDTO } from "./dto/ChatMessageDTO";
|
||||||
import { NotificationService } from "./service/NotificationService";
|
import { NotificationService } from "./service/NotificationService";
|
||||||
import { AlertifyNotificationService } from "./service/AlertifyNotificationService";
|
import { AlertifyNotificationService } from "./service/AlertifyNotificationService";
|
||||||
import * as sprintf2 from "sprintf-js";
|
///<reference path="./SprintfTest.d.ts" />
|
||||||
|
// import "./SprintfTest.d.ts"
|
||||||
|
// import { sprintf } from "sprintf-js";
|
||||||
|
// import sprintf = require('sprintf-js');
|
||||||
|
import { TemplateFactory } from "./template/TemplateFactory";
|
||||||
|
import { UserViewDeps } from "./view/UserViewDeps";
|
||||||
|
import { ChatViewDeps } from "./view/ChatViewDeps";
|
||||||
|
import { MarkDownItMarkDownService } from "./service/MarkDownItMarkDownService";
|
||||||
|
|
||||||
const usersListElement = document.getElementById('contacts-box');
|
const usersListElement = document.getElementById('contacts-box');
|
||||||
const userSearchButton = document.getElementById('user-search');
|
const userSearchButton = document.getElementById('user-search');
|
||||||
const userSearchInputElement = document.getElementById('user-search-term')
|
const userSearchInputElement = document.getElementById('user-search-term') as HTMLInputElement;
|
||||||
const userSearchCancelButton = document.getElementById('user-search-cancel')
|
const userSearchCancelButton = document.getElementById('user-search-cancel');
|
||||||
|
const searchService: SearchService<ActiveUserViewModel> = new FuseSearchService(["userName"]);
|
||||||
|
|
||||||
log.setLevel("TRACE")
|
log.setLevel("TRACE")
|
||||||
|
|
||||||
@ -34,8 +42,22 @@ const chatModel = new ChatModel();
|
|||||||
|
|
||||||
const userModel = new UserModel();
|
const userModel = new UserModel();
|
||||||
// const userModel = ModelFactory.createModel("USER");
|
// const userModel = ModelFactory.createModel("USER");
|
||||||
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
|
||||||
const userView = new UserView(userModel, chatModel, usersListElement, userSearchInputElement, userSearchButton, userSearchCancelButton);
|
const uvDeps: UserViewDeps = {
|
||||||
|
model: userModel,
|
||||||
|
chatModel: chatModel,
|
||||||
|
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
||||||
|
usersListElement: usersListElement,
|
||||||
|
userSearchInputElement: userSearchInputElement,
|
||||||
|
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
||||||
|
userSearchButton: userSearchButton,
|
||||||
|
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
||||||
|
userSearchCancelButton: userSearchCancelButton,
|
||||||
|
searchService: searchService,
|
||||||
|
userContactOnlineTemplate: TemplateFactory.getTemplate('user-contact-online-template'),
|
||||||
|
userContactOfflineTemplate: TemplateFactory.getTemplate('user-contact-offline-template')
|
||||||
|
}
|
||||||
|
const userView = new UserView(uvDeps);
|
||||||
|
|
||||||
// console.log(userBox);
|
// console.log(userBox);
|
||||||
|
|
||||||
@ -53,7 +75,17 @@ log.info("hello");
|
|||||||
|
|
||||||
const chatArea = document.getElementById('chat-area-new');
|
const chatArea = document.getElementById('chat-area-new');
|
||||||
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
||||||
const chatView = new ChatView(chatModel, chatArea);
|
const cvDeps: ChatViewDeps = {
|
||||||
|
chatModel: chatModel,
|
||||||
|
// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
|
||||||
|
messageContainer: chatArea,
|
||||||
|
messageSendTemplate: TemplateFactory.getTemplate('msg_container_send_template'),
|
||||||
|
messageReceiveTemplate: TemplateFactory.getTemplate('msg_container_template'),
|
||||||
|
markdownService: new MarkDownItMarkDownService,
|
||||||
|
encryptionService: new SJCLEncryptionService
|
||||||
|
|
||||||
|
}
|
||||||
|
const chatView = new ChatView(cvDeps);
|
||||||
chatModel.attach(chatView);
|
chatModel.attach(chatView);
|
||||||
const chatController = new ChatController(chatModel, chatView);
|
const chatController = new ChatController(chatModel, chatView);
|
||||||
|
|
||||||
@ -76,18 +108,20 @@ var msgContainerTemplate = Handlebars.compile(source);
|
|||||||
JsonAPI.ACTIVE_USERS_GET + 'aef';
|
JsonAPI.ACTIVE_USERS_GET + 'aef';
|
||||||
|
|
||||||
const encryptionService: EncryptionService = new SJCLEncryptionService();
|
const encryptionService: EncryptionService = new SJCLEncryptionService();
|
||||||
let messageCipherDTO: MessageCipherDTO = encryptionService.encrypt("password","data");
|
let messageCipherDTO: MessageCipherDTO = encryptionService.encrypt("password", "data");
|
||||||
console.log(encryptionService.decrypt("password", messageCipherDTO));
|
console.log(encryptionService.decrypt("password", messageCipherDTO));
|
||||||
|
|
||||||
Handlebars.registerHelper('avatar', function() {
|
Handlebars.registerHelper('avatar', function () {
|
||||||
return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
|
return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
|
||||||
});
|
});
|
||||||
|
|
||||||
const testList: ChatMessageDTO[] = [];
|
const testList: ChatMessageDTO[] = [];
|
||||||
const cmSearchService: SearchService<ChatMessageDTO> = new FuseSearchService(["userName"]);
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
log.info(sprintf("test sprintf"))
|
console.log()
|
||||||
log.info(sprintf2.sprintf("test sprintf"))
|
// @ts-ignore
|
||||||
|
log.info(Sprintf("test sprintf"))
|
||||||
|
// log.info(sprintf2.sprintf("test sprintf"))
|
||||||
const ns: NotificationService = new AlertifyNotificationService();
|
const ns: NotificationService = new AlertifyNotificationService();
|
||||||
ns.success("Welcome");
|
ns.success("Welcome");
|
||||||
// ns.errorWithDelay("Hmm very long error notif", 10);
|
// ns.errorWithDelay("Hmm very long error notif", 10);
|
@ -1,5 +1,7 @@
|
|||||||
import log = require("loglevel");
|
import log = require("loglevel");
|
||||||
import { sprintf } from "sprintf-js";
|
// import { sprintf } from "sprintf-js";
|
||||||
|
///<reference path="../SprintfTest.d.ts" />
|
||||||
|
|
||||||
// import sprintf = require('sprintf-js').sprintf;
|
// import sprintf = require('sprintf-js').sprintf;
|
||||||
|
|
||||||
export function fetchErrorHandler(response: Response) {
|
export function fetchErrorHandler(response: Response) {
|
||||||
@ -10,6 +12,7 @@ export function fetchErrorHandler(response: Response) {
|
|||||||
// throw new Error(response.statusText);
|
// throw new Error(response.statusText);
|
||||||
// window.alert(sprintf('Some error occured. Http code is %s', response.status));
|
// window.alert(sprintf('Some error occured. Http code is %s', response.status));
|
||||||
// alertify.error(sprintf('Some error occured. Http code is %s', response.status));
|
// alertify.error(sprintf('Some error occured. Http code is %s', response.status));
|
||||||
|
// @ts-ignore
|
||||||
log.error(sprintf('Some error occured. Http code is %s', response.status));
|
log.error(sprintf('Some error occured. Http code is %s', response.status));
|
||||||
log.error();
|
log.error();
|
||||||
return true;
|
return true;
|
||||||
@ -18,6 +21,7 @@ export function fetchErrorHandler(response: Response) {
|
|||||||
// throw new Error(json.error.message); // example error message returned by a REST API
|
// throw new Error(json.error.message); // example error message returned by a REST API
|
||||||
// window.alert(sprintf('Error: %s (Http code %s)', json, response.status));
|
// window.alert(sprintf('Error: %s (Http code %s)', json, response.status));
|
||||||
// alertify.error(sprintf('Some error occured. Http code is %s', response.status));
|
// alertify.error(sprintf('Some error occured. Http code is %s', response.status));
|
||||||
|
// @ts-ignore
|
||||||
log.error(sprintf('Some error occured. Http code is %s', response.status));
|
log.error(sprintf('Some error occured. Http code is %s', response.status));
|
||||||
log.error(json);
|
log.error(json);
|
||||||
return true;
|
return true;
|
||||||
|
@ -12,23 +12,32 @@ import { SJCLEncryptionService } from "../service/SJCLEncryptionService";
|
|||||||
import { EncryptionService } from "../service/EncryptionService";
|
import { EncryptionService } from "../service/EncryptionService";
|
||||||
import { ChatMessageDTO } from "../dto/ChatMessageDTO";
|
import { ChatMessageDTO } from "../dto/ChatMessageDTO";
|
||||||
import { fetchHandler } from "./FetchHandler";
|
import { fetchHandler } from "./FetchHandler";
|
||||||
|
import { ChatViewDeps } from "./ChatViewDeps";
|
||||||
|
|
||||||
export class ChatView implements Observer {
|
export class ChatView implements Observer {
|
||||||
private readonly _chatModel: ChatModel;
|
private readonly _chatModel: ChatModel;
|
||||||
private readonly _messageContainer: HTMLElement;
|
private readonly _messageContainer: HTMLElement;
|
||||||
private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
|
// private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
|
||||||
private readonly _messageReceiveTemplate = TemplateFactory.getTemplate('msg_container_template');
|
// private readonly _messageReceiveTemplate = TemplateFactory.getTemplate('msg_container_template');
|
||||||
private readonly _markdownService: MarkDownService = new MarkDownItMarkDownService();
|
// private readonly _markdownService: MarkDownService = new MarkDownItMarkDownService();
|
||||||
private readonly _encryptionService: EncryptionService = new SJCLEncryptionService();
|
// private readonly _encryptionService: EncryptionService = new SJCLEncryptionService();
|
||||||
|
|
||||||
|
private readonly _messageSendTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
||||||
|
private readonly _messageReceiveTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
||||||
|
private readonly _markdownService: MarkDownService;
|
||||||
|
private readonly _encryptionService: EncryptionService;
|
||||||
|
|
||||||
|
|
||||||
constructor(chatModel: ChatModel, messageContainer: HTMLElement) {
|
constructor(deps: ChatViewDeps) {
|
||||||
this._messageContainer = messageContainer;
|
this._messageContainer = deps.messageContainer;
|
||||||
this._chatModel = chatModel;
|
this._chatModel = deps.chatModel;
|
||||||
|
this._messageSendTemplate = deps.messageSendTemplate;
|
||||||
|
this._messageReceiveTemplate = deps.messageReceiveTemplate;
|
||||||
|
this._markdownService = deps.markdownService;
|
||||||
|
this._encryptionService = deps.encryptionService;
|
||||||
this.addEventListeners();
|
this.addEventListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
update(data: ChatMessageViewModel[]): void {
|
update(data: ChatMessageViewModel[]): void {
|
||||||
log.info('ChatView: updating view');
|
log.info('ChatView: updating view');
|
||||||
// let html: string = "";
|
// let html: string = "";
|
||||||
@ -108,7 +117,8 @@ export class ChatView implements Observer {
|
|||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const messageContent = chatInput.value;
|
const messageContent = chatInput.value;
|
||||||
const context = { fromUser: JsonAPI.principleName, message: this._markdownService.render(messageContent), messageTime: new Date().toLocaleString() };
|
const context = { fromUser: JsonAPI.principleName, toUser: "", message: this._markdownService.render(messageContent), messageTime: new Date().toLocaleString() };
|
||||||
|
// @ts-ignore
|
||||||
const msgContainer: string = this._messageSendTemplate(context);
|
const msgContainer: string = this._messageSendTemplate(context);
|
||||||
$(this._messageContainer).append(DOMPurify.sanitize(msgContainer));
|
$(this._messageContainer).append(DOMPurify.sanitize(msgContainer));
|
||||||
// scrollChatAreaAnimated(2400);
|
// scrollChatAreaAnimated(2400);
|
||||||
|
14
chatto/src/main/javascript/ts/src/view/ChatViewDeps.ts
Normal file
14
chatto/src/main/javascript/ts/src/view/ChatViewDeps.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
|
||||||
|
import { ChatModel } from "../model/ChatModel";
|
||||||
|
import { MarkDownService } from "../service/MarkDownService";
|
||||||
|
import { EncryptionService } from "../service/EncryptionService";
|
||||||
|
|
||||||
|
export interface ChatViewDeps {
|
||||||
|
chatModel: ChatModel;
|
||||||
|
messageContainer: HTMLElement;
|
||||||
|
messageSendTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
||||||
|
messageReceiveTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
||||||
|
markdownService: MarkDownService;
|
||||||
|
encryptionService: EncryptionService;
|
||||||
|
|
||||||
|
}
|
@ -1,18 +1,15 @@
|
|||||||
import { Observer } from "../observe/Observer";
|
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 { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
|
||||||
import { ChatModel } from "../model/ChatModel";
|
import { ChatModel } from "../model/ChatModel";
|
||||||
import log = require("loglevel");
|
import log = require("loglevel");
|
||||||
import * as DOMPurify from "dompurify";
|
import * as DOMPurify from "dompurify";
|
||||||
import { SearchService } from "../service/SearchService";
|
import { SearchService } from "../service/SearchService";
|
||||||
import { FuseSearchService } from "../service/FuseSearchService";
|
|
||||||
import { UserModel } from "../model/UserModel";
|
import { UserModel } from "../model/UserModel";
|
||||||
|
import { UserViewDeps } from "./UserViewDeps";
|
||||||
|
|
||||||
export class UserView implements Observer {
|
export class UserView implements Observer {
|
||||||
|
|
||||||
|
|
||||||
private readonly _model: UserModel;
|
private readonly _model: UserModel;
|
||||||
private readonly _chatModel: ChatModel;
|
private readonly _chatModel: ChatModel;
|
||||||
private readonly _usersListElement: HTMLElement;
|
private readonly _usersListElement: HTMLElement;
|
||||||
@ -20,18 +17,19 @@ export class UserView implements Observer {
|
|||||||
private readonly _userSearchButton: HTMLElement;
|
private readonly _userSearchButton: HTMLElement;
|
||||||
private readonly _userSearchCancelButton: HTMLElement;
|
private readonly _userSearchCancelButton: HTMLElement;
|
||||||
private readonly _searchService: SearchService<ActiveUserViewModel>;
|
private readonly _searchService: SearchService<ActiveUserViewModel>;
|
||||||
private readonly _userContactOnlineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel> = TemplateFactory.getTemplate('user-contact-online-template');
|
private readonly _userContactOnlineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel>;
|
||||||
private readonly _userContactOfflineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel> = TemplateFactory.getTemplate('user-contact-offline-template');
|
private readonly _userContactOfflineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel>;
|
||||||
|
|
||||||
constructor(model: UserModel, chatModel: ChatModel, usersListElement: HTMLElement,
|
constructor(deps: UserViewDeps) {
|
||||||
userSearchInputElement: HTMLInputElement, userSearchButton: HTMLElement, userSearchCancelButton: HTMLElement) {
|
this._model = deps.model;
|
||||||
this._model = model;
|
this._chatModel = deps.chatModel;
|
||||||
this._chatModel = chatModel;
|
this._usersListElement = deps.usersListElement;
|
||||||
this._usersListElement = usersListElement;
|
this._userSearchInputElement = deps.userSearchInputElement;
|
||||||
this._userSearchInputElement = userSearchInputElement;
|
this._userSearchButton = deps.userSearchButton;
|
||||||
this._userSearchButton = userSearchButton
|
this._userSearchCancelButton = deps.userSearchCancelButton;
|
||||||
this._searchService = new FuseSearchService(["userName"]);
|
this._searchService = deps.searchService;
|
||||||
this._userSearchCancelButton = userSearchCancelButton;
|
this._userContactOnlineTemplate = deps.userContactOnlineTemplate;
|
||||||
|
this._userContactOfflineTemplate = deps.userContactOfflineTemplate;
|
||||||
|
|
||||||
this.addSearchEventListeners();
|
this.addSearchEventListeners();
|
||||||
}
|
}
|
||||||
@ -39,7 +37,7 @@ export class UserView implements Observer {
|
|||||||
update(data: ActiveUserViewModel[]): void {
|
update(data: ActiveUserViewModel[]): void {
|
||||||
let html: string = "";
|
let html: string = "";
|
||||||
data.forEach((element: ActiveUserViewModel) => {
|
data.forEach((element: ActiveUserViewModel) => {
|
||||||
element.online ? html+=this._userContactOnlineTemplate(element) : html+=this._userContactOfflineTemplate(element);
|
element.online ? html += this._userContactOnlineTemplate(element) : html += this._userContactOfflineTemplate(element);
|
||||||
});
|
});
|
||||||
$(this._usersListElement).html(DOMPurify.sanitize(html));
|
$(this._usersListElement).html(DOMPurify.sanitize(html));
|
||||||
this.addUserCallBacks();
|
this.addUserCallBacks();
|
||||||
|
19
chatto/src/main/javascript/ts/src/view/UserViewDeps.ts
Normal file
19
chatto/src/main/javascript/ts/src/view/UserViewDeps.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { UserModel } from "../model/UserModel";
|
||||||
|
|
||||||
|
import { ChatModel } from "../model/ChatModel";
|
||||||
|
|
||||||
|
import { SearchService } from "../service/SearchService";
|
||||||
|
|
||||||
|
import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
|
||||||
|
|
||||||
|
export interface UserViewDeps {
|
||||||
|
model: UserModel;
|
||||||
|
chatModel: ChatModel;
|
||||||
|
usersListElement: HTMLElement;
|
||||||
|
userSearchInputElement: HTMLInputElement;
|
||||||
|
userSearchButton: HTMLElement;
|
||||||
|
userSearchCancelButton: HTMLElement;
|
||||||
|
searchService: SearchService<ActiveUserViewModel>;
|
||||||
|
userContactOnlineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel>;
|
||||||
|
userContactOfflineTemplate: Handlebars.TemplateDelegate<ActiveUserViewModel>;
|
||||||
|
}
|
@ -46,7 +46,7 @@
|
|||||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||||
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
"allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||||
/* Source Map Options */
|
/* Source Map Options */
|
||||||
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
Loading…
Reference in New Issue
Block a user