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