fake data loading through plugin successful

html/peopleitem.html

@@ -0,0 +1,25 @@
+
+<label class='peopleitem' data-id={{login}} > <input type="checkbox" />
+	<div class="card">
+		<div class="front">
+			<span name='iccon' class='ticon ticon-user'></span> <span
+				name='badge' class='badge blue'>1</span>
+			<div name='title'>{{firstname}},{{lastname}}</div>
+			<div name='wages'>${{wages}} ({{hour}}hr + {{OT}}hr)</div>
+			<div name='patrol'>petrol:{{petrol}} km</div>
+		</div>
+		<div class="back">
+			<span name='badge' class='badge pink'>1</span> <span
+				class='ticon ticon-fax'>-{{firstname}},{{lastname}}</span>
+			<div name='mobile'>{{phone}}</div>
+			<div name='email'>{{email}}</div>
+			<div name='rating'>
+				<span class="ticon ticon-star checked"></span> <span
+					class="ticon ticon-star checked"></span> <span
+					class="ticon ticon-star checked"></span> <span
+					class="ticon ticon-star checked"></span> <span
+					class="ticon ticon-star "></span>
+			</div>
+		</div>
+	</div>
+</label>

js/bts_timesheet.js

@@ -1,16 +1,59 @@
 (function ($) {
     $(function () {
     	class People{
-    		function constructor(selector){
-    			
+    		constructor(selector, data){
+    			this.selector = selector;
+    			this.data = $(selector).data();
+    			this.template = '#people_template';
+            	this.sample_people = {
+                		login: '01515b52-6936-46b2-a000-9ad4cd7a5b50',
+                		firstname: "first",
+                		lastname: "last",
+                		phone: '041122221',
+                		email: 'abc@gmail.com',
+                		pay: 0,
+                		hour: 12,
+                		OT: 3,
+                		petrol: 50,
+                		rating: 3,
+                	};    	
+            	this.load_data(this.data);
+    		}
+    		
+    		load_data(data){
+    			var template = $(this.template).html(); 
+    			var html = Mustache.render(template, data);
+    			$(selector).html(html);
+    			//save it
+    			$(selector).data(data);
     		}
     		
     	}//end of class People
     	
+		function bts_people_html(data){
+			var template = $('#people_template').html(); 
+			var html = Mustache.render(template, data);
+			var head = '<div class="peopleitem" id="'+ data.login +'">';
+			r = head + html + '</div>' ;
+			return r;
+		}
+    	
+        for (var i=1; i<100; i++){
+        	var sample_people = {
+            		login: '01515b52-6936-46b2-a000-9ad4cd7a5b50' +i,
+            		firstname: "first"+i,
+            		lastname: "last",
+            		phone: '041122221' +i,
+            		email: 'abc@gmail.com' + i,
+            		wages: 0,
+            		hour: i,
+            		OT: 3,
+            		petrol: 50 +i,
+            		rating: 3,
+            	};
+            var html = bts_people_html(sample_people);
+            jQuery('div.stafflist').append(html);
+         }    	
     	
-    	var sample_people{
-    		firstname: "first",
-    		lastname: "last"
-    	}
     });
 })(jQuery);

ts.php

@@ -29,6 +29,7 @@ class AcareOffice{
         add_filter('show_admin_bar', '__return_false');
         
         add_shortcode( 'ts-sync-users', array($this, 'sync_users'));
+        add_shortcode( 'bts_people_item', array($this, 'bts_people_item'));
     }
     
     /**
@@ -89,6 +90,7 @@ class AcareOffice{
         }
         wp_enqueue_style( 'bts_ts', plugins_url('css/bts_timesheet.css', __FILE__));
         wp_enqueue_script( 'bts_ts', plugins_url('js/bts_timesheet.js', __FILE__), array( 'jquery' , 'bts' ));
+        wp_enqueue_script('mustache', plugins_url('js/mustache.min.js', __FILE__), array('jquery'));
     }
     
     public function sync_users()
@@ -105,6 +107,20 @@ class AcareOffice{
         $this->xero->sync_users($arguments['mininterval']);
         return;
     }
+    
+    
+    public function bts_people_item($attr){
+        return $this->template('people_template', 'peopleitem.html');
+    }
+    
+    //generate template based on html file
+    private function template($id, $file)
+    {
+        $text = '<script id="' . $id .'" type="text/x-biukop-template">';
+        $text .= file_get_contents(plugin_dir_path(__FILE__) . "/html/$file");
+        $text .= '</script>';
+        return $text;
+    }
 }
 
 $bb = new AcareOffice();