I am working on a simple crm that has tasks and items. Little by little I was making the time lines. But now they ask me that each work respects the timeline. Example: a task has a duration of 15 days and in those days the user can add items such as 3 days for design, 4 for development, 6 for writing and 2 for review. So far I have everything halfway through, I'm missing the animation:
This is what I have:
Block 1 - List of days
<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>
In this block you can see the days of a task horizontally, example: 10 11 12 13 14 15 16... up to 24 - in total there are 10 days
Block 2 - List of 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>
In this block below the horizontal timeline the items are listed. What would have to happen here is that each item respects its time. An item starts on the 14th and ends on the 18th and should have a colored line indicating the days of the item.
The user has to see it like this:
The blocks are in the same file.
I think it can be done with JavaScript, but I don't know how to do it.
I am trying to do the same and found this: Timestack . It works directly with
Jquery
and in any case you would have to insert the codephp
.You can use
Timestack
with php as follows.Inside the .php file you can use ajax to call a
JSON
.In data.php you would have something like this:
All this is to replace the has example
Timestack
so you can usePHP
I suggest you work with percentages and margins
Easy example with 10 days and 3 items
Then with css in each item
It should work, good luck!