BeWoPlaner/BeWoPlanerMobil/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 canvasWidth = $(sketchPadId).innerWidth();

        var h = $(window).height();
        var w = $(window).width();

        var isInPortraitMode = h > w;

        var newWidth = rowWidth * (isInPortraitMode === true ? 1.0 : 0.85);

        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 sourceCanvas = document.getElementById(sketchPadId.split("#")[1]);
            var canvasContext = sourceCanvas.getContext("2d");
            var imageData = sourceCanvas.toDataURL("image/png");

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

            var img = new Image;

            img.onload = function() {
                canvasContext.drawImage(img, 0, 0);
            };

            img.src = imageData;
        }
    }
}

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

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

        if (isEmptyOrSpaces(jsonServiceRecord)) {
            $("#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;
        }

        var record = $.parseJSON(jsonServiceRecord);

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

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

        saveButton.addEventListener("click", function(event) {
            var url = getSetSelectedSignatureUrl();
            var date = moment(new Date());

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

            var context = clonedCanvas.getContext("2d");
            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(isEmptyOrSpaces(json)) {
                    $("#signature-container").removeClass("d-block");
                    $("#main-container, #checkbox-container").show();
                    showMessagePopupWithCallback("Unterschrift", "Die Unterschrift wurde erfolgreich gespeichert.", function() {
                        showSpinner();
                        location.reload();
                    }, true);
                } else {
                    showMessagePopup("Fehler", json);
                    signaturePad.clear();
                }
            });
        });

        clearButton.addEventListener("click", function(event) {
            signaturePad.clear();
        });

        cancelButton.addEventListener("click", function(event) {
            showMessagePopupWithCallback("Unterschrift", "Sind Sie sicher, dass Sie die Unterschrift nicht speichern möchten?",
                function() {
                    $("#signature-container, #checkbox-container").removeClass("d-block");
                    $("#main-container").show();

                    signaturePad.clear();
                }, false);
        });
    });
}