fix jsontable and use it for Calendar feeds
This commit is contained in:
Doug Bell
parent
6cf68e59a2
commit
bbc756c852
4 changed files with 281 additions and 197 deletions
|
|
@ -2605,7 +2605,15 @@ sub update {
|
|||
|
||||
# set the property
|
||||
if ($propertyDefinition->{serialize}) {
|
||||
$setPairs{$property} = JSON->new->canonical->encode($value);
|
||||
# Only serialize references
|
||||
if ( ref $value ) {
|
||||
$setPairs{$property} = JSON->new->canonical->encode($value);
|
||||
}
|
||||
# Passing already serialized JSON string
|
||||
elsif ( $value ) {
|
||||
$setPairs{$property} = $value;
|
||||
$value = JSON->new->decode( $value ); # for setting in _properties, below
|
||||
}
|
||||
}
|
||||
else {
|
||||
$setPairs{$property} = $value;
|
||||
|
|
|
|||
|
|
@ -257,12 +257,32 @@ sub definition {
|
|||
},
|
||||
|
||||
icalFeeds => {
|
||||
fieldType => "textarea",
|
||||
fieldType => "JsonTable",
|
||||
defaultValue => [],
|
||||
serialize => 1,
|
||||
noFormPost => 1,
|
||||
autoGenerate => 0,
|
||||
tab => "display",
|
||||
tab => "feeds",
|
||||
fields => [
|
||||
{
|
||||
name => 'feedId',
|
||||
type => 'id',
|
||||
},
|
||||
{
|
||||
name => 'url',
|
||||
type => 'text',
|
||||
size => '40',
|
||||
label => $i18n->get('Feed URL'),
|
||||
},
|
||||
{
|
||||
name => 'status',
|
||||
type => 'readonly',
|
||||
label => $i18n->get('434','WebGUI'),
|
||||
},
|
||||
{
|
||||
name => 'lastUpdated',
|
||||
type => 'readonly',
|
||||
label => $i18n->get('454', 'WebGUI'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
icalInterval => {
|
||||
|
|
@ -507,168 +527,16 @@ sub deleteFeed {
|
|||
|
||||
#----------------------------------------------------------------------------
|
||||
|
||||
=head2 getEditForm
|
||||
=head2 getEditTabs ( )
|
||||
|
||||
Adds an additional tab for feeds.
|
||||
|
||||
TODO: Abstract the Javascript enough to export into extras/yui-webgui for use
|
||||
in other areas.
|
||||
Add the feeds tab to the edit form
|
||||
|
||||
=cut
|
||||
|
||||
sub getEditForm {
|
||||
my $self = shift;
|
||||
my $session = $self->session;
|
||||
my $form = $self->SUPER::getEditForm;
|
||||
my $i18n = WebGUI::International->new($session,"Asset_Calendar");
|
||||
|
||||
my $tab = $form->addTab("feeds",$i18n->get("feeds"), 6);
|
||||
$tab->raw("<tr><td>");
|
||||
|
||||
$tab->raw(<<'ENDJS');
|
||||
<script type="text/javascript">
|
||||
var FeedsManager = new Object();
|
||||
|
||||
FeedsManager.addFeed = function (table,rowId,params) {
|
||||
// TODO: Verify that feed URL is valid
|
||||
|
||||
var table = document.getElementById(table);
|
||||
|
||||
// If id is "new"
|
||||
// Add a number on the end.
|
||||
if (rowId == "new")
|
||||
rowId = "new" + Math.round(Math.random() * 10000000000000000);
|
||||
|
||||
// Create 5 cells
|
||||
var cells = new Array();
|
||||
for (var i = 0; i < 5; i++)
|
||||
cells[i] = document.createElement("td");
|
||||
|
||||
|
||||
/*** [0] - Delete button */
|
||||
var button = document.createElement("img");
|
||||
button.setAttribute("src","/extras/wobject/Calendar/images/delete.gif");
|
||||
button.setAttribute("border","0");
|
||||
|
||||
var deleteLink = document.createElement("a");
|
||||
deleteLink.setAttribute("href","#");
|
||||
YAHOO.util.Event.addListener(deleteLink, "click", function (e, rowId) {
|
||||
FeedsManager.deleteFeed('feeds',rowId);
|
||||
YAHOO.util.Event.preventDefault(e);
|
||||
}, rowId);
|
||||
deleteLink.appendChild(button);
|
||||
|
||||
cells[0].appendChild(deleteLink);
|
||||
|
||||
|
||||
/*** [1] - Feed link for teh clicking and form element for teh saving */
|
||||
var feedLink = document.createElement("a");
|
||||
feedLink.setAttribute("href",params.url);
|
||||
feedLink.setAttribute("target","_new"); // TODO: Use JS to open window. target="" is deprecated
|
||||
feedLink.appendChild(document.createTextNode(params.url));
|
||||
|
||||
var formElement = document.createElement("input");
|
||||
formElement.setAttribute("type","hidden");
|
||||
formElement.setAttribute("name","feeds-"+rowId);
|
||||
formElement.setAttribute("value",params.url);
|
||||
|
||||
cells[1].appendChild(feedLink);
|
||||
cells[1].appendChild(formElement);
|
||||
|
||||
|
||||
/*** [2] - Result (new) */
|
||||
if (params.lastResult == undefined)
|
||||
params.lastResult = "new";
|
||||
var lastResult = document.createTextNode(params.lastResult);
|
||||
|
||||
cells[2].appendChild(lastResult);
|
||||
|
||||
|
||||
/*** [3] - Last updated */
|
||||
if (params.lastUpdated == undefined)
|
||||
params.lastUpdated = "never";
|
||||
var lastUpdated = document.createTextNode(params.lastUpdated);
|
||||
|
||||
cells[3].appendChild(lastUpdated);
|
||||
|
||||
|
||||
/*** [4] - Update now! */
|
||||
/* TODO */
|
||||
|
||||
|
||||
/* Add the row to the table */
|
||||
var row = document.createElement("tr");
|
||||
row.setAttribute("id",rowId);
|
||||
for (var i = 0; i < cells.length; i++)
|
||||
row.appendChild(cells[i]);
|
||||
|
||||
var tbody = table.getElementsByTagName('tbody')[0];
|
||||
if (tbody)
|
||||
tbody.appendChild(row);
|
||||
else
|
||||
table.appendChild(row);
|
||||
FeedsManager.updateFeed(table.getAttribute("id"),rowId);
|
||||
}
|
||||
|
||||
|
||||
FeedsManager.updateFeed = function (table,rowId) {
|
||||
/* TODO */
|
||||
|
||||
}
|
||||
|
||||
|
||||
FeedsManager.deleteFeed = function (table,rowId) {
|
||||
row = document.getElementById(rowId);
|
||||
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
|
||||
|
||||
FeedsManager.setFeed = function (table,rowId,params) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
ENDJS
|
||||
|
||||
|
||||
my $addFeed = $i18n->get('Add a feed');
|
||||
my $add = $i18n->get('Add');
|
||||
my $feedUrl = $i18n->get('Feed URL');
|
||||
my $status = $i18n->get('434', 'WebGUI');
|
||||
my $lastUpdated = $i18n->get('454', 'WebGUI');
|
||||
$tab->raw(<<"ENDHTML");
|
||||
<label for="addFeed">$addFeed</label>
|
||||
<input type="text" size="60" id="addFeed" name="addFeed" value="" />
|
||||
<input type="button" value="$add" onclick="FeedsManager.addFeed('feeds','new',{ 'url' : this.form.addFeed.value }); this.form.addFeed.value=''" />
|
||||
|
||||
<table id="feeds" style="width: 100%;">
|
||||
<thead>
|
||||
<th style="width: 30px;"> </th>
|
||||
<th style="width: 50%;">$feedUrl</th>
|
||||
<th>$status</th>
|
||||
<th>$lastUpdated</th>
|
||||
<th> </th>
|
||||
</thead>
|
||||
</table>
|
||||
ENDHTML
|
||||
|
||||
|
||||
|
||||
# Add the existing feeds
|
||||
my $feeds = $self->getFeeds();
|
||||
$tab->raw('<script type="text/javascript">'."\n");
|
||||
for my $feed (@{ $feeds }) {
|
||||
my $feedId = $feed->{feedId};
|
||||
$tab->raw("FeedsManager.addFeed('feeds','".$feedId."',".JSON->new->encode( $feed ).");\n");
|
||||
}
|
||||
$tab->raw('</script>');
|
||||
|
||||
|
||||
$tab->raw("</td></tr>");
|
||||
return $form;
|
||||
sub getEditTabs {
|
||||
my ( $self ) = @_;
|
||||
my $i18n = WebGUI::International->new($self->session,"Asset_Calendar");
|
||||
return $self->SUPER::getEditTabs, ["feeds",$i18n->get("feeds"), 6];
|
||||
}
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
|
|
@ -1000,37 +868,6 @@ sub processPropertiesFromFormPost {
|
|||
$self->createSubscriptionGroup();
|
||||
}
|
||||
|
||||
$self->session->errorHandler->info( "DEFAULT VIEW:" . $self->get('defaultView') );
|
||||
|
||||
### Get feeds from the form
|
||||
# Workaround WebGUI::Session::Form->param bug that returns duplicate
|
||||
# names.
|
||||
my %feeds;
|
||||
for my $feedId ( grep /^feeds-/, ($form->param()) ) {
|
||||
$feedId =~ s/^feeds-//;
|
||||
$feeds{$feedId}++;
|
||||
}
|
||||
my @feedsFromForm = keys %feeds;
|
||||
|
||||
# Delete old feeds that are not in @feeds
|
||||
my @oldFeeds = map { $_->{feedId} } @{ $self->getFeeds };
|
||||
|
||||
for my $feedId (@oldFeeds) {
|
||||
if (!isIn($feedId, @feedsFromForm)) {
|
||||
$self->deleteFeed($feedId);
|
||||
}
|
||||
}
|
||||
|
||||
# Create new feeds
|
||||
for my $feedId (grep /^new(\d+)/, @feedsFromForm) {
|
||||
$self->addFeed({
|
||||
url => $form->param("feeds-".$feedId),
|
||||
feedType => "ical",
|
||||
lastUpdated => 'never',
|
||||
lastResult => '',
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,6 +86,23 @@ sub getName {
|
|||
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
=head2 getOriginalValue ( )
|
||||
|
||||
Get the original value, encoding to JSON if necessary
|
||||
|
||||
=cut
|
||||
|
||||
sub getOriginalValue {
|
||||
my ( $self ) = @_;
|
||||
my $value = $self->SUPER::getOriginalValue;
|
||||
if ( ref $value eq "ARRAY" ) {
|
||||
return JSON->new->encode( $value );
|
||||
}
|
||||
return $value;
|
||||
}
|
||||
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
=head2 getValue ( value )
|
||||
|
||||
Get the value of the field. Substitute id fields with GUIDs.
|
||||
|
|
@ -96,6 +113,7 @@ sub getValue {
|
|||
my ( $self, $value ) = @_;
|
||||
$value ||= $self->SUPER::getValue;
|
||||
|
||||
$self->session->log->info( "JsonTable Got $value from form" );
|
||||
$value = JSON->new->decode( $value );
|
||||
|
||||
for my $row ( @{$value} ) {
|
||||
|
|
@ -162,13 +180,14 @@ sub toHtml {
|
|||
$fieldHtml .= '<input type="hidden" class="jsontable_id" name="' . $fieldName . '" value="new" />';
|
||||
}
|
||||
else { # Readonly or unknown
|
||||
$fieldHtml = '';
|
||||
$fieldHtml = ' ';
|
||||
}
|
||||
|
||||
$output .= '<td>' . $fieldHtml . '</td>';
|
||||
}
|
||||
|
||||
$output .= '</tr></tbody></table>';
|
||||
$output .= '<td></td>' # Extra cell for buttons
|
||||
. '</tr></tbody></table>';
|
||||
|
||||
# Build the existing rows
|
||||
$output .= '<input type="hidden" name="' . $self->get('name') . '" value="' . $value . '" />';
|
||||
|
|
@ -185,7 +204,8 @@ sub toHtml {
|
|||
$output .= sprintf '<script src="%s" type="text/javascript"></script>',
|
||||
$url->extras('yui-webgui/build/form/jsontable.js');
|
||||
$output .= '<script type="text/javascript">'
|
||||
. q{new WebGUI.Form.JsonTable("} . $self->get('name') . q{","} . $self->get( 'id' ) . q{");}
|
||||
. q{new WebGUI.Form.JsonTable("} . $self->get('name') . q{","} . $self->get( 'id' ) . q{", }
|
||||
. JSON->new->encode( $self->get('fields') ) . q{ );}
|
||||
. '</script>';
|
||||
|
||||
return $output;
|
||||
|
|
|
|||
219
www/extras/yui-webgui/build/form/jsontable.js
vendored
Normal file
219
www/extras/yui-webgui/build/form/jsontable.js
vendored
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
|
||||
// Initialize namespace
|
||||
if (typeof WebGUI == "undefined") {
|
||||
var WebGUI = {};
|
||||
}
|
||||
if (typeof WebGUI.Form == "undefined") {
|
||||
WebGUI.Form = {};
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* WebGUI.Form.JsonTable( fieldName, tableId, columns )
|
||||
* Create a JsonTable object.
|
||||
*
|
||||
* fieldName holds the current JSON-encoded array of hashrefs of values.
|
||||
*
|
||||
* tableId is where to put the rows and add all the events.
|
||||
*
|
||||
* columns is an array of hashes of column data with the following keys:
|
||||
* type -- The type of column, one of "text", "select",
|
||||
* "id", "hidden", "readonly"
|
||||
* name -- The name of the column
|
||||
* label -- The label of the column
|
||||
* options -- select only. An array of name, label of options.
|
||||
*
|
||||
*/
|
||||
WebGUI.Form.JsonTable
|
||||
= function ( fieldName, tableId, columns ) {
|
||||
this.fieldName = fieldName;
|
||||
this.tableId = tableId;
|
||||
this.columns = columns;
|
||||
this.table = document.getElementById( this.tableId );
|
||||
this.tbody = this.table.getElementsByTagName( "tbody" )[0];
|
||||
|
||||
// Find the form
|
||||
this.form = this.table;
|
||||
while ( this.form.nodeName != "FORM" ) {
|
||||
this.form = this.form.parentNode;
|
||||
}
|
||||
|
||||
this.field = this.form.elements[ this.fieldName ];
|
||||
this.json = this.field.value;
|
||||
this.newRow = YAHOO.util.Dom.getElementsByClassName( "new_row", "tr", this.table )[0];
|
||||
|
||||
try {
|
||||
this.data = YAHOO.lang.JSON.parse( this.json );
|
||||
}
|
||||
catch (err) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
// Add submit listener to update JSON
|
||||
YAHOO.util.Event.addListener( this.form, "submit", this.update, this, true );
|
||||
|
||||
this.addButton = this.table.getElementsByTagName( "button" )[0];
|
||||
YAHOO.util.Event.addListener( this.addButton, "click",
|
||||
function(e) {
|
||||
this.addRow();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
},
|
||||
this, true
|
||||
);
|
||||
|
||||
this.init();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* addActions( row )
|
||||
* Add the row actions to the given row
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.addActions
|
||||
= function (row) {
|
||||
// Add row actions
|
||||
var buttonCell = row.lastChild;
|
||||
var deleteButton = document.createElement('input');
|
||||
deleteButton.type = "button";
|
||||
deleteButton.value = "Delete";
|
||||
YAHOO.util.Event.addListener( deleteButton, "click",
|
||||
function (e) {
|
||||
this.deleteRow( row );
|
||||
},
|
||||
this, true
|
||||
);
|
||||
buttonCell.appendChild( deleteButton );
|
||||
|
||||
var moveUpButton = document.createElement('input');
|
||||
moveUpButton.type = "button";
|
||||
moveUpButton.value = "Up";
|
||||
YAHOO.util.Event.addListener( moveUpButton, "click",
|
||||
function (e) {
|
||||
this.moveRowUp( row );
|
||||
},
|
||||
this, true
|
||||
);
|
||||
buttonCell.appendChild( moveUpButton );
|
||||
|
||||
var moveDownButton = document.createElement('input');
|
||||
moveDownButton.type = "button";
|
||||
moveDownButton.value = "Down";
|
||||
YAHOO.util.Event.addListener( moveDownButton, "click",
|
||||
function (e) {
|
||||
this.moveRowDown( row );
|
||||
},
|
||||
this, true
|
||||
);
|
||||
buttonCell.appendChild( moveDownButton );
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* addRow ( )
|
||||
* Add a new row to the bottom of the table
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.addRow
|
||||
= function () {
|
||||
var newRow = this.newRow.cloneNode(true);
|
||||
this.tbody.appendChild( newRow );
|
||||
newRow.className = "";
|
||||
newRow.style.display = "table-row";
|
||||
this.addActions( newRow );
|
||||
return newRow;
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* deleteRow( row )
|
||||
* Delete the row from the table
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.deleteRow
|
||||
= function ( row ) {
|
||||
row.parentNode.removeChild( row );
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* init ( )
|
||||
* Initialize the JsonTable by adding rows for every datum
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.init
|
||||
= function () {
|
||||
for ( var row in this.data ) {
|
||||
// Copy new_row
|
||||
var newRow = this.addRow();
|
||||
|
||||
// Fill in values based on field type
|
||||
var cells = newRow.getElementsByTagName( "td" );
|
||||
for ( var i = 0; i < this.columns.length - 1; i++ ) { // Last cell is for buttons
|
||||
var cell = cells[i];
|
||||
var column = this.columns[i];
|
||||
var field = cell.childNodes[0];
|
||||
var value = this.data[row][column.name] || '';
|
||||
if ( column.type == "text" || column.type == "id"
|
||||
|| column.type == "hidden" ) {
|
||||
field.value = value;
|
||||
}
|
||||
else if ( column.type == "select" ) {
|
||||
for ( var x = 0; x < field.options.length; x++ ) {
|
||||
if ( field.options[x].value == value ) {
|
||||
field.options[x].selected = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else { // "readonly" or unknown
|
||||
cell.appendChild( document.createTextNode( value ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* moveRowDown( row )
|
||||
* Move the row down in the table
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.moveRowDown
|
||||
= function ( row ) {
|
||||
var after = row.nextSibling;
|
||||
if ( after ) {
|
||||
row.parentNode.insertBefore( after, row );
|
||||
}
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* moveRowUp( row )
|
||||
* Move the row up in the table
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.moveRowUp
|
||||
= function ( row ) {
|
||||
var before = row.previousSibling;
|
||||
if ( before && before.className != "new_row" ) {
|
||||
row.parentNode.insertBefore( row, before );
|
||||
}
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* update ( )
|
||||
* Update the value in our field with the correct JSON
|
||||
*/
|
||||
WebGUI.Form.JsonTable.prototype.update
|
||||
= function (e) {
|
||||
var rows = this.tbody.getElementsByTagName( 'tr' );
|
||||
var data = [];
|
||||
for ( var i = 1; i < rows.length; i++ ) {
|
||||
var cells = rows[i].getElementsByTagName( 'td' );
|
||||
var rowData = {};
|
||||
for ( var x = 0; x < this.columns.length; x++ ) {
|
||||
var cell = cells[x];
|
||||
var column = this.columns[x];
|
||||
var field = cell.childNodes[0];
|
||||
if ( field.nodeName == "INPUT" ) {
|
||||
rowData[ column.name ] = field.value;
|
||||
}
|
||||
else if ( field.nodeName == "SELECT" ) {
|
||||
var value = field.options[ field.selectedIndex ].value;
|
||||
rowData[ column.name ] = field.value;
|
||||
}
|
||||
}
|
||||
data.push( rowData );
|
||||
}
|
||||
this.field.value = YAHOO.lang.JSON.stringify( data );
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue