tracker.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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" onclick="pause()">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. console.error(response);
  43. }else{
  44. document.getElementById("startStop").innerText = "Stop";
  45. document.getElementById("pause").style.display = "block";
  46. tracker = response;
  47. }
  48. }).catch((err)=>{
  49. console.error(err);
  50. });
  51. }else{
  52. let time = new Date();
  53. fetch("/tracker", {
  54. method: "put",
  55. headers: {
  56. "Content-Type": "application/json"
  57. },
  58. body: JSON.stringify({
  59. id: tracker._id,
  60. end: time
  61. })
  62. })
  63. .then(r=>r.json())
  64. .then((response)=>{
  65. if(typeof(response) === "string"){
  66. console.error(response);
  67. }else{
  68. document.getElementById("startStop").innerText = "Start";
  69. document.getElementById("pause").style.display = "none";
  70. tracker = null;
  71. }
  72. })
  73. .catch((err)=>{
  74. console.error(err);
  75. });
  76. }
  77. }
  78. let pause = ()=>{
  79. let pause = {
  80. start: new Date(),
  81. end: ""
  82. };
  83. tracker.pauses.push(pause);
  84. let pauseButton = document.getElementById("pause");
  85. document.getElementById("startStop").style.display = "none";
  86. pauseButton.innerText = "Resume";
  87. pauseButton.onclick = ()=>{resume(pause)};
  88. }
  89. let resume = (pause)=>{
  90. pause.end = new Date();
  91. fetch("/tracker", {
  92. method: "put",
  93. headers: {
  94. "Content-Type": "application/json"
  95. },
  96. body: JSON.stringify({
  97. id: tracker._id,
  98. pause: pause
  99. })
  100. })
  101. .then(r=>r.json())
  102. .then((response)=>{
  103. if(typeof(response) === "response"){
  104. console.error(response);
  105. }else{
  106. let pauseButton = document.getElementById("pause");
  107. document.getElementById("startStop").style.display = "block";
  108. pauseButton.innerText = "Pause";
  109. pauseButton.onclick = ()=>{pause()};
  110. }
  111. })
  112. .catch((err)=>{
  113. console.error(err);
  114. });
  115. }
  116. </script>
  117. </body>
  118. </html>