Added dates + hours to events history.timeline
This commit is contained in:
xdrm-brackets
parent
067f12cc1a
commit
545d99d212
|
|
@ -47,9 +47,13 @@
|
|||
$mac_res = $mac_req->dispatch();
|
||||
|
||||
/* (3) On success, store timeline data */
|
||||
if( $mac_res->error->get() == Err::Success )
|
||||
if( $mac_res->error->get() == Err::Success ){
|
||||
$this->timeline = $mac_res->get('timeline');
|
||||
|
||||
// add date nodes to the timeline
|
||||
$this->add_date_nodes();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -65,6 +69,7 @@
|
|||
---------------------------------------------------------*/
|
||||
/* (1) Set date() timezone */
|
||||
date_default_timezone_set('Europe/Paris');
|
||||
debug();
|
||||
|
||||
/* (2) Init. result raw svg */
|
||||
$RAW = '';
|
||||
|
|
@ -73,20 +78,38 @@
|
|||
$c = 0;
|
||||
$cl = count($this->timeline);
|
||||
|
||||
// if no entry -> abort
|
||||
if( $cl == 0 )
|
||||
return '';
|
||||
|
||||
/* (4) Useful variables */
|
||||
$y_pad = 80; // padding between each node
|
||||
$line_pad = 50; // padding on each LINE end
|
||||
$line_height = ( $cl + 1 ) * $y_pad; // line height (each node * @y_pad + @y_pad)
|
||||
$height = $line_height + 2*$line_pad; // svg height
|
||||
$width = 100; // svg width
|
||||
$x = $width/2; // center width
|
||||
$width = 200; // svg width
|
||||
$x = 50; // center width
|
||||
|
||||
/* (5) Svg tag */
|
||||
$RAW .= "<svg width='$width' height='$height' viewBox='0 0 $width $height' class='timeline'>";
|
||||
|
||||
/* (6) Start CIRCLE */
|
||||
$RAW .= "<circle cx='$x' cy='$line_pad' r='7' fill='#edf0f5' class='tstart'/>";
|
||||
$RAW .= "<circle cx='$x' cy='$line_pad' r='4' fill='#555' class='tstart'/>";
|
||||
/* (6) Start CIRCLE */ {
|
||||
|
||||
// {6.1} Date node //
|
||||
$y = $line_pad;
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='7' fill='#edf0f5' class='tstart'/>";
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='4' fill='#555' class='tstart'/>";
|
||||
|
||||
// {6.2} Date line to text //
|
||||
$line_end_x = $x + (30-8);
|
||||
$RAW .= "<path d='m".($x+8)." $y L$line_end_x $y' style='stroke-dasharray: 3px;' s stroke='#444'/>";
|
||||
|
||||
// {6.3} Date text //
|
||||
$x_decal = $x + 30;
|
||||
$y_decal = $y + 5;
|
||||
$RAW .= "<text x='$x_decal' y='$y_decal' class='bold'>".date('d / m / Y', $this->timeline[0]['timestamp'])."</text>";
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (2) Build barebone
|
||||
|
|
@ -106,9 +129,30 @@
|
|||
/* (2) Get entry data */
|
||||
$entry = $this->timeline[$c];
|
||||
|
||||
/* (2.1) If DATE NODE -> add it */
|
||||
if( isset($entry['date_node']) ){
|
||||
|
||||
// {2.1.1} Date node //
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='7' fill='#edf0f5' class='tstart'/>";
|
||||
$RAW .= "<circle cx='$x' cy='$y' r='4' fill='#555' class='tstart'/>";
|
||||
|
||||
// {2.1.2} Date line to text //
|
||||
$line_end_x = $x + (30-8);
|
||||
$RAW .= "<path d='m".($x+8)." $y L$line_end_x $y' style='stroke-dasharray: 3px;' stroke='#555'/>";
|
||||
|
||||
// {2.1.3} Date text //
|
||||
$x_decal = $x + 30;
|
||||
$y_decal = $y + 5;
|
||||
$RAW .= "<text x='$x_decal' y='$y_decal' class='bold'>".$entry['date_node']."</text>";
|
||||
|
||||
continue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (3) Get useful data */
|
||||
$action_class = strtolower($entry['action_name']);
|
||||
$icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg';
|
||||
$icon_uri = '/src/static/timeline/'.$action_class.'@ffffff.svg';
|
||||
$data_user = "data-user='".$entry['user_name']."'";
|
||||
$data_machine = " data-machine='".$entry['machine_name']."'";
|
||||
$data_action = " data-action='".$entry['action_name']."'";
|
||||
|
|
@ -131,6 +175,11 @@
|
|||
$RAW .= "<circle cx='$x_decal' cy='$y' r='2' class='timeline below $action_class' />";
|
||||
}
|
||||
|
||||
/* (6) Hour */
|
||||
$x_decal = $x + 25;
|
||||
$y_decal = $y + 5;
|
||||
$RAW .= "<text x='$x_decal' y='$y_decal' class='$action_class'>".date('H:i:s', $entry['timestamp'])."</text>";
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -158,20 +207,41 @@
|
|||
|
||||
|
||||
|
||||
private function get_action_color($action_name){
|
||||
|
||||
return 'ffffff';
|
||||
|
||||
switch($action_name){
|
||||
case 'start': return '2cde8b'; break;
|
||||
case 'stop': return '3a3a3a'; break;
|
||||
case 'lock': return 'e04343'; break;
|
||||
case 'unlock': return 'af1c1c'; break;
|
||||
case 'signal': return '3258d8'; break;
|
||||
case 'unsignal': return '2041ab'; break;
|
||||
/* (3) Add events for new day in @this->timeline
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
private function add_date_nodes(){
|
||||
|
||||
/* (1) Initialization
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Initialize variables */
|
||||
$last_day = null;
|
||||
$new_timeline = []; // will contain the new @timeline data
|
||||
|
||||
|
||||
/* (2) Browse each entry
|
||||
---------------------------------------------------------*/
|
||||
foreach($this->timeline as $entry){
|
||||
|
||||
/* (1) If different day (not null) -> add a node + update last_day */
|
||||
if( !is_null($last_day) && $last_day != date('d / m / Y', $entry['timestamp']) )
|
||||
$new_timeline[] = [ 'date_node' => $last_day ];
|
||||
|
||||
/* (2) In all cases -> copy the event */
|
||||
$new_timeline[] = $entry;
|
||||
|
||||
/* (3) Update the day */
|
||||
$last_day = date('d / m / Y', $entry['timestamp']);
|
||||
|
||||
}
|
||||
|
||||
return '000000';
|
||||
|
||||
/* (3) Update the result
|
||||
---------------------------------------------------------*/
|
||||
$this->timeline = $new_timeline;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -613,6 +613,25 @@
|
|||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
/* (8) Default 'text' font*/
|
||||
text{
|
||||
fill: #444;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans';
|
||||
|
||||
&.bold{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.start{ fill: #2cde8b; }
|
||||
&.stop{ fill: #3a3a3a; }
|
||||
&.lock{ fill: #e04343; }
|
||||
&.unlock{ fill: #af1c1c; }
|
||||
&.signal{ fill: #3258d8; }
|
||||
&.unsignal{ fill: #2041ab; }
|
||||
}
|
||||
}
|
||||
|
||||
/* (8) Timeline infobox */
|
||||
|
|
@ -640,7 +659,6 @@
|
|||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -593,7 +593,8 @@
|
|||
/* (8) Timeline infobox */ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline {
|
||||
/* (1) svg circles -> set right transform-origin */
|
||||
/* (7) Avoid icons inside center circles to block :hover */ }
|
||||
/* (7) Avoid icons inside center circles to block :hover */
|
||||
/* (8) Default 'text' font*/ }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline {
|
||||
-webkit-transform-origin: 50% 50% 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
|
|
@ -631,6 +632,25 @@
|
|||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline image {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text {
|
||||
fill: #444;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans'; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.bold {
|
||||
font-size: 16px;
|
||||
font-weight: bold; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.start {
|
||||
fill: #2cde8b; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.stop {
|
||||
fill: #3a3a3a; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.lock {
|
||||
fill: #e04343; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.unlock {
|
||||
fill: #af1c1c; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.signal {
|
||||
fill: #3258d8; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container svg.timeline text.unsignal {
|
||||
fill: #2041ab; }
|
||||
#WRAPPER > #CONTAINER article.timeline.container div.timeline.infobox {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ if( section.details.element != null ){
|
|||
/* (1) Set click handler */
|
||||
section.details.event.handler = function(target){
|
||||
|
||||
section.details.info.element.addClass('active');
|
||||
// section.details.info.element.addClass('active');
|
||||
console.log('show infobox on element', target);
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue