131 lines
3.8 KiB
TypeScript
131 lines
3.8 KiB
TypeScript
import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
|
|
import {FormControl, FormGroup, Validators} from '@angular/forms';
|
|
import {AppealsService, MinecraftAppeal} from '@api';
|
|
import {HeaderComponent} from '@header/header.component';
|
|
|
|
@Component({
|
|
selector: 'app-appeal',
|
|
imports: [
|
|
HeaderComponent
|
|
],
|
|
templateUrl: './appeal.component.html',
|
|
styleUrl: './appeal.component.scss'
|
|
})
|
|
export class AppealComponent implements OnInit, AfterViewInit {
|
|
|
|
public form: FormGroup<Appeal>;
|
|
private resizeObserver: ResizeObserver | null = null;
|
|
private boundHandleResize: any;
|
|
|
|
constructor(
|
|
private appealApi: AppealsService,
|
|
private elementRef: ElementRef,
|
|
private renderer: Renderer2
|
|
) {
|
|
this.form = new FormGroup({
|
|
username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
|
|
punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
|
|
email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
|
|
appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
this.setupResizeObserver();
|
|
this.updateContainerHeight();
|
|
|
|
this.boundHandleResize = this.handleResize.bind(this);
|
|
window.addEventListener('resize', this.boundHandleResize);
|
|
|
|
setTimeout(() => this.updateContainerHeight(), 0);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if (this.resizeObserver) {
|
|
this.resizeObserver.disconnect();
|
|
this.resizeObserver = null;
|
|
}
|
|
|
|
if (this.boundHandleResize) {
|
|
window.removeEventListener('resize', this.boundHandleResize);
|
|
}
|
|
}
|
|
|
|
private handleResize() {
|
|
this.updateContainerHeight();
|
|
}
|
|
|
|
private setupResizeObserver() {
|
|
this.resizeObserver = new ResizeObserver(() => {
|
|
this.updateContainerHeight();
|
|
});
|
|
|
|
const headerElement = document.querySelector('app-header');
|
|
if (headerElement) {
|
|
this.resizeObserver.observe(headerElement);
|
|
}
|
|
|
|
const footerElement = document.querySelector('footer');
|
|
if (footerElement) {
|
|
this.resizeObserver.observe(footerElement);
|
|
}
|
|
}
|
|
|
|
private updateContainerHeight() {
|
|
const headerElement = document.querySelector('app-header');
|
|
const footerElement = document.querySelector('footer');
|
|
|
|
const container = this.elementRef.nativeElement.querySelector('.appeal-container');
|
|
|
|
if (headerElement && footerElement && container) {
|
|
const headerHeight = headerElement.getBoundingClientRect().height;
|
|
const footerHeight = footerElement.getBoundingClientRect().height;
|
|
|
|
const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
|
|
this.renderer.setStyle(container, 'min-height', calculatedHeight);
|
|
}
|
|
}
|
|
|
|
public onSubmit() {
|
|
if (this.form === undefined) {
|
|
console.error('Form is undefined');
|
|
return
|
|
}
|
|
if (this.form.valid) {
|
|
this.sendForm()
|
|
} else {
|
|
Object.keys(this.form.controls).forEach(field => {
|
|
const control = this.form!.get(field);
|
|
if (!(control instanceof FormGroup)) {
|
|
console.error('Control [' + control + '] is not a FormGroup');
|
|
return;
|
|
}
|
|
control.markAsTouched({onlySelf: true});
|
|
});
|
|
}
|
|
}
|
|
|
|
private sendForm() {
|
|
const rawValue = this.form.getRawValue();
|
|
const appeal: MinecraftAppeal = {
|
|
appeal: rawValue.appeal,
|
|
email: rawValue.email,
|
|
punishmentId: parseInt(rawValue.punishmentId),
|
|
username: rawValue.username,
|
|
uuid: ''//TODO
|
|
}
|
|
this.appealApi.submitMinecraftAppeal(appeal).subscribe()
|
|
}
|
|
|
|
}
|
|
|
|
interface Appeal {
|
|
username: FormControl<string>;
|
|
punishmentId: FormControl<string>;
|
|
email: FormControl<string>;
|
|
appeal: FormControl<string>;
|
|
}
|