<!DOCTYPE html>
<html>
<head>
<title>Miembros</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
"columnDefs": [ {
"targets": 0,
"orderable": false
}],
"order": [[ 1, "asc" ]],
language: {
url: '//cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
}
});
$('.editor').click(function(e) {
e.preventDefault();
$.ajax({
url: '/api/editMembers.php',
type: 'POST',
data: {
userid: $('#rowID').val(),
correo: $('#correo').val(),
nombre: $('#nombre').val(),
organizacion: $('#organizacion').val(),
puesto: $('#puesto').val(),
urbanizacion: $('#urbanizacion').val(),
calle: $('#calle').val(),
pueblo: $('#pueblo').val(),
cpostal: $('#cpostal').val(),
telefono: $('#telefono').val(),
membresia: $('#membresia').val(),
vigencia: $('#vigencia').val(),
horasTrabajadas: $('#horasTrabajadas').val()
},
success: function(msg) {
alert("Usuario editado");
document.getElementById("editModal").style.display = "none";
var id = $('#rowID').val();
document.getElementById(id).childNodes[1].innerText = $('#correo').val();
document.getElementById(id).childNodes[2].innerText = $('#nombre').val();
document.getElementById(id).childNodes[3].innerText = $('#organizacion').val();
document.getElementById(id).childNodes[4].innerText = $('#puesto').val();
document.getElementById(id).childNodes[5].innerText = $('#urbanizacion').val();
document.getElementById(id).childNodes[6].innerText = $('#calle').val();
document.getElementById(id).childNodes[7].innerText = $('#pueblo').val();
document.getElementById(id).childNodes[8].innerText = $('#cpostal').val();
document.getElementById(id).childNodes[9].innerText = $('#telefono').val();
document.getElementById(id).childNodes[10].innerText = $('#membresia').val();
document.getElementById(id).childNodes[11].innerText = $('#vigencia').val();
document.getElementById(id).childNodes[12].innerText = $('#horasTrabajadas').val();
},
error: function(request, status, error) {
alert(JSON.parse(request.responseText)["error"]);
}
});
});
});
function openModal(id){
document.getElementById("editModal").style.display = "block";
document.getElementsByClassName("close")[0].onclick = function() {
document.getElementById("editModal").style.display = "none";
}
window.onclick = function(event) {
if (event.target == document.getElementById("editModal")) {
document.getElementById("editModal").style.display = "none";
}
}
document.getElementById("rowID").value = id;
document.getElementById("correo").value = document.getElementById(id).childNodes[1].innerText;
document.getElementById("nombre").value = document.getElementById(id).childNodes[2].innerText;
document.getElementById("organizacion").value = document.getElementById(id).childNodes[3].innerText;
document.getElementById("puesto").value = document.getElementById(id).childNodes[4].innerText;
document.getElementById("urbanizacion").value = document.getElementById(id).childNodes[5].innerText;
document.getElementById("calle").value = document.getElementById(id).childNodes[6].innerText;
document.getElementById("pueblo").value = document.getElementById(id).childNodes[7].innerText;
document.getElementById("cpostal").value = document.getElementById(id).childNodes[8].innerText;
document.getElementById("telefono").value = document.getElementById(id).childNodes[9].innerText;
document.getElementById("membresia").value = document.getElementById(id).childNodes[10].innerText;
document.getElementById("vigencia").value = document.getElementById(id).childNodes[11].innerText;
document.getElementById("horasTrabajadas").value = document.getElementById(id).childNodes[12].innerText;
}
</script>
</head>
<body>
<div class="topnav">
<a class="logo" href="/members.php"><img src="logo.png"></a>
<a href="/members.php">Tabla de Miembros</a>
</div>
<div class="container">
<div class="members">
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
include '../api/db.php';
# Select username row
$sql = "SELECT userid, correo, nombre, organizacion, puesto, urbanizacion, calle,
pueblo, cpostal, telefono, membresia, vigencia, horasTrabajadas FROM Login NATURAL JOIN Miembro;";
if($result = $conn->query($sql)){
?>
<table id="membersTable" style="width:100%">
<thead>
<th></th>
<th>Correo</th>
<th>Nombre</th>
<th>Organizacion</th>
<th>Puesto</th>
<th>Urbanizacion</th>
<th>Calle</th>
<th>Pueblo</th>
<th>Codigo Posta</th>
<th>Telefono</th>
<th>Membresia</th>
<th>Vigencia</th>
<th>Horas Trabajadas</th>
</thead>
<tbody>
<?php
while($row = $result->fetch_assoc()){
echo "<tr id=\"".$row["userid"]."\"><td><button onClick=\"openModal(".$row["userid"].")\">Editar</button></td><td>"
.$row["correo"]."</td><td>".$row["nombre"]."</td><td>".$row["organizacion"]."</td><td>".$row["puesto"]."</td><td>"
.$row["urbanizacion"]."</td><td>".$row["calle"]."</td><td>".$row["pueblo"]."</td><td>".$row["cpostal"]."</td><td>"
.$row["telefono"]."</td><td>".$row["membresia"]."</td><td>".$row["vigencia"]."</td><td>".$row["horasTrabajadas"]."</td></tr>";
}
?>
</tbody>
</table>
<?php
} else {
echo "Could not get rows";
}
# Closes databde
$conn->close();
} else {
header('Content-type: application/json');
header($_SERVER["SERVER_PROTOCOL"]." 405 Method Not Allowed", true, 405);
exit();
}
?>
</div>
</div>
<div id="editModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<form method="post" action="" id="editform">
<input type="hidden" id="rowID">
<label>Correo:</label><br>
<input type="text" id="correo"><br><br>
<label>Nombre:</label><br>
<input type="text" id="nombre"><br><br>
<label>Organizacion</label><br>
<input type="text" id="organizacion"><br><br>
<label>Puesto:</label><br>
<input type="text" id="puesto"><br><br>
<label>Urbanizacion:</label><br>
<input type="text" id="urbanizacion"><br><br>
<label>Calle:</label><br>
<input type="text" id="calle"><br><br>
<label>Pueblo:</label><br>
<input type="text" id="pueblo"><br><br>
<label>Codigo Postal:</label><br>
<input type="text" id="cpostal"><br><br>
<label>Telefono:</label><br>
<input type="text" id="telefono"><br><br>
<label>Membresia:</label><br>
<select id="membresia">
<option value="Persona">Persona</option>
<option value="Comunidad">Comunidad</option>
<option value="Donante">Donante</option>
<option value="Productor">Productor</option>
</select><br><br>
<label>Vigencia:</label><br>
<input type="date" id="vigencia"><br><br>
<label>Horas Trabajadas:</label><br>
<input type="text" id="horasTrabajadas"><br><br>
<input type="submit" class="editor" value="Editar Usiario">
</form>
</div>
</div>
</body>
</html>