Added dates + hours to events history.timeline

build/generic/view/history/details/main.php

@@ -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
+			$width       = 200;                        // svg width
-			$x           = $width/2;                   // center width
+			$x           = 50;                   // center width
 
 			/* (5) Svg tag */
 			$RAW .= "<svg width='$width' height='$height' viewBox='0 0 $width $height' class='timeline'>";
 
-			/* (6) Start CIRCLE */
+			/* (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.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){
+		/* (3) Add events for new day in @this->timeline
-				case 'start':    return '2cde8b'; break;
+		*
-				case 'stop':     return '3a3a3a'; break;
+		---------------------------------------------------------*/
-				case 'lock':     return 'e04343'; break;
+		private function add_date_nodes(){
-				case 'unlock':   return 'af1c1c'; break;
+
-				case 'signal':   return '3258d8'; break;
+			/* (1) Initialization
-				case 'unsignal': return '2041ab'; break;
+			---------------------------------------------------------*/
+			/* (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;
+
 		}
 
 	}

public_html/css/container.scss

@@ -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 @@
 
 
 
-
 	}
 
 }

public_html/css/min/container.css

@@ -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;

public_html/view/js/history.js

@@ -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);
 
 	};