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

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

function resizeCanvas(sketchPadId, canvasRoId) {
    if($(sketchPadId).length !== 0) {
        var rowWidth = $(canvasRoId).innerWidth();
        var sourceCanvas = document.getElementById(sketchPadId.split("#")[1]);

        var canvasWidth = sourceCanvas.scrollWidth;

        var newWidth = rowWidth;

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

        var 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});

            $(sketchPadId).prop("width", newWidth);

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

            var img = new Image;

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

                    var newHeight = parsedNewWidth * factor;

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

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

function initializeSignature(selectedServiceRecordOid) {
    $("#main-container, #checkbox-container").hide();
    $("#signature-container").addClass("d-block");

    $.get(getSelectedRecordInformationUrlWithOid(), { oid: selectedServiceRecordOid }).done(function(jsonServiceRecord2Monatsunterschrift) {
        if (jsonServiceRecord2Monatsunterschrift === "SessionTimeout") {
            window.location.href = getRedirectLink();
            return;
        }

        if (isEmptyOrSpaces(jsonServiceRecord2Monatsunterschrift)) {
            $("#main-container, #checkbox-container").show();
            $("#signature-container").removeClass("d-block");

            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");
        }

        resizeCanvas("#sketch-pad", "#canvas-row");

        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);
    });
}

function saveButtonClick(selectedServiceRecordOid) {
    try {
        var url = getSetSelectedSignatureUrl();
        var date = moment(new Date());

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

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

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

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

        showSpinner();

        $.post(url, {blob: dataUrl, timeStamp: formattedDate, serviceRecordOid: selectedServiceRecordOid}).done(function (json) {
            hideSpinner();

            if(json === "1") {
                $("#signature-container").removeClass("d-block");
                $("#main-container, #checkbox-container").show();
                showMessagePopupWithCallback("Unterschrift", "Die Unterschrift wurde erfolgreich gespeichert.", function () {
                    showSpinner();
                    $("#signature-alert").addClass("d-none");
                    location.reload();
                }, true);
            } else {
                var errorMessage = json === "0" ? "Es ist ein Fehler beim Speichern der Unterschrift aufgetreten. Bitte wenden Sie sich an Ihren Administrator." : json;

                showMessagePopup("Fehler", errorMessage);
                $("#signature-alert").addClass("d-none");
                signaturePad.clear();
            }
        });
    } catch (error) {
        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");
                $("#main-container").show();

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

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