fixes #672 - Support path mapping

dashboard-ui/scripts/directorybrowser.js

@@ -91,7 +91,7 @@
             }
 
             options.header = options.header || "Select Media Path";
-            options.instruction = options.instruction || "Any path will do, but for optimal playback of bluray, dvd folders, and games, <b>network paths (UNC)</b> are recommended.";
+            options.instruction = options.instruction || "";
 
             var html = '<div data-transition="fade" data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
 
@@ -101,9 +101,12 @@
 
             html += '<div data-role="content" class="ui-content">';
             html += '<form>';
-            html += '<p class="directoryPickerHeadline">' + options.instruction + '<br/><br/>Network paths can be entered manually in the event the Network button fails to locate your devices. For example, <b>\\\\my-server</b> or <b>\\\\192.168.1.101</b>.</p>';
 
-            html += '<div style="margin:0;">';
+            var instruction = options.instruction ? options.instruction + '<br/><br/>' : '';
+            
+            html += '<p class="directoryPickerHeadline">' + instruction + 'Network paths can be entered manually in the event the Network button fails to locate your devices. For example, <b>\\\\my-server</b> or <b>\\\\192.168.1.101</b>.</p>';
+
+            html += '<div style="margin:20px 0 0;">';
             html += '<label for="txtDirectoryPickerPath" class="lblDirectoryPickerPath">Current Path:</label>';
             html += '<div style="width:92%;display:inline-block;"><input id="txtDirectoryPickerPath" name="txtDirectoryPickerPath" type="text" required="required" style="font-weight:bold;" /></div>';
             html += '<button class="btnRefreshDirectories" type="button" data-icon="refresh" data-inline="true" data-mini="true" data-iconpos="notext">Refresh</button>';

dashboard-ui/scripts/librarypathmapping.js

@@ -1,12 +1,100 @@
 (function ($, document, window) {
 
+    var currentConfig;
+
+    function remove(page, index) {
+
+        Dashboard.confirm("Are you sure you wish to delete this path substitution?", "Confirm Deletion", function (result) {
+
+            if (result) {
+
+                ApiClient.getServerConfiguration().done(function (config) {
+
+                    config.PathSubstitutions.splice(index, 1);
+
+                    ApiClient.updateServerConfiguration(config).done(function () {
+
+                        reload(page);
+                    });
+                });
+            }
+
+        });
+
+
+    }
+
+    function addSubstitution(page, config) {
+
+        config.PathSubstitutions.push({
+            From: $('#txtFrom', page).val(),
+            To: $('#txtTo', page).val()
+        });
+
+    }
+
+    function reloadPathMappings(page, config) {
+
+        var index = 0;
+
+        var html = config.PathSubstitutions.map(function (map) {
+
+            var mapHtml = '<tr>';
+
+            mapHtml += '<td>';
+            mapHtml += '<button class="btnDeletePath" data-index="' + index + '" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" type="button" style="margin:0 .5em 0 0;">Delete</button>';
+            mapHtml += '</td>';
+
+            mapHtml += '<td style="vertical-align:middle;">';
+            mapHtml += map.From;
+            mapHtml += '</td>';
+
+            mapHtml += '<td style="vertical-align:middle;">';
+            mapHtml += map.To;
+            mapHtml += '</td>';
+
+            mapHtml += '</tr>';
+
+            index++;
+
+            return mapHtml;
+        });
+
+        var elem = $('.tbodyPathSubstitutions', page).html(html.join('')).parents('table').table('refresh').trigger('create');
+
+        $('.btnDeletePath', elem).on('click', function () {
+
+            remove(page, parseInt(this.getAttribute('data-index')));
+        });
+
+        if (config.PathSubstitutions.length) {
+            $('#tblPaths', page).show();
+        } else {
+            $('#tblPaths', page).hide();
+        }
+    }
+
     function loadPage(page, config) {
 
+        currentConfig = config;
 
+        reloadPathMappings(page, config);
         Dashboard.hideLoadingMsg();
     }
 
-    $(document).on('pageshow', ".libraryPathMappingForm", function () {
+    function reload(page) {
+
+        $('#txtFrom', page).val('');
+        $('#txtTo', page).val('');
+
+        ApiClient.getServerConfiguration().done(function (config) {
+
+            loadPage(page, config);
+
+        });
+    }
+
+    $(document).on('pageshow', "#libraryPathMappingPage", function () {
 
         Dashboard.showLoadingMsg();
 
@@ -18,6 +106,10 @@
 
         });
 
+    }).on('pagehide', "#libraryPathMappingPage", function () {
+
+        currentConfig = null;
+
     });
 
     window.LibraryPathMappingPage = {
@@ -27,11 +119,15 @@
             Dashboard.showLoadingMsg();
 
             var form = this;
+            var page = $(form).parents('.page');
 
             ApiClient.getServerConfiguration().done(function (config) {
 
+                addSubstitution(page, config);
+                ApiClient.updateServerConfiguration(config).done(function () {
 
-                ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
+                    reload(page);
+                });
             });
 
             // Disable default form submission

dashboard-ui/scripts/medialibrarypage.js

@@ -155,6 +155,8 @@
         }
         html += '</ul>';
 
+        html += '<p>Use <a href="librarypathmapping.html">path substitution</a> to map server paths to network shares that clients are able to access.</p>';
+
         html += '<p>';
         html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">Remove</button>';
         html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">Rename</button>';