e-cosplay/assets/class/ConfirmModal.js

export class ConfirmModal extends HTMLAnchorElement{
    connectedCallback() {
        let element = this;

        element.addEventListener('click',btn=>{
            btn.preventDefault();

            let modalConfirm = document.createElement('confirm-modal');
            modalConfirm.innerHTML = `<div class="confirm-modal-content"></div>`;
            if(element.getAttribute('type') == "cp-customer") {
                this.copyCustomer(modalConfirm,element.getAttribute('href'));
            }
            if(element.getAttribute('type') == "delete-customer") {
                this.deleteCustomer(modalConfirm,element.getAttribute('href'));
            }
            if(element.getAttribute('type') == "delete-email") {
                this.deleteEmail(modalConfirm,element.getAttribute('href'));
            }
            if(element.getAttribute('type') == "delete-esyweb-tuto") {
                this.deleteEsyWebTuto(modalConfirm,element.getAttribute('href'));
            }
            document.body.appendChild(modalConfirm);
        })
    }

    deleteEsyWebTuto(modalConfirm,link) {
        let message = document.createElement('h2');
        message.innerText = "Confirmer la suppression du tutoriel";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(message);

        let grid = document.createElement('div')
        grid.classList = "grid grid-cols-1 gap-4 md:grid-cols-2";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(grid);

        let buttonOk = document.createElement('button');
        buttonOk.classList = "bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded";
        buttonOk.innerText = "Oui";
        buttonOk.addEventListener('click',()=>{
            modalConfirm.remove()
            location.href = link;
        })

        let buttonKo = document.createElement('button');
        buttonKo.classList = "bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded";
        buttonKo.innerText = "Non";
        buttonKo.addEventListener('click',()=>modalConfirm.remove())
        grid.appendChild(buttonOk)
        grid.appendChild(buttonKo)
    }
    deleteEmail(modalConfirm,link) {
        let message = document.createElement('h2');
        message.innerText = "Confirmer la suppression de l'email";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(message);

        let grid = document.createElement('div')
        grid.classList = "grid grid-cols-1 gap-4 md:grid-cols-2";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(grid);

        let buttonOk = document.createElement('button');
        buttonOk.classList = "bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded";
        buttonOk.innerText = "Oui";
        buttonOk.addEventListener('click',()=>{
            modalConfirm.remove()
            location.href = link;
        })

        let buttonKo = document.createElement('button');
        buttonKo.classList = "bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded";
        buttonKo.innerText = "Non";
        buttonKo.addEventListener('click',()=>modalConfirm.remove())
        grid.appendChild(buttonOk)
        grid.appendChild(buttonKo)
    }
    deleteCustomer(modalConfirm,link) {
        let message = document.createElement('h2');
        message.innerText = "Confirmer la suppression du client";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(message);

        let grid = document.createElement('div')
        grid.classList = "grid grid-cols-1 gap-4 md:grid-cols-2";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(grid);

        let buttonOk = document.createElement('button');
        buttonOk.classList = "bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded";
        buttonOk.innerText = "Oui";
        buttonOk.addEventListener('click',()=>{
            modalConfirm.remove()
            location.href = link;
        })

        let buttonKo = document.createElement('button');
        buttonKo.classList = "bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded";
        buttonKo.innerText = "Non";
        buttonKo.addEventListener('click',()=>modalConfirm.remove())
        grid.appendChild(buttonOk)
        grid.appendChild(buttonKo)
    }

    copyCustomer(modalConfirm,link) {
        let message = document.createElement('h2');
        message.innerText = "Confirmer la copie du client";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(message);

        let grid = document.createElement('div')
        grid.classList = "grid grid-cols-1 gap-4 md:grid-cols-2";
        modalConfirm.querySelector('.confirm-modal-content').appendChild(grid);

        let buttonOk = document.createElement('button');
        buttonOk.classList = "bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded";
        buttonOk.innerText = "Oui";
        buttonOk.addEventListener('click',()=>{
            modalConfirm.remove()
            location.href = link;
        })

        let buttonKo = document.createElement('button');
        buttonKo.classList = "bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded";
        buttonKo.innerText = "Non";
        buttonKo.addEventListener('click',()=>modalConfirm.remove())
        grid.appendChild(buttonOk)
        grid.appendChild(buttonKo)
    }
}