Adding files I forgot to commit.
This commit is contained in:
parent
d4927e2e1b
commit
e5d9230a74
61
js-src/conquer/interface-manager.ts
Normal file
61
js-src/conquer/interface-manager.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import Conquer from '@burguillosinfo/conquer'
|
||||
import ConquerInterface from '@burguillosinfo/conquer/interface'
|
||||
|
||||
export default class ConquerInterfaceManager {
|
||||
private interfaces: ConquerInterface[] = []
|
||||
|
||||
public push(conquerInterface: ConquerInterface) {
|
||||
const nodesForInterface = conquerInterface.getNodes()
|
||||
for (const nodeInInterface of nodesForInterface) {
|
||||
nodeInInterface.id = ""
|
||||
document.body.appendChild(nodeInInterface)
|
||||
}
|
||||
this.interfaces.push(conquerInterface)
|
||||
conquerInterface.run()
|
||||
let startInterface = this.interfaces.length - 2;
|
||||
if (startInterface < 0) {
|
||||
startInterface = 0
|
||||
}
|
||||
this.recalculateAllZIndexes(startInterface)
|
||||
}
|
||||
|
||||
public remove(conquerInterface: ConquerInterface) {
|
||||
for (let i = this.interfaces.length - 1; i >= 0; i--) {
|
||||
if (conquerInterface !== this.interfaces[i]) {
|
||||
continue
|
||||
}
|
||||
this.interfaces.splice(i, 1)
|
||||
for (const nodeToDelete of conquerInterface.getNodes()) {
|
||||
document.body.removeChild(nodeToDelete)
|
||||
}
|
||||
conquerInterface.prune()
|
||||
this.recalculateAllZIndexes()
|
||||
}
|
||||
}
|
||||
|
||||
private recalculateAllZIndexes(start = 0) : void {
|
||||
let currentZindex = 5;
|
||||
if (start < 0) {
|
||||
Conquer.fail('ConquerInterfaceManager.recalculateAllZIndexes must not be passed negative values.')
|
||||
}
|
||||
if (start > 0) {
|
||||
const lastInterface = this.interfaces[start-1];
|
||||
if (lastInterface === undefined) {
|
||||
Conquer.fail('Last interface should not be null, dying...')
|
||||
}
|
||||
const lastInterfaceNodes = lastInterface.getNodes()
|
||||
const lastInterfaceLastNode = lastInterfaceNodes[lastInterfaceNodes.length-1]
|
||||
if (lastInterfaceLastNode === undefined) {
|
||||
Conquer.fail('Last interface last node should not be null, dying...')
|
||||
}
|
||||
currentZindex = parseInt(lastInterfaceLastNode.style.zIndex)
|
||||
}
|
||||
for (let i = start; i < this.interfaces.length; i++) {
|
||||
const conquerInterface = this.interfaces[i]
|
||||
for (const node of conquerInterface.getNodes()) {
|
||||
node.style.zIndex = currentZindex + ''
|
||||
currentZindex++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
js-src/conquer/interface.ts
Normal file
50
js-src/conquer/interface.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import Conquer from '@burguillosinfo/conquer'
|
||||
export default abstract class ConquerInterface {
|
||||
private alreadyGenerated = false
|
||||
private nodes: HTMLElement[]
|
||||
private callbacks: Record<string, Array<() => void>> = {}
|
||||
public getNodes(): HTMLElement[] {
|
||||
if (!this.alreadyGenerated) {
|
||||
this.nodes = this.generateNodes()
|
||||
this.alreadyGenerated = true
|
||||
}
|
||||
return this.nodes
|
||||
}
|
||||
protected abstract generateNodes(): HTMLElement[]
|
||||
|
||||
public run(): void {
|
||||
return
|
||||
}
|
||||
public prune(): void {
|
||||
return
|
||||
}
|
||||
|
||||
protected getNodeFromTemplateId(id: string): HTMLElement {
|
||||
const template = document.getElementById(id)
|
||||
if (template === null) {
|
||||
Conquer.fail(`Unable to find template id ${id}.`)
|
||||
}
|
||||
const finalNode = template.cloneNode(true)
|
||||
if (!(finalNode instanceof HTMLElement)) {
|
||||
Conquer.fail('The node is not an Element.')
|
||||
}
|
||||
return finalNode
|
||||
}
|
||||
|
||||
public on(eventName: string, callback: () => void): void {
|
||||
if (this.callbacks[eventName] === undefined) {
|
||||
this.callbacks[eventName] = []
|
||||
}
|
||||
this.callbacks[eventName].push(callback)
|
||||
}
|
||||
|
||||
private runCallbacks(eventName: string) {
|
||||
const callbacks = this.callbacks[eventName];
|
||||
if (callbacks === undefined) {
|
||||
return
|
||||
}
|
||||
for (const callback of callbacks) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
207
js-src/conquer/interface/login.ts
Normal file
207
js-src/conquer/interface/login.ts
Normal file
@ -0,0 +1,207 @@
|
||||
import Conquer from '@burguillosinfo/conquer'
|
||||
import ConquerLogin from '@burguillosinfo/conquer/login'
|
||||
import ConquerInterface from '@burguillosinfo/conquer/interface'
|
||||
|
||||
export default class LoginUI extends ConquerInterface {
|
||||
private conquerLogin: ConquerLogin
|
||||
|
||||
private conquerLoginGoToRegister: HTMLAnchorElement
|
||||
private conquerLoginError: HTMLParagraphElement
|
||||
private conquerLoginSuccess: HTMLParagraphElement
|
||||
private conquerLoginUsername: HTMLInputElement
|
||||
private conquerLoginPassword: HTMLInputElement
|
||||
private conquerLoginSubmit: HTMLButtonElement
|
||||
|
||||
private conquerRegisterGoToLogin: HTMLAnchorElement
|
||||
private conquerRegisterUsername: HTMLInputElement
|
||||
private conquerRegisterPassword: HTMLInputElement
|
||||
private conquerRegisterRepeatPassword: HTMLInputElement
|
||||
private conquerRegisterSubmit: HTMLButtonElement
|
||||
private conquerRegisterError: HTMLParagraphElement
|
||||
|
||||
constructor(conquerLogin: ConquerLogin) {
|
||||
super()
|
||||
this.conquerLogin = conquerLogin
|
||||
}
|
||||
|
||||
public run() {
|
||||
this.storeRegisterElements()
|
||||
this.storeLoginElements()
|
||||
}
|
||||
|
||||
private getLoginDiv(): HTMLDivElement {
|
||||
const element = this.getNodes()[1];
|
||||
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
||||
Conquer.fail('Login is not a div.')
|
||||
}
|
||||
return element
|
||||
}
|
||||
|
||||
private getOverlayDiv(): HTMLDivElement {
|
||||
const element = this.getNodes()[0]
|
||||
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
||||
Conquer.fail('Overlay transparent is not a div.')
|
||||
}
|
||||
return element
|
||||
}
|
||||
|
||||
private getRegisterDiv(): HTMLDivElement {
|
||||
const element = this.getNodes()[2]
|
||||
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
||||
Conquer.fail('Register is not a div.')
|
||||
}
|
||||
return element
|
||||
}
|
||||
|
||||
public generateNodes(): HTMLElement[] {
|
||||
const resultArray = []
|
||||
const overlay = this.getNodeFromTemplateId('conquer-overlay-transparent-template')
|
||||
overlay.classList.remove('conquer-display-none')
|
||||
resultArray.push(overlay)
|
||||
const login = this.getNodeFromTemplateId('conquer-login-template')
|
||||
login.classList.remove('conquer-display-none')
|
||||
if (!(login instanceof HTMLDivElement)) {
|
||||
Conquer.fail('Login is required to be a Div.')
|
||||
}
|
||||
resultArray.push(login)
|
||||
const register = this.getNodeFromTemplateId('conquer-register-template')
|
||||
resultArray.push(register)
|
||||
return resultArray
|
||||
}
|
||||
private async storeRegisterElements() {
|
||||
const registerElement = this.getRegisterDiv()
|
||||
const conquerRegisterGoToLogin = registerElement.querySelector('.conquer-register-go-to-login')
|
||||
if (conquerRegisterGoToLogin === null || !(conquerRegisterGoToLogin instanceof HTMLAnchorElement)) {
|
||||
Conquer.fail('Link to go to login from register is invalid.')
|
||||
}
|
||||
this.conquerRegisterGoToLogin = conquerRegisterGoToLogin
|
||||
this.conquerRegisterGoToLogin.addEventListener('click', () => {
|
||||
this.goToLogin()
|
||||
})
|
||||
const conquerRegisterUsername = registerElement.querySelector('.conquer-register-username')
|
||||
if (conquerRegisterUsername === null || !(conquerRegisterUsername instanceof HTMLInputElement)) {
|
||||
Conquer.fail('No username field in conquer register.')
|
||||
}
|
||||
this.conquerRegisterUsername = conquerRegisterUsername
|
||||
const conquerRegisterPassword = registerElement.querySelector('.conquer-register-password')
|
||||
if (conquerRegisterPassword === null || !(conquerRegisterPassword instanceof HTMLInputElement)) {
|
||||
Conquer.fail('No password field in conquer register.')
|
||||
}
|
||||
this.conquerRegisterPassword = conquerRegisterPassword
|
||||
const conquerRegisterRepeatPassword = registerElement.querySelector('.conquer-register-repeat-password')
|
||||
if (conquerRegisterRepeatPassword === null || !(conquerRegisterRepeatPassword instanceof HTMLInputElement)) {
|
||||
Conquer.fail('No repeat password field in conquer register.')
|
||||
}
|
||||
this.conquerRegisterRepeatPassword = conquerRegisterRepeatPassword
|
||||
const conquerRegisterSubmit = registerElement.querySelector('.conquer-register-submit')
|
||||
if (conquerRegisterSubmit === null || !(conquerRegisterSubmit instanceof HTMLButtonElement)) {
|
||||
Conquer.fail('No register submit button found.')
|
||||
}
|
||||
this.conquerRegisterSubmit = conquerRegisterSubmit
|
||||
this.conquerRegisterSubmit.addEventListener('click', (event: Event) => {
|
||||
event.preventDefault()
|
||||
const username = this.conquerRegisterUsername.value
|
||||
const password = this.conquerRegisterPassword.value
|
||||
const repeatPassword = this.conquerRegisterRepeatPassword.value
|
||||
this.conquerLogin.onRegisterRequest(this, username, password, repeatPassword)
|
||||
})
|
||||
const conquerRegisterError = registerElement.querySelector('.conquer-register-error')
|
||||
if (conquerRegisterError === null || !(conquerRegisterError instanceof HTMLParagraphElement)) {
|
||||
Conquer.fail('Unable to find the conquer error element.')
|
||||
}
|
||||
this.conquerRegisterError = conquerRegisterError
|
||||
|
||||
}
|
||||
private storeLoginElements() {
|
||||
const loginElement = this.getLoginDiv()
|
||||
const conquerLoginGoToRegister = loginElement.querySelector('.conquer-login-go-to-register')
|
||||
if (conquerLoginGoToRegister === null || !(conquerLoginGoToRegister instanceof HTMLAnchorElement)) {
|
||||
Conquer.fail('Link to go to register from login is invalid.')
|
||||
}
|
||||
this.conquerLoginGoToRegister = conquerLoginGoToRegister
|
||||
this.conquerLoginGoToRegister.addEventListener('click', () => {
|
||||
this.goToRegister()
|
||||
})
|
||||
const conquerLoginError = loginElement.querySelector('.conquer-login-error')
|
||||
if (conquerLoginError === null || !(conquerLoginError instanceof HTMLParagraphElement)) {
|
||||
Conquer.fail('Unable to find conquer login error.')
|
||||
}
|
||||
this.conquerLoginError = conquerLoginError
|
||||
const conquerLoginSuccess = loginElement.querySelector('.conquer-login-success')
|
||||
if (conquerLoginSuccess === null || !(conquerLoginSuccess instanceof HTMLParagraphElement)) {
|
||||
Conquer.fail('Unable to find conquer login success.')
|
||||
}
|
||||
this.conquerLoginSuccess = conquerLoginSuccess
|
||||
const conquerLoginUsername = loginElement.querySelector('.conquer-login-username')
|
||||
if (conquerLoginUsername === null || !(conquerLoginUsername instanceof HTMLInputElement)) {
|
||||
Conquer.fail('Unable to find conquer login username field.')
|
||||
}
|
||||
this.conquerLoginUsername = conquerLoginUsername
|
||||
const conquerLoginPassword = loginElement.querySelector('.conquer-login-password')
|
||||
if (conquerLoginPassword === null || !(conquerLoginPassword instanceof HTMLInputElement)) {
|
||||
Conquer.fail('Unable to find conquer login password field.')
|
||||
}
|
||||
this.conquerLoginPassword = conquerLoginPassword
|
||||
const conquerLoginSubmit = loginElement.querySelector('.conquer-login-submit')
|
||||
if (conquerLoginSubmit === null || !(conquerLoginSubmit instanceof HTMLButtonElement)) {
|
||||
Conquer.fail('Unable to find the submit button for the login.')
|
||||
}
|
||||
this.conquerLoginSubmit = conquerLoginSubmit
|
||||
console.log(this.conquerLoginSubmit.parentNode?.parentNode)
|
||||
this.conquerLoginSubmit.addEventListener('click', (event: Event) => {
|
||||
event.preventDefault()
|
||||
const username = this.conquerLoginUsername.value
|
||||
const password = this.conquerLoginPassword.value
|
||||
this.conquerLogin.onLoginRequested(this, username, password)
|
||||
})
|
||||
}
|
||||
|
||||
private async goToRegister(): Promise<void> {
|
||||
await this.removeLoginRegisterCombo()
|
||||
const registerElement = this.getRegisterDiv()
|
||||
registerElement.classList.remove('conquer-display-none')
|
||||
}
|
||||
|
||||
public async removeLoginRegisterCombo(): Promise<void> {
|
||||
const registerElement = this.getRegisterDiv()
|
||||
const overlayElement = this.getOverlayDiv()
|
||||
overlayElement.classList.add('conquer-display-none')
|
||||
const loginElement = this.getLoginDiv()
|
||||
loginElement.classList.add('conquer-display-none')
|
||||
registerElement.classList.add('conquer-display-none')
|
||||
}
|
||||
|
||||
public async addNewLoginSuccessText(message: string): Promise<void> {
|
||||
this.unsetLoginAndRegisterErrors()
|
||||
this.conquerLoginSuccess.innerText = message
|
||||
this.conquerLoginSuccess.classList.remove('conquer-display-none')
|
||||
|
||||
}
|
||||
public async addNewLoginError(error: string): Promise<void> {
|
||||
this.unsetLoginAndRegisterErrors()
|
||||
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
||||
this.conquerLoginError.innerText = error
|
||||
this.conquerLoginError.classList.remove('conquer-display-none')
|
||||
}
|
||||
public async addNewRegisterError(error: string): Promise<void> {
|
||||
this.unsetLoginAndRegisterErrors()
|
||||
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
||||
this.conquerRegisterError.innerText = error
|
||||
this.conquerRegisterError.classList.remove('conquer-display-none')
|
||||
}
|
||||
public async unsetLoginAndRegisterErrors() {
|
||||
this.conquerRegisterError.classList.add('conquer-display-none')
|
||||
this.conquerLoginError.classList.add('conquer-display-none')
|
||||
}
|
||||
|
||||
public async goToLogin(): Promise<void> {
|
||||
await this.removeLoginRegisterCombo()
|
||||
const loginElement = this.getLoginDiv()
|
||||
loginElement.classList.remove('conquer-display-none')
|
||||
}
|
||||
|
||||
public async addNewLoginRegisterError(message: string): Promise<void> {
|
||||
this.addNewRegisterError(message)
|
||||
this.addNewLoginError(message)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user