3

Estoy trabajando en un crm simple que tiene tareas e items. De apoco fui haciendo las lineas de tiempo. Pero ahora me piden que cada trabajo respete la linea de tiempo. Ejemplo: una tarea tiene una duracion de 15 dias y en esos dias el usuario puede agregar items como 3 dias para diseño, 4 para desarrollo, 6 para redaccion y 2 para revicion. Hasta el momento tengo todo a medio punto, me falta la animacion:

Esto es lo que tengo:

Bloque 1 - Lista de dias

<div class="col-md-12 bg-white text-center p-2">Titulo: <?=$row['titulo'];?></div>
<div class="col-md-12 bg-white text-center text-muted p-1">
<?php
$inicio = new DateTime($row['fti']); //2019/03/10
$fin = new DateTime($row['ftf']); //2019/03/24
while ($inicio <= $fin) {
?>
<span class="p-4">
<?=$inicio->format('d');?>
</span>
<?php
$inicio->modify('+ 1 days');
}
?>
</div>

En este bloque se ve los dias de una tarea de forma horizontal, ejemplo: 10 11 12 13 14 15 16... hasta llegar a 24 - en total son 10 dias

Bloque 2 - Lista de items

<div class="col-md-12">
<?php
$it = $conn->query("SELECT * FROM items INNER JOIN usuario ON usuario.codde = items.subusuarios WHERE tareacode = '".$row['tareacodde']."'");
while ($filas = $it->fetch()){

$fecha3 = new DateTime($filas['fii']);
$fecha4 = new DateTime($filas['fif']);
$resultados = $fecha3->diff($fecha4);
?>
<p>
<img src="<?=$filas['imagen'];?>" width="34" style="margin: 10px 10px 10px 0; border-radius: 100%;"> <?=$filas['descripcion'];?>
<br>
<br>
<!--
<?=categ($filas);?> <?=prioridades($filas);?> <?=$resultados->format('%a days');?>
-->
</p>
<?php
}
?>
</div>

En este bloque que esta debajo de la linea de tiempo horizaontal se listan los items. Lo que tendria que pasar aca es que cada item respete su tiempo. Un item comienza el dia 14 y finaliza el dia 18 y tendria que tener un linae de color que indique los dias del item.

El usuario tiene que verlo asi:

introducir la descripción de la imagen aquí

Los bloques estan en el mismo archivo.

Creo que se puede hacer con JavaScript, pero no se como hacerlo.

2 respuestas 2

5
+100

Yo esta tratando de hacer los mismo y encontre esto: Timestack. Trabaja directamente con Jquery y en todo caso tendrias que insertar el codigo php.

Puedes usar Timestack con php de la siguiente manera.

Dentro del archivo .php puedes utilizar un ajax para llamar un JSON.

<script>
$(function(){
    $.ajax({
        type: 'POST',
        dataType: 'json', url: 'datos.php', cache: false, async: true,
        success: function(data){
            //console.log( data );
            $('#daily').timestack({
                span: 'day',
                data: data
            });
        }
    });
});
</script>

En datos.php tendrias algo como esto:

foreach($it as $fila){

$data[] = array(
    'title' => utf8_encode($fila['titulo']), 
    'start' =>  strftime('%Y-%m-%d',strtotime(trim($fila['datoFechaInicio']))), 
    'end'   => strftime('%Y-%m-%d',strtotime(trim($fila['datoFechaFinal'])))
    );
}

echo json_encode($data);

Todo esto es para reemplazar el ejemplo de tiene Timestack y asi poder usar PHP

1
1

Te sugiero que trabajes con porcentajes y margenes

  1. Calcular la cantidad de días equivalentes al 100% de tu linea de tiempo
  2. Por cada item, calcular el porcentaje de tiempo desde el "día 1" hasta el inicio, este es el margen izquierdo
  3. Calcular el porcentaje de días del item, esto es el width de tu barra
  4. Calcular el porcentaje de días, desde el último día del item, hasta el fin de tu linea de tiempo

Ejemplo fácil con 10 días y 3 items

$total_dias = 10; // date_diff final - inicial

// por cada item
$margen_izquierdo = ($dia_inicial - 1) * 100 / $total_dias;
$ancho = $dias_item * 100 / $total_dias; 
$margen_derecho = ($total_dias - $dia_final) * 100 / $total_dias;

/* Descripción:

     | 1| 2| 3| 4| 5| 6| 7| 8| 9|10|
    1|##|##|##|##|  |  |  |  |  |  |
    2|  |  |##|##|##|##|##|  |  |  |
    3|  |  |  |  |  |  |##|##|##|##| 

Item 1: del día 1 al 4 (0% margen derecho |40% ancho |60% margen izquierdo)

    $margen_izquierdo = (1 - 1) * 100 / 10; // -> 0
    $ancho = 4 * 100 / 10; // -> 40
    $margen_derecho = (10 - 4) * 100 / 10; // -> 60

Item 2: del día 3 al 7 (20% 50% 30%)

    $margen_izquierdo = (3 - 1) * 100 / 10; // -> 20
    $ancho = 5 * 100 / 10; // -> 50
    $margen_derecho = (7 - 4) * 100 / 10; // -> 30

Item 2: del día 7 al 10 (60% 40% 0%)

    $margen_izquierdo = (7 - 1) * 100 / 10; // -> 60
    $ancho = 4 * 100 / 10; // -> 40
    $margen_derecho = (10 - 10) * 100 / 10; // -> 0

Luego con css en cada item

<div class="item" 
    style="
        margin-left: <?php echo $margen_izquerdo?>%;
        margin-right: <?php echo $margen_derecho?>%;
        width: <?php echo $ancho?>%;
    ">
    <img... // contenido del item
</div> // fin del item

Debería funcionar, suerte!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.