Simple PHP & SQL weight tracker for multiple persons
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8" />
  4. <title>Weight-Track</title>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" integrity="sha256-MZo5XY1Ah7Z2Aui4/alkfeiq3CopMdV/bbkc/Sh41+s=" crossorigin="anonymous"></script>
  6. </head>
  7. <body>
  8. <div id="content">
  9. <h1>Weight-Track</h1>
  10. <p id="status">Please wait while Weight-Track is loading... (JavaScript needed)</p>
  11. </div>
  12. <div id="footer">
  13. <p>Made with <a href="https://www.chartjs.org/docs/latest/">Chart.js</a></p>
  14. </div>
  15. <script type="text/javascript">
  16. var colorFromIndex = function(index) {
  17. var colors = [
  18. '255, 99, 132',
  19. '54, 162, 235',
  20. '255, 206, 86',
  21. '75, 192, 192',
  22. '153, 102, 255',
  23. '255, 159, 64'
  24. ];
  25. if (index < colors.length) {
  26. return colors[index];
  27. } else {
  28. return '120, 120, 120';
  29. }
  30. };
  31. var createDataset = function(name, data, color) {
  32. return {
  33. label: name,
  34. data: data,
  35. backgroundColor: [
  36. 'rgba(' + color + ', 0)'
  37. ],
  38. borderColor: [
  39. 'rgba(' + color + ', 1)'
  40. ],
  41. borderWidth: 4
  42. };
  43. };
  44. var addToForm = function(form, element, name) {
  45. var fe = document.createElement('p');
  46. fe.innerHTML = name + ' ';
  47. fe.appendChild(element);
  48. form.appendChild(fe);
  49. };
  50. var renderUser = function(data) {
  51. var div = document.createElement('div');
  52. var ctx = document.createElement('canvas');
  53. var datasets = [];
  54. for (var i = 0; i < data.users.length; i++) {
  55. var set = createDataset(data.users[i].name,
  56. data.users[i].data, colorFromIndex(i));
  57. datasets.push(set);
  58. }
  59. var chart = new Chart(ctx, {
  60. type: 'line',
  61. data: {
  62. datasets: datasets
  63. },
  64. options: {
  65. scales: {
  66. xAxes: [{
  67. type: 'time',
  68. time: {
  69. unit: 'day'
  70. }
  71. }]
  72. },
  73. events: [
  74. 'mousemove', 'mouseout', 'click',
  75. 'touchstart', 'touchmove', 'touchend'
  76. ],
  77. tooltips: {
  78. mode: 'nearest',
  79. intersect: false,
  80. axis: 'x'
  81. }
  82. }
  83. });
  84. if (data.users.length > 0) {
  85. div.appendChild(ctx);
  86. div.appendChild(document.createElement('hr'));
  87. var date = new Date();
  88. var hours = date.getHours();
  89. hours = (hours < 10) ? '0' + hours : hours;
  90. var minutes = date.getMinutes();
  91. minutes = (minutes < 10) ? '0' + minutes : minutes;
  92. var form_append = document.createElement('form');
  93. form_append.setAttribute('method', 'post');
  94. form_append.setAttribute('action', 'weight.php');
  95. var p_append = document.createElement('p');
  96. p_append.innerHTML = 'Add new Data-Point:';
  97. form_append.appendChild(p_append);
  98. var name_append = document.createElement('select');
  99. for (var i = 0; i < data.users.length; i++) {
  100. var option = document.createElement('option');
  101. option.text = data.users[i].name;
  102. option.value = 'user_' + data.users[i].id;
  103. name_append.add(option);
  104. }
  105. name_append.setAttribute('name', 'username');
  106. name_append.required = true;
  107. addToForm(form_append, name_append, 'Username:');
  108. var date_append = document.createElement('input');
  109. date_append.setAttribute('type', 'date');
  110. date_append.setAttribute('name', 'date');
  111. date_append.setAttribute('placeholder', 'Date');
  112. date_append.required = true;
  113. date_append.value = date.toISOString().slice(0, 10);
  114. addToForm(form_append, date_append, 'Date:');
  115. var time_append = document.createElement('input');
  116. time_append.setAttribute('type', 'time');
  117. time_append.setAttribute('name', 'time');
  118. time_append.setAttribute('placeholder', 'Time');
  119. time_append.required = true;
  120. time_append.value = hours + ':' + minutes;
  121. addToForm(form_append, time_append, 'Time:');
  122. var weight_append = document.createElement('input');
  123. weight_append.setAttribute('type', 'number');
  124. weight_append.setAttribute('name', 'weight');
  125. weight_append.setAttribute('step', '0.1');
  126. weight_append.setAttribute('placeholder', 'Weight');
  127. weight_append.required = true;
  128. addToForm(form_append, weight_append, 'Weight:');
  129. var submit_append = document.createElement('input');
  130. submit_append.setAttribute('type', 'submit');
  131. submit_append.setAttribute('value', 'Add Data');
  132. form_append.appendChild(submit_append);
  133. div.appendChild(form_append);
  134. div.appendChild(document.createElement('hr'));
  135. }
  136. var form_new = document.createElement('form');
  137. form_new.setAttribute('method', 'post');
  138. form_new.setAttribute('action', 'weight.php');
  139. var p_new = document.createElement('p');
  140. p_new.innerHTML = 'Add new User:';
  141. form_new.appendChild(p_new);
  142. var name_new = document.createElement('input');
  143. name_new.setAttribute('type', 'text');
  144. name_new.setAttribute('name', 'username');
  145. name_new.setAttribute('placeholder', 'Name');
  146. name_new.required = true;
  147. addToForm(form_new, name_new, 'Username:');
  148. var submit_new = document.createElement('input');
  149. submit_new.setAttribute('type', 'submit');
  150. submit_new.setAttribute('value', 'Add User');
  151. form_new.appendChild(submit_new);
  152. div.appendChild(form_new);
  153. div.appendChild(document.createElement('hr'));
  154. document.getElementById("content").appendChild(div);
  155. };
  156. var getJSON = function(url, callback) {
  157. var xhr = new XMLHttpRequest();
  158. xhr.open('GET', url, true);
  159. xhr.responseType = 'json';
  160. xhr.onload = function() {
  161. if (xhr.status === 200) {
  162. callback(null, xhr.response);
  163. } else {
  164. callback(xhr.status, xhr.response);
  165. }
  166. };
  167. xhr.send();
  168. };
  169. document.getElementById("status").textContent = "Loading from Database...";
  170. getJSON('weight.php', function(err, data) {
  171. if (err !== null) {
  172. document.getElementById("status").textContent = 'Error: ' + err;
  173. return;
  174. }
  175. if (typeof data.error !== 'undefined') {
  176. document.getElementById("status").textContent = 'Error: ' + data.error;
  177. return;
  178. }
  179. if (typeof data.users !== 'undefined') {
  180. var s = 'Received data for ' + data.users.length + ' users';
  181. if (data.users.length > 0) {
  182. s += ': ';
  183. for (var i = 0; i < data.users.length; i++) {
  184. s += '"' + data.users[i].name + '"';
  185. if (i < (data.users.length - 1)) {
  186. s += ', ';
  187. }
  188. }
  189. s += '. Rendering...';
  190. } else {
  191. s += '. Nothing to show!';
  192. }
  193. document.getElementById("status").textContent = s;
  194. renderUser(data);
  195. } else {
  196. document.getElementById("status").textContent = 'Error: no data';
  197. return;
  198. }
  199. });
  200. </script>
  201. </body>
  202. </html>