diff options
Diffstat (limited to 'MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js')
| -rw-r--r-- | MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js | 423 |
1 files changed, 423 insertions, 0 deletions
diff --git a/MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js b/MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js new file mode 100644 index 000000000..93163de79 --- /dev/null +++ b/MediaBrowser.WebDashboard/Html/scripts/DashboardPage.js @@ -0,0 +1,423 @@ +var DashboardPage = { + + onPageShow: function () { + + Dashboard.showLoadingMsg(); + DashboardPage.pollForInfo(); + DashboardPage.startInterval(); + $(document).on("websocketmessage", DashboardPage.onWebSocketMessage).on("websocketopen", DashboardPage.onWebSocketConnectionChange).on("websocketerror", DashboardPage.onWebSocketConnectionChange).on("websocketclose", DashboardPage.onWebSocketConnectionChange); + + DashboardPage.lastAppUpdateCheck = null; + DashboardPage.lastPluginUpdateCheck = null; + }, + + onPageHide: function () { + + $(document).off("websocketmessage", DashboardPage.onWebSocketMessage).off("websocketopen", DashboardPage.onWebSocketConnectionChange).off("websocketerror", DashboardPage.onWebSocketConnectionChange).off("websocketclose", DashboardPage.onWebSocketConnectionChange); + DashboardPage.stopInterval(); + }, + + startInterval: function () { + + if (Dashboard.isWebSocketOpen()) { + Dashboard.sendWebSocketMessage("DashboardInfoStart", "0,1500"); + } + }, + + stopInterval: function () { + + if (Dashboard.isWebSocketOpen()) { + Dashboard.sendWebSocketMessage("DashboardInfoStop"); + } + }, + + onWebSocketMessage: function (e, msg) { + + if (msg.MessageType == "DashboardInfo") { + DashboardPage.renderInfo(msg.Data); + } + }, + + onWebSocketConnectionChange: function () { + + DashboardPage.stopInterval(); + DashboardPage.startInterval(); + }, + + pollForInfo: function () { + $.getJSON("dashboardInfo").done(DashboardPage.renderInfo); + }, + + renderInfo: function (dashboardInfo) { + + DashboardPage.lastDashboardInfo = dashboardInfo; + + DashboardPage.renderRunningTasks(dashboardInfo); + DashboardPage.renderSystemInfo(dashboardInfo); + DashboardPage.renderActiveConnections(dashboardInfo); + + Dashboard.hideLoadingMsg(); + }, + + renderActiveConnections: function (dashboardInfo) { + + var page = $.mobile.activePage; + + var html = ''; + + if (!dashboardInfo.ActiveConnections.length) { + html += '<p>There are no users currently connected.</p>'; + $('#divConnections', page).html(html).trigger('create'); + return; + } + + html += '<table class="tblConnections" style="border-collapse:collapse;">'; + + for (var i = 0, length = dashboardInfo.ActiveConnections.length; i < length; i++) { + + var connection = dashboardInfo.ActiveConnections[i]; + + var user = dashboardInfo.Users.filter(function (u) { + return u.Id == connection.UserId; + })[0]; + + html += '<tr>'; + + html += '<td style="text-align:center;">'; + html += DashboardPage.getClientType(connection); + html += '</td>'; + + html += '<td>'; + html += user.Name; + html += '</td>'; + + html += '<td>'; + html += connection.DeviceName; + html += '</td>'; + + html += '<td>'; + html += DashboardPage.getNowPlayingImage(connection.NowPlayingItem); + html += '</td>'; + + html += '<td>'; + html += DashboardPage.getNowPlayingText(connection, connection.NowPlayingItem); + html += '</td>'; + + html += '</tr>'; + + } + + html += '</table>'; + + $('#divConnections', page).html(html); + }, + + getClientType: function (connection) { + + if (connection.ClientType == "Dashboard") { + + return "<img src='css/images/clients/html5.png' alt='Dashboard' title='Dashboard' />"; + } + if (connection.ClientType == "Pc") { + + return "<img src='css/images/clients/mb.png' alt='Media Browser' title='Media Browser' />"; + } + if (connection.ClientType == "Android") { + + return "<img src='css/images/clients/android.png' alt='Android' title='Android' />"; + } + if (connection.ClientType == "Ios") { + + return "<img src='css/images/clients/ios.png' alt='iOS' title='iOS' />"; + } + if (connection.ClientType == "WindowsRT") { + + return "<img src='css/images/clients/windowsrt.png' alt='Windows RT' title='Windows RT' />"; + } + if (connection.ClientType == "WindowsPhone") { + + return "<img src='css/images/clients/windowsphone.png' alt='Windows Phone' title='Windows Phone' />"; + } + + return connection.ClientType; + }, + + getNowPlayingImage: function (item) { + + if (item) { + + if (item.BackdropImageTag) { + var url = ApiClient.getImageUrl(item.Id, { + type: "Backdrop", + height: 100, + tag: item.BackdropImageTag + }); + + return "<img class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />"; + } + else if (item.PrimaryImageTag) { + + var url = ApiClient.getImageUrl(item.Id, { + type: "Primary", + height: 100, + tag: item.PrimaryImageTag + }); + + return "<img class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />"; + } + } + + return ""; + }, + + getNowPlayingText: function (connection, item) { + + var html = ""; + + if (item) { + + html += "<div>" + item.Name + "</div>"; + + html += "<div>"; + + if (item.RunTimeTicks) { + html += DashboardPage.getDisplayText(connection.NowPlayingPositionTicks || 0) + " / "; + + html += DashboardPage.getDisplayText(item.RunTimeTicks); + } + + html += "</div>"; + } + + return html; + }, + + getDisplayText: function (ticks) { + + var ticksPerHour = 36000000000; + + var parts = []; + + var hours = ticks / ticksPerHour; + hours = parseInt(hours); + + if (hours) { + parts.push(hours); + } + + ticks -= (hours * ticksPerHour); + + var ticksPerMinute = 600000000; + + var minutes = ticks / ticksPerMinute; + minutes = parseInt(minutes); + + ticks -= (minutes * ticksPerMinute); + + if (minutes < 10) { + minutes = '0' + minutes; + } + parts.push(minutes); + + var ticksPerSecond = 10000000; + + var seconds = ticks / ticksPerSecond; + seconds = parseInt(seconds); + + if (seconds < 10) { + seconds = '0' + seconds; + } + parts.push(seconds); + + return parts.join(':'); + }, + + renderRunningTasks: function (dashboardInfo) { + + var page = $.mobile.activePage; + + var html = ''; + + if (!dashboardInfo.RunningTasks.length) { + html += '<p>No tasks are currently running.</p>'; + } + + for (var i = 0, length = dashboardInfo.RunningTasks.length; i < length; i++) { + + + var task = dashboardInfo.RunningTasks[i]; + + html += '<p>'; + + html += task.Name; + + if (task.State == "Running") { + var progress = task.CurrentProgress || { PercentComplete: 0 }; + html += '<span style="color:#267F00;margin-right:5px;font-weight:bold;"> - ' + Math.round(progress.PercentComplete) + '%</span>'; + + html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-theme="b" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">Stop</button>'; + } + else if (task.State == "Cancelling") { + html += '<span style="color:#cc0000;"> - Stopping</span>'; + } + + html += '</p>'; + } + + + $('#divRunningTasks', page).html(html).trigger('create'); + }, + + renderSystemInfo: function (dashboardInfo) { + + Dashboard.updateSystemInfo(dashboardInfo.SystemInfo); + + var page = $.mobile.activePage; + + $('#appVersionNumber', page).html(dashboardInfo.SystemInfo.Version); + + if (dashboardInfo.RunningTasks.filter(function (task) { + + return task.Id == dashboardInfo.ApplicationUpdateTaskId; + + }).length) { + + $('#btnUpdateApplication', page).button('disable'); + } else { + $('#btnUpdateApplication', page).button('enable'); + } + + DashboardPage.renderApplicationUpdateInfo(dashboardInfo); + DashboardPage.renderPluginUpdateInfo(dashboardInfo); + }, + + renderApplicationUpdateInfo: function (dashboardInfo) { + + var page = $.mobile.activePage; + + if (dashboardInfo.SystemInfo.IsNetworkDeployed && !dashboardInfo.SystemInfo.HasPendingRestart) { + + // Only check once every 10 mins + if (DashboardPage.lastAppUpdateCheck && (new Date().getTime() - DashboardPage.lastAppUpdateCheck) < 600000) { + return; + } + + DashboardPage.lastAppUpdateCheck = new Date().getTime(); + + ApiClient.getAvailableApplicationUpdate().done(function (packageInfo) { + + var version = packageInfo.versions[0]; + + if (!version) { + $('#pUpToDate', page).show(); + $('#pUpdateNow', page).hide(); + } else { + $('#pUpToDate', page).hide(); + + $('#pUpdateNow', page).show(); + + $('#newVersionNumber', page).html("Version " + version.versionStr + " is now available for download."); + } + + }).fail(function () { + + Dashboard.showFooterNotification({ html: '<img src="css/images/notifications/error.png" class="notificationIcon" />There was an error connecting to the remote Media Browser repository.', id: "MB3ConnectionError" }); + + }); + + } else { + + if (dashboardInfo.SystemInfo.HasPendingRestart) { + $('#pUpToDate', page).hide(); + } else { + $('#pUpToDate', page).show(); + } + + $('#pUpdateNow', page).hide(); + } + }, + + renderPluginUpdateInfo: function (dashboardInfo) { + + // Only check once every 10 mins + if (DashboardPage.lastPluginUpdateCheck && (new Date().getTime() - DashboardPage.lastPluginUpdateCheck) < 600000) { + return; + } + + DashboardPage.lastPluginUpdateCheck = new Date().getTime(); + + var page = $.mobile.activePage; + + ApiClient.getAvailablePluginUpdates().done(function (updates) { + + if (updates.length) { + + $('#collapsiblePluginUpdates', page).show(); + + } else { + $('#collapsiblePluginUpdates', page).hide(); + + return; + } + var html = ''; + + for (var i = 0, length = updates.length; i < length; i++) { + + var update = updates[i]; + + html += '<p><strong>A new version of ' + update.name + ' is available!</strong></p>'; + + html += '<button type="button" data-icon="download" data-theme="b" onclick="DashboardPage.installPluginUpdate(this);" data-name="' + update.name + '" data-version="' + update.versionStr + '" data-classification="' + update.classification + '">Update Now</button>'; + } + + $('#pPluginUpdates', page).html(html).trigger('create'); + + }).fail(function () { + + Dashboard.showFooterNotification({ html: '<img src="css/images/notifications/error.png" class="notificationIcon" />There was an error connecting to the remote Media Browser repository.', id: "MB3ConnectionError" }); + + }); + }, + + installPluginUpdate: function (button) { + + $(button).button('disable'); + + var name = button.getAttribute('data-name'); + var version = button.getAttribute('data-version'); + var classification = button.getAttribute('data-classification'); + + Dashboard.showLoadingMsg(); + + ApiClient.installPlugin(name, classification, version).done(function () { + + Dashboard.hideLoadingMsg(); + }); + }, + + updateApplication: function () { + + var page = $.mobile.activePage; + $('#btnUpdateApplication', page).button('disable'); + + Dashboard.showLoadingMsg(); + + ApiClient.startScheduledTask(DashboardPage.lastDashboardInfo.ApplicationUpdateTaskId).done(function () { + + DashboardPage.pollForInfo(); + + Dashboard.hideLoadingMsg(); + }); + }, + + stopTask: function (id) { + + ApiClient.stopScheduledTask(id).done(function () { + + DashboardPage.pollForInfo(); + }); + + } +}; + +$(document).on('pageshow', "#dashboardPage", DashboardPage.onPageShow).on('pagehide', "#dashboardPage", DashboardPage.onPageHide);
\ No newline at end of file |