loading jobs has img to show

css/bts_timesheet.css

@@ -78,6 +78,14 @@ body {
     overflow-y: scroll;
 }
 
+.timesheets .workspace img {
+	display: block;
+	margin-top: 140px;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+
 .timesheets .statusbar {
     position: relative;
     height: 40px;
@@ -469,7 +477,6 @@ div.week2 > div {
     text-align: center;
     width: 10%;
     height: 40px;
-    color: white;
     margin-top: 5px;
     font-weight: bolder;
 	border-radius: 10px;
@@ -483,26 +490,29 @@ div.week2 div:hover
 }
 
 div.week1 > div {
+    box-shadow: 0px 0px 10px white inset;
+}
+.week1color{
+	color: black;
 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
 	background: #ebe9f9; /* Old browsers */
 	background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */
 	background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
 	background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */
-	
-    box-shadow: 0px 0px 10px white inset;
 }
 
 div.week2 > div {
-    background-color: #285c00;
     box-shadow: 0px 0px 10px white inset;
-/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
-background: #627d4d; /* Old browsers */
-background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
-	
+}
+.week2color{
+	color:white;
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
+	background: #627d4d; /* Old browsers */
+	background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
 }
 
 div.assignment > div {

js/bts_timesheet.js

@@ -151,12 +151,18 @@
 	    	jQuery('div.clientlist img').attr('src', bts().load_user_img).show();
 	    }
 	    function hide_loading_staff(){
-	    	jQuery('div.stafflist img').hide();;
+	    	jQuery('div.stafflist img').hide();
 	    }
 	    function hide_loading_client(){
 	    	jQuery('div.clientlist img').hide();
 	    }
 
+	    function show_loading_jobs(){
+	    	jQuery('div.workspace img').attr('src', bts().load_job_img).show();
+	    }
+	    function hide_loading_jobs(){
+	    	jQuery('div.workspace img').hide();
+	    }
 	    
 		function xero(t){
 			if (t)
@@ -327,6 +333,8 @@
 		        else{
 		        	this.mark_saved();
 		        }
+		        
+		        this.mark_week_color();
 			}
 			
 			get_job_id(){
@@ -510,6 +518,43 @@
 				return (s < f);
 			}
 			
+			validate()
+			{
+				if (this.is_finish_resonable()){
+					this.el.addClass('validjob');
+				}else{
+					this.el.addClass('invalidjob');
+				}
+			}
+			
+			mark_week_color(){
+				this.el.find('div.brating').removeClass('week1color');
+				this.el.find('div.brating').removeClass('week2color');
+				
+				if (this.is_week1()){
+					this.el.find('div.brating').addClass('week1color');
+				}else if (this.is_week2()){
+					this.el.find('div.brating').addClass('week2color');
+				}
+			}
+			
+			is_week1()
+			{
+				var w1_begin = $('span[name="w1d1"]').data().date;
+				var w1_end = $('span[name="w1d7"]').data().date;
+				var me = new Date(this.data.start);
+				return (w1_begin <= me && me <= w1_end );
+			}
+			
+			is_week2()
+			{
+				var w2_begin = $('span[name="w2d1"]').data().date;
+				var w2_end = $('span[name="w2d7"]').data().date;
+				var me = new Date(this.data.start);
+				return (w2_begin <= me && me <= w2_end );
+			}
+			
+			
 		}//end of class Job
 		
 		//global GUI  summary
@@ -774,6 +819,7 @@
 		
 		function load_timesheet()
 		{
+			show_loading_jobs();
 			clear_workspace();
 			var first = $('span[name="w1d1"]').data().date;
 			var last = $('span[name="w2d7"]').data().date;
@@ -792,7 +838,8 @@
             	}else{
             		alert('error loading job');
             	}
-            });	 			
+            	hide_loading_jobs();
+            });			
 			
 		}
 		

ts.php

@@ -135,6 +135,7 @@ class AcareOffice{
             'me'=> get_current_user_id(),
             'userid'=> $this->acaresydney_userid,
             'load_user_img'=> plugins_url('img/loading_user.gif', __FILE__),
+            'load_job_img'=> plugins_url('img/loading_job.gif', __FILE__),
         ) );
     }
     
@@ -417,7 +418,7 @@ class AcareOffice{
             'jobs' => [],
         );
         
-        $sql = "SELECT * FROM $this->table_name WHERE start>='%s' and start <='%s' order by staff";
+        $sql = "SELECT * FROM $this->table_name WHERE start>='%s' and start <='%s' order by start ASC ,staff ASC";
         $jobs = $this->db->get_results($this->db->prepare ($sql, array($start, $finish)));
         
         if (! empty($jobs)){