98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'
|
|
import Conquer from '@burguillosinfo/conquer'
|
|
|
|
export default class NewTeamUI extends AbstractTopBarInterface {
|
|
public getSubmitButton(): HTMLElement {
|
|
const submitButton = this.getMainNode().querySelector('button.new-team-form-submit')
|
|
if (submitButton === null || !(submitButton instanceof HTMLElement)) {
|
|
Conquer.fail('SubmitButton is null');
|
|
}
|
|
return submitButton;
|
|
}
|
|
public getErrorElement(): HTMLElement {
|
|
const errorElement = this.getMainNode().querySelector('p.conquer-error');
|
|
if (errorElement === null || !(errorElement instanceof HTMLElement)) {
|
|
Conquer.fail('No error element set');
|
|
}
|
|
return errorElement;
|
|
}
|
|
public getInputTeamName(): HTMLInputElement {
|
|
const teamName = this.getMainNode().querySelector('input.conquer-team-name');
|
|
if (teamName === null || !(teamName instanceof HTMLInputElement)) {
|
|
Conquer.fail('TeamName is null');
|
|
}
|
|
return teamName;
|
|
}
|
|
public getInputTeamColor(): HTMLInputElement {
|
|
const teamColor = this.getMainNode().querySelector('input.conquer-team-color');
|
|
if (teamColor === null || !(teamColor instanceof HTMLInputElement)) {
|
|
Conquer.fail('TeamColor is null');
|
|
}
|
|
return teamColor;
|
|
}
|
|
public getTextareaTeamDescription(): HTMLTextAreaElement {
|
|
const teamDescription = this.getMainNode().querySelector('textarea.conquer-team-description')
|
|
if (teamDescription === null || !(teamDescription instanceof HTMLTextAreaElement)) {
|
|
Conquer.fail('TeamDescription is null');
|
|
}
|
|
return teamDescription
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
public run() {
|
|
const mainNode = this.getMainNode()
|
|
const form = this.getNodeFromTemplateId('conquer-new-team-form-creation-template')
|
|
mainNode.append(form)
|
|
this.getSubmitButton().addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
this.onSubmit();
|
|
});
|
|
form.classList.remove('conquer-display-none')
|
|
mainNode.classList.remove('conquer-display-none')
|
|
}
|
|
|
|
private setError(error: string): void {
|
|
const errorElement = this.getErrorElement();
|
|
errorElement.classList.remove('conquer-display-none')
|
|
errorElement.innerText = error
|
|
}
|
|
|
|
private onSubmit(): void {
|
|
const inputTeamName = this.getInputTeamName();
|
|
const textareaTeamDescription = this.getTextareaTeamDescription();
|
|
const inputTeamColor = this.getInputTeamColor();
|
|
const name = inputTeamName.value;
|
|
const description = textareaTeamDescription.value;
|
|
const color = inputTeamColor.value;
|
|
if (name.length < 5) {
|
|
this.setError('Todos los equipos deben tener un nombre mayor a 4 caracteres.');
|
|
return;
|
|
}
|
|
const urlTeam = new URL('/conquer/team', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
|
fetch(urlTeam, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
description : description,
|
|
name : name,
|
|
color : color,
|
|
}),
|
|
}).then(async (res) => {
|
|
let responseBody;
|
|
try {
|
|
responseBody = await res.json();
|
|
} catch (error) {
|
|
this.setError( 'Respuesta erronea del servidor.');
|
|
return;
|
|
}
|
|
if (res.status !== 200) {
|
|
this.setError(responseBody.error);
|
|
return;
|
|
}
|
|
this.runCallbacks('close')
|
|
});
|
|
}
|
|
}
|