Newer
Older
moodlog_web / habit_ui_script.js
0xRoM on 4 Jan 2024 4 KB now with added habit tracker
  1. function updateHabit(word) {
  2. // Fetch data from the server
  3. fetch('/index.php?action=habit_update&habit=' + encodeURIComponent(word))
  4. .then(response => response.json())
  5. .then(data => {
  6. // Update HTML content based on fetched data
  7. updateHTML(word, data);
  8. })
  9. .catch(error => {
  10. console.error('Error fetching habit data:', error);
  11. });
  12. }
  13.  
  14. function updateHTML(word, data) {
  15. // Update HTML content based on fetched data
  16. var habitContainer = document.getElementById(word);
  17.  
  18. if (habitContainer) {
  19. // Update button class and text
  20. const logButton = habitContainer.querySelector('.habit-log-button');
  21. if (logButton) {
  22. logButton.className = 'habit-log-button ' + data.buttonClass;
  23. logButton.innerText = data.buttonText;
  24. }
  25.  
  26. // Update align class
  27. const habitTitle = habitContainer.querySelector('.habit-title');
  28. if (habitTitle) {
  29. habitTitle.className = data.align + ' habit-title';
  30. }
  31.  
  32. // Update other content as needed
  33. const scoreValue1 = habitContainer.querySelector('.habit-score .result1');
  34. if (scoreValue1) {
  35. scoreValue1.innerText = data.result1;
  36. }
  37.  
  38. const scoreValue2 = habitContainer.querySelector('.habit-score .result2');
  39. if (scoreValue2) {
  40. scoreValue2.innerText = data.result2;
  41. }
  42.  
  43. const scoreValue3 = habitContainer.querySelector('.habit-score .result3');
  44. if (scoreValue3) {
  45. scoreValue3.innerText = data.result3;
  46. }
  47.  
  48. if(data.freq == "d"){
  49. // Destroy existing Cal-HeatMap instance
  50. destroyCalHeatMap(word);
  51.  
  52. // Reinitialize Cal-HeatMap with updated data
  53. calHeatMapInstances[word] = initializeDailyCalendar('#habit-cal-'+word, {
  54. data: "/index.php?action=habit_cal_daily&habit="+word,
  55. id: word,
  56. legendColors: {
  57. min: data.calCol,
  58. max: data.calCol,
  59. },
  60. });
  61.  
  62. }
  63. if(data.freq == "w"){
  64. // Get the current date
  65. const currentDate = new Date();
  66.  
  67. // Calculate year, month, and week number for today
  68. const year = currentDate.getFullYear();
  69. const month = currentDate.getMonth() + 1; // Months are zero-indexed
  70. const weekNo = getWeekNumber(currentDate);
  71.  
  72. // Build the "year-month-weekno" string
  73. const yearMonthWeekNoString = `${year}-${padNumber(month)}-${padNumber(weekNo)}`;
  74.  
  75. // Construct the ID of the parent div
  76. const parentDivId = "habit-cal-" + word; // Replace "your_word_here" with the actual word
  77.  
  78. // Get the parent div element
  79. const parentDiv = document.getElementById(parentDivId);
  80.  
  81. // Check if the parent div exists
  82. if (parentDiv) {
  83. //console.log('Parent div found:', parentDiv);
  84. // Find the "year-month-weekno" element within the parent div
  85. const element = parentDiv.querySelector(`[id='${yearMonthWeekNoString}']`);
  86.  
  87. // Check if the element exists
  88. if (element && parentDiv.contains(element)) {
  89. //console.log('Element found:', element);
  90. // Remove the classes "neut" and "green"
  91. element.classList.remove("neut", "green");
  92.  
  93. // Set the text content to the value of data.buttonText
  94. element.textContent = data.buttonText;
  95. if( data.weekSoFar > 0 ){
  96. if (data.weekSoFar < data.weekGoal) {
  97. element.classList.add("neut");
  98. element.textContent = data.weekSoFar;
  99. }
  100. if (data.weekSoFar >= data.weekGoal) {
  101. element.classList.add("green");
  102. }
  103. }
  104. }
  105. }
  106. }
  107. // Add code to update other elements as needed
  108. } else {
  109. console.error('Habit container not found for word:', word);
  110. }
  111. }
  112.  
  113. // Function to pad a number with leading zeros (if needed)
  114. function padNumber(number) {
  115. return number.toString().padStart(2, "0");
  116. }
  117.  
  118. // Function to get the ISO week number of a date
  119. function getWeekNumber(date) {
  120. const d = new Date(date);
  121. d.setHours(0, 0, 0, 0);
  122. d.setDate(d.getDate() + 4 - (d.getDay() || 7));
  123. const yearStart = new Date(d.getFullYear(), 0, 1);
  124. const weekNo = Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
  125. return weekNo;
  126. }
Buy Me A Coffee