add progress

plugin/hackpoint/Sketch.class.php

@@ -6,7 +6,7 @@
  * @license copyright
  */
 class Sketch extends Entity{
-	public $id,$label,$state,$comment,$slug;
+	public $id,$label,$state,$comment,$slug,$progress;
 	protected $TABLE_NAME = 'hackpoint_sketch';
 	public $fields =
 	array(
@@ -14,6 +14,7 @@ class Sketch extends Entity{
 		'label' => 'string',
 		'state' => 'string',
 		'comment' => 'longstring',
+		'progress' => 'int',
 		'slug' => 'string'
 	);
 

plugin/hackpoint/action.php

@@ -40,6 +40,16 @@ switch($_['action']){
 				$row = $sketch->toArray();
 				$row['comment'] = truncate($row['comment'],65);
 				$row['picture'] = $sketch->picture();
+				
+
+				$row['progress-color'] = 'bg-danger';
+				if($row['progress'] > 30) $row['progress-color'] = 'bg-warning';
+				if($row['progress'] > 45) $row['progress-color'] = 'bg-warning';
+				if($row['progress'] > 60) $row['progress-color'] = 'bg-info';
+				if($row['progress'] > 75) $row['progress-color'] = '';
+				if($row['progress'] > 90) $row['progress-color'] = 'bg-success';
+
+
 				$row['created'] = relative_time($row['created']);
 				$response['rows'][] = $row;
 			}
@@ -61,6 +71,22 @@ switch($_['action']){
 		});
 	break;
 	
+
+	case 'hackpoint_sketch_progress_save':
+		Action::write(function(&$response){
+			global $myUser,$_;
+			
+			require_once(__DIR__.SLASH.'Sketch.class.php');
+
+			Sketch::staticQuery('ALTER TABLE {{table}} ADD progress INTEGER;');
+
+			$item = Sketch::getById($_['id']);
+			if($myUser->login!=$item->creator) throw new Exception("Permissions insuffisantes",403);
+			$item->progress = $_['progress'];
+			$item->save();
+		});
+	break;
+
 	case 'hackpoint_sketch_add':
 		global $myUser,$_;
 		if(!$myUser->can('hackpoint','edit')) throw new Exception("Permissions insuffisantes",403);

plugin/hackpoint/css/main.css

@@ -12,6 +12,17 @@
 	margin-left:-5px;
 }
 
+#sketchs .card .sketch-number {
+    border-radius: 0 0 520px 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 5px 20px 7px 7px;
+    background-color: rgba(0,0,0,0.5);
+    color: #ffffff;
+    font-weight: bold;
+}
+
 #sketchs .card-img-top {
     max-width: 150px;
     width: 100%;
@@ -53,9 +64,24 @@
     overflow: hidden;
     height: 22px;
     font-size: 1.15rem;
+    font-weight: bold;
     text-overflow: ellipsis;
 }
 
+#sketchs li .progress {
+    display: -ms-flexbox;
+    display: flex;
+    height: 0.7rem;
+    left:0;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    overflow: hidden;
+    font-size: .50rem;
+    background-color: #272b2f;
+    border-radius: 0 0 .25rem .25rem;
+}
+
 
 /* fiche sketch */
 .page-sheet-sketch,.page-sheet-sketch body,.page-sheet-sketch .container-fluid{

plugin/hackpoint/js/main.js

@@ -258,6 +258,32 @@ function hackpoint_sketch_search(callback){
 		filters : $('#filters').filters(),
 		sort : $('#sketchs').sortable_table('get')
 	},function(){
+
+		$('.progress').click(function(e){
+			var x = e.pageX - $(this).offset().left;
+       		var percent = Math.round(x *100 / $(this).width());
+       		var progressClass = '';
+       		if(percent > 30) progressClass = 'bg-warning';
+			if(percent > 45) progressClass  = 'bg-warning';
+			if(percent > 60) progressClass  = 'bg-info';
+			if(percent > 75) progressClass  = '';
+			if(percent > 90) progressClass  = 'bg-success';
+
+			var li = $(this).closest('li');
+       		$(this).find('.progress-bar')
+       		.css('width',percent+'%')
+       		.attr('aria-valuenow',percent)
+       		.text(percent+'%')
+       		.attr('class','progress-bar progress-bar-striped progress-bar-animated '+progressClass);
+       		$.action({
+				action : 'hackpoint_sketch_progress_save',
+				id : li.attr('data-id'),
+				progress : percent,
+			},function(r){});
+
+       	
+		});
+
 		if(callback!=null) callback();
 	});
 }

plugin/hackpoint/page.list.sketch.php

@@ -28,29 +28,33 @@ require_once(__DIR__.SLASH.'Sketch.class.php');
 	</div>
 </div>
 
-<div class="row">
+<div class="row mt-2">
 	<!-- search results -->
 	<div class="col-xl-12">
 		<ul id="sketchs"  data-entity-search="hackpoint_sketch_search">
  
             <li data-id="{{id}}" class="hidden">
 
-                    <div class="card">
+                    <div class="card" style="width: 20rem;">
                       <img src="{{picture}}" class="card-img-top" alt="{{label}}">
-
+                      <span class="sketch-number">#{{id}}</span>
                       <div class="card-body">
-                        <h5 class="card-title"> #{{id}} - {{label}}</h5>
+                        <h5 class="card-title">{{label}}</h5>
                         
                         <span class="d-block text-muted"><i class="far fa-meh-blank"></i> {{creator}}  <i class="far fa-clock"></i> {{created}}</span>
                         (Visibilité : {{#state}}<i class="far fa-eye"></i> Publique{{/state}}{{^state}}<i class="far fa-eye-slash"></i> Privé{{/state}})
                         <p class="card-text mt-2">{{comment}}</p>
                         <a href="index.php?module=hackpoint&page=sheet.sketch&id={{id}}" class="btn btn-dark w-100">Go !</a>
                       </div>
+
+                      <div class="progress">
+                      <div class="progress-bar progress-bar-striped progress-bar-animated {{progress-color}}" role="progressbar" style="width: {{progress}}%;" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100">{{progress}}%</div>
+                        </div>
                     </div>
 
 	             
 	              
-                
+                    
                 </li>
         </ul>
         <div class="clear"></div>