From 0f142fff8956e32f62cdd4c069f714bba64ae7e6 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sun, 18 Jan 2015 23:29:57 -0500 Subject: [PATCH] rework hosting options --- dashboard-ui/advanced.html | 3 +- dashboard-ui/css/site.css | 71 ++++++--------------- dashboard-ui/dashboard.html | 6 +- dashboard-ui/dashboardgeneral.html | 37 ----------- dashboard-ui/dashboardhosting.html | 79 ++++++++++++++++++++++++ dashboard-ui/scripts/dashboardgeneral.js | 39 ++++-------- dashboard-ui/scripts/dashboardhosting.js | 62 +++++++++++++++++++ dashboard-ui/scripts/dashboardpage.js | 27 ++++---- dashboard-ui/scripts/site.js | 62 ++++++++----------- dashboard-ui/serversecurity.html | 3 +- 10 files changed, 222 insertions(+), 167 deletions(-) create mode 100644 dashboard-ui/dashboardhosting.html create mode 100644 dashboard-ui/scripts/dashboardhosting.js diff --git a/dashboard-ui/advanced.html b/dashboard-ui/advanced.html index cbbe51504e..707fc57c93 100644 --- a/dashboard-ui/advanced.html +++ b/dashboard-ui/advanced.html @@ -11,6 +11,7 @@
${TabGeneral} + ${TabHosting} ${TabSecurity}
@@ -64,7 +65,7 @@ - +
${OptionDisableForDevelopmentHelp}
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 8f2897f44f..180b8e646a 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -347,35 +347,35 @@ h1 .imageLink { padding-bottom: 50px; } - .sidebarLinks a { - display: block; - padding: .6em 20px .6em 0; - text-decoration: none; - color: inherit !important; - text-shadow: none !important; - font-weight: 500 !important; - font-size: 14px; - vertical-align: middle; +.sidebarLink { + display: block; + padding: .6em 20px .6em 0; + text-decoration: none; + color: inherit !important; + text-shadow: none !important; + font-weight: 500 !important; + font-size: 14px; + vertical-align: middle; +} + + .sidebarLink:hover { + background: #f2f2f2; } - .sidebarLinks a:hover { - background: #f2f2f2; - } + .sidebarLink.selectedSidebarLink { + margin-right: 0; + } - .sidebarLinks a.selectedSidebarLink { - margin-right: 0; - } - -.ui-page-theme-a .sidebarLinks a.selectedSidebarLink { +.ui-page-theme-a .selectedSidebarLink { background: #f2f2f2 !important; } -.ui-page-theme-b .sidebarLinks a.selectedSidebarLink { +.ui-page-theme-b .selectedSidebarLink { background: #38c !important; color: #fff !important; } -.sidebarLinks .sidebarLinkIcon { +.sidebarLinkIcon { font-size: 17px; width: 66px; text-align: center; @@ -393,9 +393,6 @@ h1 .imageLink { border-radius: 0; } -.sidebarLinkText, .sidebarLinkIcon { -} - .sidebarHeader { padding-left: 20px; margin: 1em 0; @@ -413,42 +410,14 @@ h1 .imageLink { /* Tabs (e.g. advanced metadata page) */ .localnav { - margin-bottom: 40px !important; + margin-bottom: 30px !important; } - .localnav + form { - margin-top: -10px; - } - .page > .ui-content { /* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */ 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 { padding: 0; } diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html index 2b120724d3..33bfa5add4 100644 --- a/dashboard-ui/dashboard.html +++ b/dashboard-ui/dashboard.html @@ -21,6 +21,9 @@

+

+

+
@@ -46,9 +49,8 @@

+

-

-

diff --git a/dashboard-ui/dashboardgeneral.html b/dashboard-ui/dashboardgeneral.html index f7fb46eeac..d9b50eab5b 100644 --- a/dashboard-ui/dashboardgeneral.html +++ b/dashboard-ui/dashboardgeneral.html @@ -39,43 +39,6 @@

${HeaderAdvanced}


-
    -
  • - - -
    ${LabelLocalHttpServerPortNumberHelp}
    -
    • -
  • - - -
    ${LabelPublicPortHelp}
    -
    • -
  • - - -
    ${LabelEnableAutomaticPortMapHelp}
    -
    • -
  • - - -
    ${LabelExternalDDNSHelp}
    -
    • -
  • - - -
    ${LabelUseHttpsHelp}
    -
    • -
  • - - -
    ${LabelHttpsPortHelp}
    -
    • -
  • - - -
    ${LabelCertificatePathHelp}
    -
    • -
  • diff --git a/dashboard-ui/dashboardhosting.html b/dashboard-ui/dashboardhosting.html new file mode 100644 index 0000000000..7dd250b07c --- /dev/null +++ b/dashboard-ui/dashboardhosting.html @@ -0,0 +1,79 @@ + + + + ${TitleAdvanced} + + +
    + +
    +
    + +
    + ${TabGeneral} + ${TabHosting} + ${TabSecurity} +
    + + + +
      +
    • + + +
      ${LabelLocalHttpServerPortNumberHelp}
      +
      • +
    • + + +
      ${LabelPublicPortHelp}
      +
      • +
    • + + +
      ${LabelEnableAutomaticPortMapHelp}
      +
      • +
    • + + +
      ${LabelExternalDDNSHelp}
      +
      • +
    • + + +
      ${LabelEnableHttpsHelp}
      +
      • +
    • + + +
      ${LabelHttpsPortHelp}
      +
      • +
    • + + +
      ${LabelCertificatePathHelp}
      +
      • +
    + +
      +
    • + + +
      • + +
    + + +
    +
    + + +
    + + diff --git a/dashboard-ui/scripts/dashboardgeneral.js b/dashboard-ui/scripts/dashboardgeneral.js index 735f5c6e9f..ebecb094f1 100644 --- a/dashboard-ui/scripts/dashboardgeneral.js +++ b/dashboard-ui/scripts/dashboardgeneral.js @@ -8,10 +8,7 @@ Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName); } - ApiClient.getSystemInfo().done(function (systemInfo) { - - Dashboard.setPageTitle(systemInfo.ServerName); - }); + refreshPageTitle(page); $('#txtServerName', page).val(config.ServerName || ''); @@ -21,21 +18,19 @@ })).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 || ''); Dashboard.hideLoadingMsg(); } + function refreshPageTitle(page) { + + ApiClient.getSystemInfo().done(function (systemInfo) { + + Dashboard.setPageTitle(systemInfo.ServerName); + }); + } + $(document).on('pageshow', "#dashboardGeneralPage", function () { Dashboard.showLoadingMsg(); @@ -88,27 +83,19 @@ Dashboard.showLoadingMsg(); var form = this; + var page = $(form).parents('.page'); ApiClient.getServerConfiguration().done(function (config) { config.ServerName = $('#txtServerName', 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(); ApiClient.updateServerConfiguration(config).done(function () { - + + refreshPageTitle(page); + ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) { brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val(); diff --git a/dashboard-ui/scripts/dashboardhosting.js b/dashboard-ui/scripts/dashboardhosting.js new file mode 100644 index 0000000000..209ed0dd2d --- /dev/null +++ b/dashboard-ui/scripts/dashboardhosting.js @@ -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); diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js index 82bd7f8ad0..19f6ca3942 100644 --- a/dashboard-ui/scripts/dashboardpage.js +++ b/dashboard-ui/scripts/dashboardpage.js @@ -82,18 +82,12 @@ $('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version)); - var httpPort = systemInfo.HttpServerPortNumber; - - var portHtml = Globalize.translate('LabelRunningOnPort', '' + httpPort + ''); - - if (systemInfo.UseHttps) { - var httpsPort = systemInfo.HttpsPortNumber; - portHtml += '
    '; - portHtml += Globalize.translate('LabelRunningOnHttpsPort', '' + httpsPort + ''); + if (systemInfo.EnableHttps) { + $('#ports', page).html(Globalize.translate('LabelRunningOnPorts', '' + systemInfo.HttpServerPortNumber + '', '' + systemInfo.HttpsPortNumber + '')); + } else { + $('#ports', page).html(Globalize.translate('LabelRunningOnPort', '' + systemInfo.HttpServerPortNumber + '')); } - $('#ports', page).html(portHtml); - if (systemInfo.CanSelfRestart) { $('.btnRestartContainer', page).removeClass('hide'); } else { @@ -773,11 +767,20 @@ renderUrls: function (page, systemInfo) { + if (systemInfo.LocalAddress) { + + var localAccessHtml = Globalize.translate('LabelLocalAccessUrl', '' + systemInfo.LocalAddress + ''); + + $('.localUrl', page).html(localAccessHtml).show().trigger('create'); + } else { + $('.externalUrl', page).hide(); + } + if (systemInfo.WanAddress) { - var externalUrl = systemInfo.WanAddress + ApiClient.apiPrefix(); + var externalUrl = systemInfo.WanAddress; - var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl').replace('{0}', '' + externalUrl + ''); + var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl', '' + externalUrl + ''); $('.externalUrl', page).html(remoteAccessHtml).show().trigger('create'); } else { diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 27253e3910..8f9daf3c64 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -668,6 +668,7 @@ var Dashboard = { var items = Dashboard.getToolsMenuLinks(page); var i, length, item; + var menuHtml = ''; for (i = 0, length = items.length; i < length; i++) { @@ -678,7 +679,7 @@ var Dashboard = { } if (item.divider) { - html += "
    "; + menuHtml += "
    "; } if (item.href) { @@ -686,26 +687,27 @@ var Dashboard = { var style = item.color ? ' style="color:' + item.color + '"' : ''; if (item.selected) { - html += ''; + menuHtml += ''; } else { - html += ''; + menuHtml += ''; } - html += ''; + menuHtml += ''; - html += ''; - html += item.name; - html += ''; - html += ''; + menuHtml += ''; + menuHtml += item.name; + menuHtml += ''; + menuHtml += ''; } else { - - html += '
    '; - html += item.name; - html += '
    '; + + menuHtml += '
    '; + menuHtml += item.name; + menuHtml += '
    '; } } - // collapsible + html += menuHtml; + // sidebarLinks html += '
'; // content-secondary @@ -715,29 +717,10 @@ var Dashboard = { html += '

MEDIABROWSER

'; - for (i = 0, length = items.length; i < length; i++) { - - item = items[i]; - - if (!user.Policy.IsAdministrator) { - break; - } - - if (item.divider) { - html += "
"; - } - - if (item.href) { - - if (item.selected) { - html += '' + item.name + ''; - } else { - html += '' + item.name + ''; - } - - } - } - + html += '
'; + html += menuHtml; + // sidebarLinks + html += '
'; html += '
'; $('.content-primary', page).before(html); @@ -1483,6 +1466,11 @@ $(document).on('pagecreate', ".page", function () { var page = $(this); + var current = page.data('theme'); + if (current) { + return; + } + var newTheme; if (page.hasClass('libraryPage')) { @@ -1491,7 +1479,7 @@ $(document).on('pagecreate', ".page", function () { newTheme = 'a'; } - var current = page.page("option", "theme"); + current = page.page("option", "theme"); if (current && current != newTheme) { page.page("option", "theme", newTheme); diff --git a/dashboard-ui/serversecurity.html b/dashboard-ui/serversecurity.html index d34398e1bb..60a949b313 100644 --- a/dashboard-ui/serversecurity.html +++ b/dashboard-ui/serversecurity.html @@ -11,10 +11,11 @@
${TabGeneral} + ${TabHosting} ${TabSecurity}
-

+

${HeaderApiKeys}