Simple PHP & SQL weight tracker for multiple persons
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 9.5KB

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