No Description

members.php 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Miembros</title>
  5. <link rel="stylesheet" type="text/css" href="style.css" />
  6. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
  7. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  8. <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11. $('#membersTable').DataTable({
  12. "columnDefs": [ {
  13. "targets": 0,
  14. "orderable": false
  15. }],
  16. "order": [[ 1, "asc" ]],
  17. language: {
  18. url: '//cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  19. }
  20. });
  21. $('.editor').click(function(e) {
  22. e.preventDefault();
  23. $.ajax({
  24. url: '/api/editMembers.php',
  25. type: 'POST',
  26. data: {
  27. userid: $('#rowID').val(),
  28. correo: $('#correo').val(),
  29. nombre: $('#nombre').val(),
  30. organizacion: $('#organizacion').val(),
  31. puesto: $('#puesto').val(),
  32. urbanizacion: $('#urbanizacion').val(),
  33. calle: $('#calle').val(),
  34. pueblo: $('#pueblo').val(),
  35. cpostal: $('#cpostal').val(),
  36. telefono: $('#telefono').val(),
  37. membresia: $('#membresia').val(),
  38. vigencia: $('#vigencia').val(),
  39. horasTrabajadas: $('#horasTrabajadas').val()
  40. },
  41. success: function(msg) {
  42. alert("Usuario editado");
  43. document.getElementById("editModal").style.display = "none";
  44. var id = $('#rowID').val();
  45. document.getElementById(id).childNodes[1].innerText = $('#correo').val();
  46. document.getElementById(id).childNodes[2].innerText = $('#nombre').val();
  47. document.getElementById(id).childNodes[3].innerText = $('#organizacion').val();
  48. document.getElementById(id).childNodes[4].innerText = $('#puesto').val();
  49. document.getElementById(id).childNodes[5].innerText = $('#urbanizacion').val();
  50. document.getElementById(id).childNodes[6].innerText = $('#calle').val();
  51. document.getElementById(id).childNodes[7].innerText = $('#pueblo').val();
  52. document.getElementById(id).childNodes[8].innerText = $('#cpostal').val();
  53. document.getElementById(id).childNodes[9].innerText = $('#telefono').val();
  54. document.getElementById(id).childNodes[10].innerText = $('#membresia').val();
  55. document.getElementById(id).childNodes[11].innerText = $('#vigencia').val();
  56. document.getElementById(id).childNodes[12].innerText = $('#horasTrabajadas').val();
  57. },
  58. error: function(request, status, error) {
  59. alert(JSON.parse(request.responseText)["error"]);
  60. }
  61. });
  62. });
  63. });
  64. function openModal(id){
  65. document.getElementById("editModal").style.display = "block";
  66. document.getElementsByClassName("close")[0].onclick = function() {
  67. document.getElementById("editModal").style.display = "none";
  68. }
  69. window.onclick = function(event) {
  70. if (event.target == document.getElementById("editModal")) {
  71. document.getElementById("editModal").style.display = "none";
  72. }
  73. }
  74. document.getElementById("rowID").value = id;
  75. document.getElementById("correo").value = document.getElementById(id).childNodes[1].innerText;
  76. document.getElementById("nombre").value = document.getElementById(id).childNodes[2].innerText;
  77. document.getElementById("organizacion").value = document.getElementById(id).childNodes[3].innerText;
  78. document.getElementById("puesto").value = document.getElementById(id).childNodes[4].innerText;
  79. document.getElementById("urbanizacion").value = document.getElementById(id).childNodes[5].innerText;
  80. document.getElementById("calle").value = document.getElementById(id).childNodes[6].innerText;
  81. document.getElementById("pueblo").value = document.getElementById(id).childNodes[7].innerText;
  82. document.getElementById("cpostal").value = document.getElementById(id).childNodes[8].innerText;
  83. document.getElementById("telefono").value = document.getElementById(id).childNodes[9].innerText;
  84. document.getElementById("membresia").value = document.getElementById(id).childNodes[10].innerText;
  85. document.getElementById("vigencia").value = document.getElementById(id).childNodes[11].innerText;
  86. document.getElementById("horasTrabajadas").value = document.getElementById(id).childNodes[12].innerText;
  87. }
  88. </script>
  89. </head>
  90. <body>
  91. <div class="topnav">
  92. <a class="logo" href="/members.php"><img src="logo.png"></a>
  93. <a href="/members.php">Tabla de Miembros</a>
  94. </div>
  95. <div class="container">
  96. <div class="members">
  97. <?php
  98. if ($_SERVER["REQUEST_METHOD"] == "GET") {
  99. include '../api/db.php';
  100. # Select username row
  101. $sql = "SELECT userid, correo, nombre, organizacion, puesto, urbanizacion, calle,
  102. pueblo, cpostal, telefono, membresia, vigencia, horasTrabajadas FROM Login NATURAL JOIN Miembro;";
  103. if($result = $conn->query($sql)){
  104. ?>
  105. <table id="membersTable" style="width:100%">
  106. <thead>
  107. <th></th>
  108. <th>Correo</th>
  109. <th>Nombre</th>
  110. <th>Organizacion</th>
  111. <th>Puesto</th>
  112. <th>Urbanizacion</th>
  113. <th>Calle</th>
  114. <th>Pueblo</th>
  115. <th>Codigo Posta</th>
  116. <th>Telefono</th>
  117. <th>Membresia</th>
  118. <th>Vigencia</th>
  119. <th>Horas Trabajadas</th>
  120. </thead>
  121. <tbody>
  122. <?php
  123. while($row = $result->fetch_assoc()){
  124. echo "<tr id=\"".$row["userid"]."\"><td><button onClick=\"openModal(".$row["userid"].")\">Editar</button></td><td>"
  125. .$row["correo"]."</td><td>".$row["nombre"]."</td><td>".$row["organizacion"]."</td><td>".$row["puesto"]."</td><td>"
  126. .$row["urbanizacion"]."</td><td>".$row["calle"]."</td><td>".$row["pueblo"]."</td><td>".$row["cpostal"]."</td><td>"
  127. .$row["telefono"]."</td><td>".$row["membresia"]."</td><td>".$row["vigencia"]."</td><td>".$row["horasTrabajadas"]."</td></tr>";
  128. }
  129. ?>
  130. </tbody>
  131. </table>
  132. <?php
  133. } else {
  134. echo "Could not get rows";
  135. }
  136. # Closes databde
  137. $conn->close();
  138. } else {
  139. header('Content-type: application/json');
  140. header($_SERVER["SERVER_PROTOCOL"]." 405 Method Not Allowed", true, 405);
  141. exit();
  142. }
  143. ?>
  144. </div>
  145. </div>
  146. <div id="editModal" class="modal">
  147. <div class="modal-content">
  148. <span class="close">&times;</span>
  149. <form method="post" action="" id="editform">
  150. <input type="hidden" id="rowID">
  151. <label>Correo:</label><br>
  152. <input type="text" id="correo"><br><br>
  153. <label>Nombre:</label><br>
  154. <input type="text" id="nombre"><br><br>
  155. <label>Organizacion</label><br>
  156. <input type="text" id="organizacion"><br><br>
  157. <label>Puesto:</label><br>
  158. <input type="text" id="puesto"><br><br>
  159. <label>Urbanizacion:</label><br>
  160. <input type="text" id="urbanizacion"><br><br>
  161. <label>Calle:</label><br>
  162. <input type="text" id="calle"><br><br>
  163. <label>Pueblo:</label><br>
  164. <input type="text" id="pueblo"><br><br>
  165. <label>Codigo Postal:</label><br>
  166. <input type="text" id="cpostal"><br><br>
  167. <label>Telefono:</label><br>
  168. <input type="text" id="telefono"><br><br>
  169. <label>Membresia:</label><br>
  170. <select id="membresia">
  171. <option value="Persona">Persona</option>
  172. <option value="Comunidad">Comunidad</option>
  173. <option value="Donante">Donante</option>
  174. <option value="Productor">Productor</option>
  175. </select><br><br>
  176. <label>Vigencia:</label><br>
  177. <input type="date" id="vigencia"><br><br>
  178. <label>Horas Trabajadas:</label><br>
  179. <input type="text" id="horasTrabajadas"><br><br>
  180. <input type="submit" class="editor" value="Editar Usiario">
  181. </form>
  182. </div>
  183. </div>
  184. </body>
  185. </html>