Proyecto III - Padel horarios

In this example below you will see how to do a Proyecto III - Padel horarios with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nuwanda555, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nuwanda555 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/nuwanda555/proyecto-iii-padel-horarios-aBdNEv */
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/nuwanda555/proyecto-iii-padel-horarios-aBdNEv */
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: "mario@hola.es",userid: "QyLwAJIH91PXwJY1DkgGoBtrPFK2", horario: hvacio},
                    "maria":{email: "maria@hola.es",userid: "qRbKIPRDZAhzLmwf3WRoDtVhMxV2", horario: hvacio},
                    "pepe": {email: "pepe@hola.es",userid: "4eGo3Z0BRIbrcSzV5UtaVOOnf7r2", horario: hvacio},
                    "juan": {email: "juan@hola.es",userid: "OpnHcFn5GVgJN1ww66y7orzXiBv1", horario: hvacio}};
  
     var ref = firebase.database().ref("Padel/usuarios");
     ref.set(usuarios);   
})
*/

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

Comments