SignatureCardFrontend/script.js

function handleCheckbox() {
    const extensionInput = document.getElementById("extensionInput");
    const directLineInput = document.getElementById("directLineInput");
    if (document.getElementById("directLineCheckbox").checked) {
        extensionInput.style.display = "none";
        directLineInput.style.display = "block";
        document.getElementById("extension").value = "";
    } else {
        extensionInput.style.display = "block";
        directLineInput.style.display = "none";
        document.getElementById("directLine").value = "";
    }
}


let backendUrl = "http://127.0.0.1:8090"
let locations = JSON.parse("{}");

function submitForm() {
    let body =
        "{" +
        "\"name\":\"" + document.getElementById("full_name").value + "\"," +
        "\"title\":\"" + document.getElementById("title").value + "\"," +
        "\"email\":\"" + document.getElementById("email").value + "\"," +
        "\"locationId\":\"" + document.getElementById("location").value + "\"," +
        "\"extension\":\"" + document.getElementById("extension").value + "\"," +
        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
        "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
        "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
        "}";

    console.log(body);

    fetchWithTimeout(backendUrl + "/backend/generate", {
        timeout: 5000,
        method: 'POST',
        mode: 'cors',
        Headers: {
            'Accept': 'image/png',
        },
        body: body
    }).then(async response => {
        downloadImage(await response.arrayBuffer());
    });
}

function loadFromExistingCard() {
    const data = new FormData();
    data.append("card", document.getElementById("existingFile").files[0]);

    fetchWithTimeout(backendUrl + "/backend/edit", {
        timeout: 5000,
        method: 'POST',
        mode: 'cors',
        headers: {
            'Accept': 'application/json'
        },
        body: data
    }).then(response => response.json()).then(json => {
        document.getElementById("full_name").value = json.Name;
        document.getElementById("title").value = json.Title;
        document.getElementById("email").value = json.Email;
        document.getElementById("location").value = json.Location;
        if (json.Extension === "") {
            let directLineCheckbox = document.getElementById("directLineCheckbox");
            if (directLineCheckbox.value === "on") {
                document.getElementById("directLine").value = json.DirectNumber;
            }
        } else {
            document.getElementById("extension").value = json.Extension;
        }
        document.getElementById("cellNumber").value = json.CellNumber;
    });
}

function getLocations() {
    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 = "";
            for (let i = 0; i < locations.length; i++) {
                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
            }
        })
    });
}

async function checkBackend() {
    const statusCircle = document.getElementById("statusCircle");
    const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
    statusCircle.classList.replace(previousState, "loading");
    try {
        const response = await fetchWithTimeout(backendUrl + "/backend/heartbeat", {
            timeout: 5000,
            method: 'GET',
            mode: 'cors',
            headers: {
                'Accept': 'application/json'
            }
        });
        if (response.status === 200) {
            console.log('Backend up with code ', response.status);
        } else {
            console.log("Something weird happened: ", response.status);
        }
        statusCircle.classList.replace("loading", "connected");
    } catch (err) {
        console.log("Backend down with error ", err);
        statusCircle.classList.replace("loading", "disconnected");
    }
    getLocations();
}

function saveBackendUrl() {
    let url = document.getElementById("newBackendUrlInput").value;
    document.getElementById("newBackendUrlInput").value = "";
    if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
        url = "http://" + url;
    }
    backendUrl = url;
    document.cookie = "backendUrl=" + backendUrl;
    document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
    console.log("Saved new backendUrl ", backendUrl);
    checkBackend().then();
}

function loadBackendUrl() {
    let cookieArray = document.cookie.split(";");
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].split("=");
        if (cookie[0] === "backendUrl") {
            backendUrl = cookie[1];
            document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
            console.log("Set backendUrl to ", backendUrl);
        } else {
            console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");
        }
    }
}

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 downloadImage(arrayBuffer) {
    const blob = new Blob([arrayBuffer], { type: "image/png" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "vcard.png";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    setTimeout(() => {
        URL.revokeObjectURL(link.href);
    }, 100);
}

function toggleDarkMode() {
    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
    else document.cookie = "darkMode=on";
    refreshDarkMode();
}

function refreshDarkMode() {
    let darkMode = getCookie("darkMode") === "on";
    if (darkMode) {
        document.body.classList.add("dark-theme");
    } else {
        if (document.body.classList.contains("dark-theme")) {
            document.body.classList.remove("dark-theme");
        }
    }
}

function getCookie(cookieName) {
    let cookieArray = document.cookie.split(";");
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].split("=");
        if (cookie[0].trim() === cookieName) {
            return cookie[1];
        }
    }
    console.warn("Cookie \"" + cookieName + "\" does not exist");
    document.cookie = cookieName + "=";
    return "";
}