Task Detail

Update task state: Activity on Thu Jan 18 2018 22:30:36 GMT+0000 (UTC) The task will only update at Task State field and not next to the task name because it would require too much execution and slow down the page. Refresh the page would be better and more efficient. Activity on Thu Jan 11 2018 19:50:24 GMT+0000 (UTC) 1. Fixed the task state won't changed after update when switch from one task to another even though it changes in the database. 2. Added all the task state into tskStateOnId right after the page is loaded. 3. Moved the task state part into the else statement when a task is selected successful. 4. Render the value of the task state using the tskStateOnId array with the tskId while we still working on the page. 5. Still need to figure out how to update the state right next to the task name: I might have to put the option.text in a array, too, and show it when the state is changed. Activity on Thu Jan 11 2018 14:59:27 GMT+0000 (UTC) 1. Failed to use .click() or on('click', function( ){ }) inside of note-form1 to just get task state info. Everytime I clicked the button, the form get submit because .submit( ) listens to any button when it is clicked. 2. Added new form (id="tsk-updte-tsk-state-frm") and move the task state divs to the form. 3. Added new .submit for update task state. 4. The submit take in task state and task id to post to project controller. 5. Added handleUpdateTaskState controller and handleUpdateTaskState API controller. 6. Added update sql to sql.js. 7. Added Auth configure to the handleUpdateTaskState controller. 8. The update was working fine. 9. Still need to fix: the selection field won't change when switch to different task, and the state is not immediately change next to each task. Activity on Wed Jan 10 2018 15:36:14 GMT+0000 (UTC) 1. Decided to created 'update task state' button just to take in task state. 2. Give an id to the small left div (tsk-update-state) right next to Task State div. 3. Get the div by id and display the 'Update Task State' button when a task select. 4. Will need to add a function to get value from Task State selection.

Show task state for each task: Activity on Tue Jan 16 2018 15:53:06 GMT+0000 (UTC) The task will only update at Task State field and not next to the task name because it would require too much execution and slow down the page. Refresh the page would be better and more efficient. Activity on Tue Jan 09 2018 14:41:46 GMT+0000 (UTC) Problem: how to show the task states next to each task and have a field to update the task state. Solving: 1. I added ('+taskData[i].state+') right next to the task '+taskData[i].task_name+' on the first ajax. 2. In select and display task note section, I added the below to display the the tskStateOnId array in previous note. /******** task state **********************/ document.getElementById('task-state-label').innerHTML='Task State:' document.getElementById('task-state').innerHTML= '<select class="form-control" type="text">'+ '<option value="'+tskStateOnId[tskId]+'">'+tskStateOnId[tskId]+'</option>'+ '<option value="open">Open</option>'+ '<option value="pending">Pending</option>'+ '<option value="waiting">Waiting</option>'+ '<option value="complete">Complete</option>'+ '</select>'; /********* end task state ******************/ Activity on Tue Jan 09 2018 14:32:37 GMT+0000 (UTC) Problem: each project is getting more tasks added, and sometime I am working on two or more tasks at the same time. Able to tell the state of the task right next to it would help me a lot. Solving: 1. Use left a sm-2 div after Tasks for task-state-label, and a sm-3 div right after for task-state selection. 2. The Divs will be leaved empty and get filled out later by lib.js. 3. I created a global array (const tskStateOnId=[ ]), and collected the task states from the first ajax get/task-name/+prjId by project ID because this is the only place so far that has all the information from task table. 4. The tskStateOnId array was collecting the states of tasks using the task IDs (tskStateOnId[taskData[i].id] = taskData[i].state;).

Update project button: Activity on Fri Jan 05 2018 18:53:28 GMT+0000 (UTC) 1. Added $('#update-proj-form-1').submit(function(e){}) to the lib.js 2. Ajax to post Description, State, Due Date, Project ID, and Completion Date to controller/project/index.js. 3. Create handleUpdateProject() function to post the data above to the API routes/project/index.js. 4. Create handleUpdateProject() function in API to take in the data above and send them to db.execute() function. 5. Created update query in sql.js to update the record where the project ID = project ID value. 6. Return 1 from API to Controller for successful update. 7. Return that result to lib.js to alert successfully add. 8. No need to refresh the page because the change data are showing as they currently are in the DB. Activity on Thu Jan 04 2018 20:23:59 GMT+0000 (UTC) 1. Added "Update Project" button. 2. Created btn-sm2 class for the buttons on the right side, and set their widths to 100% for symmetric purpose. 3. Gave the form an id: "update-proj-form-1"

Timestamp to String: Activity on Mon Dec 18 2017 19:40:00 GMT+0000 (UTC) I used the information from the below to display the time: http://timestamp.online/article/how-to-convert-timestamp-to-datetime-in-javascript How To Convert Timestamp To Date and Time in JavaScript Unlike other languages, JavaScript doesn't have equivalent for function strftime. Javascript however provides multiple functions to present date and time in human readable form. They are: toDateString Converts the date portion of a Date object into a readable string toGMTString Deprecated. Use the toUTCString() method instead toISOString Returns the date as a string, using the ISO standard toJSON Returns the date as a string, formatted as a JSON date toLocaleDateString Returns the date portion of a Date object as a string, using locale conventions toLocaleTimeString Returns the time portion of a Date object as a string, using locale conventions toLocaleString Converts a Date object to a string, using locale conventions toString Converts a Date object to a string toTimeString Converts the time portion of a Date object to a string toUTCString() Converts a Date object to a string, according to universal time toDateString() You can learn more about toDateString in documentation. var ts = new Date(); console.log(ts.toDateString()); # Mon Dec 18 2017 toISOString() You can learn more about toISOString in documentation. var ts = new Date(); console.log(ts.toISOString()); # %2017-12-18T20:15:05+01:00 Other Functions var ts = new Date(); console.log(ts.toDateString()); # Mon Dec 18 2017 console.log(ts.toGMTString()); # Mon, 18 Dec 2017 19:18:13 GMT console.log(ts.toISOString()); # 2017-12-18T19:18:13.653Z console.log(ts.toJSON()); # 2017-12-18T19:18:13.653Z console.log(ts.toLocaleDateString()); # 12/18/2017 console.log(ts.toLocaleTimeString()); # 2:18:13 PM console.log(ts.toLocaleString()); # 12/18/2017, 2:18:13 PM console.log(ts.toString()); # Mon Dec 18 2017 14:18:13 GMT-0500 (EST) console.log(ts.toTimeString()); # 14:18:13 GMT-0500 (EST) console.log(ts.toUTCString()); # Mon, 18 Dec 2017 19:18:13 GMT

Display new note right after added: Activity on Mon Dec 18 2017 18:54:20 GMT+0000 (UTC) Better way to display the note right after added: since the previous way ajax and query everything from the controller and database again, that would be too expensive. I added another <div> in the index.marko: <div id="" class="row proj-rows"> <div id="recent-added-note-label" class="col-sm-2 proj-left-divs"></div> <div id="recent-added-note" class="col-sm-8"> <!--this is for recent note added div on existing notes --> </div> </div> and then grab the new note and display through there, so everything can be happened in the browser for displaying. document.getElementById('recent-added-note-label').innerHTML='Recent added note:'; document.getElementById('recent-added-note').innerHTML+= '<div id="activity-note">'+ '<p id="noteLabel">Activity on '+Date()+':</p>'+ '<p><xmp style="white-space: pre-wrap">'+$("textarea[name='work-note']").val()+' ' ' '; document.getElementById('note-form1').reset(); //need to reset after all, or else the recent note will be empty Activity on Mon Dec 18 2017 14:34:55 GMT+0000 (UTC) I set for activity to be empty after the post is success, and then ajax with global tskId same as I ajax when a task is selected: $('#note-form1').submit(function(e){ e.preventDefault(); if($("textarea[name='work-note']").val()==""){ alert('fill out note before you can submit it'); return false; }else{ //console.log($("textarea[name='work_note']").val()); //console.log(tskId); document.getElementById('tsk-activity').innerHTML=''; $.ajax({ type:'post', url:'/post/note', data:{ work_note:$("textarea[name='work-note']").val(), tskId:tskId }, success:function(result){ //console.log(result); //document.getElementById('note-form1').reset(); if(result==1){ console.log('successfully posted note') //window.location.href='/project/'+prjId; $.ajax({ type:'get', url:'/get/task-note/'+tskId, success:function(tskData){ document.getElementById('work-note-label').innerHTML='Work note:'; document.getElementById('noteSubmit').innerHTML= '<button type="submit" class="btn btn-default btn-sm">Post Note</button>'; document.getElementById('work-note-textarea').innerHTML='<textarea'+ ' class="form-control" name="work-note" rows="5" cols="40" placeholder='+ '"Fill out your new note here"></textarea>'; var k = tskData.id.length - 1; //id is an array in tskData json do{ document.getElementById('activity-label').innerHTML='Activity:'; document.getElementById('tsk-activity').innerHTML+= '<div id="activity-note">'+ '<p id="noteLabel">Activity on '+tskData.added_date[k]+':</p>'+ '<p>'+ tskData.note[k]+'</p>' '</div>'; k--; }while(k >= 0) }, error:function(){ alert("couldn't get task note") } }); }else{ console.log('Ajax post/note was good but data was not inserted') } }, error:function(){ alert("error posting note"); } }); } }); Activity on Mon Dec 18 2017 14:32:01 GMT+0000 (UTC) backup the current setting which reset the whole page back to where tasks is "select a task to ..." $('#note-form1').submit(function(e){ e.preventDefault(); if($("textarea[name='work-note']").val()==""){ alert('fill out note before you can submit it'); return false; }else{ //console.log($("textarea[name='work_note']").val()); //console.log(tskId); $.ajax({ type:'post', url:'/post/note', data:{ work_note:$("textarea[name='work-note']").val(), tskId:tskId }, success:function(result){ //console.log(result); //document.getElementById('note-form1').reset(); if(result==1){ console.log('successfully posted note') window.location.href='/project/'+prjId; }, error:function(){ alert("error posting note"); } }); } });

Display note in descending order: Activity on Mon Dec 18 2017 14:09:07 GMT+0000 (UTC) Using do while loop is the best fit for this: var k = tskData.id.length - 1; //since an array start from 0 //it is not tskData.length because taskData is a json file, I need to use an array in that json file //console.log(k); //console.log(tskData.added_date[k]); do{ document.getElementById('activity-label').innerHTML='Activity:'; document.getElementById('tsk-activity').innerHTML+= '<div id="activity-note">'+ '<p id="noteLabel">Activity on '+tskData.added_date[k]+':</p>'+ '<p><xmp style="white-space: pre-wrap">'+ tskData.note[k]+' ' ' '; k--; }while(k >= 0) Activity on Mon Dec 18 2017 14:06:31 GMT+0000 (UTC) save a copy of ascending order before making the change: // for(var i=0; i<tskData.id.length; i++){ // document.getElementById('activity-label').innerHTML='Activity:'; // document.getElementById('tsk-activity').innerHTML+= // '<div id="activity-note">'+ // '<p id="noteLabel">Activity on '+tskData.added_date[i]+':</p>'+ // '<p><xmp style="white-space: pre-wrap">'+ tskData.note[i]+' ' // '

Display notes using div instead of textarea: Activity on Sun Dec 17 2017 16:17:43 GMT+0000 (UTC) Instead of uxing xmp I used xml, and that why the html kept messing up. After replaced xml with xmp, the html problem was fixed, but the display texts were overflow out of its div. Placed style="white-space: pre-wrap" inside xmp tag had fixed the problem. Activity on Sun Dec 17 2017 15:36:20 GMT+0000 (UTC) I tried to save to a copy of how I display the note using textarea, but because the note content html code, the display mess up everytime. Activity on Sun Dec 17 2017 15:33:43 GMT+0000 (UTC) save a copy of how to display with textarea. I have to use xml, so the note can display right since it has html code: <xml> // $('#slt-tsk').on('change', function(){ // tskId = this.value; // //set the below to empty and do nothing on Select a Task to view selection // if(tskId == 0){ // document.getElementById('work-note-label').innerHTML='' // document.getElementById('work-note-textarea').innerHTML=''; // document.getElementById('noteSubmit').innerHTML=''; // document.getElementById('activity-label').innerHTML=''; // document.getElementById('tsk-activity').innerHTML=''; // return false; // } // //when a task is selected empty the div below // document.getElementById('tsk-activity').innerHTML=''; // // $.ajax({ // type:'get', // url:'/get/task-note/'+tskId, // //returning json file not array // success:function(tskData){ // document.getElementById('work-note-label').innerHTML='Work note:'; // // document.getElementById('work-note-textarea').innerHTML='<textarea'+ // ' class="form-control" name="work-note" rows="5" cols="40" placeholder='+ // '"Fill out your new note here"></textarea>'; // // document.getElementById('noteSubmit').innerHTML= // '<button type="submit" class="btn btn-default btn-sm">Post Note</button>'; // // for(var i=0; i<tskData.id.length; i++){ // document.getElementById('activity-label').innerHTML='Activity:'; // document.getElementById('tsk-activity').innerHTML+='<textarea class="form-control test" rows="5" cols="40">'+ // tskData.added_date[i]+': '+ tskData.note[i]+ // '</textarea>'; // // } // }, // error:function(){ // alert("couldn't get task note") // } // }); // }) </xml> Activity on Sun Dec 17 2017 15:26:26 GMT+0000 (UTC) save a copy of how to display with textarea. I have to use xml, so the note can display right since it has html code: <xml> // $('#slt-tsk').on('change', function(){ // tskId = this.value; // //set the below to empty and do nothing on Select a Task to view selection // if(tskId == 0){ // document.getElementById('work-note-label').innerHTML='' // document.getElementById('work-note-textarea').innerHTML=''; // document.getElementById('noteSubmit').innerHTML=''; // document.getElementById('activity-label').innerHTML=''; // document.getElementById('tsk-activity').innerHTML=''; // return false; // } // //when a task is selected empty the div below // document.getElementById('tsk-activity').innerHTML=''; // // $.ajax({ // type:'get', // url:'/get/task-note/'+tskId, // //returning json file not array // success:function(tskData){ // document.getElementById('work-note-label').innerHTML='Work note:'; // // document.getElementById('work-note-textarea').innerHTML='<textarea'+ // ' class="form-control" name="work-note" rows="5" cols="40" placeholder='+ // '"Fill out your new note here"></textarea>'; // // document.getElementById('noteSubmit').innerHTML= // '<button type="submit" class="btn btn-default btn-sm">Post Note</button>'; // // for(var i=0; i<tskData.id.length; i++){ // document.getElementById('activity-label').innerHTML='Activity:'; // document.getElementById('tsk-activity').innerHTML+='<textarea class="form-control test" rows="5" cols="40">'+ // tskData.added_date[i]+': '+ tskData.note[i]+ // '</textarea>'; // // } // }, // error:function(){ // alert("couldn't get task note") // } // }); // }) </xml>

Controler and View directory: Activity on Sun Jun 06 2021 21:22:01 GMT+0000 (UTC) testing Activity on Fri Dec 15 2017 23:33:07 GMT+0000 (UTC) Create files in project folder: index.marko, lib.js, style.css, and browser.json in index.marko: <lasso-page package-path="./browser.json"/> //the <include/> and <@tag> tag is belong to marko <include('../layout/template/index.marko', data)> <@title>Projects</@title> <@content> <p>testing</p> </@content> </include> in lib.js: nothing for now in browser.json: { "dependencies": [ "../layout/template/browser.json", "./lib.js", "./style.css" ] } went back to project/index.js controller and added: const projectPage=require('~/view/project/index.marko') and reply(projectPage.stream()); Everything was working fine Activity on Fri Dec 15 2017 23:02:07 GMT+0000 (UTC) based on the existing controllers, I created a route: { method:'GET', path:'/projects', handler:handleProjects }, and handleProjects function: const handleProjects=function(req, reply){ (async function(){ console.log('Hello work') //to test to see if the route is working reply() --alway have to have reply even not replying anything })() .catch((err)=>{ throw err; }) }