CCOM4030
/
Goodle


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!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">&times;</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>