Proyecto III - Padel horarios

Tutorials of (Proyecto iii - padel horarios) by Mario brito morales

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Proyecto III - Padel horarios</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="pruebas"></div>
<div id="principal" class="container">
  <div class="row">
   <div class="col-md-6">    
      <div class="col-md-3">     
        <h4>Usuarios</h4>
        <div class="list-group" data-usuarioid="" id="usuarios" class="col-md-2"></div>
      </div>
      <div id="horario" class="col-md-9"></div>
   </div>
   <div class="col-md-6">    
      <div class="col-md-3">     
        <h4>Usuarios</h4>
        <div class="list-group" data-usuarioid="" id="usuarios2" class="col-md-2"></div>
      </div>
      <div id="horario2" class="col-md-9"></div>
   </div>
    
 
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://www.gstatic.com/firebasejs/3.5.2/firebase.js'></script>
<script src='https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
table {text-align: center; width: 304px; border: 1px;table-layout:fixed; border-collapse: collapse; table-responsive};
th,tr,td {text-align:center; border: solid 1px #ff0000}
table button{height: 18px; padding: 0;  display:inline-block; }
/* Downloaded from https://www.codeseek.co/ */
var config = {
    apiKey: "AIzaSyBBFSUKWhhXEDfh_37X-nJYD2nUvl8_7Tc",
    authDomain: "padel-d7bf2.firebaseapp.com",
    databaseURL: "https://padel-d7bf2.firebaseio.com",
    storageBucket: "padel-d7bf2.appspot.com",
    messagingSenderId: "287961034536"
  };
firebase.initializeApp(config);
var horario="0".repeat(210);

// *********************************** CREAR LAS FRANJAS HORARIAS ***********************************
/*
$("#boton").click(function (){
     var ref = firebase.database().ref("Padel/franjas");
     var hoy = moment("07:30", 'HH:mm');
     for (var i=0;i<31;i++){
        hoy=hoy.add('m',30);
        var hora=hoy.format('HH:mm');
        ref.child(hora).set(hora);
     }
})
*/
//***************************************************************************************************

function htmlTabla(horas,dias,id){   //crea la tabla
    var html="<table id='"+id+"' class='table-responsive'><tr><th></th>";
   
    for (var i=0;i<dias.length;i++) { //Encabezado de la tabla
          ndia=dias[i]; //Esto es el nombre del día de la semana
          html+="<th class='text-center' data-columna='"+i+"'>"+ndia+"</th>";
    }
    html+="</tr>"
    var pos=0;
    for (var j=0;j<horas.length-1;j++) { 
        var h=horas[j];
        html+="<tr><td>"+h+"</td>";
        for (var i=0;i<dias.length;i++) { 
            dia=dias[i];  //fecha del dia de la semana en formato año-mes-dia
            htmlBoton=""; //"<button data-valor='0' class='btn-success' style='width: 100%;'></button>"
            html+="<td data-pos='"+pos+"' class='btn-success' style='border: solid 2px #eee'>"+htmlBoton+"</td>"; 
            pos++;
        }
        html+="</tr>";
    }
    html+="</table>";
    return html;
}

//var dias=["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];
var dias=["L","M","X","J","V","S","D"];

var horas=[];
var ref = firebase.database().ref("Padel/franjas");
ref.once("value",function(snapshot){
    var objeto=snapshot.val();
    $.each(objeto, function(i,hora) {
      horas.push(hora);
    });
    $("#horario").html(htmlTabla(horas,dias,"tablaid"));
    $("#horario2").html(htmlTabla(horas,dias,"tablaid2"));
    $("table").on("click","button",function(){
        var usuario= $("#usuarios").data("usuarioid");
        var clases=["btn-success","btn-warning","btn-danger"]; //array de clases
        var valor=parseInt($(this).attr("data-valor"));
        valor=(valor+1)%3;  //esto da 0,1,2 , 0,1,2 y así sucesivamente
        $(this).removeClass();  //Le quitamos la clase que tenía anterioremente
        $(this).addClass(clases[valor]);   //Según el valor le añadimos una clase
        $(this).attr("data-valor",valor);  //Guardar el valor del botón 0->verde, 1->naranja, 2->rojo
        var pos=parseInt($(this).closest("td").data("pos"));
        horario=horario.substr(0,pos) + valor + horario.substr(pos+1);
        var ref = firebase.database().ref("Padel/usuarios/"+usuario);
        ref.update({horario: horario});
        console.log(horario);
    });
});

//var horario="0".repeat(210);
function cargarHorario(usuario){
      var ref = firebase.database().ref("Padel/usuarios/"+usuario+"/horario");
      ref.once("value",function(snapshop){
            horario=snapshop.val().toString();
            var clases=["btn-success","btn-warning","btn-danger"]; //array de clases
            for(var i=0;i<horario.length;i++){
                 var boton=$("#horario td[data-pos='"+i+"']").children("button"); //de la celda apuntamos al boton
                 boton.attr("data-valor",horario[i]); //Le ponemos al botón el valor adecuado 0,1 o 2
                 boton.removeClass();  //Le quitamos la clase que tenía anterioremente
                 boton.addClass(clases[horario[i]]);  //Según el valor le ponemos la clave adecuada
            }                    
      });
}


function cargarUsuarios(contenedor){
        var ref = firebase.database().ref("Padel/usuarios");    
        ref.once("value", function(snapshot) {  //solo leer una vez los datos
            var html="";
            snapshot.forEach(function (usuario){  
                html +="<a href='#' class='list-group-item' id='"+usuario.key+"'>"+usuario.key+"</a>";
        });
        contenedor.html(html);
        contenedor.find("a").click(function(){            
            contenedor.find("a").removeClass("active"); //Quitamos el efecto de activo a todos
            $(this).addClass( "active"); 
            contenedor.data("usuarioid",$(this).attr('id'))
            cargarHorario($(this).text());
        }); 
        contenedor.find("a:first").trigger("click");  //Hacemos automaticamente un click en el primer recurso
    }); 
}



function combinarHorarios(horario1,horario2){
    var horario=[];
    for(var i=0;i<horario1.length;i++){
         var maximo=Math.max(parseInt(horario1[i],parseInt(horario2[i]))); //máximo una posicion en los dos horarios
         horario.push(maximo);
    }
    return horario.join(""); //convierte a cadena uniendo elementos, separados por cadena vacia
}

/*
$("#boton").click(function (){
     var hvacio="0".repeat(210);
     var usuarios= {"mario":{email: "[email protected]",userid: "QyLwAJIH91PXwJY1DkgGoBtrPFK2", horario: hvacio},
                    "maria":{email: "[email protected]",userid: "qRbKIPRDZAhzLmwf3WRoDtVhMxV2", horario: hvacio},
                    "pepe": {email: "[email protected]",userid: "4eGo3Z0BRIbrcSzV5UtaVOOnf7r2", horario: hvacio},
                    "juan": {email: "[email protected]",userid: "OpnHcFn5GVgJN1ww66y7orzXiBv1", horario: hvacio}};
  
     var ref = firebase.database().ref("Padel/usuarios");
     ref.set(usuarios);   
})
*/

cargarUsuarios($("#usuarios"));
cargarUsuarios($("#usuarios2"));
cargarHorario(usuario,$("#usuarios"));
cargarHorario(usuario,$("#usuarios2"));

This awesome code ( Proyecto III - Padel horarios ) is write by Mario Brito Morales, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Mario Brito Morales