R.P. Churchill.com | Adventures in Engineering and Life

To Do List Project: Part 8

Posted on March 27, 2017 by R.P. Churchill

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.

<?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);
  }
?>

<?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.

<?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 );
  }
?>

<?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.

<?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 );
  }

?>

<?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.

      echo "          <p class='form-control-static'>Elapsed Time: <strong><span id='spanHours'>".$elapsedHours."</span> H <span id='spanMinutes'>".$elapsedMinutes."</span> M</strong></p>";

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.

      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 "    }";

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 " 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.

Posted in Software | Tagged PHP, To Do List project | Leave a comment

To Do List Project: Part 7

Posted on March 23, 2017 by R.P. Churchill

I decided to clean up the Update To Do page I’ve been working with to get rid of the debugging information and to put the navigation menu in a more reasonable location. Losing the debug information was trivial but moving the menu turned up something more interesting.

The PHP files that create entire pages included a file named Session.php that set up the session, user, and timeout mechanisms and generated the navigation menu (remember that the screens were utilitarian affair that only served to illustrate the principles of working with MySQL and some PHP, not to look like much, so part of the ongoing work on this project is to pretty things up over time). This file was included at the very top of the relevant page files, meaning that the menu ended up at the very top, also. When I moved the include statement for this file into the middle of the page (in its own, page-wide DIV below the title DIV) it generated the menu there as expected but also an error.

The error arose because the session management setup invokes the session_start() statement, and that statement has to be placed before the HEAD HTML element. If the menu is in the BODY of the HTML that’s obviously below the HEAD, hence the problem.

The solution was to split the statements that generate the menu into their own file so the Session file can stay at the top of the files where it’s required and a NavMenu.php files that can be placed where it needs to be.

<?php
session_start();

if(!isset($_SESSION['user_id'])) {
  header("Location: Login.php");
  exit;
} else {
  if ($_SESSION['timeout'] + 600 < time()) {
    header("Location: Logout.php");
  } else {
    $_SESSION['timeout'] = time();
  }
}
<div align="right">
  <a href="ToDoList.php">Home</a>
  <a href="AddUser.php">New User</a>
  <a href="Login.php">Log In</a>
  <a href="Logout.php">Log Out</a>
  <a href="TestLoginStatus.php">Test Login Status</a>
</div>
?>

<?php

session_start();

if(!isset($_SESSION['user_id'])) {

header("Location: Login.php");

exit;

} else {

if ($_SESSION['timeout'] + 600 < time()) {

header("Location: Logout.php");

} else {

$_SESSION['timeout'] = time();

}

<a href="TestLoginStatus.php">Test Login Status</a>

</div>

Posted in Software | Tagged PHP, To Do List project | Leave a comment

To Do List Project: Part 6

Posted on March 22, 2017 by R.P. Churchill

Writing the ending time to each ToDoSlice item is more complex because we have to match to an existing record without benefit of having a unique ID to reference. Instead, we use a combination of the ToDoID index and the starting time for the slice, which we known from the sending form.

We start with the UpdateEndTime.php file. We get the information for all four columns of the ToDoSlices and then try to update the end time and note fields, which is where the trouble lies. Writing the ending time should be straightforward, since there should be no previous value for it in the record after it is created. Updating the Note field, however, will present a problem if its text has not changed. For some odd reason, MySQL’s update command won’t actually perform the update if a text value doesn’t change.

You can verify this by manually issuing the same statement as this code generates, which will cause the command-line interface to report 1 row matched but 0 rows changed. This operation won’t generate an error, it just won’t do anything at all, including update any other value in the record. For that reason the code jumps through a lot of hoops to update the end time and note fields separately, see if either operation generated an error, and report back the appropriate information. It’s probably possible that the end time will be properly updated while the note update fails (this would have to be something having to do with the MySQL host at a system level) so I should add some code to check for that condition. There are other options as well, one of which could be to only update the end time if a check of the note field reveals that its text has not changed.

<?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());
    
    $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 );
  }

?>

<?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());

$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 );

}

      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 "      xmlhttp.onreadystatechange = function() {";
      echo "        if (this.readyState == 4) {";
      echo "          if (this.status == 200) {";
      echo "            if (this.responseText.search('Error: ') < 0) {";
      echo "              alert('response: '+this.responseText);";
      echo "              parentHandle.innerHTML = this.responseText;";
      echo "              noteHandle.parentElement.innerHTML = noteValue;";
      echo "              addTableRow();";
      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 "    }";

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 " xmlhttp.onreadystatechange = function() {";

echo " if (this.readyState == 4) {";

echo " if (this.status == 200) {";

echo " if (this.responseText.search('Error: ') < 0) {";

echo " alert('response: '+this.responseText);";

echo " parentHandle.innerHTML = this.responseText;";

echo " noteHandle.parentElement.innerHTML = noteValue;";

echo " addTableRow();";

echo " } else {";

echo " alert(this.responseText);";

echo " }";

echo " } else {";

echo " alert('AJAX error encountered');";

echo " }";

echo " };";

echo " xmlhttp.open('GET','UpdateEndTime.php?ToDoIDx='+$ToDoID+'&startTimex='+startTime+'&Notex='+noteValue, true);";

echo " xmlhttp.send();";

echo " }";

Posted in Software | Tagged AJAX, JavaScript, MySQL, PHP, To Do List project | Leave a comment

To Do List Project: Part 5

Posted on March 21, 2017 by R.P. Churchill

The next step is to make the back end actually write some data to a database using PHP and MySQL. This is the UpdateStartTime.php file. The startSliceAjax function that communicates with this PHP is shown below, just slightly modified from yesterday’s version.

The PHP simply inserts the sent information into the database. Each ToDoSlice item has an index indicating the unique ID of the To Do item with which it is associated but not a unique ID of its own. When writing the start time of a new slice this isn’t a problem because the slice item is being created anew and doesn’t have to match anything.

<?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 );
  }
?>

<?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 );

}

      echo "    function startSliceAjax() {";
      echo "      var xmlhttp = new XMLHttpRequest();";
      echo "      var handle = document.getElementById('startButton');";
      echo "      var parentHandle = handle.parentNode;";
      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 "              startSliceTime = new Date(this.responseText);";
      echo "              parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSliceAjax()'>End</button>`;";
      echo "              sliceIndex = parentHandle.previousElementSibling.innerHTML;";
      echo "            } else {";
      echo "              alert(this.responseText);";
      echo "            }";
      echo "          } else {";
      echo "            alert('AJAX error encountered');";
      echo "          }";
      echo "        }";
      echo "      };";
      echo "      var noteHandle = document.getElementById('nextSliceNoteID');";
      echo "      var noteValue = noteHandle.value;";
      echo "      xmlhttp.open('GET','UpdateStartTime.php?ToDoIDx='+$ToDoID+'&Notex='+noteValue, true);";
      echo "      xmlhttp.send();";
      echo "    }";

echo " function startSliceAjax() {";

echo " var xmlhttp = new XMLHttpRequest();";

echo " var handle = document.getElementById('startButton');";

echo " var parentHandle = handle.parentNode;";

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 " startSliceTime = new Date(this.responseText);";

echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSliceAjax()'>End</button>`;";

echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;";

echo " } else {";

echo " alert(this.responseText);";

echo " }";

echo " } else {";

echo " alert('AJAX error encountered');";

echo " }";

echo " };";

echo " var noteHandle = document.getElementById('nextSliceNoteID');";

echo " var noteValue = noteHandle.value;";

echo " xmlhttp.open('GET','UpdateStartTime.php?ToDoIDx='+$ToDoID+'&Notex='+noteValue, true);";

echo " xmlhttp.send();";

echo " }";

We’re receiving the echoed text from the PHP and displaying it based on what data it contains.

Posted in Software | Tagged AJAX, JavaScript, MySQL, PHP, To Do List project | Leave a comment

To Do List Project: Part 4

Posted on March 20, 2017 by R.P. Churchill

The five states and four transitions in the AJAX process are:

request not initialized
server connection established
request received
processing request
request finished and response is ready

If we don’t care about trying to trap process errors, assume we’ll always get to state 4, and don’t implement a timeout we can change the code from last time so it only updates when the process completes:

      echo "    function startSliceAjax() {";
      echo "      var xmlhttp = new XMLHttpRequest();";
      echo "      var handle = document.getElementById('startButton');";
      echo "      var parentHandle = handle.parentNode;";
      echo "      xmlhttp.onreadystatechange = function() {";
      echo "        if (this.readyState == 4) {";
      echo "          if (this.status == 200) {";
      echo "            parentHandle.innerHTML = this.responseText;";
      echo "            parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";
      echo "            sliceIndex = parentHandle.previousElementSibling.innerHTML;";
      echo "          } else {";
      echo "            alert('error encountered');";
      echo "          }";
      echo "        }";
      echo "      };";
      echo "      xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";
      echo "      xmlhttp.send();";
      echo "    }";

echo " function startSliceAjax() {";

echo " var xmlhttp = new XMLHttpRequest();";

echo " var handle = document.getElementById('startButton');";

echo " var parentHandle = handle.parentNode;";

echo " xmlhttp.onreadystatechange = function() {";

echo " if (this.readyState == 4) {";

echo " if (this.status == 200) {";

echo " parentHandle.innerHTML = this.responseText;";

echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";

echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;";

echo " } else {";

echo " alert('error encountered');";

echo " }";

echo " };";

echo " xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";

echo " xmlhttp.send();";

echo " }";

This way we only do something when the process completes. Note that setting up the End button only happens if and when a successful AJAX operation is completed. If the two lines were left at the bottom of the function there could be timing issues, so one has to be mindful of the asynchronous nature of the operations at all times.

Posted in Software | Tagged JavaScript, PHP, To Do List project | Leave a comment

To Do List Project: Part 3

Posted on March 16, 2017 by R.P. Churchill

Today I replaced part of the update code with a basic AJAX call to derive the same information I was getting from JavaScript. The communication itself is straightforward. Here’s the updated version of the JavaScript, which is currently embedded in the UpdateToDo.php file.

      echo "    function startSliceAjax() {";
      echo "      var xmlhttp = new XMLHttpRequest();";
      echo "      var handle = document.getElementById('startButton');";
      echo "      var parentHandle = handle.parentNode;";
      echo "      xmlhttp.onreadystatechange = function() {";
      echo "        if (this.readyState == 4 && this.status == 200) {";
      echo "          parentHandle.innerHTML = this.responseText;";
//      echo "        } else {";
//      echo "          parentHandle.innerHTML = 'error encountered';";
      echo "        }";
      echo "      };";
      echo "      xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";
      echo "      xmlhttp.send();";
      echo "      ";
      echo "      parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";
      echo "      sliceIndex = parentHandle.previousElementSibling.innerHTML;";
      echo "    }";

echo " function startSliceAjax() {";

echo " var xmlhttp = new XMLHttpRequest();";

echo " var handle = document.getElementById('startButton');";

echo " var parentHandle = handle.parentNode;";

echo " xmlhttp.onreadystatechange = function() {";

echo " if (this.readyState == 4 && this.status == 200) {";

echo " parentHandle.innerHTML = this.responseText;";

// echo " } else {";

// echo " parentHandle.innerHTML = 'error encountered';";

echo " }";

echo " };";

echo " xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";

echo " xmlhttp.send();";

echo " ";

echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";

echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;";

echo " }";

Here’s the (mindlessly simple) UpdateStartTime.php file:

<?php
  $q = $_REQUEST["q"];

  $date = date('Y-m-d h:i:s', time());

  echo $date; //." - $q";
?>

<?php

$q = $_REQUEST["q"];

$date = date('Y-m-d h:i:s', time());

echo $date; //." - $q";

If the last part of the last line is uncommented then it returns the ToDoID that was sent with the AJAX request. This test was a precursor to adding a MySQL call to create a new time slice record in the database, associated with the current To Do item for the current user.

Two lines are commented out in the embedded JavaScript above. If they are uncommented then when the user clicks on the Start button the button is first replaced with the text “error encountered” and then with the date-time string returned by the AJAX. I’m still mentally getting a feel for this. The callback function is only “called” once, right? Well, no. It must be getting called on every change of state through the whole data exchange process, and as I recall from reading there are a number of such state changes. If I modify the new function as shown below, so it includes the count of the number of times the callback function is invoked, it ends up displaying a value of four, meaning that four state changes occur.

Now the trick is to understand what they all are and the best way to differentiate between a delayed reaction and a failed transfer so the process looks smooth and graceful.

      echo "    var ajaxCount = 0;";
      echo "    function startSliceAjax() {";
      echo "      var xmlhttp = new XMLHttpRequest();";
      echo "      var handle = document.getElementById('startButton');";
      echo "      var parentHandle = handle.parentNode;";
      echo "      xmlhttp.onreadystatechange = function() {";
      echo "        if (this.readyState == 4 && this.status == 200) {";
      echo "          parentHandle.innerHTML = this.responseText + ' ' + ++ajaxCount;";
      echo "        } else {";
      echo "          parentHandle.innerHTML = 'error encountered + ' + ++ajaxCount;";
      echo "        }";
      echo "      };";
      echo "      xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";
      echo "      xmlhttp.send();";
      echo "      ";
      echo "      parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";
      echo "      sliceIndex = parentHandle.previousElementSibling.innerHTML;";
      echo "    }";

echo " var ajaxCount = 0;";

echo " function startSliceAjax() {";

echo " var xmlhttp = new XMLHttpRequest();";

echo " var handle = document.getElementById('startButton');";

echo " var parentHandle = handle.parentNode;";

echo " xmlhttp.onreadystatechange = function() {";

echo " if (this.readyState == 4 && this.status == 200) {";

echo " parentHandle.innerHTML = this.responseText + ' ' + ++ajaxCount;";

echo " } else {";

echo " parentHandle.innerHTML = 'error encountered + ' + ++ajaxCount;";

echo " }";

echo " };";

echo " xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);";

echo " xmlhttp.send();";

echo " ";

echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";

echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;";

echo " }";

Eventually I’ll have to address time zone issues if all timestamps are generated server side.

Posted in Software | Tagged AJAX, PHP, To Do List project | Leave a comment

To Do List Project: Part 2

Posted on March 15, 2017 by R.P. Churchill

Today I spent most of my time reading and watching videos. I’m trying to get a feel for matters of style in PHP (wrt endless rows of echo statements vs. raw JavaScript, among other things), revisit AJAX operations, and so on. The videos came from version 2.0 of the The Complete Web Developer Course by Rob Percival and the book is PHP for the Web: Visual QuickStart Guide (5th Edition), which I’m reading on Safaribooks.com.

The PHP code from the MySQL course looked one way and WordPress’s PHP tends to look different. I just have to do enough PHP on my own that I get a more natural feel for it.

Posted in Software | Tagged JavaScript, PHP, resources, To Do List project | Leave a comment

To Do List Project: Part 1

Posted on March 14, 2017 by R.P. Churchill

Today I worked out a lot of the JavaScript that might be needed to effect the screen changes I want to have happen as various buttons are pushed. A To Do item against which no time has been expended would look like this:

If the user clicks on the Start button the button is replaced by the current date and time and the End button is made visible in the right-hand cell. If the user also adds a note to the time slice information then the table would look like this:

Finally, if the user clicks on the End button then it should be replaced by the current time, the text input field should be removed and replaced with the raw text that had been entered there, and a new set of rows should be added like this:

If the user checks the Complete checkbox then the last time slice row should be completed if it had been started (as if the user had clicked on the End button) or erased entirely if it had not been started (as if the user had not clicked on the Start button). I haven’t implemented that yet.

All of this actually works in CloudNine but what’s missing is the mechanics of making the requisite database entries for the time slice information as things proceed. What really should happen is the event should be forwarded to the server, where some PHP code would attempt to write the time slice information to the MySQL database. If the operation is successful the local HTML should be updated and if it is not successful an error message should be displayed. Successful operations should also update the values of hours and minutes in the Elapsed Time fields, and that also has not yet been implemented.

The background operations are going to require some AJAX and server-side code, which I’ll look at tomorrow. In the meantime here’s the (ugly) code that performs the raw JavaScript operations. This will have to be changed when I get the whole chain of events put together. The main thing for now is that I’m getting a feel for interactively navigating and modifying the DOM in a way that my previous work hasn’t given me.

      echo "  <script type='text/javascript'>";
      echo "    var sliceIndex;";
      echo "    var startSliceTime;";
      echo "    var endSliceTime;";
      echo "    var elapsedSliceTime;";

      echo "    function addTableRow() {";
      echo "      var thNode = document.createElement('TH');";
      echo "      thNode.setAttribute('scope','row');";
      echo "      thNode.setAttribute('rowspan','2');";
      echo "      thNode.innerHTML = ++sliceIndex;";
      echo "      var tdNode1 = document.createElement('TD');";
      echo "      tdNode1.innerHTML = `<button type='button' id='startButton' onmouseup='startSlice()'>Start</button>`;";
      echo "      var tdNode2 = document.createElement('TD');";
      echo "      var trNode = document.createElement('TR');";
      echo "      trNode.appendChild(thNode);";
      echo "      trNode.appendChild(tdNode1);";
      echo "      trNode.appendChild(tdNode2);";
      echo "      sliceTableHandle.appendChild(trNode);";
      echo "      var tdNode3 = document.createElement('TD');";
      echo "      tdNode3.setAttribute('colspan','2');";
      echo "      tdNode3.innerHTML = `<input class='form-control' id='nextSliceNoteID' type='text' name='nextSliceNote' maxlength='100' />`;";
      echo "      var trNode2 = document.createElement('TR');";
      echo "      trNode2.appendChild(tdNode3);";
      echo "      sliceTableHandle.appendChild(trNode2);";
      echo "    }";

      echo "    function pad2(s) {";
      echo "      while (s.length < 2) {";
      echo "        s = '0' + s";
      echo "      }";
      echo "      return s;";
      echo "    }";

      echo "    function endSlice() {";
      echo "      var handle = document.getElementById('endButton');";
      echo "      var parentHandle = handle.parentNode;";
      echo "      var now = new Date();";
      echo "      endSliceTime = now;";
      echo "      elapsedSliceTime = endSliceTime - startSliceTime;";
      echo "      var sdate = now.getFullYear()+'-'+pad2((now.getMonth()+1).toString());";
      echo "      sdate += '-'+pad2(now.getDay().toString())+' '+pad2(now.getHours().toString());";
      echo "      sdate += ':'+pad2(now.getMinutes().toString())+':'+pad2(now.getSeconds().toString());";
      echo "      parentHandle.innerHTML = sdate;";
      echo "      sliceIndex = parentHandle.previousElementSibling.previousElementSibling.innerHTML;";
      echo "      var noteHandle = document.getElementById('nextSliceNoteID');";
      echo "      var noteValue = noteHandle.value;";
      echo "      noteHandle.parentElement.innerHTML = noteValue;";
      echo "      addTableRow();";
      echo "    }";

      echo "    function startSlice() {";
      echo "      var handle = document.getElementById('startButton');";
      echo "      var parentHandle = handle.parentNode;";
      echo "      var now = new Date();";
      echo "      startSliceTime = now;";
      echo "      var sdate = now.getFullYear()+'-'+pad2((now.getMonth()+1).toString());";
      echo "      sdate += '-'+pad2(now.getDay().toString())+' '+pad2(now.getHours().toString());";
      echo "      sdate += ':'+pad2(now.getMinutes().toString())+':'+pad2(now.getSeconds().toString());";
      echo "      parentHandle.innerHTML = sdate;";
      echo "      parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";
      echo "      sliceIndex = parentHandle.previousElementSibling.innerHTML;";
      echo "    }";
      echo "  </script>";

echo " <script type='text/javascript'>";

echo " var sliceIndex;";

echo " var startSliceTime;";

echo " var endSliceTime;";

echo " var elapsedSliceTime;";

echo " function addTableRow() {";

echo " var thNode = document.createElement('TH');";

echo " thNode.setAttribute('scope','row');";

echo " thNode.setAttribute('rowspan','2');";

echo " thNode.innerHTML = ++sliceIndex;";

echo " var tdNode1 = document.createElement('TD');";

echo " tdNode1.innerHTML = `<button type='button' id='startButton' onmouseup='startSlice()'>Start</button>`;";

echo " var tdNode2 = document.createElement('TD');";

echo " var trNode = document.createElement('TR');";

echo " trNode.appendChild(thNode);";

echo " trNode.appendChild(tdNode1);";

echo " trNode.appendChild(tdNode2);";

echo " sliceTableHandle.appendChild(trNode);";

echo " var tdNode3 = document.createElement('TD');";

echo " tdNode3.setAttribute('colspan','2');";

echo " tdNode3.innerHTML = `<input class='form-control' id='nextSliceNoteID' type='text' name='nextSliceNote' maxlength='100' />`;";

echo " var trNode2 = document.createElement('TR');";

echo " trNode2.appendChild(tdNode3);";

echo " sliceTableHandle.appendChild(trNode2);";

echo " }";

echo " function pad2(s) {";

echo " while (s.length < 2) {";

echo " s = '0' + s";

echo " }";

echo " return s;";

echo " }";

echo " function endSlice() {";

echo " var handle = document.getElementById('endButton');";

echo " var parentHandle = handle.parentNode;";

echo " var now = new Date();";

echo " endSliceTime = now;";

echo " elapsedSliceTime = endSliceTime - startSliceTime;";

echo " var sdate = now.getFullYear()+'-'+pad2((now.getMonth()+1).toString());";

echo " sdate += '-'+pad2(now.getDay().toString())+' '+pad2(now.getHours().toString());";

echo " sdate += ':'+pad2(now.getMinutes().toString())+':'+pad2(now.getSeconds().toString());";

echo " parentHandle.innerHTML = sdate;";

echo " sliceIndex = parentHandle.previousElementSibling.previousElementSibling.innerHTML;";

echo " var noteHandle = document.getElementById('nextSliceNoteID');";

echo " var noteValue = noteHandle.value;";

echo " noteHandle.parentElement.innerHTML = noteValue;";

echo " addTableRow();";

echo " }";

echo " function startSlice() {";

echo " var handle = document.getElementById('startButton');";

echo " var parentHandle = handle.parentNode;";

echo " var now = new Date();";

echo " startSliceTime = now;";

echo " var sdate = now.getFullYear()+'-'+pad2((now.getMonth()+1).toString());";

echo " sdate += '-'+pad2(now.getDay().toString())+' '+pad2(now.getHours().toString());";

echo " sdate += ':'+pad2(now.getMinutes().toString())+':'+pad2(now.getSeconds().toString());";

echo " parentHandle.innerHTML = sdate;";

echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;";

echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;";

echo " }";

echo " </script>";

Posted in Software | Tagged JavaScript, PHP, To Do List project | Leave a comment

A Change of Direction for the Time Being

Posted on March 13, 2017 by R.P. Churchill

I’ve been focusing on new development and JavaScript for quite a while but need to spend more time grinding through books and online courses. I’ve been extending a PHP/MySQL/Bootstrap project for a while and need to get it finished so I can use it.

The problem with projects like this is that, since I can’t practicably maintain different versions of back end software, I can’t post active examples that demo a given day’s code updates. I guess we’ll have to live with code listings and, poooooossibly, working examples of changes made to the front end. That said, changes to back end software can easily break older front end examples, so I may choose to stick with listings and static screen captures.

In the meantime I’ll be updating the project I started as part of the The Complete MySQL Developer Course by Rob Percival on Udemy.com. It’s a simple To Do List application and since the emphasis is on MySQL the UI is pretty basic. I wanted to spruce up the UI to make it responsive using Bootstrap and add features from the book The 7 Habits of Highly Effective People. That part wasn’t difficult but I’m currently working through something a bit more complex (to me, at this time…).

I am adding the ability to track multiple time slices for different activities. This requires the addition of a new database table and some new UI functionality and interactivity. Here are the two important screenshots:

I’m not worrying about the Main screen for now (the upper one), I’m working through additions to the lower screen for individual activities. You can see an ugly-looking menu in the upper right corner, some random debugging information in the upper whitespace, and the section of interest shown with different colored regions. I colored the regions so I can see how the responsive sections realign as the screen or window changes size.

The header and footer regions are straightforward. The left section in light blue contains some basic information in the upper part and some 7 Habits information as a radio button selector in the lower part. The idea behind the latter item is to ensure you’re generating activities that address all areas of your life. Right right section in light red includes a few items from top to bottom. At the top is another radio button selector that characterizes the activity in terms of urgency and importance (most people tend to neglect class II activities and allow too much time to bleed away in class IV activities). The next item is the subject of my current efforts, the list of time slices so far devoted to the activity in question. Below that is a summation of total elapsed time and below that is a means to define the time to be allotted to the activity. Finally there’s a checkbox to indicate that the item has been completed.

Most of the time slice display is generated using a separate PHP file that includes a separate MySQL query. The trick it to be able to keep updating that part of the display while the screen is still visible. This involves adding entries to the database and modifying the information in the table cells, or adding new table rows entirely.

There are loads of additional concerns but for right now these are the basics.

Last but not least I’ve been doing the development in Cloud9, but I’ll eventually install it somewhere on my site as it gets closer to being done.

Posted in Software | Tagged Bootstrap, MySQL, PHP, To Do List project | Leave a comment

A Simple Discrete-Event Simulation: Part 88

Posted on March 9, 2017 by R.P. Churchill

Direct link for mobile devices.

Today I updated the code to define DisplayGroups for all non-Path components, which means the internal data for each component will become visible when the relevant component is clicked. Moreover, each visible DisplayGroup object can be dragged to a new location. These operations work for both mouse and touch operations. Try it out and see what you think.

I’m still highly annoyed that the intersection test doesn’t always generate the proper result, which causes the pointer not to be displayed, but the effect is otherwise pretty smooth.

I cleaned up some code that caused the frame colors for the DisplayGroups to not be consistent (mostly by commenting out some old stuff) and shortened up the definition function for DisplayGroups to use default colors that can be customized separately.

Here’s the code for handling events, made consistent for mouse and touch ops.

    var selectedDataGroup;
    
    function selectDisplayGroup(x, y) {
      var i = 0;
      if (setOfComponents.length > 0) {
        var done = false;
        while (!done) {
          if ((typeof setOfComponents[i].dataGroup !== "undefined") &&
              (setOfComponents[i].dataGroup.isVisible()) &&
              (setOfComponents[i].dataGroup.isClickInside(x, y))) {
            done = true;
          } else {
            i++;
          }
          if (i >= setOfComponents.length) {
            done = true;
          }
        }
        if (i < setOfComponents.length) {
          return i;
        } else {
          return -1;
        }
      } else {
        return -1;
      }
    }
    
    function selectComponent(x, y) {
      var i = 0;
      if (setOfComponents.length > 0) {
        var done = false;
        while (!done) {
          if ((typeof setOfComponents[i].graphic !== "undefined") &&
              (setOfComponents[i].graphic.isClickInside(x, y))) {
            done = true;
          } else {
            i++;
          }
          if (i >= setOfComponents.length) {
            done = true;
          }
        }
        if (i < setOfComponents.length) {
          if (!setOfComponents[i].graphic.highlighted) {
            setOfComponents[i].graphic.highlight();
            if (typeof setOfComponents[i].dataGroup !== "undefined") {
              setOfComponents[i].dataGroup.turnOn();
            }
            drawModel();
          } else {
            setOfComponents[i].graphic.unHighlight();
            if (typeof setOfComponents[i].dataGroup !== "undefined") {
              setOfComponents[i].dataGroup.turnOff();
            }
            drawModel();
          }
          return i;
        } else {
          return -1;
        }
      } else {
        return -1;
      }
    }
    
    ///////////////////mouse drag events
    var componentSelectionIndex;
    
    var dragFlag = false;
    var startDragX;
    var startDragY;
    var dragBaseX;
    var dragBaseY;
    var dragLastX;
    var dragLastY;
    var totalDragDistance;

    var mouseTimeStamp = 0;

    var displayGroupPointer = -1;
    
    //start drag
    canvas.addEventListener("mousedown", function(event) {
      startDrag(event);
    });
    
    function startDrag(e) {
      mouseTimeStamp = Date.now();
      startDragX = globalBaseX;
      startDragY = globalBaseY;
      dragBaseX = e.clientX;
      dragBaseY = e.clientY;
      dragLastX = dragBaseX;
      dragLastY = dragBaseY;
      dragFlag = true;
      totalDragDistance = 0;
      var temp = selectDisplayGroup(dragLastX+globalBaseX, dragLastY+globalBaseY);
      if (temp > -1) {
        displayGroupPointer = temp;
      }
    }

    //end drag
    canvas.addEventListener("mouseup", function(event) {
      endDrag(event);
    });
    
    function endDrag(e) {
      var endTime = Date.now();
      if (((endTime - mouseTimeStamp) < 300) && (totalDragDistance <= 3)) {  //treat as a click event
        componentSelectionIndex = selectComponent(dragLastX+globalBaseX, dragLastY+globalBaseY);
      }
      dragFlag = false;
      displayGroupPointer = -1;
    }
    
    //move while dragging
    canvas.addEventListener("mousemove", function(event) {
      doDrag(event);
    });

    function doDrag(e) {
      if (dragFlag) {
        var currentX = e.clientX;
        var currentY = e.clientY;
        var incrementX = currentX - dragLastX;
        var incrementY = currentY - dragLastY;
        totalDragDistance += Math.abs(incrementX) + Math.abs(incrementX);
        if (totalDragDistance > 3) {
          if (displayGroupPointer > -1) {
            setOfComponents[displayGroupPointer].dataGroup.moveBy(incrementX, incrementY);
            drawModel();
          } else {
            if (incrementX > 0) {
              panLeft(incrementX)
            } else if (incrementX < 0) {
              panRight(-incrementX)
            }
            if (incrementY > 0) {
              panUp(incrementY);
            } else if (incrementY < 0) {
              panDown(-incrementY);
            }
          }
          dragLastX = currentX;
          dragLastY = currentY;
        }
      }    
    }
    
    //mouse leaves canvas
    canvas.addEventListener("mouseleave", function(event) {
      leaveDrag(event);
    });
    
    function leaveDrag(e) {
      if (dragFlag) {
        globalBaseX = startDragX;
        globalBaseY = startDragY;
        if (!running) {
          drawModel();
        }
        dragFlag = false;
      }
    }
    
    ///////////////////touch drag events, for now only supports first touch point
    var touchTimeStamp = 0;

    //start drag
    canvas.addEventListener("touchstart", function(event) {
      startDragT(event);
    });
    
    function startDragT(e) {
      touchTimeStamp = Date.now();
      startDragX = globalBaseX;
      startDragY = globalBaseY;
      e.preventDefault();
      var touches = e.changedTouches;
      dragBaseX = touches[0].pageX;  //change to clientX
      dragBaseY = touches[0].pageY;  //change to clientY
      dragLastX = dragBaseX;
      dragLastY = dragBaseY;
      dragFlag = true;
      totalDragDistance = 0;
      var temp = selectDisplayGroup(dragLastX+globalBaseX, dragLastY+globalBaseY);
      if (temp > -1) {
        displayGroupPointer = temp;
      }
    }

    //end drag
    canvas.addEventListener("touchend", function(event) {
      endDragT(event);
    });
    
    function endDragT(e) {
      var endTime = Date.now();
      if (((endTime - touchTimeStamp) < 300) && (totalDragDistance <= 3)) {  //treat as a click event
        componentSelectionIndex = selectComponent(dragLastX+globalBaseX, dragLastY+globalBaseY);
      }
      dragFlag = false;
      displayGroupPointer = -1;
    }
    
    //move while dragging
    canvas.addEventListener("touchmove", function(event) {
      doDragT(event);
    });
    
    function doDragT(e) {
      if (dragFlag) {
        //e.preventDefault();
        var touches = e.changedTouches;
        var currentX = touches[0].pageX;
        var currentY = touches[0].pageY;
        var incrementX = currentX - dragLastX;
        var incrementY = currentY - dragLastY;
        //accumulate drag distance
        totalDragDistance += Math.abs(incrementX) + Math.abs(incrementX);
        if (totalDragDistance > 3) {
          if (displayGroupPointer > -1) {
            setOfComponents[displayGroupPointer].dataGroup.moveBy(incrementX, incrementY);
            drawModel();
          } else {
            if (incrementX > 0) {
              panLeft(incrementX)
            } else if (incrementX < 0) {
              panRight(-incrementX)
            }
            if (incrementY > 0) {
              panUp(incrementY);
            } else if (incrementY < 0) {
              panDown(-incrementY);
            }
          }
          dragLastX = currentX;
          dragLastY = currentY;
        }
      }    
    }
    
    //touch leaves appropriate area (control works beyond canvas)
    canvas.addEventListener("touchcancel", function(event) {
      leaveDragT(event);
    });
    
    function leaveDragT(e) {
      if (dragFlag) {
        globalBaseX = startDragX;
        globalBaseY = startDragY;
        if (!running) {
          drawModel();
        }
        dragFlag = false;
      }
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

var selectedDataGroup;

function selectDisplayGroup(x, y) {

var i = 0;

if (setOfComponents.length > 0) {

var done = false;

while (!done) {

if ((typeof setOfComponents[i].dataGroup !== "undefined") &&

(setOfComponents[i].dataGroup.isVisible()) &&

(setOfComponents[i].dataGroup.isClickInside(x, y))) {

done = true;

} else {

i++;

}

if (i >= setOfComponents.length) {

done = true;

}

if (i < setOfComponents.length) {

return i;

} else {

return -1;

}

} else {

return -1;

}

function selectComponent(x, y) {

var i = 0;

if (setOfComponents.length > 0) {

var done = false;

while (!done) {

if ((typeof setOfComponents[i].graphic !== "undefined") &&

(setOfComponents[i].graphic.isClickInside(x, y))) {

done = true;

} else {

i++;

}

if (i >= setOfComponents.length) {

done = true;

}

if (i < setOfComponents.length) {

if (!setOfComponents[i].graphic.highlighted) {

setOfComponents[i].graphic.highlight();

if (typeof setOfComponents[i].dataGroup !== "undefined") {

setOfComponents[i].dataGroup.turnOn();

}

drawModel();

} else {

setOfComponents[i].graphic.unHighlight();

if (typeof setOfComponents[i].dataGroup !== "undefined") {

setOfComponents[i].dataGroup.turnOff();

}

drawModel();

}

return i;

} else {

return -1;

}

} else {

return -1;

}

///////////////////mouse drag events

var componentSelectionIndex;

var dragFlag = false;

var startDragX;

var startDragY;

var dragBaseX;

var dragBaseY;

var dragLastX;

var dragLastY;

var totalDragDistance;

var mouseTimeStamp = 0;

var displayGroupPointer = -1;

//start drag

canvas.addEventListener("mousedown", function(event) {

startDrag(event);

});

function startDrag(e) {

mouseTimeStamp = Date.now();

startDragX = globalBaseX;

startDragY = globalBaseY;

dragBaseX = e.clientX;

dragBaseY = e.clientY;

dragLastX = dragBaseX;

dragLastY = dragBaseY;

dragFlag = true;

totalDragDistance = 0;

var temp = selectDisplayGroup(dragLastX+globalBaseX, dragLastY+globalBaseY);

if (temp > -1) {

displayGroupPointer = temp;

}

//end drag

canvas.addEventListener("mouseup", function(event) {

endDrag(event);

});

function endDrag(e) {

var endTime = Date.now();

if (((endTime - mouseTimeStamp) < 300) && (totalDragDistance <= 3)) { //treat as a click event

componentSelectionIndex = selectComponent(dragLastX+globalBaseX, dragLastY+globalBaseY);

}

dragFlag = false;

displayGroupPointer = -1;

}

//move while dragging

canvas.addEventListener("mousemove", function(event) {

doDrag(event);

});

function doDrag(e) {

if (dragFlag) {

var currentX = e.clientX;

var currentY = e.clientY;

var incrementX = currentX - dragLastX;

var incrementY = currentY - dragLastY;

totalDragDistance += Math.abs(incrementX) + Math.abs(incrementX);

if (totalDragDistance > 3) {

if (displayGroupPointer > -1) {

setOfComponents[displayGroupPointer].dataGroup.moveBy(incrementX, incrementY);

drawModel();

} else {

if (incrementX > 0) {

panLeft(incrementX)

} else if (incrementX < 0) {

panRight(-incrementX)

}

if (incrementY > 0) {

panUp(incrementY);

} else if (incrementY < 0) {

panDown(-incrementY);

}

dragLastX = currentX;

dragLastY = currentY;

}

//mouse leaves canvas

canvas.addEventListener("mouseleave", function(event) {

leaveDrag(event);

});

function leaveDrag(e) {

if (dragFlag) {

globalBaseX = startDragX;

globalBaseY = startDragY;

if (!running) {

drawModel();

}

dragFlag = false;

}

///////////////////touch drag events, for now only supports first touch point

var touchTimeStamp = 0;

//start drag

canvas.addEventListener("touchstart", function(event) {

startDragT(event);

});

function startDragT(e) {

touchTimeStamp = Date.now();

startDragX = globalBaseX;

startDragY = globalBaseY;

e.preventDefault();

var touches = e.changedTouches;

dragBaseX = touches[0].pageX; //change to clientX

dragBaseY = touches[0].pageY; //change to clientY

dragLastX = dragBaseX;

dragLastY = dragBaseY;

dragFlag = true;

totalDragDistance = 0;

var temp = selectDisplayGroup(dragLastX+globalBaseX, dragLastY+globalBaseY);

if (temp > -1) {

displayGroupPointer = temp;

}

//end drag

canvas.addEventListener("touchend", function(event) {

endDragT(event);

});

function endDragT(e) {

var endTime = Date.now();

if (((endTime - touchTimeStamp) < 300) && (totalDragDistance <= 3)) { //treat as a click event

componentSelectionIndex = selectComponent(dragLastX+globalBaseX, dragLastY+globalBaseY);

}

dragFlag = false;

displayGroupPointer = -1;

}

//move while dragging

canvas.addEventListener("touchmove", function(event) {

doDragT(event);

});

function doDragT(e) {

if (dragFlag) {

//e.preventDefault();

var touches = e.changedTouches;

var currentX = touches[0].pageX;

var currentY = touches[0].pageY;

var incrementX = currentX - dragLastX;

var incrementY = currentY - dragLastY;

//accumulate drag distance

totalDragDistance += Math.abs(incrementX) + Math.abs(incrementX);

if (totalDragDistance > 3) {

if (displayGroupPointer > -1) {

setOfComponents[displayGroupPointer].dataGroup.moveBy(incrementX, incrementY);

drawModel();

} else {

if (incrementX > 0) {

panLeft(incrementX)

} else if (incrementX < 0) {

panRight(-incrementX)

}

if (incrementY > 0) {

panUp(incrementY);

} else if (incrementY < 0) {

panDown(-incrementY);

}

dragLastX = currentX;

dragLastY = currentY;

}

//touch leaves appropriate area (control works beyond canvas)

canvas.addEventListener("touchcancel", function(event) {

leaveDragT(event);

});

function leaveDragT(e) {

if (dragFlag) {

globalBaseX = startDragX;

globalBaseY = startDragY;

if (!running) {

drawModel();

}

dragFlag = false;

}

Posted in Software | Tagged discrete-event sim project, drag items, JavaScript, mouse events, select items, touch events | Leave a comment

Search for:
Recent Posts
Recent Comments
Categories
Meta
October 2025

M T W T F S S

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

« Jan

Recent Posts

Recent Comments

Categories

Meta