Skip to content

Commit

Permalink
searchable and sortable event table
Browse files Browse the repository at this point in the history
  • Loading branch information
@hobbyquaker
hobbyquaker committed Aug 9, 2020
1 parent ebc93f8 commit 85894df
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 19 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "homematic-manager",
"version": "2.6.3",
"version": "2.7.0",
"private": true,
"dependencies": {
"async": "2.6.2",
Expand Down
5 changes: 4 additions & 1 deletion www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ <h3 id="console-rpc-method-heading"></h3>
<div id="pager-messages"></div>
</div>
<div id="events">
<table id="grid-events"></table>
<div id="pager-events"></div>
<!--
<div id="grid-events" class="ui-jqgrid" style="display: block;">
<div class="ui-jqgrid-titlebar ui-jqgrid-caption ui-widget-header ui-corner-top ui-helper-clearfix">
<div class="">
Expand All @@ -90,7 +93,7 @@ <h3 id="console-rpc-method-heading"></h3>
</table>
</div>
</div>

-->
</div>
</div>
<div id="dialog-paramset">
Expand Down
131 changes: 115 additions & 16 deletions www/js/homematic-manager.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* global $, window, document, alert */
/* eslint-disable import/no-unassigned-import */
/* global $, window, document, alert */

const ipc = require('electron').ipcRenderer;
const {shell} = require('electron');
Expand Down Expand Up @@ -85,6 +85,7 @@ const $gridDevices = $('#grid-devices');
const $gridLinks = $('#grid-links');
const $gridRssi = $('#grid-rssi');
const $gridMessages = $('#grid-messages');
const $gridEvents = $('#grid-events');
const $gridInterfaces = $('#grid-interfaces');

const $tableEasymode = $('#table-easymode');
Expand Down Expand Up @@ -189,6 +190,17 @@ ipcRpc.on('connection', connected => {
$('#connection-indicator').html(`${config.ccuAddress}<br><span style="font-size: 8px; font-weight: normal;">${connections}</span>`);
});

let eventRow = 0;
let newEvent = false;

function pushEvent(data) {
newEvent = true;
eventsData.push(data);
if (eventsData.length > 8192) {
eventsData.splice(0, 1);
}
}

// Incoming Events
ipcRpc.on('rpc', data => {
const [method, params] = data;
Expand All @@ -201,6 +213,8 @@ ipcRpc.on('rpc', data => {
}
switch (method) {
case 'newDevices': {
pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});

const devArr = params[1];
$('div.ui-dialog[aria-describedby="dialog-alert"] .ui-dialog-title').html(_('New devices'));
let count = 0;
Expand All @@ -224,6 +238,8 @@ ipcRpc.on('rpc', data => {
break;
}
case 'deleteDevices': {
pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});

const devArr = params[1];
$('div.ui-dialog[aria-describedby="dialog-alert"] .ui-dialog-title').html(_('Devices deleted'));
let count = 0;
Expand All @@ -249,6 +265,7 @@ ipcRpc.on('rpc', data => {
break;
}
case 'replaceDevice': {
pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});
getNames(() => {
getDevices(() => {
getLinks(() => {
Expand All @@ -260,18 +277,14 @@ ipcRpc.on('rpc', data => {
}
case 'event': {
const [, address, param, value] = params;

const timestamp = new Date();
const ts = timestamp.getFullYear() + '-' +
('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
('0' + (timestamp.getDate()).toString(10)).slice(-2) + ' ' +
('0' + (timestamp.getHours()).toString(10)).slice(-2) + ':' +
('0' + (timestamp.getMinutes()).toString(10)).slice(-2) + ':' +
('0' + (timestamp.getSeconds()).toString(10)).slice(-2);
const [device, channel] = address.split(':');

const name = names && names[address] ? names[address] : '';

$('#event-table').prepend('<tr class="ui-widget-content jqgrow ui-row-ltr "><td class="event-column-1 monospace">' + ts + '</td><td class="event-column-2">' + name + '</td><td class="event-column-3 monospace">' + address + '</td><td class="event-column-4 monospace">' + param + '</td><td class="event-column-5 monospace">' + value + '</td></tr>');
//$('#event-table').prepend('<tr class="ui-widget-content jqgrow ui-row-ltr "><td class="event-column-1 monospace">' + ts + '</td><td class="event-column-2">' + name + '</td><td class="event-column-3 monospace">' + address + '</td><td class="event-column-4 monospace">' + param + '</td><td class="event-column-5 monospace">' + value + '</td></tr>');

pushEvent({timestamp: ts(), method: 'event', channel, device, name, param, value});


// Service-Meldung?
if (!listMessages) {
Expand Down Expand Up @@ -358,6 +371,8 @@ ipcRpc.on('rpc', data => {
break;
}
default:
pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});

}
});

Expand Down Expand Up @@ -411,15 +426,17 @@ function getConfig() {
translate();

initTabs();
initDialogsMisc();
initDialogParamset();
initDialogLinkParamset();
initGridEvents();

initGridDevices();
initGridMessages();
initGridLinks();
initConsole();

initDialogsMisc();
initDialogParamset();
initDialogLinkParamset();

$('#loader').hide();

if (!config.ccuAddress) {
Expand Down Expand Up @@ -472,12 +489,30 @@ function getNames(callback) {
}
});
}

let refreshEvents = false;

setInterval(() => {
if (refreshEvents) {
if (newEvent) {
newEvent = false;
$gridEvents.trigger('reloadGrid');
}
}
}, 1000);

function initTabs() {
$tabsMain.tabs({

activate(event, ui) {
resizeGrids();

const tab = ui.newTab[0].children[0].hash.slice(1);

refreshEvents = tab === 'events';
console.log('refreshEvents', refreshEvents);


if (hash) {
window.location.hash = '/' + hash + '/' + tab;
}
Expand Down Expand Up @@ -606,6 +641,7 @@ function initDialogsMisc() {
});
}
function initDaemon() {
eventsData.length = 0;
indexSourceRoles = {};
indexTargetRoles = {};
daemon = $('#select-bidcos-daemon option:selected').val();
Expand Down Expand Up @@ -643,6 +679,7 @@ function initDaemon() {
firstLoad = false;

console.log('initDaemon', daemon);
$gridEvents.trigger('reloadGrid');

if (daemon && config.daemons[daemon]) {
const {type} = config.daemons[daemon];
Expand Down Expand Up @@ -3928,6 +3965,57 @@ function refreshGridInterfaces() {
$gridInterfaces.trigger('reloadGrid');
}

const eventsData = [];

function initGridEvents() {
$gridEvents.jqGrid({
colNames: ['Timestamp', 'Method', 'Name', 'Device', 'Channel', 'Param', 'Value'],
colModel: [
{name: 'timestamp', index: 'timestamp', width: 140, fixed: true, title: true, search: true},
{name: 'method', index: 'method', width: 80, fixed: true, title: true, align: 'center', search: true},
{name: 'name', index: 'name', width: 320, fixed: true, title: false, hidden: config.hideNameCols, search: true},
{name: 'device', index: 'device', width: 110, fixed: true, title: true, search: true},
{name: 'channel', index: 'channel', width: 60, fixed: true, title: false, align: 'right', search: true},
{name: 'param', index: 'param', width: 200, fixed: true, title: false, search: true},
{name: 'value', index: 'value', width: 80, fixed: false, title: false, align: 'right', search: true}
],
data: eventsData,
datatype: 'local',
rowNum: 100,
autowidth: true,
width: '1000',
height: 'auto',
rowList: [25, 50, 100, 500],
pager: $('#pager-events'),
sortname: 'timestamp',
viewrecords: true,
sortorder: 'desc',
caption: _('Events'),

}).navGrid('#pager-events', {
search: false,
edit: false,
add: false,
del: false,
refresh: false
})/*.jqGrid('navButtonAdd', '#pager-events', {
caption: '',
buttonicon: 'ui-icon-refresh',
onClickButton: () => {
$gridEvents.trigger('reloadGrid');
},
position: 'first',
id: 'refresh-events',
title: _('Refresh'),
cursor: 'pointer'
})*/.jqGrid('filterToolbar', {
defaultSearch: 'cn',
autosearch: true,
searchOnEnter: false,
enableClear: true
})
}

// Service Messages
function initGridMessages() {
$gridMessages.jqGrid({
Expand Down Expand Up @@ -4604,10 +4692,10 @@ function resizeGrids() {
y = 600;
}

$('#grid-devices, #grid-links, #grid-messages').setGridHeight(y - 144).setGridWidth(x - 18);
$('#grid-devices, #grid-links, #grid-messages, #grid-events').setGridHeight(y - 144).setGridWidth(x - 18);

$('#grid-events').css('height', (y - 80) + 'px').css('width', (x - 18) + 'px');
$('#grid-events-inner').css('height', (y - 100) + 'px');
// $('#grid-events').css('height', (y - 80) + 'px').css('width', (x - 18) + 'px');
// $('#grid-events-inner').css('height', (y - 100) + 'px');
$('#grid-interfaces')/* .setGridHeight(y - 99) */.setGridWidth(x - 18);
$('#grid-rssi').setGridHeight(y - (173 + $('#gbox_grid-interfaces').height())).setGridWidth(x - 18);

Expand Down Expand Up @@ -4784,3 +4872,14 @@ function convertHmIPKeyBase32ToBase16(valueString) {

return keyString.toUpperCase();
}


function ts() {
const timestamp = new Date();
return timestamp.getFullYear() + '-' +
('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
('0' + (timestamp.getDate()).toString(10)).slice(-2) + ' ' +
('0' + (timestamp.getHours()).toString(10)).slice(-2) + ':' +
('0' + (timestamp.getMinutes()).toString(10)).slice(-2) + ':' +
('0' + (timestamp.getSeconds()).toString(10)).slice(-2);
}

0 comments on commit 85894df

Please sign in to comment.