Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create event and brodcast event in backend

Browse source
This commit is contained in:
Gregoire Parant 2020-09-19 01:08:56 +02:00
parent e59cbcfaa7
commit 4c7e458e52
4 changed files with 110 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

70
front/src/WebRtc/ConsoleGlobalMessageManager.ts
View file

@ -13,39 +13,81 @@ export const MESSAGE_TYPE = 'message';
export class ConsoleGlobalMessageManager {
private Connection: Connection;
private divMainConsole: HTMLDivElement;
private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false;
constructor(Connection: Connection) {
this.Connection = Connection;
this.buttonMainConsole = document.createElement('div');
this.divMainConsole = document.createElement('div');
this.initialise();
}
initialise(){
initialise() {
const buttonText = document.createElement('span');
buttonText.innerText = 'Console';
const buttonMainConsole = document.createElement('div');
buttonMainConsole.classList.add('active');
buttonMainConsole.appendChild(buttonText)
this.buttonMainConsole.appendChild(buttonText);
this.buttonMainConsole.addEventListener('click', () => {
if(this.activeConsole){
this.disabled();
}else{
this.active();
}
});
const divMainConsole = document.createElement('div');
divMainConsole.className = CLASS_CONSOLE_MESSAGE;
divMainConsole.appendChild(buttonMainConsole)
this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
this.divMainConsole.appendChild(this.buttonMainConsole);
this.createTextMessagePart();
const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
mainSectionDiv.appendChild(divMainConsole);
mainSectionDiv.appendChild(this.divMainConsole);
}
sendMessage(html: string){
const inputText = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(INPUT_CONSOLE_MESSAGE);
const inputType = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(INPUT_TYPE_CONSOLE);
if(AUDIO_TYPE !== inputType.innerText && MESSAGE_TYPE !== inputType.innerText){
createTextMessagePart(){
const input = document.createElement('textarea');
this.divMainConsole.appendChild(input);
input.id = INPUT_CONSOLE_MESSAGE;
const buttonSend = document.createElement('button');
buttonSend.innerText = 'Envoyer';
buttonSend.addEventListener('click', (event: MouseEvent) => {
this.sendMessage();
this.disabled();
});
this.divMainConsole.appendChild(buttonSend);
const typeConsole = document.createElement('input');
typeConsole.id = INPUT_TYPE_CONSOLE;
typeConsole.value = MESSAGE_TYPE;
typeConsole.type = 'hidden';
this.divMainConsole.appendChild(typeConsole);
}
sendMessage(){
const inputText = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(INPUT_CONSOLE_MESSAGE);
const inputType = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(INPUT_TYPE_CONSOLE);
if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){
throw "Error event type";
}
let GlobalMessage : GlobalMessageInterface = {
id: 1,
message: inputText.innerText,
type: inputType.innerText
message: inputText.value,
type: inputType.value
};
inputText.value = '';
this.Connection.emitGlobalMessage(GlobalMessage);
}
active(){
this.activeConsole = true;
this.divMainConsole.style.top = '0';
}
disabled(){
this.activeConsole = false;
this.divMainConsole.style.top = '-80%';
}
}

32
front/src/WebRtc/GlobalMessageManager.ts
View file

@ -23,13 +23,35 @@ export class GlobalMessageManager {
}
private playMessage(messageId : number, htmlMessage: string){
const div = document.createElement('div');
div.innerHTML = htmlMessage;
div.id = this.getHtmlMessageId(messageId);
div.className = "message-container";
let previousMessage = document.getElementById(this.getHtmlMessageId(messageId));
if(previousMessage){
previousMessage.remove();
}
//add button to clear message
const buttonText = document.createElement('span');
buttonText.id = 'button-clear-message'
buttonText.innerText = 'Clear';
const buttonMainConsole = document.createElement('div');
buttonMainConsole.appendChild(buttonText);
buttonMainConsole.addEventListener('click', () => {
messageContainer.style.top = '-80%';
setTimeout(() => {
messageContainer.remove();
buttonMainConsole.remove();
});
});
//add message container
const messageContainer = document.createElement('div');
messageContainer.innerHTML = htmlMessage;
messageContainer.id = this.getHtmlMessageId(messageId);
messageContainer.className = "message-container";
messageContainer.appendChild(buttonMainConsole);
const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
mainSectionDiv.appendChild(div);
mainSectionDiv.appendChild(messageContainer);
}
private stopMessage(messageId: number){