staff client job item tempalte loading correctly

css/bts_timesheet.css

     border-radius: 10px;
     text-align: center;
     background-color: white;
+	cursor: pointer;
+}
+
+div.weekly div.weekname:hover {
+	box-shadow:1px 1px 10px black;
 }
 
 div.weekly div.weekname.prev {
     color: white;
     margin-top: 5px;
     font-weight: bolder;
+	cursor: pointer;
+}
+
+div.week1 > div:hover,
+div.week2 > div:Hover {
+	box-shadow: 1px 1px 10px black;
 }
 
 div.week1 > div {
     width: 20%;
 }
 
+
 div.assignment > div {
+	display:inline;
+	height:auto;
     color: navy;
     background-color: white;
     font-size: 20px;
     border: 1px dotted lightgrey;
 }
 
+div.assignment > div:hover{
+	border: 1px double black;
+	background-color: white;
+	color: black;
+	font-weight: bolder;
+	box-shadow: 1px 1px 2px black inset;
+	z-index: 1;
+}
+
 /* peple item card*/
 .peopleitem div span.checked {
     color:orange;

html/job.html

+<div class="assignment">
+    <div class='bday'>Day</div>
+    <div class='bdate'>Date</div>
+    <div class='btos'>Type of Service</div>
+    <div class='bstart'>Start</div>
+    <div class='bfinish'>Finish</div>
+    <div class='bhours'>Hours</div>
+    <div class='bstaff'>Staff</div>
+    <div class='bclients'>Client</div>
+    <div class='bconfirmed'>Ack</div>
+    <div class='bdelete'>
+        <span class="ticon ticon-trash"></span>
+    </div>
+</div>  

html/staff.html

+
+<label class='peopleitem' data-id=p{{login}} > <input type="checkbox"/>
+	<div class="card">
+		<div class="front">
+			<span name='iccon' class='ticon ticon-user'></span> <span
+				name='badge' class='badge blue'><a href="/pending-jobs/{{login}}"></a>{{unconfirmedjob}}</span>
+			<div name='title'><a href='/user/{{login}}' target="_blank"> {{firstname}},{{lastname}} </a></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'><a href="/pending-jobs/{{login}}">{{unconfirmedjob}}</a></span> <span
+				class='ticon ticon-fax'>-{{firstname}},{{lastname}}</span>
+			<div name='mobile'>{{mobile}}</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

         };    	
 /*____________________________________________________________________________________*/    	
     	class People{
-    		constructor(selector, data){
+    		constructor(selector, template, data){
     			this.selector = selector;
     			this.data = data;
-    			this.template = '#people_template';
+    			this.template = template;
 //            	this.sample_people = {
 //                		login: '01515b52-6936-46b2-a000-9ad4cd7a5b50',
 //                		firstname: "first",
     		
     	}//end of class People
     	
-		function bts_people_html(data){
-			var template = $('#people_template').html(); 
+		function bts_staff_html(data){
+			var template = $('#staff_item').html(); 
 			var head = '<div class="peopleitem" id="p'+ data.login +'">';
 			r = head + '</div>' ;
 			return r;
 		}
-    	
+
+		function bts_client_html(data){
+			var template = $('#client_item').html(); 
+			var head = '<div class="peopleitem" id="p'+ data.login +'">';
+			r = head + '</div>' ;
+			return r;
+		}
+		
 		function sample_staff(){
 	        for (var i=1; i<100; i++){
 	        	var sample_people = {
 	            		rating: Math.floor(Math.random() * Math.floor(5)),
 	            		unconfirmedjob: Math.floor(Math.random() * Math.floor(30)),
 	            	};
-	            var html = bts_people_html(sample_people);
+	            var html = bts_staff_html(sample_people);
 	            jQuery('div.stafflist').append(html);
 	            new People("#p" + sample_people.login, sample_people);
 	        }
 		}
 	    function list_staff() {
+	    	show_loading_staff();
 	    	$('div.stafflist div.peopleitem').remove();
             $.post(bts().ajax_url, { // POST request
                 _ajax_nonce: bts().nonce, // nonce
                 action: "list_staff", // action
             }, function(response,  status, xhr){
             	if (response.status =='success'){
+        	    	hide_loading_staff();
             		response.users.forEach(function(u){
-        	            var html = bts_people_html(u);
+        	            var html = bts_staff_html(u);
         	            jQuery('div.stafflist').append(html);
-        	            new People("#p" + u.login, u);
+        	            new People("#p" + u.login,'#staff_item', u);
             		});
             	}else{
             		alert('error getting staff list');
 	    }
 	    
 	    function list_clients() {
+	    	show_loading_client();
 	    	$('div.clientlist div.peopleitem').remove(); //clear it
             $.post(bts().ajax_url, { // POST request
                 _ajax_nonce: bts().nonce, // nonce
             }, function(response,  status, xhr){
             	if (response.status =='success'){
             		response.users.forEach(function(u){
-        	            var html = bts_people_html(u);
+            	    	hide_loading_client();
+        	            var html = bts_client_html(u);
         	            jQuery('div.clientlist').append(html);
-        	            new People("#p" + u.login, u);
+        	            new People("#p" + u.login, '#client_item' ,u);
             		});
             	}else{
             		alert('error getting Client list');
             });	                	
 	    }
 	    
+	    function show_loading_staff(){
+	    	jQuery('div.stafflist img').attr('src', bts().load_user_img).show();
+	    }
+	    function show_loading_client(){
+	    	jQuery('div.clientlist img').attr('src', bts().load_user_img).show();
+	    }
+	    function hide_loading_staff(){
+	    	jQuery('div.stafflist img').hide();;
+	    }
+	    function hide_loading_client(){
+	    	jQuery('div.clientlist img').hide();
+	    }
+
+	    
 		function xero(t){
 			if (t)
 				$('div.xero i').show();
 			init_user_search();
 		}
 		
-
-
-		
+	
 		
 		init_ts();
+		
+	    
+	    for (var i=1; i<100; i++){
+	        var html = jQuery("#job_item").html();
+	        jQuery('div.workspace').append(html);
+	    }
 /*________________________________________________________________________*/    	
     });
 })(jQuery);
+
+
+/*______________scrolling______________________________________________*/
+jQuery(document).ready(function(){
+    var timeoutid =0;
+
+    jQuery('button.peoplelist[name="down"]').mousedown(function(){
+        var button  = this;
+        timeoutid = setInterval(function(){
+            console.log("down scrotop %d ", jQuery(button).parent().find(".userlist").get(0).scrollTop );
+        	jQuery(button).parent().find(".userlist").get(0).scrollTop +=240;    
+        }, 100);
+    }).on('mouseup mouseleave', function(){
+        clearTimeout(timeoutid);
+    });
+                                                 
+    jQuery('button.peoplelist[name="up"]').mousedown(function(){
+        var button = this;
+        timeoutid = setInterval(function(){
+            console.log("up scrotop %d ", jQuery(button).parent().find(".userlist").get(0).scrollTop );
+            jQuery(button).parent().find(".userlist").get(0).scrollTop -=240;
+        }, 100);
+    }).on('mouseup mouseleave', function(){
+        clearTimeout(timeoutid);
+    });
+    
+});
+
+

ts.php

         
         add_filter('show_admin_bar', '__return_false');
         
+        //ts-xx for sync single user
         add_shortcode( 'ts-sync-users', array($this, 'sync_users'));
-        add_shortcode( 'bts_people_item', array($this, 'bts_people_item'));
+        //bts-xx for webpage 
+        add_shortcode( 'bts_staff_item', array($this, 'bts_staff_item'));
+        add_shortcode( 'bts_client_item', array($this, 'bts_client_item'));
+        add_shortcode( 'bts_job_item', array($this, 'bts_job_item'));
         
         add_action('wp_ajax_list_staff', array($this,'list_staff' ));
         add_action('wp_ajax_list_client', array($this,'list_client' ));
             'anonymous' => !is_user_logged_in(),
             'me'=> get_current_user_id(),
             'userid'=> $this->acaresydney_userid,
+            'load_user_img'=> plugins_url('img/loading_user.gif', __FILE__),
         ) );
     }
     
     }
     
     
-    public function bts_people_item($attr){
-        return $this->template('people_template', 'peopleitem.html');
+    public function bts_staff_item($attr){
+        return $this->template('staff_item', 'staff.html');
     }
     
+    public function bts_client_item($attr){
+        return $this->template('client_item', 'client.html');
+    }
+    
+    public function bts_job_item($attr){
+        return $this->template('job_item', 'job.html');
+    }
+    
+    
     //generate template based on html file
     private function template($id, $file)
     {