mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-11 15:56:07 -07:00
You can now click a graph point on the daily graph to view which items were viewed for that day.
This commit is contained in:
Tim
parent
c28d403186
commit
4588507426
5 changed files with 227 additions and 1 deletions
|
|
@ -51,6 +51,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="padded-header">
|
||||
|
|
@ -121,7 +123,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,6 +132,34 @@
|
|||
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
||||
<script src="interfaces/default/js/moment-duration-format.js"></script>
|
||||
<script src="interfaces/default/js/highcharts/js/highcharts.js"></script>
|
||||
<script>
|
||||
// Modal popup dialog
|
||||
function selectHandler(selectedDate) {
|
||||
|
||||
try
|
||||
{
|
||||
var dateValue = new Date(selectedDate);
|
||||
var d = dateValue.getDate();
|
||||
var m = dateValue.getMonth() + 1;
|
||||
var y = dateValue.getFullYear();
|
||||
var dateString = '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
|
||||
|
||||
$.ajax({
|
||||
"url": "history_table_modal",
|
||||
type: 'post',
|
||||
data: { 'start_date': dateString },
|
||||
complete: function(xhr, status) {
|
||||
$("#history-modal").html(xhr.responseText);
|
||||
$('#history-modal').modal('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
console.log("Failed to retrieve data");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="interfaces/default/js/graphs/plays_by_day.js"></script>
|
||||
<script src="interfaces/default/js/graphs/plays_by_dayofweek.js"></script>
|
||||
<script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>
|
||||
|
|
|
|||
69
data/interfaces/default/history_table_modal.html
Normal file
69
data/interfaces/default/history_table_modal.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
% if data:
|
||||
<link rel="stylesheet" href="interfaces/default/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" href="interfaces/default/css/plexpy-dataTables.css">
|
||||
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
|
||||
<h4 class="modal-title" id="myModalLabel">
|
||||
<strong><span id="modal_header_ip_address">
|
||||
<i class="fa fa-history"></i> History for ${data}
|
||||
</span></strong>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-text">
|
||||
<table class="display" id="history_table" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align='left' id="started">Started</th>
|
||||
<th align='left' id="stopped">Stopped</th>
|
||||
<th align='left' id="friendly_name">User</th>
|
||||
<th align='left' id="platform">Platform</th>
|
||||
<th align='left' id="title">Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||
<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
|
||||
<script src="interfaces/default/js/dataTables.bootstrap.pagination.js"></script>
|
||||
<script src="interfaces/default/js/tables/history_table_modal.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
history_table_modal_options.ajax = {
|
||||
"url": "get_history",
|
||||
type: "post",
|
||||
data: function ( d ) {
|
||||
return { 'json_data': JSON.stringify( d ),
|
||||
'start_date': '${data}'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
history_table = $('#history_table').DataTable(history_table_modal_options);
|
||||
});
|
||||
</script>
|
||||
% else:
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
|
||||
<h4 class="modal-title">
|
||||
<strong><i class="fa fa-history"></i> History</strong>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h3>No data.</h3>
|
||||
</div>
|
||||
<div class="modal-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
|
@ -23,6 +23,18 @@ var hc_plays_by_day_options = {
|
|||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
cursor: 'pointer',
|
||||
point: {
|
||||
events: {
|
||||
click: function() {
|
||||
selectHandler(this.category);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#F9AA03', '#FFFFFF'],
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
|
|
|
|||
108
data/interfaces/default/js/tables/history_table_modal.js
Normal file
108
data/interfaces/default/js/tables/history_table_modal.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
var date_format = 'YYYY-MM-DD';
|
||||
var time_format = 'hh:mm a';
|
||||
|
||||
$.ajax({
|
||||
url: 'get_date_formats',
|
||||
type: 'GET',
|
||||
success: function(data) {
|
||||
date_format = data.date_format;
|
||||
time_format = data.time_format;
|
||||
}
|
||||
});
|
||||
|
||||
history_table_modal_options = {
|
||||
"destroy": true,
|
||||
"language": {
|
||||
"search": "Search: ",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ history items",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 entries",
|
||||
"infoFiltered":"",
|
||||
"emptyTable": "No data in table",
|
||||
},
|
||||
"pagingType": "bootstrap",
|
||||
"stateSave": false,
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"pageLength": 10,
|
||||
"lengthChange": false,
|
||||
"order": [ 0, 'desc'],
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"data":"started",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData === null) {
|
||||
$(td).html('Unknown');
|
||||
} else {
|
||||
$(td).html(moment(cellData,"X").format(time_format));
|
||||
}
|
||||
},
|
||||
"searchable": false,
|
||||
"className": "no-wrap",
|
||||
"width": "5%"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"data":"stopped",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData === null) {
|
||||
$(td).html('Unknown');
|
||||
} else {
|
||||
$(td).html(moment(cellData,"X").format(time_format));
|
||||
}
|
||||
},
|
||||
"searchable": false,
|
||||
"className": "no-wrap",
|
||||
"width": "5%"
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"data":"friendly_name",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData !== '') {
|
||||
if (rowData['user_id']) {
|
||||
$(td).html('<a href="user?user_id=' + rowData['user_id'] + '">' + cellData + '</a>');
|
||||
} else {
|
||||
$(td).html('<a href="user?user=' + rowData['user'] + '">' + cellData + '</a>');
|
||||
}
|
||||
} else {
|
||||
$(td).html(cellData);
|
||||
}
|
||||
},
|
||||
"className": "no-wrap hidden-xs"
|
||||
},
|
||||
{
|
||||
"targets": [3],
|
||||
"data":"player",
|
||||
"className": "modal-control no-wrap hidden-sm hidden-xs"
|
||||
},
|
||||
{
|
||||
"targets": [4],
|
||||
"data":"full_title",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData !== '') {
|
||||
if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
|
||||
var transcode_dec = '';
|
||||
if (rowData['video_decision'] === 'transcode') {
|
||||
transcode_dec = '<i class="fa fa-server"></i> ';
|
||||
}
|
||||
$(td).html('<div><div style="float: left;"><a href="info?source=history&item_id=' + rowData['id'] + '">' + cellData + '</a></div><div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '<i class="fa fa-video-camera"></i></div></div>');
|
||||
} else if (rowData['media_type'] === 'track') {
|
||||
$(td).html('<div><div style="float: left;">' + cellData + '</div><div style="float: right; text-align: right; padding-right: 5px;"><i class="fa fa-music"></i></div></div>');
|
||||
} else {
|
||||
$(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
// $('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
var msg = "<div class='msg'><i class='fa fa-refresh fa-spin'></i> Fetching rows...</div>";
|
||||
showMsg(msg, false, false, 0)
|
||||
}
|
||||
}
|
||||
|
|
@ -524,6 +524,9 @@ class WebInterface(object):
|
|||
if 'grandparent_rating_key' in kwargs:
|
||||
rating_key = kwargs.get('grandparent_rating_key', "")
|
||||
custom_where = [['grandparent_rating_key', rating_key]]
|
||||
if 'start_date' in kwargs:
|
||||
start_date = kwargs.get('start_date', "")
|
||||
custom_where = [['strftime("%Y-%m-%d", datetime(date, "unixepoch", "localtime"))', start_date]]
|
||||
|
||||
data_factory = datafactory.DataFactory()
|
||||
history = data_factory.get_history(kwargs=kwargs, custom_where=custom_where)
|
||||
|
|
@ -531,6 +534,11 @@ class WebInterface(object):
|
|||
cherrypy.response.headers['Content-type'] = 'application/json'
|
||||
return json.dumps(history)
|
||||
|
||||
@cherrypy.expose
|
||||
def history_table_modal(self, start_date=None, **kwargs):
|
||||
|
||||
return serve_template(templatename="history_table_modal.html", title="History Data", data=start_date)
|
||||
|
||||
@cherrypy.expose
|
||||
def shutdown(self):
|
||||
return self.do_state_change('shutdown', 'Shutting Down', 15)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue