timesheet add/remove gui up and running

Xero.php

         $msg .= "---------------------------------------------\n";
         $this->logConsole($msg);
     }
+    
+    /* sync payitems to wp options */
+    public function init_wp(){
+        $this->sync_payitem();
+    }
+    
+    private function sync_payitem(){
+        if ($this->too_close_to_sync_payitem()){
+            return;
+        }
+        $payitems = $this->xero->load('PayrollAU\\PayItem')->execute();
+        $payitem_options = array();
+        foreach ($payitems[0]->getEarningsRates() as $e){
+//             "EarningsRateID": "34e17d08-237a-4ae2-8115-375d1ff8a9ed",
+//             "Name": "Overtime Hours (exempt from super)",
+//             "EarningsType": "OVERTIMEEARNINGS",
+//             "RateType": "MULTIPLE",
+//             "AccountCode": "477",
+//             "Multiplier": 1.5,
+//             "IsExemptFromTax": true,
+//             "IsExemptFromSuper": true,
+//             "AccrueLeave": false,
+//             "IsReportableAsW1": true,
+//             "UpdatedDateUTC": "2019-03-16T13:18:19+00:00",
+//             "CurrentRecord": false
+            $payitem_options[]= array(
+                'EarningsRateID' => $e->getEarningsRateID(),
+                'Name'=> $e->getName(),
+                'EarningsType'=> $e->getEarningstype(),
+                'RatePerUnit' => $e->getRatePerUnit(),
+                'RateType' => $e->getRateType(),
+                'AccountCode' => $e->getAccountCode(),
+                "Multiplier"=> $e->getMultiplier(),
+                "IsExemptFromTax" => $e->getIsExemptFromTax(),
+                "IsExemptFromSuper"=> $e->getIsExemptFromSuper(),
+                "AccrueLeave" => $e->getAccrueLeave(),
+            );
+        }
+        update_option('bts_payitem_earnings_rate', $payitem_options);
+        update_option('bts_payitem_last_sync', time());
+    }
+    
+    private function too_close_to_sync_payitem(){
+        $lastsync = get_option('bts_payitem_last_sync', 0);
+        $now = time();
+        $diff = $now - (int) $lastsync;
+        return $diff < $this->minimum_sync_interval_in_seconds; //default 10 minutes
+    }
+    
 }

css/bts_timesheet.css

     position: relative;
     margin-top: 10px;
     margin-bottom: 10px;
-    height: 120px;
+    height: 100px;
     background: transparent;
 }
 
     transform-style: preserve-3d;
     display: block;
     width: 100%;
-    height: 100%;
+    height: 100px;
     position: absolute;
     left: 50%;
     top: 50%;
     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 {
-	color: #2c87f0;
     box-shadow: 0px 0px 10px white inset;
 }
 
 div.week2 > div {
-    background-color: #2c87f0;
+    background-color: #285c00;
     box-shadow: 0px 0px 10px white inset;
 }
 
-div.sheettableheader {
-    margin-top: 0px;
-    height: 30px;
-    background-color: lightgrey;
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-div.bday,
-div.bdate,
-div.btos,
-div.bstart,
-div.bfinish,
-div.bhours,
-div.bstaff,
-div.bclients,
-div.bconfirmed,
-div.bdelete {
-    display: block;
-    float: left;
-    background-color: black;
-    text-align: center;
-    border: 1px dotted white;
-    font-weight: bolder;
-    font-size: 20px;
-    color: white;
-
-    /* box-shadow: 1px 1px 10px black; */
-    width: 10%;
-    height: 30px;
-}
-
-div.bdelete,
-div.bconfirmed {
-    width: 5%;
-}
-
-div.btos {
-    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;
-    
+    color: orange;
 }
+
 .peopleitem div.card div.front > div[name="title"] {
     height: auto;
     text-align: center;
     background-color: lightgrey;
 }
+
 div.front > span[name='icon'] {
     width: 100%;
     height: 15px;
     color: white;
 }
 
-div.back > span.icon{
+div.back > span.icon {
     width: 100%;
     background-color: lightgrey;
-    color: dimgrey
+    color: dimgrey;
 }
 
-
-div.front >  span.badge, div.back >  span.badge {
+div.front >  span.badge,
+div.back >  span.badge {
     border-radius: 50%;
     display: inline-block;
     padding-left: 8px;
     padding-right: 8px;
     text-align: center;
-    position:absolute;
-    right : -5px;
+    position: absolute;
+    right: -5px;
     top: -5px;
 }
 
-span.badge.blue{
+span.badge.blue {
     color: #fff;
     box-shadow: 1px 1px 10px black;
     background-color: black;
 }
 
-span.badge.pink{
+span.badge.pink {
     color: black;
     box-shadow: 1px 1px 10px white;
     background-color: white;
 }
 
+/* div table */
+div.blueTable {
+    border: 1px solid #1C6EA4;
+    background-color: #EEEEEE;
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+	border:0px;
+}
+
+.divTable.blueTable .divTableCell,
+.divTable.blueTable .divTableHead,
+ {
+    border: 1px solid #AAAAAA;
+    padding: 3px 2px;
+}
+
+.divTable.blueTable .divTableBody .divTableCell {
+    font-size: 15px;
+}
+
+.divTable.blueTable .divTableRow:nth-child(even) {
+    background: #D0E4F5;
+}
+
+.divTable.blueTable .divTableHeading {
+    background: #1C6EA4;
+    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+    border-bottom: 2px solid #444444;
+}
+
+.divTable.blueTable .divTableHeading .divTableHead {
+    font-size: 15px;
+    font-weight: bold;
+    color: #FFFFFF;
+    border-left: 2px solid #D0E4F5;
+}
+
+.divTable.blueTable .divTableHeading .divTableHead:first-child {
+    border-left: none;
+}
+
+.blueTable .tableFootStyle {
+    font-size: 14px;
+    font-weight: bold;
+    color: #FFFFFF;
+    background: #D0E4F5;
+    background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
+    background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
+    background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
+    border-top: 2px solid #444444;
+}
+
+.blueTable .tableFootStyle {
+    font-size: 14px;
+}
+
+.blueTable .tableFootStyle .links {
+    text-align: right;
+}
+
+.blueTable .tableFootStyle .links a {
+    display: inline-block;
+    background: #1C6EA4;
+    color: #FFFFFF;
+    padding: 2px 8px;
+    border-radius: 5px;
+}
+
+.blueTable.outerTableFooter {
+    border-top: none;
+}
+
+.blueTable.outerTableFooter .tableFootStyle {
+    padding: 3px 5px;
+}
+
+/* DivTable.com */
+.divTable {
+    display: table;
+	margin: 3px 0px 3px 0px;
+}
+
+.divTable.highlight{
+	box-shadow: 1px 1px 10px #f50202;
+		
+}
+
+.divTableRow {
+    display: table-row;
+}
+
+.divTableHeading {
+    display: table-header-group;
+}
+
+.divTableCell,
+.divTableHead {
+    display: table-cell;
+}
+
+.divTableHeading {
+    display: table-header-group;
+}
+
+.divTableFoot {
+    display: table-footer-group;
+}
+
+.divTableBody {
+    display: table-row-group;
+}
+
+/* customized part of div table */
+div.sheettableheader {
+    margin-top: 0px;
+    height: 26px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+div.btos,
+div.bstart,
+div.bfinish,
+div.bhours,
+div.bstaff,
+div.bclient,
+div.bconfirmed,
+div.bdelete {
+    width: 10%;
+    height: 30px;
+}
+
+div.btos {
+    width: 30%;
+}
+
+div.bdelete,
+div.bconfirmed {
+	text-align:center;
+    width: 5%;
+}
+
+/* short code for the table */
+div.btos select,
+div.bstart input,
+div.bfinish input{
+	width: 100%;
+	height: 100%;
+}
+}
+/* end of div table */

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 class="divTable blueTable">
+    <div class="divTableBody">
+        <div class="divTableRow">
+            <div class="divTableCell btos">[bts_tos_options]</div>
+            <div class="divTableCell bstart"><input class="datepicker" placeholder="2019:03-02-11:30am"></input></div>
+            <div class="divTableCell bfinish"><input class="datepicker" placeholder="2019:03-02-11:30am"></input></div>
+            <div class="divTableCell bhours">hours</div>
+            <div class="divTableCell bstaff">[bts_select_staff]</div>
+            <div class="divTableCell bclient">[bts_select_client]</div>
+            <div class="divTableCell bconfirmed"><input type=checkbox checked></div>
+            <div class="divTableCell bdelete">
+                <span class="ticon ticon-trash"></span>
+            </div>
+        </div>
     </div>
-</div>  
+</div>

js/bts_timesheet.js

 			xero(false);
 			wifi(false);
 			init_user_search();
+			ajax_earning_rate();
 		}
 		
-	
+		function ajax_earning_rate(){
+	           $.post(bts().ajax_url, { // POST request
+	                _ajax_nonce: bts().nonce, // nonce
+	                action: "earnings_rate", // action
+	            }, function(response,  status, xhr){
+	            	console.log("%o", response);
+	            });
+		}
 		
 		init_ts();
 		
+		$(document).on('click', 'div.divTableHead.bdelete', function(){
+		    for (var i=1; i<10; i++){
+		        var html = jQuery("#job_item").html();
+		        jQuery('div.workspace').append(html);
+		    }
+		    dtp_init();
+		});
+		
+		$(document).on('click', 'div.divTableCell.bdelete', function(){
+			$(this).closest('div.divTable').remove();
+		});
+		
+		$(document).on('mouseenter', 'div.divTableCell', function(){
+			$(this).closest('div.divTable').addClass('highlight');
+		});
+		$(document).on('mouseleave', 'div.divTableCell', function(){
+			$(this).closest('div.divTable').removeClass('highlight');
+		});
+			
 	    
-	    for (var i=1; i<100; i++){
-	        var html = jQuery("#job_item").html();
-	        jQuery('div.workspace').append(html);
-	    }
 /*________________________________________________________________________*/    	
     });
 })(jQuery);
     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 );
+            //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(){
     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 );
+            //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(){

ts.php

         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_shortcode( 'bts_tos_options', array($this, 'bts_tos_options'));
         
         add_action('wp_ajax_list_staff', array($this,'list_staff' ));
         add_action('wp_ajax_list_client', array($this,'list_client' ));
         
+        add_action('wp_ajax_earnings_rate', array($this,'get_payitem_earnings_rate' ));
+        add_action('wp_ajax_nopriv_earnings_rate', array($this,'get_payitem_earnings_rate' ));
+        
+        
     }
     
     /**
         $loader->addNamespace('\Biukop', dirname(__FILE__) . '/' );
         
         $this->xero = new Xero();
+        $this->xero->init_wp();
     }
     
 
-    
     //
     //
     ///check auth
     }
     
     public function bts_job_item($attr){
-        return $this->template('job_item', 'job.html');
+        $html =$this->template('job_item', 'job.html');
+        //$html = str_replace('[bts-tos-options]', $this->bts_tos_options([]), $html);
+        $html = do_shortcode($html);
+        return $html;
+    }
+    
+    public function bts_tos_options($attr){
+        $result = "<select> \n";
+        $options = get_option('bts_payitem_earnings_rate');
+        foreach($options as $o){
+            $result.=sprintf("<option value='%s'> $%03.2f-%s</option>",
+                    $o['EarningsRateID'], $o['RatePerUnit'], $o['Name']);
+        }
+        $result .="</select>";
+        return $result;
     }
     
     
         wp_send_json($response);
         wp_die();
     }
+    
+    //ajax get earnings rates
+    function get_payitem_earnings_rate()
+    {
+        $response= array(
+            'status' => 'success',
+            'options'=> get_option('bts_payitem_earnings_rate'),
+        );
+        wp_send_json($response);
+    }
+    
+  
 }
 
 $bb = new AcareOffice();