105 lines
4.2 KiB
TypeScript
105 lines
4.2 KiB
TypeScript
import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'
|
|
import Conquer from '@burguillosinfo/conquer'
|
|
|
|
export default class NewNodeUI extends AbstractTopBarInterface {
|
|
private coordinates: number[];
|
|
public getSubmitButton(): HTMLElement {
|
|
const submitButton = this.getMainNode().querySelector('button.new-node-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 getSelectNodeType(): HTMLSelectElement {
|
|
const selectElement = this.getMainNode().querySelector('select.conquer-node-type');
|
|
if (selectElement === null || !(selectElement instanceof HTMLSelectElement)) {
|
|
Conquer.fail('SelectElementNodeType is null');
|
|
}
|
|
return selectElement
|
|
}
|
|
public getInputNodeName(): HTMLInputElement {
|
|
const nodeName = this.getMainNode().querySelector('input.conquer-node-name')
|
|
if (nodeName === null || !(nodeName instanceof HTMLInputElement)) {
|
|
Conquer.fail('NodeName is null');
|
|
}
|
|
return nodeName
|
|
}
|
|
public getTextAreaNodeDescription(): HTMLTextAreaElement {
|
|
const nodeDescription = this.getMainNode().querySelector('textarea.conquer-node-description')
|
|
if (nodeDescription === null || !(nodeDescription instanceof HTMLTextAreaElement)) {
|
|
Conquer.fail('NodeDescription is null');
|
|
}
|
|
return nodeDescription
|
|
}
|
|
constructor(coordinates: number[]) {
|
|
super()
|
|
this.coordinates = coordinates
|
|
}
|
|
public run() {
|
|
const mainNode = this.getMainNode()
|
|
const form = this.getNodeFromTemplateId('conquer-new-node-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 selectNodeType = this.getSelectNodeType();
|
|
const inputNodeName = this.getInputNodeName();
|
|
const textAreaNodeDescription = this.getTextAreaNodeDescription();
|
|
const description = textAreaNodeDescription.value;
|
|
const nodeName = inputNodeName.value;
|
|
const selectedOptionsNodeType = selectNodeType.selectedOptions;
|
|
if (selectedOptionsNodeType.length < 1) {
|
|
this.setError('Debes selecionar un tipo de nodo.');
|
|
return;
|
|
}
|
|
const selectedOptionNodeType = selectedOptionsNodeType[0];
|
|
const nodeType = selectedOptionNodeType.value;
|
|
if (nodeName.length < 5) {
|
|
this.setError('Todos los nodos deben tener un nombre mayor a 4 caracteres.');
|
|
return;
|
|
}
|
|
const urlNode = new URL('/conquer/node', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
|
fetch(urlNode, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
description: description,
|
|
name: nodeName,
|
|
type: nodeType,
|
|
coordinates: this.coordinates,
|
|
}),
|
|
}).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')
|
|
});
|
|
}
|
|
}
|