CCOM4030
/
Goodle


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!DOCTYPE html>
<html>
    <head>
        <title>Miembros</title>
        <style>
        body { 
            margin:0px;
        }

        .container {
            height:100%;
            width:100%;
            position: fixed;
            z-index: -1
        }

        .members {
            margin-top: 8px;
            margin-left: 1em;
            margin-right: 1em;
        }

        /* Add a black background color to the top navigation */
        .topnav {
            background-color: #ED7D31;
            overflow: hidden;
            box-shadow: 0 4px 2px 0px gray;
        }

        /* Style the links inside the navigation bar */
        .topnav a {
            float: left;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 23px;
        }

        .topnav a:hover {
            background-color: #BA6127;
        }

        .logo {
            padding: 0px 0px ! important;
        }
        
        .logo img {
            float: left;
            height: 54px;
        }

        /* The Modal (background) */
            .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            max-width: 10%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover, .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        table.dataTable tbody th, table.dataTable tbody td {
            text-align: center;
        }
}

        </style>
        <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
                    }, {
                        "targets": 11,
                        "orderable": false
                    }, {
                        "targets": 12,
                        "orderable": false
                    } ],
                    "order": [[ 1, "asc" ]]
                });

                $('.editor').click(function(e) {
                    e.preventDefault();

                    $.ajax({
                        url: '/editMembers.php',
                        type: 'POST',
                        data: {
                            userid: $('#rowID').val(),
                            username: $('#username').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(),
                            correo: $('#correo').val()
                        },

                        success: function(msg) {
                            alert("Usuario editado");

                            document.getElementById("myModal").style.display = "none";

                            var id = $('#rowID').val();
                            
                            document.getElementById(id).childNodes[1].innerText = $('#username').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 = $('#correo').val();
                        },

                        error: function(request, status, error) {
                            alert(status + ": " + error);
                        }
                    });
                });

            });

            function openModal(id){ 
                document.getElementById("myModal").style.display = "block";

                document.getElementsByClassName("close")[0].onclick = function() {
                    document.getElementById("myModal").style.display = "none";
                }

                window.onclick = function(event) {
                    if (event.target == document.getElementById("myModal")) {
                        document.getElementById("myModal").style.display = "none";
                     }
                } 
                
                document.getElementById("rowID").value = id;
                document.getElementById("username").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("correo").value = document.getElementById(id).childNodes[10].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 'db.php';

        # Select username row
        $sql = "SELECT userid, username, nombre, organizacion, puesto, urbanizacion, calle, 
        pueblo, cpostal, telefono, correo, membresia, vigencia FROM login NATURAL JOIN miembros;";
        

        if($result = $conn->query($sql)){
            ?>
            <table id="membersTable" style="width:100%">
                <thead>
                    <th></th>
                    <th>Username</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>Correo</th>
                    <th>Membresia</th>
                    <th>Vigencia</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["username"]."</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["correo"]."</td><td>".$row["membresia"]."</td><td>".$row["vigencia"]."</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>

        <!-- The Modal -->
        <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <form method="post" action="" id="editform">
                <input type="hidden" id="rowID">
                <label>Username:</label><br>
                <input type="text" id="username"><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>Correo:</label><br>
                <input type="text" id="correo"><br><br>
                <input type="submit" class="editor" value="Editar Usiario">
            </form> 
        </div>

</div>
    </body>


</html>