Subversion Repositories SmartDukaan

<style>
    .table-striped > tbody > tr:nth-child(odd) > td {
        background: white;
        background-color: white;
    }

    .table-striped > tbody > tr:nth-child(even) > td {
        background: white;
        background-color: white;
    }

    .table-striped > tbody > tr:hover > td,
    .table-striped > tbody > tr:hover {
        background-color: #e98c8f;
        color: white;
    }

    .btn:hover {
        color: grey;
        text-decoration: none;
    }

    .btn-primary:hover {
        color: grey;
        text-decoration: none;
    }

    .thumb-image-container {
        float: left;
        position: relative;
        padding: 5px;
    }

    .thumb-image {
        float: left;
        width: 250px;
        position: relative;
        padding: 5px;
    }

    .selectedItem {
        border: 2px solid blue;
    }
</style>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>CONTENT</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>CONTENT</li>
            </ol>
        </div>
    </div>
    <div id="upload-table">
        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal">
                    <label class="control-label col-sm-2" for="excelfile">Add Content CSV File:</label>
                    <div class="col-lg-3">
                        <div class="input-group">
                            <input class="form-control" type="file" id="entityupload" name="uploadfile"
                                   value="Upload Images">
                            <span class="input-group-btn">
                                                <button class="btn btn-default entityfileupload">
                                                            Upload
                                                        </button>
                                                </span>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <a class="btn btn-default" href="${rc.contextPath}/content/template.csv">
                            Download Template
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal">
                    <label class="control-label col-sm-2" for="excelfile">Add Catalog CSV File:</label>
                    <div class="col-lg-3">
                        <div class="input-group">
                            <input class="form-control" type="file" id="skupload" name="skuploadfile"
                                   value="Upload Images">
                            <span class="input-group-btn">
                                                <button class="btn btn-default catalogfileupload">
                                                            Upload
                                                        </button>
                                                </span>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <a class="btn btn-default" href="${rc.contextPath}/download/catalog-template.xls">
                            Download Template
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal">
                    <label class="control-label col-sm-2" for="videocsvfile">Upload Video Url CSV:</label>
                    <div class="col-lg-3">
                        <div class="input-group">
                            <input class="form-control" type="file" id="videocsv" name="videocsv">
                            <span class="input-group-btn">
                                    <button class="btn btn-default videofileupload">Upload</button>
                                </span>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <button onclick="downloadTestCSV()">Download Test CSV</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="wrapper" style="margin-top: 20px;" class="row">
        <form class="form-horizontal" id="mediaForm" method="POST" action="content/media/upload"
              enctype="multipart/form-data">
            <div class="row container">
                <div class="col-lg-4">
                    <div class="input-group">
                        <input type="text" class="form-control typeahead" id="entityData"
                               placeholder="Search for Entity">
                        <span class="input-group-btn">
                                <button id="loadImages" class="btn btn-default" type="button">Load Images</button>
                              </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-3">
                    <div>
                        <input id="fileUpload" multiple="multiple" type="file" class="form-control"/>
                    </div>
                </div>
                <div class="col-lg-2">
                    <input type="submit" class="btn btn-default" value="Upload Images">
                </div>
                <div class="col-lg-2">
                    <button id="btnDelete" class="btn btn-default">Delete Selected</button>
                </div>
            </div>
            <div id="image-holder">
            </div>
        </form>
    </div>
</section>
<script type="text/javascript">
    $(document).ready(function () {
        $('button.entityfileupload').on('click', function () {
            var fileSelector = $('#entityupload')[0];
            if (fileSelector != undefined && fileSelector.files[0] != undefined) {
                if (confirm("Confirm Upload?")) {
                    doAjaxUploadRequestHandler("${rc.contextPath}/content/upload", "POST", fileSelector.files[0], function (response) {
                        console.log("response ---content", response)
                        if (response) {
                            alert("Content updated successfully");
                        }
                    });
                }
            } else {
                alert("Please upload file!");
            }
            return false;
        });

        $(document).ready(function () {
            $('button.videofileupload').on('click', function () {

                var fileSelector = $('#videocsv')[0];

                if (fileSelector && fileSelector.files[0]) {

                    if (confirm("Confirm Video URL Upload?")) {

                        doAjaxUploadRequestHandler(
                                "/content/video/upload",     // <-- new endpoint
                                "POST",
                                fileSelector.files[0],
                                function (response) {
                                    if (response) {
                                        alert("Video URLs updated successfully!");
                                    }
                                }
                        );
                    }

                } else {
                    alert("Please upload CSV file!");
                }

                return false;
            });
        });



        $('button.catalogfileupload').on('click', function () {
            var fileSelector = $('#skupload')[0];
            if (fileSelector != undefined && fileSelector.files[0] != undefined) {
                if (confirm("Confirm Upload?")) {
                    doAjaxUploadRequestHandler("${rc.contextPath}/catalog/upload", "POST", fileSelector.files[0], function (response) {
                        if (response) {
                            alert("Items Added Successfully");
                        }
                    });
                }
            } else {
                alert("Please upload file!");
            }
            return false;
        });
    });
    $(document).ready(function () {
        $("#image-holder").on('click', '.thumb-image', function () {
            $(this).closest('.thumb-image-container').toggleClass("selectedItem");
        });
        $("#btnDelete").on("click", function () {
            $(".selectedItem").remove();
            return false;
        });
        $("#loadImages").on('click', function () {
            doGetAjaxRequestHandler(context + "/content/media?entityId=" + entityId, function (response) {
                debugger;
                if (response) {
                    response = JSON.parse(response);
                    var image_holder = $("#image-holder");
                    response.mediaPojos.forEach(function (value, index) {
                        var checked = index == response.defaultImageIndex;
                        var divObj =
                                $(`<div class="thumb-image-container">
                                                <div class="radio">
                                                        <label>
                                                        <input type="radio" name="optionsRadios">
                                                        Set as default
                                                        </label>
                                                </div>
                                                <div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
                                        </div>`).appendTo(image_holder);
                        var imgObject = $("<img />", {
                            "class": "thumb-image"
                        }).appendTo(divObj);
                        divObj.find('input[type=text]').val(value.title);
                        divObj.find('input:radio').prop("checked", checked);
                        url = new URL(value.url);
                        url.protocol = "https:";

                        fetch(url.toString(), {mode: 'no-cors'}).then(function (response) {
                            response.blob().then(function (blob) {
                                imgObject.src = URL.createObjectURL(blob);
                            });
                        });
                    });
                }
            });
        });
        $("#mediaForm").on("submit", function () {
            debugger;
            returnedValue = "";
            if (!$("input:radio[name='optionsRadios']").is(":checked")) {
                alert("Please check default image!");
            } else if (confirm("Are you sure?")) {
                var jsonObject = {};
                jsonObject.entityId = entityId;
                jsonObject.mediaPojos = [];
                $('#image-holder .thumb-image-container').each(function (index, ele) {
                    var title = $(ele).find("input:text").val().trim();
                    if (title.length == 0) {
                        alert("Descriptions are required!");
                    } else {
                        var mediaPojo = {};
                        mediaPojo.title = title;
                        mediaPojo.imageData = $(ele).find("img").attr("src");
                        debugger;
                        jsonObject.mediaPojos.push(mediaPojo);
                        if ($(ele).find("input:radio:checked").length > 0) {
                            jsonObject.defaultImageIndex = index;
                        }
                    }
                });
                doPostAjaxRequestWithJsonHandler("/content/media/upload", JSON.stringify(jsonObject), function (response) {
                    bootbox.alert("Images uploaded successfully");
                });

            }
            $(".selectedItem");
            return false;
        });

        $("#fileUpload").on('change', function () {
            //Get count of selected files
            var countFiles = this.files.length;
            var imgPath = this.value;
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            var image_holder = $("#image-holder");
            image_holder.remove(".new");
            if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == 'webp') {
                if (typeof (FileReader) != "undefined") {
                    //loop for each file selected for uploaded.
                    for (var i = 0; i < countFiles; i++) {
                        var reader = new FileReader();
                        var filename = this.files[i].name
                        reader.description = filename.substring(0, filename.lastIndexOf('.'));
                        reader.onload = function (e) {
                            var divObj =
                                    $(`<div class="thumb-image-container new">
                                        <div class="radio">
                                                <label>
                                                <input type="radio" name="optionsRadios">
                                                Set as default
                                                </label>
                                        </div>
                                        <div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
                                </div>`).appendTo(image_holder);
                            $("<img />", {
                                "src": e.target.result,
                                "class": "thumb-image"
                            }).appendTo(divObj);
                            divObj.find('input[type=text]').val(this.description);
                        }
                        reader.readAsDataURL(this.files[i]);
                    }
                } else {
                    alert("This browser does not support FileReader.");
                }
            } else {
                alert("Pls select only images");
            }
        });
        getEntityAheadOptions($("#entityData"), function (selectedEntity) {
            entityId = selectedEntity.catalogId_i;
        });
    });
    $(function () {
        $("#image-holder").sortable({
            tolerance: 'pointer',
            revert: 'invalid',
            placeholder: 'thumb-image-container',
            forceHelperSize: true
        });
    });

    function downloadTestCSV() {
        const csvContent =
                "serialNumber,catalogId,videoUrl\n" +
                "1,12345,https://cdn.example.com/videos/demo-video-1.mp4\n" +
                "2,12345,https://cdn.example.com/videos/demo-video-2.mp4\n" +
                "3,54321,https://cdn.example.com/videos/demo-video-3.mp4";

        const blob = new Blob([csvContent], {type: "text/csv;charset=utf-8;"});

        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = "video_upload_test.csv";
        link.click();
    }


</script>