range selector

by jpeter06

HTML

<button onclick="reset()">reset</button>
<button onclick="save()">save</button>
<button onclick="trazar()">trazar</button>
<button onclick="autoAgrupar()">agruparResto</button>
<button onclick="limpiar()">clear</button>
<button onclick="validar()">validar</button>
<br>
    <br>
    <div style="margin-top:5px;background:gray;display:block;width:10px;height:10px;float:left"></div><span style="margin-left:5px;">atextstasd asdf</span>
    <br>
    <div> <span style="float:left; margin:6px; margin-top:30px">días: </span>
<ul id="lista">
    <li>6</li>
	<li>16</li>
	<li>20</li>
	<li>27</li>	
    <li>29</li>
    <li>30</li>
</ul>
        <span style="clear: both;float:left; margin:6px; margin-top:18px">kwh: </span>
<ul id="energia">
    <li>200000000</li>
	<li>3000</li>
	<li>1000</li>
	<li>666</li>	
    <li>0</li>
    <li>222</li>
</ul>
 </div>

CSS

body{
    background:#ddd;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

ul {  
      display: table;
  table-layout: fixed; /* optional */
	list-style:none;
    float: left;
	margin:0;
	padding:0;
    margin-top:10px;
    user-select: none;
    width:80%;
    background:white;
    z-index:5;
}
ul li {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: table-cell;
    width: auto;
	margin:0px;
    padding:4px;
    padding-top:14px;
    height:40px;
    background:white;
	border:1px dotted #ddd;
	 //para eliminar el comportamiento de elemento de bloque(salto de linea)
}

li:hover{
    color:black;
}

#energia {
    background: transparent;
    margin-top: -24px;
    heigth:0px;
    z-index:3;
}
#energia li {
    height:auto;
    text-align:left;
    color:#333;
    border:0px solid red;
    -webkit-transform:rotate(65deg)
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    transform:rotate(65deg);
    transform-origin: 0% 100%;
    white-space:nowrap

    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    background: transparent;
}

JavaScript

var init=-1;
var end=-1;
//White es sin seleccionar.
var colors=["white","#eaa","#aea","#eae","#eea","#aee","#aae"];
var grises=["#999","#aaa","#bbb","#ccc"];
var colorCont=1;
var color=colors[colorCont];

var datosConFact=[0,0,0,0,0,0];//Datos con Factura, no seleccionables.
var energias=[2000,3000,1000,666,0,222];
var datosDia=[6,16,20,27,29,30];
var datos=[0,0,0,0,0,0];
var datosOld=[0,0,0,0,0,0];
//[0,0,0,0,0,0]

function limpiar(){
    datosConFact=[0,0,0,0,0,0].slice(0);
    datos=[0,0,0,0,0,0].slice(0);
    datosOld=[0,0,0,0,0,0].slice(0);
    drawDatos();
}

function autoAgrupar(){
    
}

function validar(){
    var ok = true;
    for( var i=0;i<datos.length;i++){
        if(datos[i] == 0){
            ok = false;
            break;
        }
    }
    if (ok)
        alert("Todo_OK");
    else
        alert("Mallllll");
}

function save(){
    datosOld=datos.slice(0);
}

function trazar(){
    console.log(datos);
}

function reset(){
    datos=datosOld.slice(0);
    drawDatos();
}

//Los que tengan factura van en Gris;
function drawDatos(){
    console.log("drawDatos");
    $("#lista li").each(function (index){
        var auxC=colors[datos[index]];
        auxC=datosConFact[index]==1?"#ccc":auxC;
        $(this).css("background-color",auxC);
    });
}

/**
Tenemos que validar que no se seleccione en mitad de ninguna seleccion.
White es sin seleccionar.
*/
function updateDatos(){
    var celda_init=init<end?init:end;
    var celda_end=init<end?end:init;
    var encontradaF=false;
    //duplicamos array para bloquear divisiones
    var auxDatos=datos.slice(0);
    for(var i=celda_init; i<= celda_end; i++){
            if(datosConFact[i]==1)
                encontradaF=true;
            if(!encontradaF)
                auxDatos[i]=colorCont;
        }
    
    //verificamos que no se haya dividido nada
    //no podemos tener repetidas divisiones.
    var encontrados={};
    var old=null;
    var conError=false;
    for(var i=0;i<auxDatos.length;i++){
    ...