- hackpoint correctifs

js/plugins.js

@@ -470,6 +470,7 @@ $.fn.extend({
 			var obj = $(this); 
 			var model = null;
 			var container = null;
+			
 			option = $.extend({showItems:true},option);
 			var preloader = null;
 			if(option.preloader){
@@ -520,7 +521,7 @@ $.fn.extend({
 					container.append(line);
 
 					if(option.showItems){
-						line.show().removeClass('hidden');
+						line.removeClass('hidden').removeClass('hide');
 					}
 					
 

plugin/hackpoint/action.php

@@ -341,9 +341,23 @@ switch($_['action']){
 
 
 
-		/** PART **/
-	//Récuperation d'une liste de part
+	/** PART **/
+
 	case 'hackpoint_part_search':
+		Action::write(function(&$response){
+			global $myUser,$_;
+			require_once(__DIR__.SLASH.'Part.class.php');
+
+			foreach(Part::loadAll(array('state'=>Part::ACTIVE)) as $part){
+			
+				$row = $part->toArray();
+				$row['picture'] = $part->picture(true);
+				$response['rows'][] = $row;
+			}
+		});
+	break;
+	//Récuperation d'une liste de part
+	case 'hackpoint_resource_part_search':
 		Action::write(function(&$response){
 			global $myUser,$_;
 			
@@ -482,7 +496,9 @@ switch($_['action']){
 	                $response['rows'][] = array(
 	                	'name'=>html_entity_decode($part->label, ENT_QUOTES),
 						'id'=>$part->id,
-						'picture' => $part->picture()
+						'price'=>$part->price,
+						'brand'=>$part->brand,
+						'picture' => $part->picture(true)
 					);
 	        	}
 		        

plugin/hackpoint/css/main.css

@@ -1,5 +1,29 @@
 /** HACKPOINT **/
 
+.hackpoint-preloader {
+    color: #7bafe2;
+    font-size: 19px;
+    text-align: center;
+    border-radius: 100%;
+    z-index: 10001;
+    background-color: #272c31;
+    padding: 6px 5px 5px 5px;
+    position: absolute;
+    top: 15px;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    box-shadow: 1px 0px 2px rgba(0,0,0,0.5);
+    transform: translateY(-40px);
+    transition: all 0.1s ease-in-out;
+    opacity:0;
+}
+
+.hackpoint-preloader.show {
+	opacity:1;
+    transform: translateY(0px);
+}
+
 /* Conteneur principal du plugin hackpoint */
 .hackpoint {
 	height: 100%;
@@ -23,6 +47,7 @@
     font-weight: bold;
 }
 
+
 #sketchs .card .progress{
 	cursor: pointer;
 }
@@ -133,6 +158,7 @@
 	position:relative;
 }
 #resources-toolbar .resources-menu-container{
+	width:120px;
 	padding-bottom: 40px;
     height: 100%;
     overflow: auto;
@@ -359,6 +385,7 @@ div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
 	margin:0;
 	padding:0;
 }
+
 #parts li{
 	width:15%;
 	min-width: 250px;
@@ -425,4 +452,11 @@ div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
 #parts li .part .link:hover{
 	opacity:0.9;
 	transform:  rotate(180deg);
+}
+
+
+.part-list .picture{
+	width: 150px;
+	height: 150px;
+	border-radius: 3px;
 }

plugin/hackpoint/hackpoint.plugin.php

@@ -12,6 +12,13 @@ function hackpoint_menu(&$menuItems){
 		'icon'=> 'fas fa-wrench',
 		'color'=> '#3498db'
 	);
+	$menuItems[] = array(
+		'sort'=>3,
+		'url'=>'index.php?module=hackpoint&page=list.part',
+		'label'=>'Composants',
+		'icon'=> 'fas fa-microchip',
+		'color'=> '#3498db'
+	);
 }
 
 //Cette fonction va generer une page quand on clique sur hackpoint dans menu

plugin/hackpoint/js/component.js

@@ -66,20 +66,30 @@ function init_components_part(input){
 			},
 			skin : function(item){
 				var html = '';
-
-				var re = new RegExp(partPicker.val(),"gi");
+					name = item.name;
+				/*var re = new RegExp(partPicker.val(),"gi");
 
 				name = item.name.replace(re, function (x) {
 					return '<strong>'+x+'</strong>';
-				});
+				});*/
 
-				html += '<div class="part-logo d-inline mr-2"><img src="'+item.picture+'" class="avatar-mini avatar-rounded"></div>'; 
+				html += '<div class="part-logo d-inline mr-2"><img src="data:'+item.picture+'" class="avatar-mini avatar-rounded"></div>'; 
 				html += '<div class="user-infos d-inline"><span>'+name+'</span>'; 
 				html += '<div class="clear"></div>';
 				
 				return html;
 			},
+			highlight : function(item){
+						return item;
+			},
 			onClick : function(selected,element){
+				console.log(selected,element);
+				var li = $(element).closest('li');
+				li.attr('data-part',selected.id);
+				li.find('.price input').val(selected.price);
+				li.find('.brand input').val(selected.brand);
+				li.find('.part-image').css('background','url(data:'+selected.picture+') 0% 0% / cover');
+				li.find('.part-image').attr('data-stream','data:'+selected.picture);
 				input.val(selected.id);
 				input.trigger('change');
 			},
@@ -106,21 +116,23 @@ function init_components_dropimage(input){
 		input.css('cursor','pointer');
 	}
 
+
 	input.click(function(e){
 		e.preventDefault();
 		e.stopPropagation();
 		
 		picker.trigger('click');
 		picker.change(function(){
+			preloader(true);
 			var file = picker.get(0).files[0];
 			 var reader  = new FileReader();
 			 reader.addEventListener("load", function () {
-			
+				
 			    input.attr('src',reader.result);
 			    if(input.attr('data-callback')!=""){
 			    	var callback = input.attr('data-callback');
-			    	
 			    	window[callback](input,reader.result);
+			    	preloader(false);
 			    }
 
 			  }, false);
@@ -132,16 +144,25 @@ function init_components_dropimage(input){
 		   e.stopPropagation();
 	})
 	input.on('drop', function (e) {
+		preloader(true);
 		var droppedFiles = e.originalEvent.dataTransfer.files;
 		var reader = new FileReader();
 		   reader.readAsDataURL(droppedFiles[0]);
 		   reader.onload = function () {
 		   
 		    input.attr('src',reader.result);
+		    if(input.attr('data-callback')!=""){
+			    var callback = input.attr('data-callback');
+			    window[callback](input,reader.result);
+			    preloader(false);
+			 }
 		   };
 		   reader.onerror = function (error) {
 		     console.log('Error: ', error);
+		     preloader(false);
 		   };
 
 	});
 }
+
+

plugin/hackpoint/js/main.js

@@ -7,6 +7,9 @@ function init_plugin_hackpoint(){
 				init_components();
 			}
 		break;
+		case 'list.part':
+			hackpoint_part_search();
+		break;
 		default:
 		break;
 	}
@@ -35,6 +38,44 @@ function hackpoint_setting_save(){
 
 /** PART **/
 	
+
+//Récuperation d'une liste de part dans le tableau #parts
+function hackpoint_resource_part_search(callback){
+	
+		
+	$('#parts').fill({
+		action:'hackpoint_resource_part_search',
+		resource : $('#sketch-editor').attr('data-id'),
+		showItems : false
+	},function(){
+		$('#parts li:not(:eq(0))').each(function(i,li){
+
+			hackpoint_resource_part_upload(li);
+
+			var div  = $('[data-stream]',li);
+
+			if($(div).attr('data-stream') =='') return;
+			$(div).css('background','url(data:'+$(div).attr('data-stream')+')')
+		     	.css('background-size','cover');
+		});
+
+
+		$('#parts li:not(:eq(0))').css('transform','scale(0)').removeClass('hidden')
+
+		$('#parts li:not(:eq(0))').each(function(i,li){
+			var li = $(li);
+			setTimeout(function(){
+				li.css('transform','scale(1)');
+			},i*200);
+		});
+		
+		
+
+		if(callback!=null) callback();
+	});
+}
+
+
 //Récuperation d'une liste de part dans le tableau #parts
 function hackpoint_part_search(callback){
 	
@@ -42,7 +83,6 @@ function hackpoint_part_search(callback){
 	$('#parts').fill({
 		action:'hackpoint_part_search',
 		resource : $('#sketch-editor').attr('data-id'),
-		showItems : false
 	},function(){
 		$('#parts li:not(:eq(0))').each(function(i,li){
 
@@ -559,3 +599,19 @@ function hackpoint_resource_delete(element,event){
 		
 	});
 }
+
+
+function preloader(mode){
+	var preloader = $('.hackpoint-preloader');
+	if(preloader.length==0){
+		preloader = $('<div class="hackpoint-preloader" title="Chargement..."><i class="fas fa-circle-notch fa-spin"></i></div>');
+		$('body').append(preloader);
+	}
+	setTimeout(function(){
+		if(mode){
+			preloader.addClass('show');
+		}else{
+			preloader.removeClass('show');
+		}
+	},50);
+}

plugin/hackpoint/page.list.part.php

@@ -23,37 +23,44 @@ require_once(__DIR__.SLASH.'Part.class.php');
 <div class="row">
 	<!-- search results -->
 	<div class="col-xl-12">
-		<table id="parts" class="table table-striped " data-entity-search="hackpoint_part_search">
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th data-sortable="label">Libellé</th>
-                    <th data-sortable="price">Prix moyen</th>
-                    <th data-sortable="link">Lien</th>
-                    <th data-sortable="brand">Marque</th>
-                    <th></th>
-                </tr>
-            </thead>
-            
-            <tbody>
-                <tr data-id="{{id}}" class="hidden">
-	                <td>{{id}}</td>
-	                <td>{{label}}</td>
-	                <td>{{price}}</td>
-	                <td>{{link}}</td>
-	                <td>{{brand}}</td>
-	                <td>
-	                    <div class="btn-group btn-group-sm" role="group">
-                            
-                            <a class="btn btn-info" href="index.php?module=hackpoint&page=sheet.part&id={{id}}"><i class="fas fa-pencil-alt"></i></a>
-                            
-                            
-                            <div class="btn btn-danger " onclick="hackpoint_part_delete(this);"><i class="far fa-trash-alt"></i></div>
-	                    </div>
-	                </td>
-                </tr>
-           </tbody>
-        </table>
+        <ul  id="parts" data-entity-search="hackpoint_part_search">
+                        <li data-id="{{id}}" data-part="{{part}}" class="hidden">
+                            <div class="part">
+                                <input type="text" data-type="part" data-force="false" placeholder="Nom du composant" value="{{label}}" class="form-control label">
+                                <div class="part-image" data-label="Image" style="height:220px;background : url(data:{{picture}}) 0% 0% / cover" data-stream="{{picture}}"></div>
+                                <input class="hidden" type="file">
+                                
+                                <div class="price w-100 mt-2">
+                                    <div class="input-group">
+                                     <div class="input-group-prepend">
+                                        <span class="input-group-text">Prix</span>
+                                      </div>
+                                      <input class="form-control" type="text" value="{{price}}">
+                                      <div class="input-group-append">
+                                        <span class="input-group-text">€</span>
+                                      </div>
+                                    </div>
+                                </div>
+
+                                <div class="brand w-100 mt-2 mb-3">
+                                    <div class="input-group">
+                                     <div class="input-group-prepend">
+                                        <span class="input-group-text">Marque</span>
+                                      </div>
+                                      <input class="form-control" type="text" value="{{brand}}"/>
+                                    </div>
+                                </div>
+                              
+                               
+                              
+                                 <a onclick="hackpoint_part_find(this)" title="Chercher sur le net" class="link"><i class="fas fa-globe-americas pointer"></i></a>
+                                 <div class="btn btn-delete" onclick="hackpoint_part_delete(this);"><i class="far fa-trash-alt"></i></div>
+                                 <div class="clear"></div>
+                                 <div class="btn btn-dark w-100 mb-3 btn-save-part" onclick="hackpoint_part_save(this)"><i class="far fa-check-circle"></i>Valider</div>
+                             </div>
+                        </li>
+                    </ul>
+		
 
          <!-- Pagination -->
        

plugin/hackpoint/types/PartType.class.php

@@ -77,7 +77,7 @@ class PartType {
 
 					
 
-					<ul  id="parts" data-entity-search="hackpoint_part_search">
+					<ul  id="parts" data-entity-search="hackpoint_resource_part_search">
 						<li data-id="{{id}}" data-part="{{part}}" class="hidden">
 							<div class="part">
 							  	<input type="text" data-type="part" data-force="false" placeholder="Nom du composant" value="{{label}}" class="form-control label">
@@ -118,7 +118,7 @@ class PartType {
 			</div>
 
 		';
-		$response['javascript'] = 'hackpoint_part_search();';
+		$response['javascript'] = 'hackpoint_resource_part_search();';
 		
 
 		return $response;