Нема описа

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Miembros</title>
  5. <style>
  6. body {
  7. margin:0px;
  8. }
  9. .container {
  10. height:100%;
  11. width:100%;
  12. position: fixed;
  13. z-index: -1
  14. }
  15. .members {
  16. margin-top: 8px;
  17. margin-left: 1em;
  18. margin-right: 1em;
  19. }
  20. /* Add a black background color to the top navigation */
  21. .topnav {
  22. background-color: #ED7D31;
  23. overflow: hidden;
  24. box-shadow: 0 4px 2px 0px gray;
  25. }
  26. /* Style the links inside the navigation bar */
  27. .topnav a {
  28. float: left;
  29. color: black;
  30. text-align: center;
  31. padding: 14px 16px;
  32. text-decoration: none;
  33. font-size: 23px;
  34. }
  35. .topnav a:hover {
  36. background-color: #BA6127;
  37. }
  38. .logo {
  39. padding: 0px 0px ! important;
  40. }
  41. .logo img {
  42. float: left;
  43. height: 54px;
  44. }
  45. /* The Modal (background) */
  46. .modal {
  47. display: none; /* Hidden by default */
  48. position: fixed; /* Stay in place */
  49. z-index: 1; /* Sit on top */
  50. padding-top: 100px; /* Location of the box */
  51. left: 0;
  52. top: 0;
  53. width: 100%; /* Full width */
  54. height: 100%; /* Full height */
  55. overflow: auto; /* Enable scroll if needed */
  56. background-color: rgb(0,0,0); /* Fallback color */
  57. background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  58. }
  59. /* Modal Content */
  60. .modal-content {
  61. background-color: #fefefe;
  62. margin: auto;
  63. padding: 20px;
  64. border: 1px solid #888;
  65. max-width: 10%;
  66. }
  67. /* The Close Button */
  68. .close {
  69. color: #aaaaaa;
  70. float: right;
  71. font-size: 28px;
  72. font-weight: bold;
  73. }
  74. .close:hover, .close:focus {
  75. color: #000;
  76. text-decoration: none;
  77. cursor: pointer;
  78. }
  79. table.dataTable tbody th, table.dataTable tbody td {
  80. text-align: center;
  81. }
  82. }
  83. </style>
  84. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
  85. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  86. <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js">
  87. </script>
  88. <script>
  89. $(document).ready(function() {
  90. $('#membersTable').DataTable({
  91. "columnDefs": [ {
  92. "targets": 0,
  93. "orderable": false
  94. }, {
  95. "targets": 11,
  96. "orderable": false
  97. }, {
  98. "targets": 12,
  99. "orderable": false
  100. } ],
  101. "order": [[ 1, "asc" ]]
  102. });
  103. $('.editor').click(function(e) {
  104. e.preventDefault();
  105. $.ajax({
  106. url: '/editMembers.php',
  107. type: 'POST',
  108. data: {
  109. userid: $('#rowID').val(),
  110. username: $('#username').val(),
  111. nombre: $('#nombre').val(),
  112. organizacion: $('#organizacion').val(),
  113. puesto: $('#puesto').val(),
  114. urbanizacion: $('#urbanizacion').val(),
  115. calle: $('#calle').val(),
  116. pueblo: $('#pueblo').val(),
  117. cpostal: $('#cpostal').val(),
  118. telefono: $('#telefono').val(),
  119. correo: $('#correo').val()
  120. },
  121. success: function(msg) {
  122. alert("Usuario editado");
  123. document.getElementById("myModal").style.display = "none";
  124. var id = $('#rowID').val();
  125. document.getElementById(id).childNodes[1].innerText = $('#username').val();
  126. document.getElementById(id).childNodes[2].innerText = $('#nombre').val();
  127. document.getElementById(id).childNodes[3].innerText = $('#organizacion').val();
  128. document.getElementById(id).childNodes[4].innerText = $('#puesto').val();
  129. document.getElementById(id).childNodes[5].innerText = $('#urbanizacion').val();
  130. document.getElementById(id).childNodes[6].innerText = $('#calle').val();
  131. document.getElementById(id).childNodes[7].innerText = $('#pueblo').val();
  132. document.getElementById(id).childNodes[8].innerText = $('#cpostal').val();
  133. document.getElementById(id).childNodes[9].innerText = $('#telefono').val();
  134. document.getElementById(id).childNodes[10].innerText = $('#correo').val();
  135. },
  136. error: function(request, status, error) {
  137. alert(status + ": " + error);
  138. }
  139. });
  140. });
  141. });
  142. function openModal(id){
  143. document.getElementById("myModal").style.display = "block";
  144. document.getElementsByClassName("close")[0].onclick = function() {
  145. document.getElementById("myModal").style.display = "none";
  146. }
  147. window.onclick = function(event) {
  148. if (event.target == document.getElementById("myModal")) {
  149. document.getElementById("myModal").style.display = "none";
  150. }
  151. }
  152. document.getElementById("rowID").value = id;
  153. document.getElementById("username").value = document.getElementById(id).childNodes[1].innerText;
  154. document.getElementById("nombre").value = document.getElementById(id).childNodes[2].innerText;
  155. document.getElementById("organizacion").value = document.getElementById(id).childNodes[3].innerText;
  156. document.getElementById("puesto").value = document.getElementById(id).childNodes[4].innerText;
  157. document.getElementById("urbanizacion").value = document.getElementById(id).childNodes[5].innerText;
  158. document.getElementById("calle").value = document.getElementById(id).childNodes[6].innerText;
  159. document.getElementById("pueblo").value = document.getElementById(id).childNodes[7].innerText;
  160. document.getElementById("cpostal").value = document.getElementById(id).childNodes[8].innerText;
  161. document.getElementById("telefono").value = document.getElementById(id).childNodes[9].innerText;
  162. document.getElementById("correo").value = document.getElementById(id).childNodes[10].innerText;
  163. }
  164. </script>
  165. </head>
  166. <body>
  167. <div class="topnav">
  168. <a class="logo" href="/members.php"><img src="logo.png"></a>
  169. <a href="/members.php">Tabla de Miembros</a>
  170. </div>
  171. <div class="container">
  172. <div class="members">
  173. <?php
  174. if ($_SERVER["REQUEST_METHOD"] == "GET") {
  175. include 'db.php';
  176. # Select username row
  177. $sql = "SELECT userid, username, nombre, organizacion, puesto, urbanizacion, calle,
  178. pueblo, cpostal, telefono, correo, membresia, vigencia FROM login NATURAL JOIN miembros;";
  179. if($result = $conn->query($sql)){
  180. ?>
  181. <table id="membersTable" style="width:100%">
  182. <thead>
  183. <th></th>
  184. <th>Username</th>
  185. <th>Nombre</th>
  186. <th>Organizacion</th>
  187. <th>Puesto</th>
  188. <th>Urbanizacion</th>
  189. <th>Calle</th>
  190. <th>Pueblo</th>
  191. <th>Codigo Posta</th>
  192. <th>Telefono</th>
  193. <th>Correo</th>
  194. <th>Membresia</th>
  195. <th>Vigencia</th>
  196. </thead>
  197. <tbody>
  198. <?php
  199. while($row = $result->fetch_assoc()){
  200. echo "<tr id=\"".$row["userid"]."\"><td><button onClick=\"openModal(".$row["userid"].")\">Editar</button></td><td>".$row["username"]."</td><td>".$row["nombre"]."</td><td>".$row["organizacion"].
  201. "</td><td>".$row["puesto"]."</td><td>". $row["urbanizacion"]."</td><td>".$row["calle"].
  202. "</td><td>".$row["pueblo"]."</td><td>".$row["cpostal"]."</td><td>".$row["telefono"]."</td><td>"
  203. .$row["correo"]."</td><td>".$row["membresia"]."</td><td>".$row["vigencia"]."</tr>";
  204. }
  205. ?>
  206. </tbody>
  207. </table>
  208. <?php
  209. } else {
  210. echo "Could not get rows";
  211. }
  212. # Closes databde
  213. $conn->close();
  214. } else {
  215. header('Content-type: application/json');
  216. header($_SERVER["SERVER_PROTOCOL"]." 405 Method Not Allowed", true, 405);
  217. exit();
  218. }
  219. ?>
  220. </div>
  221. </div>
  222. <!-- The Modal -->
  223. <div id="myModal" class="modal">
  224. <!-- Modal content -->
  225. <div class="modal-content">
  226. <span class="close">&times;</span>
  227. <form method="post" action="" id="editform">
  228. <input type="hidden" id="rowID">
  229. <label>Username:</label><br>
  230. <input type="text" id="username"><br><br>
  231. <label>Nombre:</label><br>
  232. <input type="text" id="nombre"><br><br>
  233. <label>Organizacion</label><br>
  234. <input type="text" id="organizacion"><br><br>
  235. <label>Puesto:</label><br>
  236. <input type="text" id="puesto"><br><br>
  237. <label>Urbanizacion:</label><br>
  238. <input type="text" id="urbanizacion"><br><br>
  239. <label>Calle:</label><br>
  240. <input type="text" id="calle"><br><br>
  241. <label>Pueblo:</label><br>
  242. <input type="text" id="pueblo"><br><br>
  243. <label>Codigo Postal:</label><br>
  244. <input type="text" id="cpostal"><br><br>
  245. <label>Telefono:</label><br>
  246. <input type="text" id="telefono"><br><br>
  247. <label>Correo:</label><br>
  248. <input type="text" id="correo"><br><br>
  249. <input type="submit" class="editor" value="Editar Usiario">
  250. </form>
  251. </div>
  252. </div>
  253. </body>
  254. </html>