From 545d99d2128d8eb850f3f17efc5da963aac47d50 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 12 Nov 2017 18:09:57 +0100 Subject: [PATCH] Added dates + hours to events history.timeline --- build/generic/view/history/details/main.php | 104 ++++++++++++++++---- public_html/css/container.scss | 20 +++- public_html/css/min/container.css | 22 ++++- public_html/view/js/history.js | 2 +- 4 files changed, 128 insertions(+), 20 deletions(-) diff --git a/build/generic/view/history/details/main.php b/build/generic/view/history/details/main.php index 7780c4f..4817f37 100644 --- a/build/generic/view/history/details/main.php +++ b/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 - $x = $width/2; // center width + $width = 200; // svg width + $x = 50; // center width /* (5) Svg tag */ $RAW .= ""; - /* (6) Start CIRCLE */ - $RAW .= ""; - $RAW .= ""; + /* (6) Start CIRCLE */ { + + // {6.1} Date node // + $y = $line_pad; + $RAW .= ""; + $RAW .= ""; + + // {6.2} Date line to text // + $line_end_x = $x + (30-8); + $RAW .= ""; + + // {6.3} Date text // + $x_decal = $x + 30; + $y_decal = $y + 5; + $RAW .= "".date('d / m / Y', $this->timeline[0]['timestamp']).""; + + } /* (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 .= ""; + $RAW .= ""; + + // {2.1.2} Date line to text // + $line_end_x = $x + (30-8); + $RAW .= ""; + + // {2.1.3} Date text // + $x_decal = $x + 30; + $y_decal = $y + 5; + $RAW .= "".$entry['date_node'].""; + + 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 .= ""; } + /* (6) Hour */ + $x_decal = $x + 25; + $y_decal = $y + 5; + $RAW .= "".date('H:i:s', $entry['timestamp']).""; + } @@ -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; + } } \ No newline at end of file diff --git a/public_html/css/container.scss b/public_html/css/container.scss index 4b90d67..7ee0511 100755 --- a/public_html/css/container.scss +++ b/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 @@ - } } \ No newline at end of file diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index 049abbf..68c057e 100644 --- a/public_html/css/min/container.css +++ b/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; diff --git a/public_html/view/js/history.js b/public_html/view/js/history.js index 3be7e11..544e084 100644 --- a/public_html/view/js/history.js +++ b/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); };