tracker.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Time Tracker | leemorgan.io</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. body{
  9. display: flex;
  10. flex-direction: column;
  11. max-width: 500px;
  12. }
  13. body > *{margin: 15px;}
  14. </style>
  15. </head>
  16. <body>
  17. <input id="name" type="text" placeholder="NAME">
  18. <input id="project" type="text" placeholder="PROJECT">
  19. <textarea id="description" placeholder="DESCRIPTION"></textarea>
  20. <button id="startStop" onclick="startStop()">Start</button>
  21. <button id="pause" style="display:none">Pause</button>
  22. <script>
  23. let tracker = null
  24. let startStop = ()=>{
  25. if(!tracker){
  26. let time = new Date();
  27. fetch("/tracker", {
  28. method: "post",
  29. headers: {
  30. "Content-Type": "application/json",
  31. },
  32. body: JSON.stringify({
  33. name: document.getElementById("name").value,
  34. project: document.getElementById("project").value,
  35. description: document.getElementById("description").value,
  36. start: time
  37. })
  38. })
  39. .then(r=>r.json())
  40. .then((response)=>{
  41. if(typeof(response) === "string"){
  42. }else{
  43. document.getElementById("startStop").innerText = "Stop";
  44. document.getElementById("pause").style.display = "block";
  45. tracker = response;
  46. }
  47. }).catch((err)=>{
  48. console.error(err);
  49. });
  50. }else{
  51. let time = new Date();
  52. fetch("/tracker", {
  53. method: "put",
  54. headers: {
  55. "Content-Type": "application/json"
  56. },
  57. body: JSON.stringify({
  58. id: tracker._id,
  59. end: time
  60. })
  61. })
  62. .then(r=>r.json())
  63. .then((response)=>{
  64. document.getElementById("startStop").innerText = "Start";
  65. document.getElementById("pause").style.display = "none";
  66. tracker = null;
  67. })
  68. .catch((err)=>{
  69. console.error(err);
  70. });
  71. }
  72. }
  73. </script>
  74. </body>
  75. </html>