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

	});

});

</script>