Admin Control Panel v2.0

✎ Editing: add.blade - Copy.php ← Back

@include('admin.common.header')
<style>
 
</style>
@include('admin.common.leftmenu') 
    <aside class="right-side">
                
                <section class="content-header">
                    <h1>
                        Image Gallery
                        <small>Control panel</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li>Image Gallery</li> <li class="active">Upload</li>
                    </ol>
                </section>

<section class="content">
  					<div class="box box-warning">
                        <div class="box-header">
                        <h3 class="box-title">Image Gallery</h3>
                      </div>
  					
					
			
			<div class="box-body">
			<?php 	 echo (!empty($messages))?$messages:'';	?>
			
			
			
			<div class="row">	
				
				
			<div class="row" id="container">
				<div class="fileUploadBtnWrap col-sm-12">
					<button id="pickfiles">Add Photos</button>	
					<button id="start">Upload <div id="loader" style="display:none"><img src="{{ asset('assets/admin/images/loader.gif'); }}" /></div></button>
					
					<div id="upProgWrapper fileUploadProgressBtnWrap">
						<div id="upProg"></div>
					</div>		
				</div>	
			</div>
			<div class="row">
				<div id="old_gallery" class="col-sm-12">
					
				</div>
				<div class="clearfix"></div>
			</div>
		  </div> 				   
</div>
</section>
</aside>
<script src="<?php echo asset('/assets/admin/js/fu/plupload.full.min.js');?>" type="text/javascript"></script>
<script>
function delete_gallery_image(id,elem){
	$.ajax({
			url:'<?php echo asset('/admin/image-gallery/delete/'); ?>/'+id,
			type:'get',
			async:false,
			data:{},
			dataType:'json',
			statusCode: {
				302:function(){ alert('Forbidden. Access Restricted'); },
				403:function(){ alert('Forbidden. Access Restricted','403'); },
				404:function(){ alert('Page not found','404'); },
				500:function(){ alert('Internal Server Error','500'); }
			}
		}).done(function(responseData){
				if(responseData.status==true){
					elem.closest('.imageHolder').remove();
				}				
		}).error(function(jqXHR,textStatus){
				t = false;
		});
}
function get_Image_gallery(ImageID){
	$('#old_gallery').html('');	
		$('#loader').show();
	$.ajax({
			url:'<?php echo asset('/admin/image-gallery/get_old_files/'); ?>',
			type:'post',
			async:false,
			data:{categoryID:$('#categoryID option:selected').val()},
			dataType:'json',
			statusCode: {
				302:function(){ alert('Forbidden. Access Restricted'); 	$('#loader').hide();},
				403:function(){ alert('Forbidden. Access Restricted','403'); 	$('#loader').hide();},
				404:function(){ alert('Page not found','404'); 	$('#loader').hide();},
				500:function(){ alert('Internal Server Error','500'); 	$('#loader').hide();}
			}
		}).done(function(responseData){
				if(responseData.status==true){
					
					var images = responseData.gallery;
					// console.log(images.length)
					if(images.length==0){
						alert('No Images found!');
					}
					for(var kk=0,ll=images.length;kk<ll;kk++){
							$('#old_gallery').append('<div class="col-sm-3"><div class="imageHolder"><h3>'+images[kk].category_name+'</h3><img src="<?php echo asset('assets/uploads/image_gallery/thumb/')?>/'+images[kk].gallery_image_name+'"/><a class="downImg" href="<?php echo asset('admin/image-gallery/download/')?>/'+images[kk].gallery_image_name+'"><i class="fa fa-download"></i></a><span class="delGalImg" data-id="'+images[kk].gallery_id+'"></span></div></div>');
					}
				}	
				$('#loader').hide();				
		}).error(function(jqXHR,textStatus){
				t = false;
					$('#loader').hide();
		});
}
	
	$(document).ready(function(){
				var cusBaseURL = '<?php echo asset('/'); ?>';
				/* $('.delGalImg').on('click',function(e){
					console.log('asd')	
					if(confirm('Are you sure you want to delete?')==true){
							delete_gallery_image($(this).attr('data-id'),$(this));
					}
				}); */
				$('#addCategory').on('click',function(){
					 if( !$('#new_category_en').val() ) return;
					 $.ajax({
						url:'<?php echo asset('/admin/image-gallery/create_category/'); ?>', 
						type:'post',
						async:false,
						data:{category_en:$('#new_category_en').val(),category_ar:$('#new_category_ar').val()},
						dataType:'json',
						statusCode: {
							302:function(){ alert('Forbidden. Access Restricted'); },
							403:function(){ alert('Forbidden. Access Restricted','403'); },
							404:function(){ alert('Page not found','404'); },
							500:function(){ alert('Internal Server Error','500'); }
						}
					}).done(function(responseData){
							if(responseData.status==true){
								alert('New Category Created');
								$('#categoryID').append($("<option></option>")
								 .attr("value",responseData.category_id)
								 .text(responseData.category_name)); 
							}				
					}).error(function(jqXHR,textStatus){
							t = false;
					});
				});
				$('#old_gallery').on('click','.delGalImg',function(e){
					// console.log('asd')	
					if(confirm('Are you sure you want to delete?')==true){
							delete_gallery_image($(this).attr('data-id'),$(this));
					}
				});
				$('#categoryID').on('change',function(){
						$('#categoryID option:selected').val($(this).val());
						get_Image_gallery($('#categoryID option:selected').val());
				});
				get_Image_gallery();
				var uploader = new plupload.Uploader({
									runtimes : 'html5,flash,silverlight,html4',
									browse_button : 'pickfiles', // you can pass in id...
									container: document.getElementById('container'), // ... or DOM Element itself
									url : '<?php echo asset('/admin/image-gallery/file-upload')?>/'+$('#categoryID option:selected').val(),
									flash_swf_url : '<?php echo asset('assets/admin/js/fu/Moxie.swf')?>',
									silverlight_xap_url :  '<?php echo asset('assets/admin/js/fu/Moxie.xap')?>',
									
									filters : {
										max_file_size : '10mb',
										mime_types: [
											{title : "Image files", extensions : "jpg,gif,png"},
										]
									},
									multipart_params : {
											"ImageIDE" : $( "#categoryID option:selected" ).val(),
										},
									init: {
										PostInit: function() {
											// document.getElementById('filelist').innerHTML = '';

UploadProgress: function(up, file) {
											// document.getElementById('upProg').innerHTML = '<span>' + file.percent + "%</span>";
											// $('#upProg').Image().show();
											// $('#upProg').Image().css({'border':'1px solid #ccc'});
											// $('#upProg').css({width:file.percent+"%",'height':'5px'});
										},
										FileUploaded:function(up,file,response){
											//document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
											// console.log(response.response)
											var t = response.response;
											// console.log(t);
											var rt  = $.parseJSON(t);
											// rt = rt[0];
											if(rt.status == true ){
													$('#old_gallery').append('<div class="col-sm-3"><div class="imageHolder"><h3>'+rt.category_name+'</h3><img src="<?php echo asset('assets/uploads/image_gallery/thumb/')?>/'+rt.fileName+'"/><a class="downImg" href="<?php echo asset('admin/image-gallery/download/')?>'+rt.fileName+'"><i class="fa fa-download"></i></a> <span class="delGalImg" data-id="'+rt.id+'"></span></div></div>');
											}
										},
										UploadComplete:function(up,files){
											// $('#upProg').css({width:"0%",'height':'0px'});
											// $('#upProg').Image().hide();
											$('#loader').hide();
										},
										Error: function(up, err) {
											document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
										}
									}
								});

uploader.init();
		});
</script>
@include('admin.common.footer')

Cancel