SignatureCardFrontend/script.js

let backendUrl = "https://signature.caiu.org"
let locations = JSON.parse("{}");
const locationSelector = document.getElementById("location");

loadLocations();
clearForm();

document.querySelectorAll('input[name = outlookVer]').forEach((element) => {
    element.addEventListener("click", (e) => {
        document.getElementById("outlookDiv").classList.remove("missing-info");
        }, false);
});
locationSelector.addEventListener("click", (e) => {
    locationSelector.classList.remove("missing-info");
}, false);
document.getElementById("formSubmit").addEventListener("click", submitForm, false);

function handleCheckbox() {
    const extensionInput = document.getElementById("extensionInput");
    const directNumberInput = document.getElementById("directNumberInput");
    if (document.getElementById("directNumberCheckbox").checked) {
        extensionInput.style.display = "none";
        directNumberInput.style.display = "block";
        document.getElementById("extension").value = "";
    } else {
        extensionInput.style.display = "block";
        directNumberInput.style.display = "none";
        document.getElementById("directNumber").value = "";
    }
}

function loadLocations() {
    let locationsList = document.getElementById("location");

    fetchWithTimeout(backendUrl + "/backend/data/locations", {
        timeout: 5000,
        method: 'GET',
        mode: 'cors',
        headers: {
            'Accept': 'application/json'
        }
    }).then(response => {
        response.text().then(text => {
            locations = JSON.parse(text);
            locationsList.innerText = "";
            locationsList.options[0] = new Option("--- Select ---", "default");
            for (let i = 0; i < locations.length; i++) {
                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
            }
        })
    });
}

function clearForm() {
    document.getElementById("location").value = "default";
    document.getElementById("full_name").value = "";
    document.getElementById("title").value = "";
    document.getElementById("email").value = "";
    document.getElementById("extension").value = "";
    document.getElementById("directNumber").value = "";
    document.getElementById("cellNumber").value = "";
}

function submitForm() {
    let missing = false;
    if (locationSelector.value === "default") {
        locationSelector.classList.add("missing-info");
        missing = true;
    }
    if (document.querySelector('input[name = outlookVer]:checked') == null) {
        document.getElementById("outlookDiv").classList.add("missing-info");
        missing = true;
    }
    if (missing) {
        return;
    }
    fetchWithTimeout(backendUrl + "/backend/generate?id=" + id, {
       timeout: 5000,
       method: 'POST',
       mode: 'cors',
       Headers: {
           'Accept': 'image/png',
       }
    }).then(async response => {
        if (response.headers.get("Content-Type") === "text/plain") {
            response.text().then(res => console.error(res));
            return;
        }
        downloadImage(await response.arrayBuffer());
    });
    clearForm();
}

function downloadImage(arrayBuffer) {
    const blob = new Blob([arrayBuffer], { type: "image/png" });
    const cardElement = document.getElementById("card");

    let urlCreator = window.URL || window.webkitURL;
    cardElement.href = urlCreator.createObjectURL(blob);
    cardElement.style.display = 'unset';
    cardElement.download = "card.png";
    cardElement.click();
}

async function fetchWithTimeout(resource, options = {}) {
    const { timeout = 8000 } = options;
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);

    const response = await fetch(resource, {
        ...options,
        signal: controller.signal
    });
    clearTimeout(id);

    return response;
}

function isValidJson(json) {
    try {
        JSON.parse(json);
    } catch (e) {
        return false;
    }
    return true;
}