From 371dd1454ac6918037e50a258181f01ca8f759ca Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 30 Mar 2014 22:33:10 -0400
Subject: [PATCH] added web client localization

---
 dashboard-ui/advancedserversettings.html      |  5 --
 dashboard-ui/dashboard.html                   |  3 +-
 dashboard-ui/dashboardgeneral.html            | 56 +++++++++++++++++++
 dashboard-ui/dashboardinfopage.html           |  1 +
 .../scripts/advancedserversettings.js         |  2 -
 dashboard-ui/scripts/dashboardgeneral.js      | 55 ++++++++++++++++++
 dashboard-ui/scripts/extensions.js            | 26 +++++++--
 dashboard-ui/scripts/useredit.js              |  4 +-
 dashboard-ui/scripts/userimagepage.js         | 10 ++--
 dashboard-ui/scripts/userparentalcontrol.js   |  2 +-
 dashboard-ui/scripts/userpassword.js          | 16 +++---
 dashboard-ui/scripts/userprofilespage.js      | 12 ++--
 dashboard-ui/scripts/usersettings.js          |  2 +-
 13 files changed, 158 insertions(+), 36 deletions(-)
 create mode 100644 dashboard-ui/dashboardgeneral.html
 create mode 100644 dashboard-ui/scripts/dashboardgeneral.js
diff --git a/dashboard-ui/advancedserversettings.html b/dashboard-ui/advancedserversettings.html
index ca6b67699f..af0d734972 100644
--- a/dashboard-ui/advancedserversettings.html
+++ b/dashboard-ui/advancedserversettings.html
@@ -18,11 +18,6 @@
                 <form class="advancedServerSettingsForm">
 
                     <ul data-role="listview" class="ulForm">
-                        <li>
-                            <label for="txtServerName">Friendly server name:</label>
-                            <input id="txtServerName" data-mini="true" />
-                            <div class="fieldDescription">This name will be used to identify this server. If left blank, the computer name will be used.</div>
-                        </li>
                         <li>
                             <label for="txtPortNumber">Http server port number: </label>
                             <input type="number" id="txtPortNumber" name="txtPortNumber" pattern="[0-9]*" required="required" min="1" data-mini="true" />
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index 447d6d35a9..3f1f80402c 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -11,6 +11,7 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">Home</a>
+                    <a href="dashboardgeneral.html" data-role="button">General</a>
                     <a href="dashboardinfopage.html" data-role="button">Info</a>
                 </div>
 
@@ -122,4 +123,4 @@
         </div>
     </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/dashboard-ui/dashboardgeneral.html b/dashboard-ui/dashboardgeneral.html
new file mode 100644
index 0000000000..2038311ef3
--- /dev/null
+++ b/dashboard-ui/dashboardgeneral.html
@@ -0,0 +1,56 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <title>Dashboard</title>
+</head>
+<body>
+    <div id="dashboardGeneralPage" data-role="page" class="page type-interior adminPage dashboardHomePage">
+
+        <div data-role="content">
+            <div class="content-primary">
+
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                    <a href="dashboard.html" data-role="button">Home</a>
+                    <a href="#" data-role="button" class="ui-btn-active">General</a>
+                    <a href="dashboardinfopage.html" data-role="button">Info</a>
+                </div>
+
+                <form class="dashboardGeneralForm">
+
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <label for="txtServerName">Friendly server name:</label>
+                            <input id="txtServerName" data-mini="true" />
+                            <div class="fieldDescription">This name will be used to identify this server. If left blank, the computer name will be used.</div>
+                        </li>
+                        <li>
+                            <label for="selectLocalizationLanguage">Preferred display language</label>
+                            <select id="selectLocalizationLanguage" data-mini="true">
+                            </select>
+                            <div class="fieldDescription">Translating Media Browser is an ongoing project. Read about how <a href="http://mediabrowser3.com/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">you can contribute</a>.</div>
+                        </li>
+                    </ul>
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                                Save
+                            </button>
+                            <button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete" data-mini="true">
+                                Cancel
+                            </button>
+                        </li>
+
+                    </ul>
+                </form>
+
+            </div>
+        </div>
+
+
+
+        <script type="text/javascript">
+            $('.dashboardGeneralForm').off('submit', DashboardGeneralPage.onSubmit).on('submit', DashboardGeneralPage.onSubmit);
+        </script>
+    </div>
+</body>
+</html>
diff --git a/dashboard-ui/dashboardinfopage.html b/dashboard-ui/dashboardinfopage.html
index 14dd7e3441..71e3f1e2f7 100644
--- a/dashboard-ui/dashboardinfopage.html
+++ b/dashboard-ui/dashboardinfopage.html
@@ -12,6 +12,7 @@
 
                     <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                         <a href="dashboard.html" data-role="button">Home</a>
+                        <a href="dashboardgeneral.html" data-role="button">General</a>
                         <a href="#" data-role="button" class="ui-btn-active">Info</a>
                     </div>
 
diff --git a/dashboard-ui/scripts/advancedserversettings.js b/dashboard-ui/scripts/advancedserversettings.js
index a73b124f5b..0cccc9eccd 100644
--- a/dashboard-ui/scripts/advancedserversettings.js
+++ b/dashboard-ui/scripts/advancedserversettings.js
@@ -14,7 +14,6 @@
         $('#txtPortNumber', page).val(config.HttpServerPortNumber);
 
         $('#txtDdns', page).val(config.WanDdns || '');
-        $('#txtServerName', page).val(config.ServerName || '');
 
         $('#chkEnableUpnp', page).checked(config.EnableUPnP).checkboxradio('refresh');
 
@@ -53,7 +52,6 @@
                 config.EnableUPnP = $('#chkEnableUpnp', form).checked();
 
                 config.WanDdns = $('#txtDdns', form).val();
-                config.ServerName = $('#txtServerName', form).val();
 
                 ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
             });
diff --git a/dashboard-ui/scripts/dashboardgeneral.js b/dashboard-ui/scripts/dashboardgeneral.js
new file mode 100644
index 0000000000..84058a5138
--- /dev/null
+++ b/dashboard-ui/scripts/dashboardgeneral.js
@@ -0,0 +1,55 @@
+﻿(function ($, document, window) {
+
+    function loadPage(page, config, languageOptions) {
+
+        $('#txtServerName', page).val(config.ServerName || '');
+
+        $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
+
+            return '<option value="' + l.Value + '">' + l.Name + '</option>';
+
+        })).val(config.UICulture).selectmenu('refresh');
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    $(document).on('pageshow', "#dashboardGeneralPage", function () {
+
+        Dashboard.showLoadingMsg();
+
+        var page = this;
+
+        var promise1 = ApiClient.getServerConfiguration();
+
+        var promise2 = $.getJSON(ApiClient.getUrl("Localization/Options"));
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            loadPage(page, response1[0], response2[0]);
+
+        });
+
+    });
+
+    window.DashboardGeneralPage = {
+
+        onSubmit: function () {
+            Dashboard.showLoadingMsg();
+
+            var form = this;
+
+            ApiClient.getServerConfiguration().done(function (config) {
+
+                config.ServerName = $('#txtServerName', form).val();
+                config.UICulture = $('#selectLocalizationLanguage', form).val();
+
+                ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
+            });
+
+            // Disable default form submission
+            return false;
+        }
+
+    };
+
+})(jQuery, document, window);
diff --git a/dashboard-ui/scripts/extensions.js b/dashboard-ui/scripts/extensions.js
index 1772df5a11..da81f7ea1f 100644
--- a/dashboard-ui/scripts/extensions.js
+++ b/dashboard-ui/scripts/extensions.js
@@ -1,5 +1,5 @@
 ﻿function IsStorageEnabled() {
-    
+
     if (!window.localStorage) {
         return false;
     }
@@ -36,7 +36,7 @@ $.fn.checked = function (value) {
     }
 };
 
-$.fn.buttonEnabled = function(enabled) {
+$.fn.buttonEnabled = function (enabled) {
 
     return enabled ? this.attr('disabled', '').removeAttr('disabled') : this.attr('disabled', 'disabled');
 };
@@ -132,8 +132,8 @@ var WebNotifications = {
             }
         }
     },
-    
-    supported: function() {
+
+    supported: function () {
         return window.Notification || window.webkitNotifications;
     }
 };
@@ -460,4 +460,20 @@ function ticks_to_human(str) {
         };
     });
 
-})();
\ No newline at end of file
+})();
+
+(function (window) {
+
+    // Mimic Globalize api
+    // https://github.com/jquery/globalize
+    // Maybe later switch to it
+
+    window.Globalize = {
+        translate: function (key) {
+
+            return window.localizationGlossary[key] || key;
+
+        }
+    };
+
+})(window);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/useredit.js b/dashboard-ui/scripts/useredit.js
index 5db0bc314b..cef7aeac24 100644
--- a/dashboard-ui/scripts/useredit.js
+++ b/dashboard-ui/scripts/useredit.js
@@ -12,7 +12,7 @@
             $('#featureAccessFields', page).show();
         }
 
-        Dashboard.setPageTitle(user.Name || "Add User");
+        Dashboard.setPageTitle(user.Name || Globalize.translate("AddUser"));
 
         $('#txtUserName', page).val(user.Name);
 
@@ -40,7 +40,7 @@
         Dashboard.validateCurrentUser(page);
 
         if (userId) {
-            Dashboard.alert("Settings saved.");
+            Dashboard.alert(Globalize.translate("SettingsSaved"));
         } else {
             Dashboard.navigate("userprofiles.html");
         }
diff --git a/dashboard-ui/scripts/userimagepage.js b/dashboard-ui/scripts/userimagepage.js
index 868f164764..f3b6196f79 100644
--- a/dashboard-ui/scripts/userimagepage.js
+++ b/dashboard-ui/scripts/userimagepage.js
@@ -53,15 +53,15 @@
 
         switch (evt.target.error.code) {
             case evt.target.error.NOT_FOUND_ERR:
-                Dashboard.showError('File Not Found!');
+                Dashboard.showError(Globalize.translate("FileNotFound"));
                 break;
             case evt.target.error.NOT_READABLE_ERR:
-                Dashboard.showError('File is not readable');
+                Dashboard.showError(Globalize.translate("FileReadError"));
                 break;
             case evt.target.error.ABORT_ERR:
                 break; // noop
             default:
-                Dashboard.showError('An error occurred reading this file.');
+                Dashboard.showError(Globalize.translate("FileReadError"));
         };
     }
 
@@ -73,7 +73,7 @@
     function onFileReaderAbort(evt) {
 
         Dashboard.hideLoadingMsg();
-        Dashboard.showError('File read cancelled');
+        Dashboard.showError(Globalize.translate("FileReadCancelled"));
     }
 
     function setFiles(page, files) {
@@ -156,7 +156,7 @@
 
         self.deleteImage = function () {
 
-            Dashboard.confirm("Are you sure you wish to delete the image?", "Delete Image", function (result) {
+            Dashboard.confirm(Globalize.translate("DeleteImageConfirmation"), Globalize.translate("DeleteImage"), function (result) {
 
                 if (result) {
 
diff --git a/dashboard-ui/scripts/userparentalcontrol.js b/dashboard-ui/scripts/userparentalcontrol.js
index 55a2883a6e..4887361ada 100644
--- a/dashboard-ui/scripts/userparentalcontrol.js
+++ b/dashboard-ui/scripts/userparentalcontrol.js
@@ -134,7 +134,7 @@
 
         Dashboard.validateCurrentUser(page);
 
-        Dashboard.alert("Settings saved.");
+        Dashboard.alert(Globalize.translate("SettingsSaved"));
     }
 
     function saveUser(user, page) {
diff --git a/dashboard-ui/scripts/userpassword.js b/dashboard-ui/scripts/userpassword.js
index 01e5a32427..e659d26add 100644
--- a/dashboard-ui/scripts/userpassword.js
+++ b/dashboard-ui/scripts/userpassword.js
@@ -15,7 +15,7 @@
             } else {
                 $('#btnResetPassword', page).hide();
                 $('#fldCurrentPassword', page).hide();
-                $('.formheader', page).html('Create Password').show();
+                $('.formheader', page).html(Globalize.translate("CreatePassword")).show();
             }
 
         });
@@ -36,7 +36,7 @@
 
             Dashboard.hideLoadingMsg();
 
-            Dashboard.alert("Password saved.");
+            Dashboard.alert(Globalize.translate("PasswordSaved"));
             loadUser(page);
 
         });
@@ -53,7 +53,7 @@
 
             if ($('#txtNewPassword', page).val() != $('#txtNewPasswordConfirm', page).val()) {
 
-                Dashboard.showError("Password and password confirmation must match.");
+                Dashboard.showError(Globalize.translate("PasswordMatchError"));
                 return false;
             }
 
@@ -68,11 +68,11 @@
 
         self.resetPassword = function () {
 
-            var msg = "Are you sure you wish to reset the password?";
+            var msg = Globalize.translate("PasswordResetConfirmation");
 
             var page = $.mobile.activePage;
 
-            Dashboard.confirm(msg, "Password Reset", function (result) {
+            Dashboard.confirm(msg, Globalize.translate("PasswordResetHeader"), function (result) {
 
                 if (result) {
                     var userId = getParameterByName("userId");
@@ -84,10 +84,10 @@
                         Dashboard.hideLoadingMsg();
 
                         Dashboard.alert({
-                            message: "The password has been reset.",
-                            title: "Password Reset"
+                            message: Globalize.translate("PasswordResetComplete"),
+                            title: Globalize.translate("PasswordResetHeader")
                         });
-                        
+
                         loadUser(page);
 
                     });
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index da6f80d9f2..854b7437c1 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -14,7 +14,7 @@
 
         var html = "";
 
-        html += '<li data-role="list-divider"><h3>Users</h3></li>';
+        html += '<li data-role="list-divider"><h3>' + Globalize.translate("Users") + '</h3></li>';
 
         for (var i = 0, length = users.length; i < length; i++) {
 
@@ -41,15 +41,15 @@
             html += "</h3>";
 
             html += "<p class='ui-li-aside'>";
-            if (user.Configuration.HasPassword) html += '<img src="css/images/userdata/password.png" alt="Password" title="Password" class="userProfileIcon" />';
-            if (user.Configuration.IsAdministrator) html += '<img src="css/images/userdata/administrator.png" alt="Administrator" title="Administrator" class="userProfileIcon" />';
+            if (user.Configuration.HasPassword) html += '<img src="css/images/userdata/password.png" alt="' + Globalize.translate("Password") + '" title="' + Globalize.translate("Password") + '" class="userProfileIcon" />';
+            if (user.Configuration.IsAdministrator) html += '<img src="css/images/userdata/administrator.png" alt="' + Globalize.translate("Administrator") + '" title="' + Globalize.translate("Administrator") + '" class="userProfileIcon" />';
 
             html += "</p>";
 
             html += "</a>";
 
 
-            html += "<a onclick='UserProfilesPage.deleteUser(this);' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#'>Delete</a>";
+            html += "<a onclick='UserProfilesPage.deleteUser(this);' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#'>" + Globalize.translate("Delete") + "</a>";
 
             html += "</li>";
         }
@@ -64,9 +64,9 @@
         var page = $.mobile.activePage;
         var name = link.getAttribute('data-username');
 
-        var msg = "Are you sure you wish to delete " + name + "?";
+        var msg = Globalize.translate("DeleteUserConfirmation").replace('{0}', name);
 
-        Dashboard.confirm(msg, "Delete User", function (result) {
+        Dashboard.confirm(msg, Globalize.translate("DeleteUser"), function (result) {
 
             if (result) {
                 Dashboard.showLoadingMsg();
diff --git a/dashboard-ui/scripts/usersettings.js b/dashboard-ui/scripts/usersettings.js
index be20a3da53..1b4a595c48 100644
--- a/dashboard-ui/scripts/usersettings.js
+++ b/dashboard-ui/scripts/usersettings.js
@@ -29,7 +29,7 @@
         Dashboard.validateCurrentUser(page);
 
         if (userId) {
-            Dashboard.alert("Settings saved.");
+            Dashboard.alert(Globalize.translate("SettingsSaved"));
         } else {
             Dashboard.navigate("userprofiles.html");
         }
