Implemented FELIX-2202
Update Events plugin to JQuery UI
git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@923242 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole-plugins/event/src/main/resources/res/ui/events.js b/webconsole-plugins/event/src/main/resources/res/ui/events.js
index acb3951..7a6d1a0 100644
--- a/webconsole-plugins/event/src/main/resources/res/ui/events.js
+++ b/webconsole-plugins/event/src/main/resources/res/ui/events.js
@@ -14,92 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-var view = 0;
-
-function renderStatusLine() {
- $("#plugin_content").append( "<div class='fullwidth'><div class='statusline'/></div>" );
-}
-
-function renderView( /* Array of String */ columns, /* String */ buttons ) {
- renderStatusLine();
- renderButtons(buttons);
- var txt = "<div class='table'><table id='plugin_table' class='tablelayout'><thead><tr>";
- for ( var name in columns ) {
- txt = txt + "<th class='col_" + columns[name] + "'>" + columns[name] + "</th>";
- }
- txt = txt + "</tr></thead><tbody></tbody></table></div>";
- $("#plugin_content").append( txt );
- renderButtons(buttons);
- renderStatusLine();
-}
-
-function renderButtons( buttons ) {
- $("#plugin_content").append( "<form method='post' enctype='multipart/form-data'><div class='fullwidth'><div class='buttons'>" +
- buttons + "</div></div></form>" );
-}
-
-function renderData( eventData ) {
- $(".statusline").empty().append(eventData.status);
- $("#plugin_table > tbody > tr").remove();
- for ( var idx in eventData.data ) {
- entry( eventData.data[idx] );
- }
- $("#plugin_table").trigger("update");
- if ( view == 1 ) {
- $("#timeline").remove();
- $("div.table").append( "<div id='timeline' width='100%'></div>" );
- for ( var idx in eventData.data ) {
- entryTimeline( eventData.data[idx] );
- }
- }
-}
-
-function entry( /* Object */ dataEntry ) {
- var trElement = tr( null, { id: "entry" + dataEntry.id } );
- entryInternal( trElement, dataEntry );
- $("#plugin_table > tbody").append(trElement);
-}
-
-function entryTimeline( /* Object */ dataEntry ) {
- var txt = "<div class='event" + dataEntry.category + "' style='overflow:visible;white-space:nowrap;width:" + dataEntry.width + "%;'>";
- txt = txt + "<b>" + dataEntry.offset + "</b> <b>" + dataEntry.topic + "</b>";
- if ( dataEntry.info ) {
- txt = txt + " : " + dataEntry.info;
- }
- txt = txt + "</div>";
- $("#timeline").prepend(txt);
-}
-
-function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
- var id = dataEntry.id;
- var topic = dataEntry.topic;
- var properties = dataEntry.properties;
-
- parent.appendChild( td( null, null, [ text( printDate(dataEntry.received) ) ] ) );
- parent.appendChild( td( null, null, [ text( topic ) ] ) );
-
- var propE;
- if ( dataEntry.info ) {
- propE = text(dataEntry.info);
- } else {
- var tableE = createElement("table");
- var bodyE = createElement("tbody");
- tableE.appendChild(bodyE);
-
- for( var p in dataEntry.properties ) {
- var c1 = td(null, null, [text(p)]);
- $(c1).css("border", "0px none");
- $(c1).css("padding", "0 4px 0 0");
- var c2 = td(null, null, [text(dataEntry.properties[p])]);
- $(c2).css("border", "0px none");
- $(c2).css("padding", "0 0 0 4px");
- bodyE.appendChild(tr(null, null, [ c1, c2 ]));
- }
- propE = tableE;
- }
-
- parent.appendChild( td( null, null, [propE] ) );
-}
+var eventsTable = false;
/* displays a date in the user's local timezone */
function printDate(time) {
@@ -107,43 +22,77 @@
return date.toLocaleString();
}
-function loadData() {
- $.get(pluginRoot + "/data.json", null, function(data) {
- renderData(data);
- }, "json");
+function renderData( eventData ) {
+ $('.statline').html(eventData.status); // FIXME:
+
+ // append table view
+ eventsBody.empty();
+ for ( var i in eventData.data ) entry( eventData.data[i] );
+ eventsTable.trigger('update').trigger('applyWidgets');
+
+ // append timeline view
+ timeline.empty();
+ for ( var i in eventData.data ) entryTimeline( eventData.data[i] );
}
-function switchView() {
- if ( view == 0 ) {
- view = 1;
- $("#plugin_table").hide();
- $(".switchButton").empty();
- $(".switchButton").append("List");
- loadData();
- } else {
- view = 0;
- $("#timeline").remove();
- $("#plugin_table").show();
- $(".switchButton").empty();
- $(".switchButton").append("Timeline");
- }
+
+function entryTimeline( /* Object */ dataEntry ) {
+ var txt = '<div class="event event' + dataEntry.category + '" style="width:' + dataEntry.width + '%">' +
+ '<b>' + dataEntry.offset + '</b> <b>' + dataEntry.topic + '</b>';
+ if ( dataEntry.info ) txt += ' : ' + dataEntry.info;
+ txt += '</div>';
+ timeline.prepend(txt);
}
-function renderEvents() {
- $(document).ready(function(){
- renderView( ["Received", "Topic", "Properties"],
- "<button class='switchButton' type='button' name='switch'>Timeline</button>" +
- "<button class='clearButton' type='button' name='clear'>Clear List</button>" +
- "<button class='reloadButton' type='button' name='reload'>Reload</button>");
- loadData();
-
- $("#plugin_table").tablesorter();
- $(".reloadButton").click(loadData);
- $(".switchButton").click(switchView);
- $(".clearButton").click(function () {
- $("#plugin_table > tbody > tr").remove();
- $.post(pluginRoot, { "action":"clear" }, function(data) {
- renderData(data);
- }, "json");
- });
+
+function entry( /* Object */ dataEntry ) {
+ var properties = dataEntry.properties;
+
+ var propE;
+ if ( dataEntry.info ) {
+ propE = text(dataEntry.info);
+ } else {
+ var propE = createElement('table', 'nicetable');
+ var bodyE = createElement('tbody');
+ propE.appendChild(bodyE);
+
+ for( var p in dataEntry.properties ) {
+ bodyE.appendChild(tr(null, null, [
+ td(null, 'propName', [text(p)]),
+ td(null, 'propVal', [text(dataEntry.properties[p])])
+ ]));
+ }
+ }
+
+ $(tr( null, { id: 'entry' + dataEntry.id }, [
+ td( null, null, [ text( printDate(dataEntry.received) ) ] ),
+ td( null, null, [ text( dataEntry.topic ) ] ),
+ propE
+ ])).appendTo(eventsBody);
+}
+
+var timeline = false;
+$(document).ready(function(){
+ eventsTable = $('#eventsTable');
+ eventsBody = eventsTable.find('tbody');
+ timeline = $('#timeline');
+
+ $('#clear').click(function () {
+ $.post(pluginRoot, { 'action':'clear' }, renderData, 'json');
});
-}
+ $('#switch').click(function() {
+ var timelineHidden = timeline.hasClass('ui-helper-hidden');
+ if (timelineHidden) {
+ $(this).text(i18n.displayList);
+ timeline.removeClass('ui-helper-hidden');
+ eventsTable.addClass('ui-helper-hidden');
+ } else {
+ $(this).text(i18n.displayTimeline);
+ timeline.addClass('ui-helper-hidden');
+ eventsTable.removeClass('ui-helper-hidden');
+ }
+ });
+ $('#reload').click(function() {
+ $.get(pluginRoot + '/data.json', null, renderData, 'json');
+ //renderData(eventData);
+ }).click();
+});