Timesheets

by Cory Hughes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css">
<script src="https://use.fontawesome.com/7e50246028.js"></script>
<table class="pull-left">
			<thead>
				<tr>
					<th class="text-left">Day</th>
					<th class="text-left">Time In</th>
					<th class="text-left">Time Out</th>
					<th class="text-left">Hours Worked (Minus 30 mins)</th>
				</tr>
			</thead>
			<tbody class="table-hover">
				<tr id="weekday1" class="timeRow">
					<td class="text-left">Monday</td>
					<td class="text-left">
						<input id="timeInMonday" type="text" class="time ui-timepicker-input" autocomplete="off">
						<i id="timeInMondayBtn" class="fa fa-clock-o button"></i>
					</td>
					<td class="text-left">
						<input id="timeOutMonday" type="text" class="time ui-timepicker-input" autocomplete="off">
						<i id="timeOutMondayBtn" class="fa fa-clock-o button"></i>
					</td>
					<td class="text-left">24 Hrs:<span class="hrs24"></span> Today:<span class="hrsToday"></span></td>
				</tr>
				<tr id="weekday2" class="timeRow">
					<td class="text-left">Tuesday</td>
					<td class="text-left">
						<input id="timeInTuesday" type="text" class="time ui-timepicker-input" autocomplete="off">
						<i id="timeInTuesdayBtn" class="fa fa-clock-o button"></i>
					</td>
					<td class="text-left">
						<input id="timeOutTuesday" type="text" class="time ui-timepicker-input" autocomplete="off">
						<i id="timeOutTuesdayBtn" class="fa fa-clock-o button"></i>
					</td>
					<td class="text-left">24 Hrs:<span class="hrs24"></span> Today:<span class="hrsToday"></span></td>
				</tr>
				<tr id="weekday3" class="timeRow">
					<td class="text-left">Wednesday</td>
					<td class="text-left">
						<input id="timeInWednesday" type="text" class="time ui-timepicker-input" autocomplete="off">
						<i...

CSS

i.fa.button {
  font-size: 20px;
  /* margin-top: 5px; */
	cursor: pointer;
}
.hrs24 {
  color: #7f8c8d;
}

/* Timepicker CSS
.ui-timepicker-list {
  width: 199px;
  height: 200px;
  background: #fff;
  overflow: scroll;
  list-style: none;
  border: solid 1px #eaecee;
}
.ui-timepicker-list li {
  border-bottom: solid 1px #eaecee;
  padding: 5px;
  display: block;
}
.ui-timepicker-pm, .ui-timepicker-am {
  display: block;
}
.ui-timepicker-pm:hover, .ui-timepicker-am:hover {
  background: #e6193f;
  cursor: pointer;
} */
/* .ui-timepicker-selected {
  background: #e6193f;
}
.ui-timepicker-input li::last-child {
  border-bottom: solid 0px transparent;
} */

JavaScript

var timesArray = [];
var militaryArray = [];

function timeChange() {
	console.log("\n\n\n\n\n\n\n");
	timesArray = [];
	militaryArray = [];
  $(".timeRow .time[type=text]").each(function() {
    var timeCall = $(this).val();
    //console.log("TimeCall: " + timeCall + ", TimesArray: " + timesArray)
    timesArray.push(this.value);
    //console.log("Time Set: "+timesArray.toString())
    //this.id
    //alert("the array is now " + timesArray.toString());
    ConvertTimeFormat(timeCall);
  })
  //console.log("Military Array: "+militaryArray);
  
}

function ConvertTimeFormat(time) {
  if (time == "") {
  	militaryArray.push("");
  } else {
    var hrs = Number(time.match(/^(\d+)/)[1]);
    var mnts = Number(time.match(/:(\d+)/)[1]);
    var format = time.match(/\s(.*)$/)[1];
    //console.log("Nada: "+nada);
    if (format == "PM" && hrs < 12) hrs = hrs + 12;
    if (format == "AM" && hrs == 12) hrs = hrs - 12;
    var hours = hrs.toString();
    var minutes = mnts.toString();
    if (hrs < 10) hours = "0" + hours;
    if (mnts < 10) minutes = "0" + minutes;
    militaryArray.push(hours + ":" + minutes);
  }
  calcHoursWorked(militaryArray);
}

function calcHoursWorked(arr) {
	var odd = [];
	var even = [];
  // seperate odd
  for(var i = 0; i < arr.length; i += 2) {  // take every second element
    odd.push(arr[i]);
	}
  for(var i = 1; i < arr.length; i += 2) {  // take every second element
    even.push(arr[i]);
	}
  console.log("Odd Array: "+odd);
  console.log("Even Array: "+even);
  
  var currentDay = 1;
  for (var i = 0; i < odd.length; i++) {
  	if ((odd[i] !== "") && (even[i] !== "")) {
    	console.log("Odd["+i+"] and Even ["+i+"] filled out");
      console.log("Odd["+i+"] = "+odd[i]+" and Even ["+i+"] ="+even[i]);
      var hoursWorked = even[i] - odd[i];
      hoursWorked = hoursWorked.toString();
      var currentDay = 1+i;
      console.log("Hours Worked for day "+currentDay+": "+hoursWorked)
      hoursWorked = pad(hoursWorked, 4);
     ...