mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add server management to web client
This commit is contained in:
Luke Pulverenti
parent
6b8d9149bc
commit
f7ba95439b
11 changed files with 363 additions and 46 deletions
|
|
@ -111,7 +111,7 @@
|
|||
html += '</ul>';
|
||||
|
||||
if (addPathMappingInfo) {
|
||||
html += '<p style="margin:1.5em 0;">'+Globalize.translate('LabelPathSubstitutionHelp')+'</p>';
|
||||
html += '<div class="fieldDescription" style="margin:.5em 0 1.5em;">' + Globalize.translate('LabelPathSubstitutionHelp') + '</div>';
|
||||
}
|
||||
|
||||
html += '<p>';
|
||||
|
|
|
|||
|
|
@ -37,6 +37,58 @@
|
|||
});
|
||||
}
|
||||
|
||||
function getServerHtml(server) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
|
||||
|
||||
html += "<div data-id='" + server.Id + "' class='" + cssClass + "'>";
|
||||
|
||||
html += '<div class="cardBox visualCardBox visualCardBox-b">';
|
||||
html += '<div class="cardScalable">';
|
||||
|
||||
html += '<div class="cardPadder"></div>';
|
||||
|
||||
var href = "#";
|
||||
html += '<a class="cardContent lnkServer" data-serverid="' + server.Id + '" href="' + href + '">';
|
||||
|
||||
var imgUrl = 'css/images/server.png';
|
||||
|
||||
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
|
||||
|
||||
html += "</div>";
|
||||
|
||||
// cardContent
|
||||
html += "</a>";
|
||||
|
||||
// cardScalable
|
||||
html += "</div>";
|
||||
|
||||
html += '<div class="cardFooter">';
|
||||
|
||||
html += '<div class="cardText" style="text-align:right; float:right;">';
|
||||
|
||||
//html += '<button class="btnServerMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">';
|
||||
html += server.Name;
|
||||
html += "</div>";
|
||||
|
||||
// cardFooter
|
||||
html += "</div>";
|
||||
|
||||
// cardBox
|
||||
html += "</div>";
|
||||
|
||||
// card
|
||||
html += "</div>";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderServers(page, servers) {
|
||||
|
||||
if (servers.length) {
|
||||
|
|
@ -45,27 +97,9 @@
|
|||
$('.noServersMessage', page).show();
|
||||
}
|
||||
|
||||
var html = '<ul data-role="listview" data-inset="true">';
|
||||
var html = '';
|
||||
|
||||
html += servers.map(function (s) {
|
||||
|
||||
var serverHtml = '';
|
||||
|
||||
serverHtml += '<li>';
|
||||
|
||||
serverHtml += '<a class="lnkServer" data-serverid="' + s.Id + '" href="#">';
|
||||
serverHtml += '<h3>';
|
||||
serverHtml += s.Name;
|
||||
serverHtml += '</h3>';
|
||||
serverHtml += '</a>';
|
||||
|
||||
serverHtml += '</li>';
|
||||
|
||||
return serverHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += servers.map(getServerHtml).join('');
|
||||
|
||||
var elem = $('.serverList', page).html(html).trigger('create');
|
||||
|
||||
|
|
@ -78,6 +112,205 @@
|
|||
|
||||
connectToServer(page, server);
|
||||
});
|
||||
|
||||
$('.btnServerMenu', elem).on('click', function () {
|
||||
showServerMenu(this);
|
||||
});
|
||||
}
|
||||
|
||||
function showGeneralError() {
|
||||
|
||||
// Need the timeout because jquery mobile will not show a popup if there's currently already one in the process of closing
|
||||
setTimeout(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
Dashboard.alert({
|
||||
message: Globalize.translate('DefaultErrorMessage')
|
||||
});
|
||||
}, 300);
|
||||
|
||||
}
|
||||
|
||||
function acceptInvitation(page, id) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
// Add/Update connect info
|
||||
ConnectionManager.acceptServer(id).done(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
loadPage(page);
|
||||
|
||||
}).fail(function () {
|
||||
|
||||
showGeneralError();
|
||||
});
|
||||
}
|
||||
|
||||
function rejectInvitation(page, id) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
// Add/Update connect info
|
||||
ConnectionManager.deleteServer(id).done(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
loadPage(page);
|
||||
|
||||
}).fail(function () {
|
||||
|
||||
showGeneralError();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function showServerMenu(elem) {
|
||||
|
||||
var card = $(elem).parents('.card');
|
||||
var page = $(elem).parents('.page');
|
||||
var id = card.attr('data-id');
|
||||
|
||||
$('.serverMenu', page).popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="serverMenu" data-theme="a">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
|
||||
|
||||
html += '<li><a href="#" class="btnDelete" data-id="' + id + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
page.append(html);
|
||||
|
||||
var flyout = $('.serverMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
|
||||
});
|
||||
|
||||
$('.btnDelete', flyout).on('click', function () {
|
||||
rejectInvitation(page, this.getAttribute('data-id'));
|
||||
$('.serverMenu', page).popup("close").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function showPendingInviteMenu(elem) {
|
||||
|
||||
var card = $(elem).parents('.card');
|
||||
var page = $(elem).parents('.page');
|
||||
var id = card.attr('data-id');
|
||||
|
||||
$('.inviteMenu', page).popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="inviteMenu" data-theme="a">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
|
||||
|
||||
html += '<li><a href="#" class="btnAccept" data-id="' + id + '">' + Globalize.translate('ButtonAccept') + '</a></li>';
|
||||
html += '<li><a href="#" class="btnReject" data-id="' + id + '">' + Globalize.translate('ButtonReject') + '</a></li>';
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
page.append(html);
|
||||
|
||||
var flyout = $('.inviteMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
|
||||
});
|
||||
|
||||
$('.btnAccept', flyout).on('click', function () {
|
||||
acceptInvitation(page, this.getAttribute('data-id'));
|
||||
$('.inviteMenu', page).popup("close").remove();
|
||||
});
|
||||
|
||||
$('.btnReject', flyout).on('click', function () {
|
||||
rejectInvitation(page, this.getAttribute('data-id'));
|
||||
$('.inviteMenu', page).popup("close").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function getPendingInviteHtml(invite) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
|
||||
|
||||
html += "<div data-id='" + invite.Id + "' class='" + cssClass + "'>";
|
||||
|
||||
html += '<div class="cardBox visualCardBox visualCardBox-b">';
|
||||
html += '<div class="cardScalable">';
|
||||
|
||||
html += '<div class="cardPadder"></div>';
|
||||
|
||||
var href = "#";
|
||||
html += '<a class="cardContent" href="' + href + '">';
|
||||
|
||||
var imgUrl = 'css/images/server.png';
|
||||
|
||||
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');">';
|
||||
|
||||
html += "</div>";
|
||||
|
||||
// cardContent
|
||||
html += "</a>";
|
||||
|
||||
// cardScalable
|
||||
html += "</div>";
|
||||
|
||||
html += '<div class="cardFooter">';
|
||||
|
||||
html += '<div class="cardText" style="text-align:right; float:right;">';
|
||||
|
||||
html += '<button class="btnInviteMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
|
||||
html += "</div>";
|
||||
|
||||
html += '<div class="cardText" style="margin-right: 30px; padding: 11px 0 10px;">';
|
||||
html += invite.Name;
|
||||
html += "</div>";
|
||||
|
||||
// cardFooter
|
||||
html += "</div>";
|
||||
|
||||
// cardBox
|
||||
html += "</div>";
|
||||
|
||||
// card
|
||||
html += "</div>";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderInvitations(page, list) {
|
||||
|
||||
if (list.length) {
|
||||
$('.invitationSection', page).show();
|
||||
} else {
|
||||
$('.invitationSection', page).hide();
|
||||
}
|
||||
|
||||
var html = list.map(getPendingInviteHtml).join('');
|
||||
|
||||
var elem = $('.invitationList', page).html(html).trigger('create');
|
||||
|
||||
$('.btnInviteMenu', elem).on('click', function () {
|
||||
showPendingInviteMenu(this);
|
||||
});
|
||||
}
|
||||
|
||||
function loadInvitations(page) {
|
||||
|
||||
ConnectionManager.getUserInvitations().done(function (list) {
|
||||
|
||||
renderInvitations(page, list);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function loadPage(page) {
|
||||
|
|
@ -90,6 +323,8 @@
|
|||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
||||
loadInvitations(page);
|
||||
}
|
||||
|
||||
$(document).on('pageshow', "#selectServerPage", function () {
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@ var Dashboard = {
|
|||
Dashboard.alert("Settings saved.");
|
||||
},
|
||||
|
||||
defaultErrorMessage: "There was an error processing the request.",
|
||||
defaultErrorMessage: Globalize.translate('DefaultErrorMessage'),
|
||||
|
||||
processServerConfigurationUpdateResult: function (result) {
|
||||
|
||||
|
|
@ -567,11 +567,13 @@ var Dashboard = {
|
|||
|
||||
html += '<form>';
|
||||
|
||||
var isConnectMode = Dashboard.isConnectMode();
|
||||
|
||||
if (user.localUser && user.localUser.Configuration.EnableUserPreferenceAccess) {
|
||||
html += '<p><a data-mini="true" data-role="button" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '" data-icon="gear">' + Globalize.translate('ButtonMyPreferences') + '</button></a>';
|
||||
}
|
||||
|
||||
if (Dashboard.isConnectMode()) {
|
||||
if (isConnectMode) {
|
||||
html += '<p><a data-mini="true" data-role="button" href="selectserver.html" data-icon="cloud">' + Globalize.translate('ButtonSelectServer') + '</button></a>';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -111,12 +111,6 @@
|
|||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function getDisplayTime(hour) {
|
||||
|
||||
return new Date(2000, 1, 1, hour, 0, 0, 0).toLocaleTimeString();
|
||||
|
||||
}
|
||||
|
||||
function deleteAccessSchedule(page, schedules, index) {
|
||||
|
||||
schedules.splice(index, 1);
|
||||
|
|
@ -214,6 +208,19 @@
|
|||
}
|
||||
};
|
||||
|
||||
function getDisplayTime(hours) {
|
||||
|
||||
var minutes = 0;
|
||||
|
||||
var pct = hours % 1;
|
||||
|
||||
if (pct) {
|
||||
minutes = parseInt(pct * 60);
|
||||
}
|
||||
|
||||
return new Date(2000, 1, 1, hours, minutes, 0, 0).toLocaleTimeString();
|
||||
}
|
||||
|
||||
function populateHours(page) {
|
||||
|
||||
var html = '';
|
||||
|
|
@ -223,6 +230,8 @@
|
|||
html += '<option value="' + i + '">' + getDisplayTime(i) + '</option>';
|
||||
}
|
||||
|
||||
html += '<option value="24">' + getDisplayTime(0) + '</option>';
|
||||
|
||||
$('#selectStart', page).html(html).selectmenu('refresh');
|
||||
$('#selectEnd', page).html(html).selectmenu('refresh');
|
||||
}
|
||||
|
|
@ -290,7 +299,7 @@
|
|||
|
||||
$('.btnAddSchedule', page).on('click', function () {
|
||||
|
||||
showSchedulePopup(page, {}, -1);
|
||||
showSchedulePopup(page, {}, -1);
|
||||
});
|
||||
|
||||
populateHours(page);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue