advanceStatsOprs.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Notes: This should be open in its original path-->
  5. <meta charset="utf-8">
  6. <meta name="zoraxy.csrf.Token" content="{{.csrfToken}}">
  7. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  8. <script src="../script/jquery-3.6.0.min.js"></script>
  9. <script src="../script/semantic/semantic.min.js"></script>
  10. <script src="../script/utils.js"></script>
  11. </head>
  12. <body>
  13. <br>
  14. <div class="ui container">
  15. <div class="ui header">
  16. <div class="content">
  17. Advance Statistics Operations
  18. <div class="sub header">Selected Range: <span id="daterange"></span></div>
  19. </div>
  20. </div>
  21. <div class="ui divider"></div>
  22. <h3>Export Data</h3>
  23. <p>You can export the statistics collected by Zoraxy in the selected range for further analysis</p>
  24. <button class="ui basic teal button" onclick="handleExportAsCSV();"><i class="download icon"></i> Export CSV</button>
  25. <button class="ui basic pink button" onclick="handleExportAsJSON();"><i class="download icon"></i> Export JSON</button>
  26. <div class="ui divider"></div>
  27. <h3>Reset Statistics</h3>
  28. <p>You can reset the statistics within the selected time range for debug purpose. Note that this operation is irreversible.</p>
  29. <button class="ui basic red button" onclick="handleResetStats();"><i class="trash icon"></i> RESET STATISTICS</button>
  30. <br><br>
  31. <button class="ui basic button iframeOnly" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
  32. </div>
  33. <script>
  34. let startDate = "";
  35. let endDate = "";
  36. /*
  37. Actions Handler
  38. */
  39. function handleExportAsJSON(){
  40. window.open(`/api/analytic/exportRange?start=${startDate}&end=${endDate}&format=json`, 'download');
  41. }
  42. function handleExportAsCSV(){
  43. window.open(`/api/analytic/exportRange?start=${startDate}&end=${endDate}&format=csv`, 'download');
  44. }
  45. function handleResetStats(){
  46. if (confirm("Confirm remove statistics from " + startDate + " to " + endDate +"?")){
  47. $.cjax({
  48. url: "/api/analytic/resetRange?start=" + startDate + "&end=" + endDate,
  49. method: "DELETE",
  50. success: function(data){
  51. if (data.error != undefined){
  52. parent.msgbox(data.error, false, 5000);
  53. }else{
  54. parent.msgbox("Statistic Cleared");
  55. parent.hideSideWrapper();
  56. }
  57. }
  58. })
  59. }
  60. }
  61. /*
  62. Data Loading
  63. */
  64. function loadDateRange(){
  65. if (window.location.hash.length > 1){
  66. try{
  67. var dateRange = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
  68. startDate = dateRange[0].trim();
  69. endDate = dateRange[1].trim();
  70. //Check if they are valid dates
  71. if (!isValidDateFormat(startDate)){
  72. alert("Start date is not a valid date: " + startDate);
  73. return
  74. }
  75. if (!isValidDateFormat(endDate)){
  76. alert("End date is not a valid date: " + endDate);
  77. return
  78. }
  79. //Sort the two dates if they are placed in invalid orders
  80. var [s, e] = sortDates(startDate, endDate);
  81. startDate = s;
  82. endDate = e;
  83. $("#daterange").html(startDate + ` <i class="arrow right icon" style="margin-right: 0;"></i> ` + endDate);
  84. }catch(ex){
  85. alert("Invalid usage: Invalid date range given");
  86. }
  87. }
  88. }
  89. loadDateRange();
  90. function isValidDateFormat(dateString) {
  91. if (dateString.indexOf("_") >= 0){
  92. //Replace all the _ to -
  93. dateString = dateString.split("_").join("-");
  94. }
  95. // Create a regular expression pattern for the yyyy-mm-dd format
  96. const pattern = /^\d{4}-\d{2}-\d{2}$/;
  97. // Check if the input string matches the pattern
  98. if (!pattern.test(dateString)) {
  99. return false; // Invalid format
  100. }
  101. // Parse the date components
  102. const year = parseInt(dateString.substring(0, 4), 10);
  103. const month = parseInt(dateString.substring(5, 7), 10);
  104. const day = parseInt(dateString.substring(8, 10), 10);
  105. // Check if the parsed components represent a valid date
  106. const date = new Date(year, month - 1, day);
  107. if (
  108. date.getFullYear() !== year ||
  109. date.getMonth() + 1 !== month ||
  110. date.getDate() !== day
  111. ) {
  112. return false; // Invalid date
  113. }
  114. return true; // Valid date in yyyy-mm-dd format
  115. }
  116. function sortDates(date1, date2) {
  117. // Parse the date strings
  118. const parsedDate1 = new Date(date1);
  119. const parsedDate2 = new Date(date2);
  120. // Compare the parsed dates
  121. if (parsedDate1 > parsedDate2) {
  122. // Swap the dates
  123. const temp = date1;
  124. date1 = date2;
  125. date2 = temp;
  126. }
  127. // Return the swapped dates
  128. return [date1, date2];
  129. }
  130. </script>
  131. </body>
  132. </html>