Bugfixes and more work on station podcast frontend

This commit is contained in:
Duncan Sommerville 2015-10-22 18:03:38 -04:00
parent 58a7b9324b
commit e8980e7a79
9 changed files with 82 additions and 56 deletions

View file

@ -7,11 +7,11 @@ var AIRTIME = (function (AIRTIME) {
mod = AIRTIME.podcast;
var endpoint = 'rest/podcast/';
var endpoint = 'rest/podcast/', PodcastTable;
//AngularJS app
var podcastApp = angular.module('podcast', [])
.controller('RestController', function($scope, $http, podcast, tab, episodeTable) {
.controller('RestController', function($scope, $http, podcast, tab) {
// We need to pass in the tab object and the episodes table object so we can reference them
//We take a podcast object in as a parameter rather fetching the podcast by ID here because
@ -19,20 +19,31 @@ var AIRTIME = (function (AIRTIME) {
//a roundtrip by not fetching it again here.
$scope.podcast = podcast;
tab.setName($scope.podcast.title);
$scope.csrf = jQuery("#csrf").val();
tab.contents.find("table").attr("id", "podcast_episodes_" + podcast.id);
var episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable(podcast.episodes, tab);
$scope.savePodcast = function() {
var episodes = episodeTable.getSelectedRows(),
csrf = jQuery("#csrf").val();
// TODO: Should we implement a batch endpoint for this instead?
jQuery.each(episodes, function() {
$http.post(endpoint + $scope.podcast.id + '/episodes', { csrf_token: csrf, episode: this });
});
$http.put(endpoint + $scope.podcast.id, { csrf_token: csrf, podcast: $scope.podcast })
function updatePodcast() {
$http.put(endpoint + $scope.podcast.id, { csrf_token: $scope.csrf, podcast: $scope.podcast })
.success(function() {
episodeTable.reload($scope.podcast.id);
AIRTIME.library.podcastDataTable.fnDraw();
tab.setName($scope.podcast.title);
});
}
$scope.savePodcast = function() {
var episodes = episodeTable.getSelectedRows();
// TODO: Should we implement a batch endpoint for this instead?
jQuery.each(episodes, function() {
$http.post(endpoint + $scope.podcast.id + '/episodes', { csrf_token: $scope.csrf, episode: this });
});
updatePodcast();
};
$scope.saveStationPodcast = function() {
// TODO: We still need a way to delete episodes from the station podcast
updatePodcast();
};
$scope.discard = function() {
@ -63,10 +74,9 @@ var AIRTIME = (function (AIRTIME) {
}
}
function _bootstrapAngularApp(podcast, tab, table) {
function _bootstrapAngularApp(podcast, tab) {
podcastApp.value('podcast', podcast);
podcastApp.value('tab', tab);
podcastApp.value('episodeTable', table);
var wrapper = tab.contents.find(".editor_pane_wrapper");
wrapper.attr("ng-controller", "RestController");
angular.bootstrap(wrapper.get(0), ["podcast"]);
@ -75,9 +85,34 @@ var AIRTIME = (function (AIRTIME) {
function _initAppFromResponse(data) {
var podcast = JSON.parse(data.podcast),
uid = AIRTIME.library.MediaTypeStringEnum.PODCAST+"_"+podcast.id,
tab = AIRTIME.tabs.openTab(data.html, uid, null),
table = mod.initPodcastEpisodeDatatable(podcast.episodes);
_bootstrapAngularApp(podcast, tab, table);
tab = AIRTIME.tabs.openTab(data.html, uid, null);
_bootstrapAngularApp(podcast, tab);
}
function _initPodcastTable() {
PodcastTable = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions) {
// Just call the superconstructor. For clarity/extensibility
return AIRTIME.widgets.Table.call(this, wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions);
}; // Subclass AIRTIME.widgets.Table
PodcastTable.prototype = Object.create(AIRTIME.widgets.Table.prototype);
PodcastTable.prototype.constructor = PodcastTable;
PodcastTable.prototype._SELECTORS = Object.freeze({
SELECTION_CHECKBOX: ".airtime_table_checkbox:has(input)",
SELECTION_TABLE_ROW: "tr:has(td.airtime_table_checkbox > input)"
});
PodcastTable.prototype._datatablesCheckboxDataDelegate = function(rowData, callType, dataToSave) {
if (rowData.ingested) return null; // Don't create checkboxes for ingested items
return AIRTIME.widgets.Table.prototype._datatablesCheckboxDataDelegate.call(this, rowData, callType, dataToSave);
};
// Since we're using a static source, define a separate function to fetch and 'reload' the table data
// We use this when we save the Podcast because we need to flag rows the user is ingesting
PodcastTable.prototype.reload = function(id) {
var dt = this._datatable;
$.get(endpoint + id, function(json) {
dt.fnClearTable();
dt.fnAddData(JSON.parse(json).episodes);
});
};
}
mod.createUrlDialog = function() {
@ -116,7 +151,7 @@ var AIRTIME = (function (AIRTIME) {
}
};
mod.initPodcastEpisodeDatatable = function(episodes) {
mod.initPodcastEpisodeDatatable = function(episodes, tab) {
var aoColumns = [
/* GUID */ { "sTitle" : "" , "mDataProp" : "guid" , "sClass" : "podcast_episodes_guid" , "bVisible" : false },
/* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "title" , "sClass" : "podcast_episodes_title" , "sWidth" : "170px" },
@ -126,35 +161,18 @@ var AIRTIME = (function (AIRTIME) {
/* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" }
];
var PodcastTable = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions) {
// Just call the superconstructor. For clarity/extensibility
return AIRTIME.widgets.Table.call(this, wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions);
}; // Subclass AIRTIME.widgets.Table
PodcastTable.prototype = Object.create(AIRTIME.widgets.Table.prototype);
PodcastTable.prototype.constructor = PodcastTable;
PodcastTable.prototype._SELECTORS = Object.freeze({
SELECTION_CHECKBOX: ".airtime_table_checkbox:has(input)",
SELECTION_TABLE_ROW: "tr:has(td.airtime_table_checkbox > input)"
});
PodcastTable.prototype._datatablesCheckboxDataDelegate = function(rowData, callType, dataToSave) {
if (rowData.ingested) return null; // Don't create checkboxes for ingested items
return AIRTIME.widgets.Table.prototype._datatablesCheckboxDataDelegate.call(this, rowData, callType, dataToSave);
};
// Since we're using a static source, define a separate function to fetch and 'reload' the table data
// We use this when we save the Podcast because we need to flag rows the user is ingesting
PodcastTable.prototype.reload = function(id) {
var dt = this._datatable;
$.get(endpoint + id, function(json) {
dt.fnClearTable();
dt.fnAddData(JSON.parse(json).episodes);
});
};
if (typeof PodcastTable === 'undefined') {
_initPodcastTable();
}
var podcastToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE].eventHandlers.click = function(e) {
// TODO: add {this} reference to event handlers and implement deletion for station podcasts
};
// Set up the div with id "podcast_table" as a datatable.
var podcastEpisodesTableWidget = new PodcastTable(
AIRTIME.tabs.getActiveTab().contents.find('#podcast_episodes'), // DOM node to create the table inside.
tab.contents.find('.podcast_episodes'), // DOM node to create the table inside.
true, // Enable item selection
podcastToolbarButtons, // Toolbar buttons
{ // Datatables overrides.