ITTEC
/
SAMPracticantes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <style>
        .container{
            display: flex;
            flex-direction: column;
            width: 75%;
            box-shadow: 4px 4px 16px #aaaaaa;
            margin: 0 auto;
            padding: 8px;
            background-color: white;
            border-radius: 2px;
            box-sizing: border-box;
        }
        .table-header{
            width: 100%;
            padding: 8px;
            background-color: #EEE;
            box-sizing: border-box;
            border-style: solid;
            border-width: 1px;
            border-color: #CCC;
            border-radius: 8px 8px 0 0;
            display: flex;
            flex-direction: row;
        }
        .table-item-white{
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border-style: solid;
            border-width: 0 1px 1px 1px;
            border-color: #CCC;
            display: flex;
            flex-direction: row;
        }
        .table-item-gray{
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border-style: solid;
            border-width: 0 1px 1px 1px;
            border-color: #CCC;
            display: flex;
            flex-direction: row;
            background-color: #EEE;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Usuarios conectados</h1>
    <div class="container" id="container">
        <div class="table-header" id="tHead">
            <div style="width: 50%;">#</div>
            <div style="width: 50%;">Nombre del usuario</div>
        </div>
        <div id="table-items">
            <div class="table-item-white">

            </div>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        
        var tableItems = document.getElementById("table-items");
        var arrConnections = [];

        window.onload = () => {
            socket.emit('get_connections');
        }

        socket.on('current_connections', (msg) => {
            let connections = JSON.parse(msg);
            arrConnections = [];
            refresh(connections);
        });

        socket.on('new_connection', (msg) => {
            let connections = JSON.parse(msg);
            arrConnections = [];
            refresh(connections);
        });

        socket.on('disconnection', (msg) => {
            let connections = JSON.parse(msg);
            arrConnections = [];
            refresh(connections);
        });

        function refresh(connections){
            let cont = 0;
            
            tableItems.innerHTML = "";
            var tableContent = "";
            
            connections.forEach(element => {
                let elementArr = element.split(".");
                if(!arrConnections.includes(elementArr[0])) arrConnections.push(elementArr[0]);
            });

            console.log(arrConnections);

            arrConnections.forEach(element => {
                console.log(element);
                cont++;
                let mod = cont % 2;

                let elementArr = element.split(".");

                if(mod == 1){
                    tableContent += "<div class=\"table-item-white\">";
                }else{
                    tableContent += "<div class=\"table-item-gray\">";
                }

                tableContent += "<div style=\"width: 50%;\">" + cont + "</div>";
                tableContent += "<div style=\"width: 50%;\">" + element + "</div>";
                tableContent += "</div>";

                tableItems.innerHTML = tableContent;
            });
        }
    </script>
</body>
</html>