Skip to content

Commit

Permalink
Add timeline on history page
Browse files Browse the repository at this point in the history
  • Loading branch information
Loïc committed Aug 16, 2017
1 parent 6044dc5 commit fcecabb
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 128 deletions.
5 changes: 4 additions & 1 deletion core/class/scenario.class.php
View file
Expand Up @@ -654,7 +654,10 @@ public static function timelineDisplay($_event) {
$return = array();
$return['date'] = $_event['datetime'];
$return['group'] = 'scenario';
$return['html'] = '<div><i class="fa fa-gears"></i> ' . $_event['name'] . '<hr/>' . $_event['trigger'] . '</div>';
$return['html'] = '<div>'
. '<div style="background-color:#e7e7e7;"><i class="fa fa-gears"></i> ' . $_event['name'] . '<div/>'
. '<div style="background-color:white;">' . $_event['trigger'] . '<div/>'
. '</div>';
return $return;
}

Expand Down
35 changes: 35 additions & 0 deletions desktop/js/history.js
View file
Expand Up @@ -266,3 +266,38 @@ function addChart(_cmd_id, _action,_options) {
});
}
}

/**************TIMELINE********************/

$('#bt_tabTimeline').on('click',function(){
$('#div_visualization').empty();
displayTimeline();
});

function displayTimeline(){
jeedom.getEvents({
error: function (error) {
$('#div_Alert').showAlert({message: error.message, level: 'danger'});
},
success: function (data) {
data_item = [];
id = 0;
for(var i in data){
item = {id : id,start : data[i].date,content : data[i].html,group : data[i].group};
id++;
data_item.push(item);
}
var items = new vis.DataSet(data_item);
var container = document.getElementById('div_visualization');
var options = {
groupOrder:'content',
verticalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: $('body').height() - $('header').height() - 50,
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);
}
});
}
55 changes: 29 additions & 26 deletions desktop/js/utils.js
View file
Expand Up @@ -246,17 +246,17 @@ if (isset(jeedom_langage)) {
});

$('#bt_getHelpPage').on('click',function(){
jeedom.getDocumentationUrl({
jeedom.getDocumentationUrl({
plugin: $(this).attr('data-plugin'),
page: $(this).attr('data-page'),
error: function(error) {
$('#div_alert').showAlert({message: error.message, level: 'danger'});
},
success: function(url) {
window.open(url,'_blank');
}
});
});
window.open(url,'_blank');
}
});
});

/******************Gestion mode expert**********************/

Expand Down Expand Up @@ -326,9 +326,9 @@ if (isset(jeedom_langage)) {
});

$('#bt_showEventInRealTime').on('click',function(){
$('#md_modal').dialog({title: "{{Evénement en temps réel}}"});
$("#md_modal").load('index.php?v=d&modal=log.display&log=event').dialog('open');
});
$('#md_modal').dialog({title: "{{Evénement en temps réel}}"});
$("#md_modal").load('index.php?v=d&modal=log.display&log=event').dialog('open');
});

$('#bt_gotoDashboard').on('click',function(){
$('ul.dropdown-menu [data-toggle=dropdown]').parent().parent().parent().siblings().removeClass('open');
Expand All @@ -351,8 +351,8 @@ if (isset(jeedom_langage)) {
});

$('body').on('click','.objectSummaryParent',function(){
loadPage('index.php?v=d&p=dashboard&summary='+$(this).data('summary')+'&object_id='+$(this).data('object_id'));
});
loadPage('index.php?v=d&p=dashboard&summary='+$(this).data('summary')+'&object_id='+$(this).data('object_id'));
});

initPage();
});
Expand Down Expand Up @@ -395,8 +395,11 @@ function initRowOverflow() {
if($('#div_alert').outerHeight() > 0){
hWindow -= 10;
}
$('.row-overflow > div').height(hWindow).css('overflow-y', 'auto').css('overflow-x', 'hidden').css('padding-top','5px');
}
if($('.row-overflow').attr('data-offset') != undefined){
hWindow -= $('.row-overflow').attr('data-offset');
}
$('.row-overflow > div').height(hWindow).css('overflow-y', 'auto').css('overflow-x', 'hidden').css('padding-top','5px');
}
}

function initExpertMode() {
Expand All @@ -413,13 +416,13 @@ function initExpertMode() {

function initReportMode() {
if (getUrlVars('report') == 1) {
$('header').hide();
$('footer').hide();
$('#div_mainContainer').css('margin-top', '-50px');
$('#wrap').css('margin-bottom', '0px');
$('.reportModeVisible').show();
$('.reportModeHidden').hide();
}
$('header').hide();
$('footer').hide();
$('#div_mainContainer').css('margin-top', '-50px');
$('#wrap').css('margin-bottom', '0px');
$('.reportModeVisible').show();
$('.reportModeHidden').hide();
}
}

function initTableSorter() {
Expand Down Expand Up @@ -570,13 +573,13 @@ function positionEqLogic(_id,_preResize) {
$(this).height('auto');
}
if(init(_preResize,true)){
eqLogic.width(Math.floor(eqLogic.width() / 40) * 40);
eqLogic.height(Math.floor(eqLogic.height() / 80) * 80);
}
eqLogic.width(Math.ceil(eqLogic.width() / 40) * 40 + (Math.ceil(eqLogic.width() / 40)-1) * 2);
eqLogic.height(Math.ceil(eqLogic.height() / 80) * 80 + (Math.ceil(eqLogic.height() / 80)-1) * 2);
eqLogic.trigger('resize');
}else{
eqLogic.width(Math.floor(eqLogic.width() / 40) * 40);
eqLogic.height(Math.floor(eqLogic.height() / 80) * 80);
}
eqLogic.width(Math.ceil(eqLogic.width() / 40) * 40 + (Math.ceil(eqLogic.width() / 40)-1) * 2);
eqLogic.height(Math.ceil(eqLogic.height() / 80) * 80 + (Math.ceil(eqLogic.height() / 80)-1) * 2);
eqLogic.trigger('resize');
}else{
$('.eqLogic-widget:not(.jeedomAlreadyPosition)').css('margin','0px').css('padding','0px');
$('.eqLogic-widget:not(.jeedomAlreadyPosition)').each(function () {
if($(this).width() == 0){
Expand Down
43 changes: 0 additions & 43 deletions desktop/modal/timeline.php
View file

This file was deleted.

144 changes: 86 additions & 58 deletions desktop/php/history.php
View file
Expand Up @@ -2,31 +2,51 @@
if (!isConnect()) {
throw new Exception('{{401 - Accès non autorisé}}');
}
include_file('3rdparty', 'visjs/vis.min', 'css');
include_file('3rdparty', 'visjs/vis.min', 'js');
$date = array(
'start' => date('Y-m-d', strtotime(config::byKey('history::defautShowPeriod') . ' ' . date('Y-m-d'))),
'end' => date('Y-m-d'),
);
?>
<div class="row row-overflow">
<div class="col-lg-3 col-md-4 col-sm-5 bs-sidebar">
<ul class="nav nav-list bs-sidenav">
<li>
<div class="input-group input-group-sm" style="width: 100%">
<textarea class="form-control input-sm" id='in_calculHistory' placeholder="{{Historique calculé}}" ></textarea>
<span class="input-group-btn">
<a class="btn btn-default" id="bt_findCmdCalculHistory" title="{{Sélectionner la commande}}"><i class="fa fa-list-alt"></i></a>
<a class="btn btn-success" id="bt_displayCalculHistory"><i class="fa fa-check"></i></a>
<a class="btn btn-default" id="bt_configureCalculHistory"><i class="fa fa-cogs"></i></a>
</span>
</div>
</li>
</ul>
<ul id="ul_history" class="nav nav-list bs-sidenav">
<li class="nav-header"><i class="icon techno-courbes3"></i> {{Historique}}
<a id="bt_openCmdHistoryConfigure" class="btn btn-default btn-sm pull-right" style="position:relatif; top:-5px;padding: 5px 10px;"><i class="fa fa-cogs"></i> {{Configuration}}</a>
</li>
<li class="filter"><input class="filter form-control input-sm" placeholder="{{Rechercher}}" /></li>
<?php
<style>
div.vis-item {
background-color: white;
border-color: #D7D7D7;
}
</style>

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#histoytab" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> {{Historique}}</a></li>
<li role="presentation"><a id="bt_tabTimeline" href="#timelinetab" aria-controls="profile" role="tab" data-toggle="tab" style="padding:10px 5px !important"><i class="fa fa-clock-o"></i> {{Timeline}}</a></li>
</ul>



<div class="tab-content" style="height:calc(100% - 50px);overflow:auto;overflow-x: hidden;">
<div role="tabpanel" class="tab-pane active" id="histoytab">
<br/>

<div class="row row-overflow" data-offset="70">
<div class="col-lg-3 col-md-4 col-sm-5 bs-sidebar">
<ul class="nav nav-list bs-sidenav">
<li>
<div class="input-group input-group-sm" style="width: 100%">
<textarea class="form-control input-sm" id='in_calculHistory' placeholder="{{Historique calculé}}" ></textarea>
<span class="input-group-btn">
<a class="btn btn-default" id="bt_findCmdCalculHistory" title="{{Sélectionner la commande}}"><i class="fa fa-list-alt"></i></a>
<a class="btn btn-success" id="bt_displayCalculHistory"><i class="fa fa-check"></i></a>
<a class="btn btn-default" id="bt_configureCalculHistory"><i class="fa fa-cogs"></i></a>
</span>
</div>
</li>
</ul>
<ul id="ul_history" class="nav nav-list bs-sidenav">
<li class="nav-header"><i class="icon techno-courbes3"></i> {{Historique}}
<a id="bt_openCmdHistoryConfigure" class="btn btn-default btn-sm pull-right" style="position:relatif; top:-5px;padding: 5px 10px;"><i class="fa fa-cogs"></i> {{Configuration}}</a>
</li>
<li class="filter"><input class="filter form-control input-sm" placeholder="{{Rechercher}}" /></li>
<?php
$object_id = -1;
foreach (cmd::allHistoryCmd() as $cmd) {
$eqLogic = $cmd->getEqLogic();
Expand Down Expand Up @@ -54,46 +74,54 @@
$object_id = $eqLogic->getObject_id();
}
?>
</ul>
</div>
</ul>
</div>

<div class="col-lg-9 col-md-8 col-sm-7" style="border-left: solid 1px #EEE; padding-left: 25px;height: 550px;">
<a class="btn btn-warning btn-sm" id='bt_clearGraph'><i class="fa fa-trash-o"></i> {{Vider}}</a>
<input id="in_startDate" class="form-control input-sm in_datepicker" style="display : inline-block; width: 150px;position:relative;top:1px;" value="<?php echo $date['start'] ?>"/>
<input id="in_endDate" class="form-control input-sm in_datepicker" style="display : inline-block; width: 150px;position:relative;top:1px;" value="<?php echo $date['end'] ?>"/>
<a class="btn btn-success btn-sm" id='bt_validChangeDate' title="{{Attention une trop grande plage de dates peut mettre très longtemps à être calculée ou même ne pas s'afficher}}"><i class="fa fa-check"></i> {{Ok}}</a>

<div class="col-lg-9 col-md-8 col-sm-7" style="border-left: solid 1px #EEE; padding-left: 25px;height: 600px;">
<a class="btn btn-warning btn-sm" id='bt_clearGraph'><i class="fa fa-trash-o"></i> {{Vider}}</a>
<input id="in_startDate" class="form-control input-sm in_datepicker" style="display : inline-block; width: 150px;position:relative;top:1px;" value="<?php echo $date['start'] ?>"/>
<input id="in_endDate" class="form-control input-sm in_datepicker" style="display : inline-block; width: 150px;position:relative;top:1px;" value="<?php echo $date['end'] ?>"/>
<a class="btn btn-success btn-sm" id='bt_validChangeDate' title="{{Attention une trop grande plage de dates peut mettre très longtemps à être calculée ou même ne pas s'afficher}}"><i class="fa fa-check"></i> {{Ok}}</a>
<select class="form-control pull-right" id="sel_groupingType" style="width: 200px;">
<option value="">{{Aucun groupement}}</option>
<option value="sum::hour">{{Sommes par heure}}</option>
<option value="average::hour">{{Moyenne par heure}}</option>
<option value="low::hour">{{Minimum par heure}}</option>
<option value="high::hour">{{Maximum par heure}}</option>
<option value="sum::day">{{Sommes par jour}}</option>
<option value="average::day">{{Moyenne par jour}}</option>
<option value="low::day">{{Minimum par jour}}</option>
<option value="high::day">{{Maximum par jour}}</option>
<option value="sum::week">{{Sommes par semaine}}</option>
<option value="average::week">{{Moyenne par semaine}}</option>
<option value="low::week">{{Minimum par semaine}}</option>
<option value="high::week">{{Maximum par semaine}}</option>
<option value="sum::month">{{Sommes par mois}}</option>
<option value="average::month">{{Moyenne par mois}}</option>
<option value="low::month">{{Minimum par mois}}</option>
<option value="high::month">{{Maximum par mois}}</option>
<option value="sum::year">{{Sommes par année}}</option>
<option value="average::year">{{Moyenne par année}}</option>
<option value="low::year">{{Minimum par année}}</option>
<option value="high::year">{{Maximum par année}}</option>
</select>
<select class="form-control pull-right" id="sel_chartType" style="width: 200px;">
<option value="line">{{Ligne}}</option>
<option value="areaspline">{{Areaspline}}</option>
<option value="column">{{Barre}}</option>
</select>
<span class="pull-right">{{Variation}} <input type="checkbox" id="cb_derive" /></span>
<span class="pull-right">{{Escalier}} <input type="checkbox" id="cb_step" /></span>
<div id="div_graph" style="margin-top: 50px;height:calc(100% - 130px)"></div>
</div>
</div>

</div>
<div role="tabpanel" class="tab-pane" id="timelinetab">
<br/>
<div id="div_visualization"></div>

<select class="form-control pull-right" id="sel_groupingType" style="width: 200px;">
<option value="">{{Aucun groupement}}</option>
<option value="sum::hour">{{Sommes par heure}}</option>
<option value="average::hour">{{Moyenne par heure}}</option>
<option value="low::hour">{{Minimum par heure}}</option>
<option value="high::hour">{{Maximum par heure}}</option>
<option value="sum::day">{{Sommes par jour}}</option>
<option value="average::day">{{Moyenne par jour}}</option>
<option value="low::day">{{Minimum par jour}}</option>
<option value="high::day">{{Maximum par jour}}</option>
<option value="sum::week">{{Sommes par semaine}}</option>
<option value="average::week">{{Moyenne par semaine}}</option>
<option value="low::week">{{Minimum par semaine}}</option>
<option value="high::week">{{Maximum par semaine}}</option>
<option value="sum::month">{{Sommes par mois}}</option>
<option value="average::month">{{Moyenne par mois}}</option>
<option value="low::month">{{Minimum par mois}}</option>
<option value="high::month">{{Maximum par mois}}</option>
<option value="sum::year">{{Sommes par année}}</option>
<option value="average::year">{{Moyenne par année}}</option>
<option value="low::year">{{Minimum par année}}</option>
<option value="high::year">{{Maximum par année}}</option>
</select>
<select class="form-control pull-right" id="sel_chartType" style="width: 200px;">
<option value="line">{{Ligne}}</option>
<option value="areaspline">{{Areaspline}}</option>
<option value="column">{{Barre}}</option>
</select>
<span class="pull-right">{{Variation}} <input type="checkbox" id="cb_derive" /></span>
<span class="pull-right">{{Escalier}} <input type="checkbox" id="cb_step" /></span>
<div id="div_graph" style="margin-top: 50px;height:calc(100% - 120px)"></div>
</div>
</div>

Expand Down

0 comments on commit fcecabb

Please sign in to comment.