BeWoPlaner/BeWoPlanerMobil/Scripts/ownSoft-Scripts/signature.js

// Blendet das Popup mit der gespeicherten Unterschrift wieder aus
function hideSignature() {
    $("#signature-img-popup").modal("hide");
}

function updateCanvasSize(canvasJQueryElement) {
    if(canvasJQueryElement.length === 0) {
        logError("Canvas nicht gefunden!");
        return;
    }

    const rowWidth = canvasJQueryElement.parent().parent().innerWidth();

    const sourceCanvas = document.getElementById(canvasJQueryElement.prop("id"));

    const canvasWidth = sourceCanvas.scrollWidth;

    const newWidth = rowWidth;

    var parsedNewWidth = parseInt(newWidth, 10);
    const parsedCanvasWidth = parseInt(canvasWidth, 10);

    let isMinDifferenceMet = false;

    if(parsedCanvasWidth > parsedNewWidth) {
        isMinDifferenceMet = parsedCanvasWidth - parsedNewWidth > 4;
    } else {
        isMinDifferenceMet = parsedNewWidth - parsedCanvasWidth > 4;
    }

    if(isMinDifferenceMet) {
        var trimmedCanvas = trimCanvas(cloneCanvas(sourceCanvas));

        var canvasContext = sourceCanvas.getContext("2d", { willReadFrequently: true });

        canvasJQueryElement.prop("width", newWidth);

        if(trimmedCanvas.width <= 0 || trimmedCanvas.height <= 0) {
            return;
        }

        var img = new Image();

        img.onload = function () {
            if(trimmedCanvas.width > parsedNewWidth) {
                const factor = trimmedCanvas.height / trimmedCanvas.width;
                const newHeight = parsedNewWidth * factor;

                canvasContext.drawImage(img, 0, 0, parsedNewWidth - 1, newHeight - 1);
            } else {
                canvasContext.drawImage(img, 0, 0);
            }
        };

        img.src = trimmedCanvas.toDataURL();
    }
}

// Das Initialisieren der Einzelunterschrift
function initializeSignature(selectedServiceRecordOid) {
    $("#form-container, #checkbox-container").hide();
    $("#signature-container").addClass("d-block");

    // Info-String wird vom Server geholt.
    $.get(window.getSelectedRecordInformationUrlWithOid(), { oid: selectedServiceRecordOid }).done(function(jsonServiceRecord2Monatsunterschrift) {
        if(jsonServiceRecord2Monatsunterschrift === "SessionTimeout") {
            window.location.href = window.getRedirectLink();
            return;
        }

        // Ist der Info-String null oder leer, wird das Unterschriftenoverlay versteckt.
        if(isEmptyOrSpaces(jsonServiceRecord2Monatsunterschrift)) {
            $("#form-container, #checkbox-container").show();
            $("#signature-container").removeClass("d-block");

            // Ein Fehler beim Holen des Info-Strings ist passiert.
            showMessagePopupWithHtmlAndCallback("Fehler", "Der zu unterschreibende Zeiterfassungseintrag konnte nicht geladen werden. Bitte wenden Sie sich an den Support.<br/><br/><a href='mailto:support@bewoplaner.de'>support@bewoplaner.de</a>", false,
                function() {
                    showSpinner();
                    
                    location.reload();
                },
                true);
            return;
        }

        if(false === checkJson(jsonServiceRecord2Monatsunterschrift)) {
            logWarning("initializeSignature: Der zurückgegebene Wert ist kein gültiges JSON!");
            hideSpinner();
            return;
        }

        var serviceRecord2Monatsunterschrift = parseJason(jsonServiceRecord2Monatsunterschrift);

        var hasMonatsunterschrift = serviceRecord2Monatsunterschrift.HasMonatsunterschrift;

        var record = serviceRecord2Monatsunterschrift.ServiceRecord;

        var startDate              = record.Start[18] === "1" ? "" : record.Start.slice(11, 16);
        var endDate                = record.End[18] === "1" ? "" : record.End.slice(11, 16);
        var jahr                   = record.Start.slice(0, 4);
        var monat                  = record.Start.slice(5, 7);
        var tag                    = record.Start.slice(8, 10);
        var datum                  = tag + "." + monat + "." + jahr;
        var serviceDescriptionName = record.ServiceDescription.Name;
        var serviceCategoryName    = record.ServiceDescription.Category.Name;

        var nameAndDateOfBirth = $("#selectedSupportConceptCustomerInfo").text();
        var supportConceptInterval = $("#selectedSupportConceptInfo").text();

        $("#signature-support-concept").text(nameAndDateOfBirth + " | " + supportConceptInterval);
        $("#signature-service-description").text(serviceDescriptionName);
        $("#signature-service-category").text(serviceCategoryName);
        $("#signature-employee").text(record.Employee.FirstName + " " + record.Employee.LastName);
        $("#signature-date-time").text(datum + " " + startDate + " - " + endDate);

        if(hasMonatsunterschrift === true) {
            var customerFirstName = record.Customer.FirstName;
            var customerLastName = record.Customer.LastName;

            var customerName = "";

            if(isEmptyOrSpaces(customerFirstName) && isEmptyOrSpaces(customerLastName) === false) {
                customerName = customerLastName;
            } else if(isEmptyOrSpaces(customerLastName) && false === isEmptyOrSpaces(customerFirstName)) {
                customerName = customerFirstName;
            } else {
                customerName = customerLastName + ", " + customerFirstName;
            }

            $("#signature-alert").html(`Für diesen Eintrag (${datum} ${startDate} - ${endDate}) existiert bereits eine Monatsunterschrift von ${customerName}.<br /><br />Das Leisten dieser Unterschrift ist nicht notwendig.`);
            $("#signature-alert").removeClass("d-none");
        }

        updateCanvasSize($("#sketch-pad"));

        var canvas = document.getElementById("sketch-pad");

        var signaturePad = new SignaturePad(canvas, { backgroundColor: "rgba(255, 255, 255, 0)" });

        var saveButton = document.getElementById("save-signature-btn");
        var clearButton = document.getElementById("clear-canvas-btn");
        var cancelButton = document.getElementById("cancel-signature-btn");

        var saveButtonClone = saveButton.cloneNode(true);
        var clearButtonClone = clearButton.cloneNode(true);
        var cancelButtonClone = cancelButton.cloneNode(true);

        saveButton.parentNode.replaceChild(saveButtonClone, saveButton);
        clearButton.parentNode.replaceChild(clearButtonClone, clearButton);
        cancelButton.parentNode.replaceChild(cancelButtonClone, cancelButton);

        function saveBtnListener(event) {
            saveButtonClick(selectedServiceRecordOid);
        }

        function clearBtnListener(event) {
            clearButtonClick(signaturePad);
        }

        function cancelBtnListener(event) {
            cancelButtonClick(signaturePad);
        }

        saveButtonClone.addEventListener("click", saveBtnListener);

        clearButtonClone.addEventListener("click", clearBtnListener);

        cancelButtonClone.addEventListener("click", cancelBtnListener);
    });
}

// Die Button-Events
function saveButtonClick(selectedServiceRecordOid) {
    try {
        const date = moment(new Date());

        const clonedCanvas = trimCanvas(cloneCanvas(document.getElementById("sketch-pad")));

        const context = clonedCanvas.getContext("2d", {willReadFrequently: true});
        context.globalCompositeOperation = "destination-over";
        context.fillStyle = "white";
        context.fillRect(0, 0, clonedCanvas.width, clonedCanvas.height);

        const dataUrl = clonedCanvas.toDataURL("image/png");

        const formattedDate = date.format("DD.MM.YYYY HH:mm:ss");
        
        showSpinner();

        $(`#sr-sig-blob-${selectedServiceRecordOid}`).val(dataUrl);
        $(`#sr-sig-date-${selectedServiceRecordOid}`).val(formattedDate);
        $(`#save-signature-form-${selectedServiceRecordOid}`).submit();
    } catch (error) {
        window.showErrorPopup(error);
    }
}

function cancelButtonClick(signaturePad) {
    try {
        showMessagePopupWithCallback("Unterschrift", "Sind Sie sicher, dass Sie die Unterschrift nicht speichern möchten?",
            function () {
                $("#signature-container, #checkbox-container").removeClass("d-block");
                $("#signature-alert").addClass("d-none");
                $("#form-container").show();

                signaturePad.clear();
            }, false);
    } catch(error) {
        window.showErrorPopup(error);
    }
}

function clearButtonClick(signaturePad) {
    try {
        signaturePad.clear();
    } catch(error) {
        window.showErrorPopup(error);
    }
}