Subversion Repositories SmartDukaan

Rev

Rev 34859 | Blame | Compare with Previous | Last modification | View Log | RSS feed

const rightHero = `<table class="table table-bordered" id="rightHero">
                        <tr>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Left Image" id="topLeftImage" width="300">
                                <input type="file" class="topLeftFile" style="display: none;">
                                <input type="hidden" id="topLeftFile">
                                <input id="topLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Left Image" id="bottomLeftImage" width="300">
                                <input type="file" class="bottomLeftFile" style="display: none;">
                                <input type="hidden" id="bottomLeftFile">
                                <input id="bottomLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Right Image" id="topRightImage" width="300">
                                <input type="file" class="topRightFile" style="display: none;">
                                <input type="hidden" id="topRightFile">
                                <input id="topRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Right Image" id="bottomRightImage" width="300">
                                <input type="file" class="bottomRightFile" style="display: none;">
                                <input type="hidden" id="bottomRightFile">
                                <input id="bottomRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td rowspan="2">
                                <img src="https://placehold.co/600x400" alt="Hero Image" id="heroImage" width="300">
                                <input type="file" class="heroFile" style="display: none;">
                                <input type="hidden" id="heroFile">
                                <input id="heroLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                    </table>`,
leftHero = `<table class="table table-bordered" id="leftHero">
                        <tr>
                            <td rowspan="2">
                                <img src="https://placehold.co/600x400" alt="Hero Image" id="heroImage" width="300">
                                <input type="file" class="heroFile" style="display: none;">
                                <input type="hidden" id="heroFile">
                                <input id="heroLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Left Image" id="topLeftImage" width="300">
                                <input type="file" class="topLeftFile" style="display: none;">
                                <input type="hidden" id="topLeftFile">
                                <input id="topLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Left Image" id="bottomLeftImage" width="300">
                                <input type="file" class="bottomLeftFile" style="display: none;">
                                <input type="hidden" id="bottomLeftFile">
                                <input id="bottomLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Right Image" id="topRightImage" width="300">
                                <input type="file" class="topRightFile" style="display: none;">
                                <input type="hidden" id="topRightFile">
                                <input id="topRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Right Image" id="bottomRightImage" width="300">
                                <input type="file" class="bottomRightFile" style="display: none;">
                                <input type="hidden" id="bottomRightFile">
                                <input id="bottomRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                    </table>`,
centerHero = `<table class="table table-bordered" id="centerHero">
                        <tr>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Left Image" id="topLeftImage" width="300">
                                <input type="file" class="topLeftFile" style="display: none;">
                                <input type="hidden" id="topLeftFile">
                                <input id="topLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td rowspan="2">
                                <img src="https://placehold.co/600x400" alt="Hero Image" id="heroImage" width="300">
                                <input type="file" class="heroFile" style="display: none;">
                                <input type="hidden" id="heroFile">
                                <input id="heroLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Left Image" id="bottomLeftImage" width="300">
                                <input type="file" class="bottomLeftFile" style="display: none;">
                                <input type="hidden" id="bottomLeftFile">
                                <input id="bottomLeftLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Top Right Image" id="topRightImage" width="300">
                                <input type="file" class="topRightFile" style="display: none;">
                                <input type="hidden" id="topRightFile">
                                <input id="topRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                            <td>
                                <img src="https://placehold.co/300x200" alt="Bottom Right Image" id="bottomRightImage" width="300">
                                <input type="file" class="bottomRightFile" style="display: none;">
                                <input type="hidden" id="bottomRightFile">
                                <input id="bottomRightLink" class="form-control" placeholder="Redirection Link">
                            </td>
                        </tr>
                    </table>`;
doubleHero = `<table class="table table-bordered" id="doubleHero">
                <tr>
                    <td>
                        <img src="https://placehold.co/300x200" alt="Image" id="topLeftImage" width="300">
                        <input type="file" class="doubleLeftFile" style="display: none;">
                        <input type="hidden" id="doubleLeftFile">
                        <input id="doubleLeftLink" class="form-control" placeholder="Redirection Link">
                    </td>
                    <td>
                        <img src="https://placehold.co/300x200" alt="Image" id="bottomLeftImage" width="300">
                        <input type="file" class="doubleRightFile" style="display: none;">
                        <input type="hidden" id="doubleRightFile">
                        <input id="doubleRightLink" class="form-control" placeholder="Redirection Link">
                    </td>
                </tr>
            </table>`;
singleHero = `<table class="table table-bordered" id="singleHero">
                <tr>
                    <td>
                        <img src="https://placehold.co/600x300" alt="Image" id="topLeftImage" width="300">
                        <input type="file" class="singleFile" style="display: none;">
                        <input type="hidden" id="singleFile">
                        <input id="singleLink" class="form-control" placeholder="Redirection Link">
                    </td>
                </tr>
            </table>`;
function patchSectionData(sectionData) {
    const container = $('.style-container');
    container.find('#heroFile').val(sectionData.hero.image.split('/').filter(Boolean).pop());
    container.find('#heroLink').val(sectionData.hero.link);
    container.find('#heroImage').attr('src',sectionData.hero.image);

    container.find('#topLeftFile').val(sectionData.leftTop.image.split('/').filter(Boolean).pop());
    container.find('#topLeftLink').val(sectionData.leftTop.link);
    container.find('#topLeftImage').attr('src',sectionData.leftTop.image);

    container.find('#bottomLeftFile').val(sectionData.leftBottom.image.split('/').filter(Boolean).pop());
    container.find('#bottomLeftLink').val(sectionData.leftBottom.link);
    container.find('#bottomLeftImage').attr('src',sectionData.leftBottom.image);

    container.find('#bottomRightFile').val(sectionData.rightTop.image.split('/').filter(Boolean).pop());
    container.find('#bottomRightLink').val(sectionData.rightTop.link);
    container.find('#bottomRightImage').attr('src',sectionData.rightTop.image);

    container.find('#topRightFile').val(sectionData.rightBottom.image.split('/').filter(Boolean).pop());
    container.find('#topRightLink').val(sectionData.rightBottom.link);
    container.find('#topRightImage').attr('src',sectionData.rightBottom.image);
}
$(document).on('click', ".pages-list", function () {
    doGetAjaxRequestHandler(context + "/pages", (response) => {
        $('#main-content').html(response);
        //$('#pages-list').DataTable();
        console.log('loaderDialogObj',loaderDialogObj);
    });
});

$(document).on('click', '.view-page', function (ev) {
    ev.preventDefault();
    let pageId = $(this).parent().parent('tr').data('id');
    doGetAjaxRequestHandler(context + "/pages/"+pageId,(response) => {
        const sectionData = JSON.parse(response.sectionData);
        $('#id').val(response.id);
        $('#title').val(response.title);
        $('#tabTitle').val(response.tabTitle);
        $('#visible_on').val(response.visibleOn).trigger('change');
        $('#section_order').val(response.sectionOrder);
        $('#group').val(response.sectionGroup).trigger('change');
        $('#style').val(sectionData.style+'Hero').trigger('change');
        $('#below').val(response.sectionBelow).trigger('change');
        $('#status').prop('checked', response.status);
        patchSectionData(sectionData);
        $('#managePagesModal').modal('show');
    });
});

function validateRequiredFields(fields) {
    let isValid = true;
    fields.each(function () {
        if (!$(this).val()) {
            isValid = false;
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });
    return isValid;
}

$(document).on('click', ".save_page", function () {
    const selectedStyle = $('#style').val();
    const imgURL = $('#imgURL').val();

    if (!selectedStyle) {
        alert("Please select a style");
        return;
    }

    const container = $('.style-container');
    const styleEntry = {
        style: selectedStyle.replace('Hero', '').toLowerCase(),
        hero: {
            image: imgURL+container.find('#heroFile').val() || '',
            link: container.find('#heroLink').val() || ''
        },
        leftTop: {
            image: imgURL+container.find('#topLeftFile').val() || '',
            link: container.find('#topLeftLink').val() || ''
        },
        leftBottom: {
            image: imgURL+container.find('#bottomLeftFile').val() || '',
            link: container.find('#bottomLeftLink').val() || ''
        },
        rightTop: {
            image: imgURL+container.find('#topRightFile').val() || '',
            link: container.find('#topRightLink').val() || ''
        },
        rightBottom: {
            image: imgURL+container.find('#bottomRightFile').val() || '',
            link: container.find('#bottomRightLink').val() || ''
        },
        doubleLeft: {
            image: imgURL+container.find('#doubleLeftFile').val() || '',
            link: container.find('#doubleLeftLink').val() || ''
        },
        doubleRight: {
            image: imgURL+container.find('#doubleRightFile').val() || '',
            link: container.find('#doubleRightLink').val() || ''
        },
        single: {
            image: imgURL+container.find('#singleFile').val() || '',
            link: container.find('#singleLink').val() || ''
        }
    };


    const params = {
        id: $('#id').val() || 0,
        title: $('#title').val() || 'Untitled',
        visibleOn: $('#visible_on').val() || 'Home',
        tabTitle: $('#tabTitle').val() || 'Untitled',
        sectionGroup: $('#group').val() || 'Parent',
        sectionOrder: $('#section_order').val() ||  0,
        sectionData: JSON.stringify(styleEntry),
        sectionBelow: $('#below').val(),
        status: $('#status').prop('checked'),
    };
    console.log('params:', params);
    doAjaxRequestWithJsonHandler(context + "/pages", "POST", JSON.stringify(params), (response) => {
        if (response) {
            $('.pages-list').trigger('click');
            $('#managePagesModal').modal('hide');
            alert("Saved successfully");
        } else {
            alert("Something went wrong!");
        }
    });
});

$(document).on('click', ".delete-page", function() {
    const id = parseInt($(this).closest('td').data('id')) || 0;
    console.log("id",id);
    if (confirm("Are you sure you want to delete this record")) {
        if (id > 0) {
            doDeleteAjaxRequestHandler(context + "/pages/" + id, (response) => {
                if (response) {
                    $(this).parent('td').closest('tr').remove();
                    $('.pages-list').trigger('click');
                    alert("Deleted successfully");
                } else {
                    alert("Something went wrong!");
                }
            });
        } else {
            $(this).parent('td').closest('tr').remove();
        }
    }
});

$(document).on('change', "#style", function() {
    var selectedStyle = $(this).val();
    $('.style-container').empty();
    if (selectedStyle === 'leftHero') $('.style-container').append(leftHero);
    if (selectedStyle === 'rightHero') $('.style-container').append(rightHero);
    if (selectedStyle === 'centerHero') $('.style-container').append(centerHero);
    if (selectedStyle === 'doubleHero') $('.style-container').append(doubleHero);
    if (selectedStyle === 'singleHero') $('.style-container').append(singleHero);
});

$(document).on('click', '.style-container img', function () {
    const container = $(this).closest('td');
    const fileInput = container.find('input[type="file"]');
    fileInput.click();
});

$(document).on('change', '.style-container input[type="file"]', function (event) {
    const files = event.target.files;
    if (files.length > 0) {
        const container = $(this).closest('td');
        const img = container.find('img').first();
        const hiddenInput = container.find('input[type="hidden"]');

        img.attr('src', URL.createObjectURL(files[0]));
        img.on('load', function () {
            URL.revokeObjectURL(img.attr('src'));
        });

        uploadDocument(files[0], function (id) {
            hiddenInput.val(id);
        });
    }
});

$(document).on('change', '#group', function (event) {
    if ($(this).val() == '') $('.optional').show();
    else $('.optional').hide();
});