Today I began straightening out the calculation of total elapsed time for all slices associated with each To Do item. This work included three components: getting the date/time calculations correct and performed consistently (all on the PHP side and none on the JavaScript side), getting the calculations in the right place so they reflect what they’re supposed to reflect, and understanding the scope of PHP variables in different contexts across numerous files and sessions.
The calculation has to be performed for each completed slice when the Update To Do page is first created, and this work is done in the GetToDoSlices.php file. The code has to not update the calculation when a slice has been started but not completed. The code also has to make variables available that store the sums for elapsed hours and minutes, and for the currently effective start time if there is one, so the total elapsed hours and minutes can be displayed on the form in the appropriate spot. Finally, the code, this time in the UpdateStartTime.php and UpdateEndTime.php files, has to be able to mark the time that start and end events happen and update the running total as needed, both on the display and in the database.
You’ve seen a lot of this code already but I’ll just re-list the relevant files here so the action can be tracked. I can verify that it has been tested and works as expected.
Here is the entire GetToDoSlices.php file, where I’ve corrected a mistake.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<?php // include('SQLFunctions.php'); function makeTableRow($counter, $startval, $endval, $noteval, $canedit) { echo " <tr>"; echo " <th scope='row' rowspan='2'>".$counter."</th>"; echo " <td>"; echo " ".$startval; echo " </td>"; echo " <td>"; echo " ".$endval; echo " </td>"; echo " </tr>"; echo " <tr>"; echo " <td colspan='2'>"; if ($canedit) { echo " <input class='form-control' id='nextSliceNoteID' type='text' name='nextSliceNote' maxlength='100' value='".$noteval."'/>"; } else { echo " ".$noteval; } echo " </td>"; echo " </tr>"; } $q = $_POST['q']; $link = connectDB(); $sql = "SELECT recordToDoID, startTime, endTime, note FROM ToDoSlices WHERE recordToDoID = ".$q." ORDER BY startTime"; if ($stmt = $link->prepare($sql)) { $stmt->execute(); $stmt->bind_result($recordToDoID,$startTime,$endTime,$note); $counter = 0; $funkyCount = 0; $totalTime = 0; while ($stmt->fetch()) { $counter++; $canEdit = false; $funky = false; $elapsed = 0.0; if (isset($startTime)) { $start = strtotime($startTime); } else { //this shouldn't happen $start = time(); $funky = true; //do something error-y } $newStartTime = date("Y-m-d H:i:s", $start); $stillRunning = false; if (isset($endTime)) { $end = strtotime($endTime); $newEndTime = date("Y-m-d H:i:s", $end); } else { //this should happen half the time on the final retrieved item if (!$funky) { $stillRunning = true; $newEndTime = "<button type='button' id='endButton' onmouseup='endSliceAjax()'>End</button>"; // $newEndTime = "<form action='UpdateEndTime.php' method='POST' onsubmit='' /> // <input type='hidden' name='q' value='".$q."' /><input id='endButton' type='button' value='End' formAction='UpdateEndTime.php'></form>"; $canEdit = true; } $end = $start; } if (!$funky) { $elapsed = $end - $start; $totalTime += $elapsed; makeTableRow($counter, $newStartTime, $newEndTime, $note, $canEdit); } else { $funkyCount++; } } if (!$stillRunning) { //make a new row with a start button $note = ""; $counter++; $newStartTime = "<button type='button' id='startButton' onmouseup='startSliceAjax()'>Start</button>"; $newEndTime = ""; makeTableRow($counter, $newStartTime, $newEndTime, $note, true); } $elapsedHours = floor($totalTime / 3600); $remainderTime = $totalTime - ($elapsedHours * 3600); $elapsedMinutes = floor($remainderTime / 60); } ?> |
Here is the UpdateStartTime.php file, which is invoked by clicking on the “Start” button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php include('SQLFunctions.php'); if (!empty($_GET)) { $tdRecordToDoID = $_GET['ToDoIDx']; $tdNote = $_GET['Notex']; $tdStartTime = date('Y-m-d H:i:s', time()); $link = connectDB(); $sql = "insert into ToDoSlices (recordToDoID, startTime, Note) values (".$tdRecordToDoID.",'".$tdStartTime."','".$tdNote."');"; if (mysqli_query($link, $sql)) { echo $tdStartTime; } else { echo "Error: ".$sql."<br>".mysqli_error($link); } mysqli_close( $link ); } ?> |
Here is the UpdateEndTime.php file, which is invoked by clicking on the “End” button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php include('SQLFunctions.php'); if (!empty($_GET)) { $tdRecordToDoID = $_GET['ToDoIDx']; $tdNote = $_GET['Notex']; $tdStartTime = $_GET['startTimex']; $tdEndTime = date('Y-m-d H:i:s', time()); $elapsedT = $tdEndTime - $tdStatTime; $totalTime += #elapsedT; $returnText = ""; $returnFlag = true; $link = connectDB(); $sql = "update ToDoSlices set Note='".$tdNote. "' where recordToDoID=".$tdRecordToDoID. " AND startTime='".$tdStartTime."';"; if (!mysqli_query($link, $sql)) { $returnFlag = false; $returnText .= "Note Error: ".$sql."<br>".mysqli_error($link)." "; } $sql = "update ToDoSlices set endTime='".$tdEndTime. "' where recordToDoID=".$tdRecordToDoID. " AND startTime='".$tdStartTime."';"; if (!mysqli_query($link, $sql)) { $returnFlag = false; $returnText .= "End Time Error: ".$sql."<br>".mysqli_error($link)." "; } if ($returnFlag) { echo $tdEndTime; } else { echo $returnText; } mysqli_close( $link ); } ?> |
Here is the code in the UpdateToDo.php file that displays the accumulated hours and minutes for the current To Do item when the page is first created.
|
1 |
echo " <p class='form-control-static'>Elapsed Time: <strong><span id='spanHours'>".$elapsedHours."</span> H <span id='spanMinutes'>".$elapsedMinutes."</span> M</strong></p>"; |
Here is the embedded JavaScript that updates the accumulated hours and minutes when the “End” button is clicked to complete a time slice.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
echo " function endSliceAjax() {"; echo " var xmlhttp = new XMLHttpRequest();"; echo " var handle = document.getElementById('endButton');"; echo " var parentHandle = handle.parentNode;"; echo " var noteHandle = document.getElementById('nextSliceNoteID');"; echo " var noteValue = noteHandle.value;"; echo " sliceIndex = parentHandle.previousElementSibling.previousElementSibling.innerHTML;"; echo " var startTime = parentHandle.previousElementSibling.innerHTML;"; echo " startTime = startTime.trim();"; echo " xmlhttp.onreadystatechange = function() {"; echo " if (this.readyState == 4) {"; echo " if (this.status == 200) {"; echo " if (this.responseText.search('Error: ') < 0) {"; echo " parentHandle.innerHTML = this.responseText;"; echo " noteHandle.parentElement.innerHTML = noteValue;"; echo " addTableRow();"; echo " var endTime = this.responseText;"; echo " var st = Date.parse(startTime);"; echo " var et = Date.parse(endTime);"; echo " var e = (et - st) / 1000.0;"; echo " totalTime += e;"; echo " var h = Math.floor(totalTime / 3600.0);"; echo " var remainder = totalTime - h * 3600;"; echo " var m = Math.floor(remainder / 60.0);"; echo " var hoursHandle = document.getElementById('spanHours');"; echo " var minutesHandle = document.getElementById('spanMinutes');"; echo " hoursHandle.innerHTML = h;"; echo " minutesHandle.innerHTML = m;"; echo " } else {"; echo " alert(this.responseText);"; echo " }"; echo " } else {"; echo " alert('AJAX error encountered');"; echo " }"; echo " }"; echo " };"; echo " xmlhttp.open('GET','UpdateEndTime.php?ToDoIDx='+$ToDoID+'&startTimex='+startTime+'&Notex='+noteValue, true);"; echo " xmlhttp.send();"; echo " }"; |
Getting the date and time ops right is straightforward as is getting the summations and calculations right. That’s standard think and tweak. The value of this exercise for me is getting the “isness” of PHP, which in this case means getting a feel for what variables are available where. For this exercise I was able to declare and set things like $startTime, $endTime, $totalTime, $elapsedHours, and elapsedMinutes in one file and successfully refer to them in a different file without including a header or explicit link in the code. The link has to exist implicitly, and I don’t know exactly how yet, but at least I know the next set of concepts to look out for as I proceed.
How does the system keep track of these values? Is it done session by session with potentially multiple instantiations of each variable but for different users? How does this compare to what is done in Node.js? How the the server executive manage all of this? Inquiring minds wanna know! (yeah, sorry about that…)
Learning any language is an iterative process that you just have to wallow through until you can think in its idiom. You can work through the examples in a book or parrot those in a video course but until you try to change it or write your own you don’t really get the full depth of it, unless the instruction is exceptionally complete, and I’ve never encountered any such instruction in any area of my life. That indicates that there’s only so much complexity people can handle at one time. You have to understand one part before you even understand the questions that come up in the course of learning the next part. I know some instructors shared some advanced concepts in some swing dancing classes I was in that I vaguely remembered but didn’t quite process. Two years later it was all, “Oh now I get what he was talking about there!”
And so it goes. Day by day.