e-ticket/assets/modules/billet-designer.js

export function initBilletDesigner() {
    const designer = document.getElementById('billet-designer')
    if (!designer) return

    const previewUrl = designer.dataset.previewUrl
    const saveUrl = designer.dataset.saveUrl
    if (!previewUrl) return

    const iframe = document.getElementById('billet-preview-frame')
    const reloadBtn = document.getElementById('billet-reload-preview')
    const saveBtn = document.getElementById('billet-save-design')
    if (!iframe) return

    const inputs = designer.querySelectorAll('input[name]')

    function buildPreviewUrl() {
        const params = new URLSearchParams()

        for (const input of inputs) {
            if (input.type === 'checkbox') {
                params.set(input.name, input.checked ? '1' : '0')
            } else {
                params.set(input.name, input.value)
            }
        }

        return previewUrl + '?' + params.toString()
    }

    function reloadPreview() {
        iframe.src = buildPreviewUrl()
    }

    function saveDesign() {
        if (!saveUrl) return

        const formData = new FormData()
        for (const input of inputs) {
            if (input.type === 'checkbox') {
                formData.set(input.name, input.checked ? '1' : '0')
            } else {
                formData.set(input.name, input.value)
            }
        }

        globalThis.fetch(saveUrl, {
            method: 'POST',
            body: formData,
        })
    }

    for (const input of inputs) {
        input.addEventListener('input', reloadPreview)
        input.addEventListener('change', reloadPreview)
    }

    if (reloadBtn) {
        reloadBtn.addEventListener('click', reloadPreview)
    }

    if (saveBtn) {
        saveBtn.addEventListener('click', saveDesign)
    }
}