badge dynamic , rating dynamic

html/peopleitem.html

 
-<label class='peopleitem' data-id={{login}} > <input type="checkbox" />
+<label class='peopleitem' data-id=p{{login}} > <input type="checkbox" checked/>
 	<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>
+				name='badge' class='badge blue'>{{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'>1</span> <span
+			<span name='badge' class='badge pink'>{{unconfirmedjob}}</span> <span
 				class='ticon ticon-fax'>-{{firstname}},{{lastname}}</span>
 			<div name='mobile'>{{phone}}</div>
 			<div name='email'>{{email}}</div>

js/bts_timesheet.js

     	class People{
     		constructor(selector, data){
     			this.selector = selector;
-    			this.data = $(selector).data();
+    			this.data = 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.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: 1,
+//                	};    	
             	this.load_data(this.data);
     		}
     		
     		load_data(data){
     			var template = $(this.template).html(); 
     			var html = Mustache.render(template, data);
-    			$(selector).html(html);
+    			$(this.selector).html(html);
     			//save it
-    			$(selector).data(data);
+    			$(this.selector).data(data);
+    			//draw rating star
+    			this.set_ratings(this.data.rating);
+    			this.set_unconfirmed_job(this.data.unconfirmedjob);
+    		}
+    		
+    		set_ratings(num){
+    			for (var i=1; i<= 5; i++){
+    				if (i <=num){
+    	    			$(this.selector + " div[name='rating'] span:nth-child(" +i+ ")").addClass('checked');
+    				}else{
+    					$(this.selector + " div[name='rating'] span:nth-child(" +i+ ")").removeClass('checked');
+    				}
+    			}
+    			this.data.rating = num;
+    		}
+    		
+    		set_unconfirmed_job(num){
+    			if( num == 0 )
+    				$(this.selector + " span[name='badge']").hide();
+    			else
+    				$(this.selector + " span[name='badge']").show();
+    			this.data.unconfirmedjob = num;
     		}
     		
     	}//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>' ;
+			var head = '<div class="peopleitem" id="p'+ data.login +'">';
+			r = head + '</div>' ;
 			return r;
 		}
     	
             		hour: i,
             		OT: 3,
             		petrol: 50 +i,
-            		rating: 3,
+            		rating: Math.floor(Math.random() * Math.floor(5)),
+            		unconfirmedjob: Math.floor(Math.random() * Math.floor(30))
             	};
             var html = bts_people_html(sample_people);
             jQuery('div.stafflist').append(html);
+            new People("#p" + sample_people.login, sample_people);
          }    	
     	
     });