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">
                        <form class="form-horizontal">
                                <label class="control-label col-sm-2" for="excelfile">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">
                                                            Uplaod
                                                        </button>
                                                </span>
                                        </div>
                            </div>
                        <div class="col-lg-2">
                                <a class="btn btn-default" href="${rc.contextPath}/content/template.csv">
                                            Download Tempate
                                        </a>
                        </div>
                    </form>
            </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){
                                        if(response) {
                                                alert("Content updated 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(data) {
                                                var objectURL = URL.createObjectURL(data.blob());
                                                imgObject.src = objectUrl;
                                        });
                                });
                        }
                });
        });
        $("#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") {
            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
    });
});

</script>