Subversion Repositories SmartDukaan

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

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

        $('#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() || ''

        }

    };

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

});

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

});