gui for save and copy delete

css/bts_timesheet.css

 }
 
 .timesheets .workspace {
-    height: calc(100vh - 180px);
+    height: calc(100vh - 190px);
     background-color: white;
     overflow-x: hidden;
     overflow-y: scroll;
 }
 
 div.sheetsheader {
-    height: 100px;
+    height: 110px;
     background: darkorange;
     position: relative;
 }
     border: 2px solid grey;
     border-radius: 10px;
     text-align: center;
-    background-color: white;
+	
+    color: white;	
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
+	background: rgb(181,189,200); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	
 }
 
 div.weekly div.weekname.prev {
 }
 
 div.weekly >div.weekname:hover,
-div.weekly >div.copyprogress:hover,
 div.weekly div[name='copyschedule']:hover
 {
 	cursor: pointer;
-	box-shadow: 0px 0px 10px red;
+	box-shadow: 0px 0px 10px #2c87f0;
 }
 
 div.weekly div.copyprogress {
     display: inline-block;
     width: calc(100% - 80px);
     height: 15px;
-    background-color: yellow;
     top: 0px;
     border-radius: 2px;
     box-shadow: inset 1px 1px 2px black;
     text-align:center;
+	
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
+	background: rgb(254,252,234); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */	
 }
 
 div.copyprogress div[name='copyschedule'] {
     height: 25px;
     padding: 0px;
     border-radius: 10px;
-    background-color: black;
-    color: white;
+
     margin:auto;
     z-index:1;
+	
+	color: white;	
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
+	background: rgb(181,189,200); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	
 }
 
 div.weekdays {
     padding-left: 10px;
     padding-right: 10px;
 }
+div.week1:hover,
+div.week2:Hover {
+	border-radius: 20px;
+	box-shadow: 0px 0px 2px #2c87f0 inset; 
+	cursor: pointer;
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
+	background: rgb(235,241,246); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	
+}
 
+div.week1.filtered,
+div.week2.filtered{
+	border-radius: 20px;
+	/* background:white; */
+	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
+	background: rgb(235,241,246); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	
+}
 
 div.week1:after,
 div.week2:after {
 /* customized part of div table */
 div.sheettableheader {
     margin-top: 0px;
-    height: 26px;
+    height: 36px;
     overflow-x: hidden;
     overflow-y: scroll;
 }
 }
 
 div.btos {
-    width: 15%;
+    width: 20%;
+}
+
+div.bstart,
+div.bfinish{
+	width:11%;
 }
 
 div.brate{
-	width: 20%;
+	width: 10%;
 	max-width: 20px;
 }
 .divTable div > select{
   unicode-bidi: bidi-override;
   direction: rtl;
 }
-.brating > span:hover:before,
-.brating > span:hover ~ span:before {
+div.workspace .brating > span:hover:before,
+div.workspace .brating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
 }
 }
 div.bsave span.ticon-save{
     display: inline-block;
+	border: 3px solid lightgrey;
+    padding: 5px;
+    border-radius: 5px;
+    color: black;	
+	cursor: pointer;	
+	
 }
-
 div.bsave.saved span.ticon-save{
     display: none;
 }
+
 div.bsave.saved span.ticon-copy{
     display: inline-block;
+    border: 3px solid orange;
+    padding: 5px;
+    border-radius: 20px;
+    color: orange;	
+}
+div.bdelete span.ticon-trash{
+    display: inline-block;
+    border: 3px solid lightgrey;
+    padding: 5px;
+    border-radius: 5px;
+    color: red;	
+	cursor: pointer;
+}
+
+div.workspace div > span:hover{
+	box-shadow:0px 0px 10px black;
 }
 
+div.divTableHeading div > span:hover{
+	cursor: pointer;
+	animation: blinker 0.3s linear infinite;
+}
 
 /* short code for the table */
 div.btos select,

html/client.html

 		<div class="front">
 			 <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='title'><a href='/user/{{login}}' target="_blank"> {{display_name}} </a></div>
 			<div name='account'>NDIS {{account}}</div>
 			<div name='address'>{{address}}</div>
 		</div>

js/bts_timesheet.js

 		    	var o = new Job({empty:true});
 		});
 		
-		$(document).on('click', 'div.copyprogress', function(){
-		    for (var i=1; i<10; i++){
+		$(document).on('click', 'div[name="copyschedule"]', function(e){
+			e.stopPropagation();
+			if (!confirm('add 10 empty new jobs?'))
+				return;
+		    for (var i=1; i<=10; i++){
 		    	var o = new Job({empty:true});
 		    }
-		});		
+		    
+		});
 		
 		$(document).on('click', 'div.divTableCell.bdelete', function(){
 			var job = $(this).closest('.divTable').data().job;
 			$(this).closest('div.divTable').removeClass('highlight');
 		});
 			
-		$(document).on('click', 'span.ticon.ticon-save', function(){
+		$(document).on('click', 'div.workspace span.ticon.ticon-save', function(){
 			var table = $(this).closest('div.divTable');
 			table.data().job.do_save_record();
 		});
+		$(document).on('click', '.divTableHeading span.ticon.ticon-save', function(){
+			//save all
+			$('div.workspace span.ticon.ticon-save').each(function (i,e){
+				if ($(this).is(":visible"))
+					$(this).trigger('click');
+			});
+		});
+		
 		
 		$(document).on('click', 'span.ticon.ticon-copy', function(){
 			if (!confirm("make a copy of this job?"))
 			});
 			
 			jobs.forEach(function(e){
-				clone_data_create_new_job(e.get_record_from_ui());
+				clone_data_create_new_job(e.get_record_from_ui(),7);//add 7 days
 			});
 		});
 		
 			alert('you can only copy from past to future (left to right)');
 		});
 		
-		$('div.week1 > div').click(function(){
+		$('div.week1 > div').click(function(e){
+			e.stopPropagation();
 			if ($('div.bstart input.blink_me').length == 0){
 				alert("nothing to copy");
 				return;
 			unblink_all_date();
 		});
 		
+		$('div.week1,div.week2').click(function(e){
+			e.stopPropagation();
+			$(this).toggleClass('filtered');
+			filter_workspace_by_weeks();
+		});
+		
 		function copy_single_day_to_next_week(el){
 			var j = $(el).closest('div.divTable').data().job;
-			clone_data_create_new_job(j.data);
+			clone_data_create_new_job(j.get_data_from_ui() , 7); // +7 days
 		}
 		
-		function clone_data_create_new_job(val){
+		function clone_data_create_new_job(val, num_of_shifted_days){
 			var data = $.extend(true, {}, val);//make a copy
+			num_of_shifted_days = typeof num_of_shifted_days !=='undefined'? num_of_shifted_days: 0;// 0 days
 			//reset 
 			data.id='';
 			data.ack = 0;
 			
 			if (is_valid_date_str(data.start)){
 				var s = new Date(data.start);
-				var s1 = s.getDate() + 7;
+				var s1 = s.getDate() + num_of_shifted_days;
 				s = new Date(s.setDate(s1));
 				data.start = format_date_time(s);	
 			}
 			if (is_valid_date_str(data.finish)){
 				var f = new Date(data.finish);
-				var f1 = f.getDate() + 7;
+				var f1 = f.getDate() + num_of_shifted_days;
 				f = new Date(f.setDate(f1));
 				data.finish = format_date_time(f);
 			}
 			});
 		}
 		
+		function filter_workspace_by_weeks(){
+			var hide_week1 = $('div.week1').hasClass('filtered');
+			var hide_week2 = $('div.week2').hasClass('filtered');
+			
+			if (hide_week1 && hide_week2 ){
+				alert("You are hiding both weeks");
+			}
+
+			$('div.workspace div.divTable').each(function(i,e){
+				var job = $(e).data().job;
+				if ((hide_week1 && job.is_week1()) || 
+					(hide_week2 && job.is_week2()) ){
+					$(e).fadeOut();
+				}else{
+					$(e).fadeIn();
+				}
+			});
+			debounced_calculate();
+		}
+		
 		var debounced_calculate = debounce(calculate_total_hour_and_money, 2000);
 		
 		function calculate_total_hour_and_money()
 			});
 			
 			$('div.workspace > .divTable').each(function(i,e){
+				if (! $(e).is(':visible'))
+					return;
+				
 				var job = $(e).data().job; //class Job
 				if (typeof job === 'undefined')
 					return;

ts.php

         $result = "<select> \n";
         $staff = $this->get_people_by_role('client');
         foreach ($staff as $u){
-            $result .= sprintf("<option value=%s> %s</option>", $u->user_login, $u->first_name . " " . $u->last_name);
+            $result .= sprintf("<option value=%s> %s</option>", $u->user_login, $u->display_name);
         }
         $result .="</select>";
         return $result;
                     'login' => $s->user_login,
                     'firstname'=> $s->first_name,
                     'lastname'=> $s->last_name,
+                    'display_name'=> $s->display_name,
                     'mobile'=>  get_user_meta($s->ID, 'mobile', true),
                     'email'=> $s->user_email,
                     'account'=> get_user_meta($s->ID, 'account', true),