mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

rework hosting options

Browse source
This commit is contained in:
Luke Pulverenti 2015-01-18 23:29:57 -05:00
parent 1509f3805d
commit 0f142fff89
10 changed files with 222 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

3
dashboard-ui/advanced.html
View file

@ -11,6 +11,7 @@
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" class="ui-btn-active">${TabGeneral}</a> <a href="#" data-role="button" class="ui-btn-active">${TabGeneral}</a>
<a href="dashboardhosting.html" data-role="button">${TabHosting}</a>
<a href="serversecurity.html" data-role="button">${TabSecurity}</a> <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
</div> </div>
<form id="advancedConfigurationForm"> <form id="advancedConfigurationForm">
@ -64,7 +65,7 @@
<label for="chkEnableDashboardResponseCache">${OptionEnableWebClientResponseCache}</label> <label for="chkEnableDashboardResponseCache">${OptionEnableWebClientResponseCache}</label>
<input type="checkbox" id="chkEnableMinification" data-mini="true" /> <input type="checkbox" id="chkEnableMinification" data-mini="true" />
<label for="chkEnableMinification">${OptionEnableWebClientResourceMinification}</label> <label for="chkEnableMinification">${OptionEnableWebClientResourceMinification}</label>
</div> </div>
<div class="fieldDescription"> <div class="fieldDescription">
${OptionDisableForDevelopmentHelp} ${OptionDisableForDevelopmentHelp}
</div> </div>

71
dashboard-ui/css/site.css
View file

@ -347,35 +347,35 @@ h1 .imageLink {
padding-bottom: 50px; padding-bottom: 50px;
} }
.sidebarLinks a { .sidebarLink {
display: block; display: block;
padding: .6em 20px .6em 0; padding: .6em 20px .6em 0;
text-decoration: none; text-decoration: none;
color: inherit !important; color: inherit !important;
text-shadow: none !important; text-shadow: none !important;
font-weight: 500 !important; font-weight: 500 !important;
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
}
.sidebarLink:hover {
background: #f2f2f2;
} }
.sidebarLinks a:hover { .sidebarLink.selectedSidebarLink {
background: #f2f2f2; margin-right: 0;
} }
.sidebarLinks a.selectedSidebarLink { .ui-page-theme-a .selectedSidebarLink {
margin-right: 0;
}
.ui-page-theme-a .sidebarLinks a.selectedSidebarLink {
background: #f2f2f2 !important; background: #f2f2f2 !important;
} }
.ui-page-theme-b .sidebarLinks a.selectedSidebarLink { .ui-page-theme-b .selectedSidebarLink {
background: #38c !important; background: #38c !important;
color: #fff !important; color: #fff !important;
} }
.sidebarLinks .sidebarLinkIcon { .sidebarLinkIcon {
font-size: 17px; font-size: 17px;
width: 66px; width: 66px;
text-align: center; text-align: center;
@ -393,9 +393,6 @@ h1 .imageLink {
border-radius: 0; border-radius: 0;
} }
.sidebarLinkText, .sidebarLinkIcon {
}
.sidebarHeader { .sidebarHeader {
padding-left: 20px; padding-left: 20px;
margin: 1em 0; margin: 1em 0;
@ -413,42 +410,14 @@ h1 .imageLink {
/* Tabs (e.g. advanced metadata page) */ /* Tabs (e.g. advanced metadata page) */
.localnav { .localnav {
margin-bottom: 40px !important; margin-bottom: 30px !important;
} }
.localnav + form {
margin-top: -10px;
}
.page > .ui-content { .page > .ui-content {
/* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */ /* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */
padding-bottom: 160px; padding-bottom: 160px;
} }
.dashboardPanelDivider {
height: 1px;
background: #ddd;
margin: .25em 0;
}
.dashboardPanelLink {
padding: .7em .5em .7em 1.25em;
display: block;
text-decoration: none;
color: #000 !important;
font-weight: normal !important;
}
.dashboardPanelLink:hover {
background: #52B54B;
color: #fff !important;
}
.selectedDashboardPanelLink {
background: #38c;
color: #fff !important;
}
.dashboardPanel .ui-panel-inner { .dashboardPanel .ui-panel-inner {
padding: 0; padding: 0;
} }

6
dashboard-ui/dashboard.html
View file

@ -21,6 +21,9 @@
</p> </p>
</div> </div>
<p class="supporterIconContainer">
</p>
<div class="readOnlyContent dashboardHomeLeftColumn"> <div class="readOnlyContent dashboardHomeLeftColumn">
<div data-role="collapsible" data-collapsed="false"> <div data-role="collapsible" data-collapsed="false">
@ -46,9 +49,8 @@
<p id="ports"></p> <p id="ports"></p>
<div id="pPluginUpdates"></div> <div id="pPluginUpdates"></div>
<p class="localUrl"></p>
<p class="externalUrl"></p> <p class="externalUrl"></p>
<p class="supporterIconContainer">
</p>
<div style="margin-top: 1em;"> <div style="margin-top: 1em;">
<button class="btnRestartContainer hide" id="btnRestartServer" type="button" data-icon="refresh" data-mini="true" data-inline="true" onclick="DashboardPage.restart();">${ButtonRestart}</button> <button class="btnRestartContainer hide" id="btnRestartServer" type="button" data-icon="refresh" data-mini="true" data-inline="true" onclick="DashboardPage.restart();">${ButtonRestart}</button>
<button id="btnShutdown" type="button" data-icon="delete" data-mini="true" data-inline="true" onclick="DashboardPage.shutdown();">${ButtonShutdown}</button> <button id="btnShutdown" type="button" data-icon="delete" data-mini="true" data-inline="true" onclick="DashboardPage.shutdown();">${ButtonShutdown}</button>

37
dashboard-ui/dashboardgeneral.html
View file

@ -39,43 +39,6 @@
<h2>${HeaderAdvanced}</h2> <h2>${HeaderAdvanced}</h2>
<div> <div>
<br /> <br />
<ul data-role="listview" class="ulForm">
<li>
<label for="txtPortNumber">${LabelLocalHttpServerPortNumber}</label>
<input type="number" id="txtPortNumber" name="txtPortNumber" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
</li>
<li>
<label for="txtPublicPort">${LabelPublicPort}</label>
<input type="number" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelPublicPortHelp}</div>
</li>
<li>
<label for="chkEnableUpnp">${LabelEnableAutomaticPortMap}</label>
<input type="checkbox" id="chkEnableUpnp" data-mini="true" />
<div class="fieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
</li>
<li>
<label for="txtDdns">${LabelExternalDDNS}</label>
<input id="txtDdns"/>
<div class="fieldDescription">${LabelExternalDDNSHelp}</div>
</li>
<li>
<label for="chkUseHttps">${LabelUseHttps}</label>
<input type="checkbox" id="chkUseHttps" data-mini="false" />
<div class="fieldDescription">${LabelUseHttpsHelp}</div>
</li>
<li>
<label for="txtHttpsPort">${LabelHttpsPort}</label>
<input type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelHttpsPortHelp}</div>
</li>
<li>
<label for="txtCertificatePath">${LabelCertificatePath}</label>
<input type="text" id="txtCertificatePath" />
<div class="fieldDescription">${LabelCertificatePathHelp}</div>
</li>
</ul>
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li> <li>
<label for="txtCachePath">${LabelCachePath}</label> <label for="txtCachePath">${LabelCachePath}</label>

79
dashboard-ui/dashboardhosting.html Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>${TitleAdvanced}</title>
</head>
<body>
<div id="dashboardHostingPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Server%20Settings">
<div data-role="content">
<div class="content-primary">
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="advanced.html" data-role="button">${TabGeneral}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabHosting}</a>
<a href="serversecurity.html" data-role="button">${TabSecurity}</a>
</div>
<form class="dashboardHostingForm">
<ul data-role="listview" class="ulForm">
<li>
<label for="txtPortNumber">${LabelLocalHttpServerPortNumber}</label>
<input type="number" id="txtPortNumber" name="txtPortNumber" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
</li>
<li>
<label for="txtPublicPort">${LabelPublicPort}</label>
<input type="number" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelPublicPortHelp}</div>
</li>
<li>
<label for="chkEnableUpnp">${LabelEnableAutomaticPortMap}</label>
<input type="checkbox" id="chkEnableUpnp" data-mini="true" />
<div class="fieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
</li>
<li>
<label for="txtDdns">${LabelExternalDDNS}</label>
<input id="txtDdns" />
<div class="fieldDescription">${LabelExternalDDNSHelp}</div>
</li>
<li>
<label for="chkEnableHttps" data-mini="true">${LabelEnableHttps}</label>
<input type="checkbox" id="chkEnableHttps" data-mini="true" />
<div class="fieldDescription">${LabelEnableHttpsHelp}</div>
</li>
<li>
<label for="txtHttpsPort">${LabelHttpsPort}</label>
<input type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" />
<div class="fieldDescription">${LabelHttpsPortHelp}</div>
</li>
<li>
<label for="txtCertificatePath">${LabelCertificatePath}</label>
<input type="text" id="txtCertificatePath" />
<div class="fieldDescription">${LabelCertificatePathHelp}</div>
</li>
</ul>
<ul data-role="listview" class="ulForm">
<li>
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
${ButtonSave}
</button>
<button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete" data-mini="true">
${ButtonCancel}
</button>
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
$('.dashboardHostingForm').off('submit', DashboardHostingPage.onSubmit).on('submit', DashboardHostingPage.onSubmit);
</script>
</div>
</body>
</html>

39
dashboard-ui/scripts/dashboardgeneral.js
View file

@ -8,10 +8,7 @@
Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName); Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName);
} }
ApiClient.getSystemInfo().done(function (systemInfo) { refreshPageTitle(page);
Dashboard.setPageTitle(systemInfo.ServerName);
});
$('#txtServerName', page).val(config.ServerName || ''); $('#txtServerName', page).val(config.ServerName || '');
@ -21,21 +18,19 @@
})).val(config.UICulture).selectmenu('refresh'); })).val(config.UICulture).selectmenu('refresh');
$('#txtPortNumber', page).val(config.HttpServerPortNumber);
$('#txtPublicPort', page).val(config.PublicPort);
$('#chkUseHttps', page).checked(config.UseHttps).checkboxradio('refresh');
$('#txtHttpsPort', page).val(config.HttpsPortNumber);
$('#txtCertificatePath', page).val(config.CertificatePath);
$('#txtDdns', page).val(config.WanDdns || '');
$('#chkEnableUpnp', page).checked(config.EnableUPnP).checkboxradio('refresh');
$('#txtCachePath', page).val(config.CachePath || ''); $('#txtCachePath', page).val(config.CachePath || '');
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
function refreshPageTitle(page) {
ApiClient.getSystemInfo().done(function (systemInfo) {
Dashboard.setPageTitle(systemInfo.ServerName);
});
}
$(document).on('pageshow', "#dashboardGeneralPage", function () { $(document).on('pageshow', "#dashboardGeneralPage", function () {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
@ -88,27 +83,19 @@
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
var form = this; var form = this;
var page = $(form).parents('.page');
ApiClient.getServerConfiguration().done(function (config) { ApiClient.getServerConfiguration().done(function (config) {
config.ServerName = $('#txtServerName', form).val(); config.ServerName = $('#txtServerName', form).val();
config.UICulture = $('#selectLocalizationLanguage', form).val(); config.UICulture = $('#selectLocalizationLanguage', form).val();
config.HttpServerPortNumber = $('#txtPortNumber', form).val();
config.PublicPort = $('#txtPublicPort', form).val();
config.UseHttps = $('#chkUseHttps', form).checked();
config.HttpsPortNumber = $('#txtHttpsPort', form).val();
config.CertificatePath = $('#txtCertificatePath', form).val();
config.EnableUPnP = $('#chkEnableUpnp', form).checked();
config.WanDdns = $('#txtDdns', form).val();
config.CachePath = $('#txtCachePath', form).val(); config.CachePath = $('#txtCachePath', form).val();
ApiClient.updateServerConfiguration(config).done(function () { ApiClient.updateServerConfiguration(config).done(function () {
refreshPageTitle(page);
ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) { ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) {
brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val(); brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val();

62
dashboard-ui/scripts/dashboardhosting.js Normal file
View file

@ -0,0 +1,62 @@
(function ($, document, window) {
function loadPage(page, config) {
$('#txtPortNumber', page).val(config.HttpServerPortNumber);
$('#txtPublicPort', page).val(config.PublicPort);
$('#chkEnableHttps', page).checked(config.EnableHttps).checkboxradio('refresh');
$('#txtHttpsPort', page).val(config.HttpsPortNumber);
$('#txtCertificatePath', page).val(config.CertificatePath);
$('#txtDdns', page).val(config.WanDdns || '');
$('#chkEnableUpnp', page).checked(config.EnableUPnP).checkboxradio('refresh');
Dashboard.hideLoadingMsg();
}
$(document).on('pageshow', "#dashboardHostingPage", function () {
Dashboard.showLoadingMsg();
var page = this;
ApiClient.getServerConfiguration().done(function (config) {
loadPage(page, config);
});
}).on('pageinit', "#dashboardHostingPage", function () {
var page = this;
});
window.DashboardHostingPage = {
onSubmit: function () {
Dashboard.showLoadingMsg();
var form = this;
ApiClient.getServerConfiguration().done(function (config) {
config.HttpServerPortNumber = $('#txtPortNumber', form).val();
config.PublicPort = $('#txtPublicPort', form).val();
config.EnableHttps = $('#chkEnableHttps', form).checked();
config.HttpsPortNumber = $('#txtHttpsPort', form).val();
config.CertificatePath = $('#txtCertificatePath', form).val();
config.EnableUPnP = $('#chkEnableUpnp', form).checked();
config.WanDdns = $('#txtDdns', form).val();
ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
});
// Disable default form submission
return false;
}
};
})(jQuery, document, window);

27
dashboard-ui/scripts/dashboardpage.js
View file

@ -82,18 +82,12 @@
$('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version)); $('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
var httpPort = systemInfo.HttpServerPortNumber; if (systemInfo.EnableHttps) {
$('#ports', page).html(Globalize.translate('LabelRunningOnPorts', '<b>' + systemInfo.HttpServerPortNumber + '</b>', '<b>' + systemInfo.HttpsPortNumber + '</b>'));
var portHtml = Globalize.translate('LabelRunningOnPort', '<b>' + httpPort + '</b>'); } else {
$('#ports', page).html(Globalize.translate('LabelRunningOnPort', '<b>' + systemInfo.HttpServerPortNumber + '</b>'));
if (systemInfo.UseHttps) {
var httpsPort = systemInfo.HttpsPortNumber;
portHtml += '<br>';
portHtml += Globalize.translate('LabelRunningOnHttpsPort', '<b>' + httpsPort + '</b>');
} }
$('#ports', page).html(portHtml);
if (systemInfo.CanSelfRestart) { if (systemInfo.CanSelfRestart) {
$('.btnRestartContainer', page).removeClass('hide'); $('.btnRestartContainer', page).removeClass('hide');
} else { } else {
@ -773,11 +767,20 @@
renderUrls: function (page, systemInfo) { renderUrls: function (page, systemInfo) {
if (systemInfo.LocalAddress) {
var localAccessHtml = Globalize.translate('LabelLocalAccessUrl', '<a href="' + systemInfo.LocalAddress + '" target="_blank">' + systemInfo.LocalAddress + '</a>');
$('.localUrl', page).html(localAccessHtml).show().trigger('create');
} else {
$('.externalUrl', page).hide();
}
if (systemInfo.WanAddress) { if (systemInfo.WanAddress) {
var externalUrl = systemInfo.WanAddress + ApiClient.apiPrefix(); var externalUrl = systemInfo.WanAddress;
var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl').replace('{0}', '<a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>'); var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl', '<a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>');
$('.externalUrl', page).html(remoteAccessHtml).show().trigger('create'); $('.externalUrl', page).html(remoteAccessHtml).show().trigger('create');
} else { } else {

62
dashboard-ui/scripts/site.js
View file

@ -668,6 +668,7 @@ var Dashboard = {
var items = Dashboard.getToolsMenuLinks(page); var items = Dashboard.getToolsMenuLinks(page);
var i, length, item; var i, length, item;
var menuHtml = '';
for (i = 0, length = items.length; i < length; i++) { for (i = 0, length = items.length; i < length; i++) {
@ -678,7 +679,7 @@ var Dashboard = {
} }
if (item.divider) { if (item.divider) {
html += "<div class='sidebarDivider ui-bar-inherit'></div>"; menuHtml += "<div class='sidebarDivider ui-bar-inherit'></div>";
} }
if (item.href) { if (item.href) {
@ -686,26 +687,27 @@ var Dashboard = {
var style = item.color ? ' style="color:' + item.color + '"' : ''; var style = item.color ? ' style="color:' + item.color + '"' : '';
if (item.selected) { if (item.selected) {
html += '<a class="selectedSidebarLink" href="' + item.href + '">'; menuHtml += '<a class="sidebarLink selectedSidebarLink" href="' + item.href + '">';
} else { } else {
html += '<a href="' + item.href + '">'; menuHtml += '<a class="sidebarLink" href="' + item.href + '">';
} }
html += '<span class="fa ' + item.icon + ' sidebarLinkIcon"' + style + '></span>'; menuHtml += '<span class="fa ' + item.icon + ' sidebarLinkIcon"' + style + '></span>';
html += '<span class="sidebarLinkText">'; menuHtml += '<span class="sidebarLinkText">';
html += item.name; menuHtml += item.name;
html += '</span>'; menuHtml += '</span>';
html += '</a>'; menuHtml += '</a>';
} else { } else {
html += '<div class="sidebarHeader">'; menuHtml += '<div class="sidebarHeader">';
html += item.name; menuHtml += item.name;
html += '</div>'; menuHtml += '</div>';
} }
} }
// collapsible html += menuHtml;
// sidebarLinks
html += '</div>'; html += '</div>';
// content-secondary // content-secondary
@ -715,29 +717,10 @@ var Dashboard = {
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>'; html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
for (i = 0, length = items.length; i < length; i++) { html += '<div class="sidebarLinks">';
html += menuHtml;
item = items[i]; // sidebarLinks
html += '</div>';
if (!user.Policy.IsAdministrator) {
break;
}
if (item.divider) {
html += "<div class='dashboardPanelDivider'></div>";
}
if (item.href) {
if (item.selected) {
html += '<a class="selectedDashboardPanelLink dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
} else {
html += '<a class="dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
}
}
}
html += '</div>'; html += '</div>';
$('.content-primary', page).before(html); $('.content-primary', page).before(html);
@ -1483,6 +1466,11 @@ $(document).on('pagecreate', ".page", function () {
var page = $(this); var page = $(this);
var current = page.data('theme');
if (current) {
return;
}
var newTheme; var newTheme;
if (page.hasClass('libraryPage')) { if (page.hasClass('libraryPage')) {
@ -1491,7 +1479,7 @@ $(document).on('pagecreate', ".page", function () {
newTheme = 'a'; newTheme = 'a';
} }
var current = page.page("option", "theme"); current = page.page("option", "theme");
if (current && current != newTheme) { if (current && current != newTheme) {
page.page("option", "theme", newTheme); page.page("option", "theme", newTheme);

3
dashboard-ui/serversecurity.html
View file

@ -11,10 +11,11 @@
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="advanced.html" data-role="button">${TabGeneral}</a> <a href="advanced.html" data-role="button">${TabGeneral}</a>
<a href="dashboardhosting.html" data-role="button">${TabHosting}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a> <a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a>
</div> </div>
<h2 style="margin-top: -10px;"> <h2>
<span>${HeaderApiKeys}</span> <span>${HeaderApiKeys}</span>
<button class="btnNewKey" style="margin: -4px 0 0 2em; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button> <button class="btnNewKey" style="margin: -4px 0 0 2em; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
</h2> </h2>