composants

css/main.css

@@ -1654,7 +1654,7 @@ code {
 .hidden,.hide,
 .form-control.hidden,
 .form-control.hide{
-	display: none;
+	display: none!important;
 }
 .invisible,
 .form-control.invisible{

js/main.js

@@ -514,7 +514,7 @@ function init_components(selector){
 				if(input.find('form').length != 0) break;
 				if(!input.attr('data-action')) input.attr('data-action','action.php?action=upload_temporary_file');
 				var readonly = input.attr('data-readonly') == "true" ? true : false;
-
+				if(!input.get(0).hasAttribute('id')) input.attr('id',generate_uuid(10));
 				var customTpl = input.find('> *:not(:visible)');
 				var customActions = '';
 				if(customTpl && customTpl.length){

js/plugins.js

@@ -484,7 +484,7 @@ $.fn.extend({
 			if(obj.prop("tagName") == 'UL'){
 				container = obj;
 				model = container.find('li:first-child');
-				container.children('li:visible').remove();
+				container.children('li:not(.hidden)').remove();
 			} else if(obj.prop("tagName") == 'TABLE'){
 				container = obj.find('tbody');
 				model = container.find('tr:first-child');
@@ -531,7 +531,7 @@ $.fn.extend({
 					$('li:not(.hidden)',pagination).remove();
 					for(i=0;i<r.pagination.pages;i++){
 						var li = $(Mustache.render(template,{value:i,label:i+1}));
-						li.show().removeClass('hidden');
+						li.removeClass('hidden');
 						pagination.append(li);
 					}
 					pagination.find('li:not(.hidden)').eq(r.pagination.current).addClass('active');

plugin/hackpoint/Part.class.php

@@ -21,13 +21,14 @@ class Part extends Entity{
 	public $links = array(
 	);
 
-	public function picture(){
+	public function picture($toStream = false){
 		$folder = File::dir().'hackpoint'.SLASH.'part'.SLASH.$this->id;
 		if(!file_exists($folder)) mkdir($folder,0755,true);
 		$picture = $folder.SLASH.'cover.jpg';
 		if(!file_exists($picture)){
 			copy(__DIR__.SLASH.'img'.SLASH.'default-part.png',$picture);
 		}
+		if($toStream) return 'image/jpeg;base64,'.base64_encode(file_get_contents($picture));
 		return 'action.php?action=hackpoint_download_file&file='.base64_encode('part'.SLASH.$this->id.SLASH.'cover.jpg');
 	}
 }

plugin/hackpoint/ResourcePart.class.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Define a ResourcePart.
+ * @author Chuck NORRIS
+ * @category Plugin
+ * @license copyright
+ */
+class ResourcePart extends Entity{
+	public $id,$part,$rescource;
+	protected $TABLE_NAME = 'hackpoint_resource_part';
+	public $fields =
+	array(
+		'id' => 'key',
+		'part' => 'int',
+		'resource' => 'int'
+	);
+
+	public $links = array(
+		'part' => 'Part',
+		'resource' => 'Resource'
+	);
+}
+?>

plugin/hackpoint/action.php

@@ -262,32 +262,15 @@ switch($_['action']){
 			global $myUser,$_;
 			if(!$myUser->can('hackpoint','read')) throw new Exception("Permissions insuffisantes",403);
 			require_once(__DIR__.SLASH.'Part.class.php');
+			require_once(__DIR__.SLASH.'Resource.class.php');
+			require_once(__DIR__.SLASH.'ResourcePart.class.php');
 
 			
-			// OPTIONS DE RECHERCHE, A ACTIVER POUR UNE RECHERCHE AVANCEE
-			$query = 'SELECT * FROM '.Part::tableName().' WHERE 1';
-			$data = array();
-			//Recherche simple
-			if(!empty($_['filters']['keyword'])){
-				$query .= ' AND label LIKE ?';
-				$data[] = '%'.$_['filters']['keyword'].'%';
-			}
-
-			//Recherche avancée
-			if(isset($_['filters']['advanced'])) filter_secure_query($_['filters']['advanced'],array('label'),$query,$data);
-
-			//Tri des colonnes
-			if(isset($_['sort'])) sort_secure_query($_['sort'],array('label'),$query,$data);
-
-			//Pagination
-			$response['pagination'] = Part::paginate(2,(!empty($_['page'])?$_['page']:0),$query,$data);
-
-			$parts = Part::staticQuery($query,$data,true,0);
-			
-
-			
-			foreach($parts as $part){
+			foreach(ResourcePart::loadAll(array('resource'=>$_['resource']),  null, null, array('*'),1) as $resourcepart){
+				$part = $resourcepart->join('part');
 				$row = $part->toArray();
+				$row['picture'] = $part->picture(true);
+				$row['id'] = $resourcepart->id;
 				$response['rows'][] = $row;
 			}
 		});
@@ -299,17 +282,44 @@ switch($_['action']){
 			global $myUser,$_;
 			if(!$myUser->can('hackpoint','edit')) throw new Exception("Permissions insuffisantes",403);
 			require_once(__DIR__.SLASH.'Part.class.php');
-			$item = Part::provide();
-			$item->label = $_['label'];
-			$item->price = $_['price'];
-			$item->link = $_['link'];
-			$item->brand = $_['brand'];
+			require_once(__DIR__.SLASH.'ResourcePart.class.php');
+			
+
+			$part = Part::provide();
+			$part->label = $_['label'];
+			if(isset($_['price'])) $part->price = $_['price'];
+			if(isset($_['link'])) $part->link = $_['link'];
+			if(isset($_['brand'])) $part->brand = $_['brand'];
+
+			$part->state = Part::ACTIVE;
+			$part->save();
+
+			if(isset($_['picture'])){
+				$stream = base64_decode(preg_replace('|data:image/[^;]*;base64,|i','',$_['picture']));
+				$dir = File::dir().'hackpoint'.SLASH.'part'.SLASH.$part->id;
+				if(!file_exists($dir)) mkdir($dir,0755,true);
+				file_put_contents($dir.SLASH.'cover.jpg', $stream);
+			}
+
+			$item = new ResourcePart();
+			$item->part = $part->id;
+			$item->resource = $_['resource'];
 			$item->save();
+
 		});
 	break;
 	
 	
-
+	//Suppression d'élement part
+	case 'hackpoint_resource_part_delete':
+		Action::write(function(&$response){
+			global $myUser,$_;
+			if(!$myUser->can('hackpoint','delete')) throw new Exception("Permissions insuffisantes",403);
+			require_once(__DIR__.SLASH.'ResourcePart.class.php');
+			ResourcePart::deleteById($_['id']);
+			
+		});
+	break;
 	//Suppression d'élement part
 	case 'hackpoint_part_delete':
 		Action::write(function(&$response){
@@ -361,7 +371,7 @@ switch($_['action']){
 
         		$response['rows'] = array();
 				$data = array("%".$_['keyword']."%",0);
-	        	$parts = Part::staticQuery('SELECT * FROM {{table}} WHERE label LIKE ? AND state=? LIMIT 10',array("%".$_['keyword']."%",0),true);
+	        	$parts = Part::staticQuery('SELECT * FROM {{table}} WHERE label LIKE ? AND state=? LIMIT 10',array("%".$_['keyword']."%",Part::ACTIVE),true);
 	        	foreach($parts as $part){
 	                $response['rows'][] = array(
 	                	'name'=>html_entity_decode($part->label, ENT_QUOTES),

plugin/hackpoint/css/component.css

@@ -1,5 +1,5 @@
 input.data-type-part,.input-group-sm>input.form-control.data-type-part{
-  background-image: url('../img/icon-part.png');
+  background-image: url('../img/icon-part.png?v=1');
   background-repeat:no-repeat;
   background-position: 10px center;
   padding-left: 30px;

plugin/hackpoint/css/main.css

@@ -269,9 +269,11 @@ div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
 }
 #parts li{
 	width:15%;
+	min-width: 250px;
 	display: inline-block;
 	padding:0px;
 	margin:5px 5px 5px 0;
+	transition: transform 0.2s ease-in-out;
 }
 #parts li .part{
 	background-color: #2b2f35;
@@ -288,9 +290,10 @@ div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
 	color:#fefefe;
 }
 
-#sketch-workspace .part [data-type="dropzone"]{
+#sketch-workspace .part .part-image{
 	border:2px dashed #3e4750;
-	height:100px;
+	height:200px;
+	background: url(../img/default-part.png) center center no-repeat;
 	text-align: center;
 	text-transform: uppercase;
 	font-weight: bold;

plugin/hackpoint/js/main.js

@@ -4,7 +4,7 @@ function init_plugin_hackpoint(){
 		default:
 		break;
 	}
-	hackpoint_part_search();
+	
 	
 	$('#parts').sortable_table({
 		onSort : hackpoint_part_search
@@ -37,16 +37,43 @@ function hackpoint_part_search(callback){
 		
 	$('#parts').fill({
 		action:'hackpoint_part_search',
-		filters : $('#filters').filters(),
-		sort : $('#parts').sortable_table('get')
+		resource : $('#sketch-editor').attr('data-id'),
+		showItems : false
 	},function(){
+		$('#parts li:not(:eq(0)) [data-stream]').each(function(i,div){
+			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();
 	});
 }
 
 //Ajout ou modification d'élément part
-function hackpoint_part_save(){
-	var data = $('#part-form').toJson();
+function hackpoint_part_save(element){
+	var li = $(element).closest('li');
+	console.log(li);
+	var data = {
+		action : 'hackpoint_part_save',
+		resource : $('#sketch-editor').attr('data-id'),
+		label : li.find('.label').val(),
+		brand : li.find('.brand').val(),
+		price : li.find('.price').val(),
+		url : li.find('.url').val(),
+		picture : li.find('.part-image').attr('data-stream')
+	}
 	$.action(data,function(r){
 		
 		
@@ -54,17 +81,135 @@ function hackpoint_part_save(){
 	});
 }
 
+function hackpoint_part_add(){
+
+	var tpl = $('#parts li:eq(0)').get(0).outerHTML;
+
+	var data = {
+		price : 1,
+		url : 'http://ebay.com'
+	}
+	var item = $(Mustache.render(tpl,data));
+	item.removeClass('hidden');
+	item.css({
+		transform : 'scale(0)',
+		opacity : 0,
+	});
+	$('#parts li:eq(0)').after(item);
+	
+	item.css({
+		transform : 'scale(1) rotate(0deg)',
+		opacity : 1,
+	});
+
+	init_components(item);
+
+	var image = item.find('.part-image');
+	image.click(function(e){
+		e.preventDefault();
+		e.stopPropagation();
+		var picker = image.next('input[type="file"]');
+		picker.trigger('click');
+		picker.change(function(){
+			var file = picker.get(0).files[0];
+			 var reader  = new FileReader();
+			 reader.addEventListener("load", function () {
+			    image.css('background','url(data:'+reader.result+')')
+			    .attr('data-stream',reader.result)
+		     	.css('background-size','cover');
+			  }, false);
+			reader.readAsDataURL(file);
+		});
+	});
+	image.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+		   e.preventDefault();
+		   e.stopPropagation();
+	})
+	image.on('drop', function (e) {
+		var droppedFiles = e.originalEvent.dataTransfer.files;
+		var reader = new FileReader();
+		   reader.readAsDataURL(droppedFiles[0]);
+		   reader.onload = function () {
+		     image.css('background','url(data:image/jpeg;'+reader.result+')');
+		     image.css('background-size','cover');
+		   };
+		   reader.onerror = function (error) {
+		     console.log('Error: ', error);
+		   };
+
+	});
+	/*
+	var preload = $('<div class="preload progress-bar progress-bar-striped progress-bar-animated"></div>');
+	item.find('.part-image').append(preload);
+	item.find('.part-image').attr('id','part-image-'+$('#parts li').length());
+	item.find('.part-image').upload({
+		allowed : 'jpg,png,jpeg,bmp,svg',
+		size : 0,
+		action : 'hackpoint_part_image_upload',
+		readonly: false,
+		start: function(){
+			preload.show();
+		},
+		success: function(response){
+			if(response.previews.length && response.previews[0].name) {
+				
+			}
+			console.log(response);
+			preload.fadeOut();
+		},
+		complete: function(){
+			preload.fadeOut();
+		}
+	});*/
+
+
+
+}
+
+
+//Suppression d'élement part
+function hackpoint_resource_part_delete(element){
+	if(!confirm('Êtes vous sûr de vouloir supprimer cet item ?')) return;
+	var line = $(element).closest('li');
+
+	if(line.attr('data-id')==''){
+		line.css('transform','scale(0)');
+		setTimeout(function(){
+			line.remove()
+		},210);
+		return;
+	}
+	$.action({
+		action : 'hackpoint_resource_part_delete',
+		id : line.attr('data-id')
+	},function(r){
+		line.css('transform','scale(0)');
+		setTimeout(function(){
+			line.remove()
+		},210);
+	});
+}
 
 //Suppression d'élement part
 function hackpoint_part_delete(element){
 	if(!confirm('Êtes vous sûr de vouloir supprimer cet item ?')) return;
-	var line = $(element).closest('tr');
+	var line = $(element).closest('li');
+
+	if(line.attr('data-id')==''){
+		line.css('transform','scale(0)');
+		setTimeout(function(){
+			line.remove()
+		},210);
+		return;
+	}
 	$.action({
 		action : 'hackpoint_part_delete',
 		id : line.attr('data-id')
 	},function(r){
-		line.remove();
-		$.message('info','Élement supprimé');
+		line.css('transform','scale(0)');
+		setTimeout(function(){
+			line.remove()
+		},210);
 	});
 }
 

plugin/hackpoint/types/PartType.class.php

@@ -73,21 +73,23 @@ class PartType {
 				<div class="col-md-12">
 					
 
-					<div class="btn btn-dark"><i class="far fa-plus-square pr-1"></i> Ajouter un composant</div>
+					<div class="btn btn-dark" onclick="hackpoint_part_add()"><i class="far fa-plus-square pr-1"></i> Ajouter un composant</div>
 
 					
 
 					<ul  id="parts" data-entity-search="hackpoint_part_search">
-						<li data-id="{{id}}" class="">
+						<li data-id="{{id}}" class="hidden">
 							<div class="part">
-							  	<input type="text" data-type="part" placeholder="Nom du composant" value="{{label}}" class="form-control">
-							  	<div data-type="dropzone"  data-label="Image" data-delete="part_delete_document" data-save="part_add_document" data-allowed="jpeg,jpg,bmp,gif,png" class="form-control" id="document" name="document">
-				<?php echo json_encode($contact->documents()); ?></div>
-				                <span class="price">{{price}} €</span>
-				                <span class="brand">{{brand}}</span>
-				               
+							  	<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" data-stream="{{picture}}"></div>
+							  	<input class="hidden" type="file">
+				                <!--
+				                <span class="price"><input class="form-control col-sm-2 d-inline-block" type="text" value="{{price}}"> €</span>
+				                <span class="brand"><input class="form-control col-sm-2 d-inline-block" type="text" value="{{brand}}"/></span>
+				               -->
 				                <a href="{{link}}" class="link"><i class="fas fa-globe-americas"></i></a>
-				                 <div class="btn btn-delete" onclick="hackpoint_part_delete(this);"><i class="far fa-trash-alt"></i></div>
+				                 <div class="btn btn-delete" onclick="hackpoint_resource_part_delete(this);"><i class="far fa-trash-alt"></i></div>
+				                 <div class="btn btn-dark w-100 mb-3" onclick="hackpoint_part_save(this)"><i class="far fa-check-circle"></i>Valider</div>
 			                 </div>
 						</li>
 					</ul>
@@ -95,6 +97,7 @@ class PartType {
 			</div>
 
 		';
+		$response['javascript'] = 'hackpoint_part_search();';
 		
 
 		return $response;