vcomjs/src/AppJs.js

Vericom AppJs

import $ from 'jquery';
import 'jquery-blockui';
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

import Croppie from 'croppie';
import 'croppie/croppie.css';

import './vcom/sweetalert.min.js';
import './vcom/loading.css';
import './vcom/loader.css';
// jQuery global olarak tanımlanmalı
window.$ = window.jQuery = $;



//Block ON
 function BlockStart() {
    $.blockUI({
        message: ' <div class="lds-dual-ring center-block"></div>',
        css: {
            border: 'none',
            backgroundColor: 'rgba(0, 0, 0, 0)'
        }
    });
}

//Block Off
 function BlockStop() {
    try {
        $(document).ajaxStop($.unblockUI);
    } catch (e) {
        $.unblockUI();
    }
}

//Notification  (bg-info , bg-success , bg-danger)
 function ToastOpen(color, data, title) {
    if (color == "bg-info") {
        color = "#7ec0ee";
    }
    else if (color == "bg-success") {
        color = "#2e8b57";
    }
    else if (color == "bg-danger") {
        color = "#ff0000";
    }
    Toastify({
        text: data,
        duration: 3000, // Gösterim süresi (ms)
        gravity: "top", // "top" veya "bottom"
        position: "center", // "left", "center" veya "right"
        backgroundColor: color, // Yeşil renk
        close: false, // Kapatma düğmesi ekle
    }).showToast();
}

//Manuel Toast 
 function AddNotif(ms) {
    ToastOpen("bg-info", ms, _warning);
 }

 //Form içi input temizleme
function ClearForm(FormId) {
    $(FormId).find('input').val('');
}

//Tailwind Modal Açma
function OpenModal(ModalId) {
    $(ModalId).removeClass('hidden');
}

//Tailwind Modal Kapatma
function CloseModal(ModalId) {
    $(ModalId).addClass('hidden');
}

//Form Data Çeviri
 function GetFormDataAsJSON(form) {
    var formData = {};
    $(form).serializeArray().forEach(function (input) {
        formData[input.name] = input.value;
    });
    $(form).find('input[type="checkbox"]').each(function () {
        var name = $(this).attr('name');
        formData[name] = $(this).is(':checked'); // true or false
    });
    return formData;
}

//Div Güncelleme Loading..
 function DivLoad(divid, jdata, jurl) {
    return new Promise((resolve, reject) => {
        var jsonObject = jdata;
        console.log('Sending data:', jsonObject);
        console.log('Sending URL:', jurl);

        // Loader'ı ekle

        var loaderHtml = `<div class="loader" style="margin-left: auto;margin-right: auto;"></div>`;
        $(divid).html(loaderHtml);

        $.ajax({
            type: "POST",
            data: jsonObject,
            url: jurl,
            success: function (data) {
                // Yükleme tamamlandığında loader'ı kaldır ve içeriği yükle
                $(divid).html(data);
                resolve("Success");
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error:", error);
                $(divid).html(`<p style="color:red;">Hata oluştu!</p>`);
                reject(error);
            }
        });
    });
}

//div güncelleme loading olmadan
 function DivNoLoading(divid, jdata, jurl) {
    return new Promise((resolve, reject) => {
        var jsonObject = jdata;
        console.log('Sending data:', jsonObject);
        console.log('Sending URL:', jurl);
        $.ajax({
            type: "POST",
            data: jsonObject,
            url: jurl,
            success: function (data) {
                // Yükleme tamamlandığında loader'ı kaldır ve içeriği yükle
                $(divid).html(data);
                resolve("Success");
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error:", error);
                $(divid).html(`<p style="color:red;">Hata oluştu!</p>`);
                reject(error);
            }
        });
    });
}

//Kaydetme Metodu
 function AppAdd(jdata, jurl) {
    return new Promise((resolve, reject) => {
        BlockStart();
        var jsonObject = jdata;
        $.ajax({
            type: "POST",
            data: jsonObject,
            url: jurl,
            success: function (data) {
                //console.log(data);
                if (data.result == true) {
                    ToastOpen("bg-success", data.ms, _success);
                    resolve({ status: "Success", id: data.id || null, code: data.code || "" });
                } else {
                    ToastOpen("bg-info", data.ms, _warning);
                    resolve({ status: "Error", id: data.id || null, code: data.code || "" });
                }
            },
            error: function (data) {
                ToastOpen("bg-danger", data.ms, _error);
                resolve({ status: "Error", id: data.id || null, code: data.code || "" });
            }
        });
        BlockStop();
    });
}

//Form Data Kullanarak file dosya ekleme Metodu
 function AddCollection(jdata, purl) {
    return new Promise((resolve, reject) => {
        BlockStart();
        var jsonObject = jdata;
        $.ajax({
            type: "POST",
            data: jdata,
            contentType: false,
            processData: false,
            cache: false,
            url: purl,
            success: function (data) {
                if (data.result == true) {
                    ToastOpen("bg-success", data.ms, _success);
                    resolve({ status: "Success", id: data.id || null });

                } else {
                    ToastOpen("bg-info", data.ms, _warning);
                    resolve({ status: "Error", id: data.id || null });
                }
            },
            error: function (resault) {
                ToastOpen("bg-danger", data.ms, _error);
                resolve({ status: "Error", id: data.id || null });
            }
        });
        BlockStop();
    });
 }

 //Sweet Alert Onaylı işlem Data url Başlık ve açıklama içerir
function AppConfirm(jdata, jurl, title, text) {
    return new Promise((resolve, reject) => {
        swal({
            title: title,
            text: text,
            type: 'warning',
            buttons: {
                cancel: {
                    visible: true,
                    text: _cancel,
                    className: 'btn btn-danger'
                },
                confirm: {
                    text: _confirm,
                    className: 'btn btn-success'
                }
            }
        }).then((willDelete) => {
            if (willDelete) {
                var jsonObject = jdata;
                $.ajax({
                    type: "POST",
                    data: jsonObject,
                    url: jurl,
                    success: function (data) {
                        if (data.result == true) {
                            ToastOpen("bg-success", data.ms, _success);
                            resolve("Success");
                        } else {
                            ToastOpen("bg-info", data.ms, _warning);
                            resolve("Error");
                        }
                    },
                    error: function (resault) {
                        ToastOpen("bg-info", data.ms, _error);
                        resolve("Error");
                    }
                })
            }
            else {
                resolve("hata");
                swal(_transactioncanceled, {
                    buttons: {
                        confirm: {
                            className: 'btn btn-success'
                        }
                    }
                });
            }
        });
    });
}

//İmage Cropper
function ImageCrop( cropperId, ModalId ) {
    var rawImg;
    var basic = $(cropper).croppie
        ({
            viewport: { width: 400, height: 400 },
            boundary: { width: 500, height: 500 },
            showZoomer: true,
            url: '/img/news/1.jpeg',
            format: 'jpeg' | 'png',
            resizeControls: { width: true, height: true },
            enableResize: false,
            showZoomer: true,
            mouseWheelZoom: true,
            enableExif: true,
            enforceBoundary: true,
            enableOrientation: false,
            enableKeyMovement: true,
        });
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                rawImg = e.target.result;
                //$('#main-cropper').addClass('ready');
                $(ModalId).modal('show');

            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(ModalId).on('shown.bs.modal', function () {
        // alert('Shown pop');
        basic.croppie('bind', {
            url: rawImg
        }).then(function () {
            console.log('jQuery bind complete');
        });
    });
    $('#Attachment').on('change', function () {
        $(ModalId).modal('show');
        readFile(this);
    });
    $('#cropImageBtn').on('click', function (ev) {
        basic.croppie('result', {
            type: 'canvas',
            size: 'viewport',
            format: 'jpeg'
        }).then(function (resp) {
            $('#item-img-output').attr('src', resp);
            $(ModalId).modal('hide');
            SaveImg(resp);
        });
    });
}

//Anlık kaydetme yok
function ImageCropDontSave(cropperId, ModalId) {
    var rawImg;
    var basic = $(cropperId).croppie
        ({
            viewport: { width: 400, height: 400 },
            boundary: { width: 500, height: 500 },
            showZoomer: true,
            url: '/img/news/1.jpeg',
            format: 'jpeg' | 'png',
            resizeControls: { width: true, height: true },
            enableResize: false,
            showZoomer: true,
            mouseWheelZoom: true,
            enableExif: true,
            enforceBoundary: true,
            enableOrientation: false,
            enableKeyMovement: true,
        });
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                rawImg = e.target.result;
                //$('#main-cropper').addClass('ready');
                $(ModalId).modal('show');

            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(ModalId).on('shown.bs.modal', function () {
        // alert('Shown pop');
        basic.croppie('bind', {
            url: rawImg
        }).then(function () {
            console.log('jQuery bind complete');
        });
    });

    // Change Event to Read file content from File input
    $('#Attachment').on('change', function () {
        $(ModalId).modal('show');
        readFile(this);
    });


    $('#cropImageBtn').on('click', function (ev) {
        basic.croppie('result', {
            type: 'canvas',
            size: 'viewport',
            format: 'jpeg'
        }).then(function (resp) {
            $('#item-img-output').attr('src', resp);
            $(ModalId).modal('hide');
        });
    });
}


export {
    BlockStart,
    BlockStop,
    ToastOpen,
    AddNotif,
    GetFormDataAsJSON,
    DivLoad,
    DivNoLoading,
    AppAdd,
    AddCollection,
    ImageCrop,
    ImageCropDontSave,
    ClearForm,
    OpenModal,
    CloseModal,
    AppConfirm
};