update connect

dashboard-ui/device.html

@@ -20,6 +20,11 @@
 
                         <ul data-role="listview" class="ulForm">
                             <li>
+                                <label for="txtCustomName">${LabelCustomDeviceDisplayName}</label>
+                                <input type="text" id="txtCustomName" data-mini="true" />
+                                <div class="fieldDescription">${LabelCustomDeviceDisplayNameHelp}</div>
+                            </li>
+                            <li id="fldCameraUploadPath" style="display:none;">
                                 <label for="txtUploadPath">${LabelCameraUploadPath}</label>
                                 <div style="display: inline-block; width: 92%;">
                                     <input type="text" id="txtUploadPath" data-mini="true" />
@@ -45,6 +50,9 @@
                 </div>
             </div>
         </div>
+        <script type="text/javascript">
+            $('.deviceForm').off('submit', DevicePage.onSubmit).on('submit', DevicePage.onSubmit);
+        </script>
     </div>
 </body>
 </html>

dashboard-ui/devicesupload.html

@@ -22,7 +22,7 @@
                     <p class="noDevices" style="display:none;color:red;">${MessageNoDevicesSupportCameraUpload}</p>
 
                     <br />
-                    <form class="devicesUploadForm">
+                    <form class="devicesUploadForm" style="display:none;">
 
                         <div class="devicesList">
 

dashboard-ui/scripts/device.js

@@ -1 +1,94 @@
-
+(function () {
+
+    function load(page, device, capabilities) {
+
+        if (capabilities.SupportsContentUploading) {
+            $('.fldCameraUploadPath', page).show();
+        } else {
+            $('.fldCameraUploadPath', page).hide();
+        }
+
+        $('#txtCustomName', page).val(device.CustomName || '');
+    }
+
+    function loadData(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var id = getParameterByName('id');
+
+        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', { Id: id }));
+        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Capabilities', { Id: id }));
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            load(page, response1[0], response2[0]);
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function save(page) {
+
+        var id = getParameterByName('id');
+
+        ApiClient.ajax({
+
+            url: ApiClient.getUrl('Devices/Options', { Id: id }),
+            type: 'POST',
+            data: JSON.stringify({
+
+                CustomName: $('#txtCustomName', page).val(),
+                CameraUploadPath: $('#txtUploadPath', page).val()
+
+            }),
+            contentType: "application/json"
+
+        }).done(Dashboard.processServerConfigurationUpdateResult);
+    }
+
+    $(document).on('pageinit', "#devicePage", function () {
+
+        var page = this;
+
+        $('#btnSelectUploadPath', page).on("click.selectDirectory", function () {
+
+            var picker = new DirectoryBrowser(page);
+
+            picker.show({
+
+                callback: function (path) {
+
+                    if (path) {
+                        $('#txtUploadPath', page).val(path);
+                    }
+                    picker.close();
+                },
+
+                header: Globalize.translate('HeaderSelectUploadPath')
+            });
+        });
+
+
+    }).on('pageshow', "#devicePage", function () {
+
+        var page = this;
+
+        loadData(page);
+
+    });
+
+    window.DevicePage = {
+
+        onSubmit: function () {
+
+            var form = this;
+            var page = $(form).parents('.page');
+
+            save(page);
+
+            return false;
+        }
+    };
+
+})();

dashboard-ui/scripts/userprofilespage.js

@@ -15,7 +15,7 @@
 
                     ApiClient.deleteUser(id).done(function () {
 
-                        loadUsers(page);
+                        loadData(page);
                     });
                 }
             });
@@ -23,10 +23,6 @@
         }).popup('close');
     }
 
-    function closeUserMenu(page) {
-        $('.userMenu', page).popup('close').remove();
-    }
-
     function showUserMenu(elem) {
 
         var card = $(elem).parents('.card');
@@ -141,20 +137,145 @@
         return html;
     }
 
-    function renderUsers(page, users) {
+    function renderUsersIntoElement(elem, users) {
 
-        var html = '';
+        var html = getUserSectionHtml(users);
 
-        html += getUserSectionHtml(users);
+        elem.html(html).trigger('create');
-
-        var elem = $('.users', page).html(html).trigger('create');
 
         $('.btnUserMenu', elem).on('click', function () {
             showUserMenu(this);
         });
     }
 
-    function loadUsers(page) {
+    function renderUsers(page, users) {
+
+        renderUsersIntoElement($('.users', page), users);
+    }
+
+    function showPendingUserMenu(elem) {
+
+        var card = $(elem).parents('.card');
+        var page = $(elem).parents('.page');
+        var id = card.attr('data-id');
+
+        $('.userMenu', page).popup("close").remove();
+
+        var html = '<div data-role="popup" class="userMenu" data-history="false" 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('ButtonCancel') + '</a></li>';
+
+        html += '</ul>';
+
+        html += '</div>';
+
+        page.append(html);
+
+        var flyout = $('.userMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
+
+            $(this).off("popupafterclose").remove();
+
+        });
+
+        $('.btnDelete', flyout).on('click', function () {
+            cancelAuthorization(page, this.getAttribute('data-id'));
+            $('.userMenu', page).popup("close").remove();
+        });
+    }
+
+    function getPendingUserHtml(user) {
+
+        var html = '';
+
+        var cssClass = "card homePageSquareCard alternateHover bottomPaddedCard";
+
+        html += "<div data-id='" + user.Id + "' class='" + cssClass + "'>";
+
+        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardScalable">';
+
+        html += '<div class="cardPadder"></div>';
+
+        var href = "#";
+        html += '<a class="cardContent" href="' + href + '">';
+
+        var imgUrl = user.ImageUrl || 'css/images/userflyoutdefault.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="btnUserMenu" 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 += user.UserName;
+        html += "</div>";
+
+        // cardFooter
+        html += "</div>";
+
+        // cardBox
+        html += "</div>";
+
+        // card
+        html += "</div>";
+
+        return html;
+    }
+
+    function renderPendingGuests(page, users) {
+
+        if (users.length) {
+            $('.sectionPendingGuests', page).show();
+        } else {
+            $('.sectionPendingGuests', page).hide();
+        }
+
+        var html = users.map(getPendingUserHtml).join('');
+
+        var elem = $('.pending', page).html(html).trigger('create');
+
+        $('.btnUserMenu', elem).on('click', function () {
+            showPendingUserMenu(this);
+        });
+    }
+
+    function cancelAuthorization(page, id) {
+        
+        Dashboard.showLoadingMsg();
+
+        // Add/Update connect info
+        ApiClient.ajax({
+
+            type: "DELETE",
+            url: ApiClient.getUrl('Connect/Pending', {
+
+                Id: id
+
+            })
+
+        }).done(function () {
+
+            loadData(page);
+
+        });
+    }
+
+    function loadData(page) {
 
         Dashboard.showLoadingMsg();
 
@@ -162,14 +283,57 @@
             renderUsers(page, users);
             Dashboard.hideLoadingMsg();
         });
+
+        ApiClient.getJSON(ApiClient.getUrl('Connect/Pending')).done(function(pending) {
+
+            renderPendingGuests(page, pending);
+        });
+    }
+
+    function inviteUser(page) {
+
+        Dashboard.showLoadingMsg();
+
+        // Add/Update connect info
+        ApiClient.ajax({
+
+            type: "POST",
+            url: ApiClient.getUrl('Connect/Invite', {
+
+                ConnectUsername: $('#txtConnectUsername', page).val(),
+                SendingUserId: Dashboard.getCurrentUserId()
+
+            }),
+            dataType: 'json'
+
+        }).done(function (result) {
+
+            $('#popupInvite').popup('close');
+            loadData(page);
+
+        });
+
     }
 
     $(document).on('pagebeforeshow', "#userProfilesPage", function () {
 
         var page = this;
 
-        loadUsers(page);
+        loadData(page);
     });
 
+    window.UserProfilesPage = {
+
+        onSubmit: function () {
+
+            var form = this;
+
+            var page = $(form).parents('.page');
+
+            inviteUser(page);
+
+            return false;
+        }
+    };
 
 })(document, window, jQuery);

dashboard-ui/userprofiles.html

@@ -15,21 +15,60 @@
 
                 <div class="readOnlyContent">
                     <div>
-                        <a data-role="button" data-icon="plus" href="useredit.html" data-inline="true">
+                        <a data-role="button" data-icon="plus" href="#popupInvite" data-rel="popup" data-position-to="window" data-inline="true">
-                            ${ButtonAddUser}
+                            ${ButtonInviteUser}
+                        </a>
+                        <a data-role="button" data-icon="plus" href="useredit.html" data-inline="true">
+                            ${ButtonAddLocalUser}
                         </a>
-                        <!--<a data-role="button" data-icon="plus" href="useredit.html" data-inline="true">
-                            ${ButtonInviteMediaBrowserUser}
-                        </a>-->
                     </div>
                 </div>
 
                 <div class="itemsContainer users" style="text-align:left;">
 
                 </div>
+                <br />
+                <div class="sectionPendingGuests" style="display:none;">
+                    <br />
+                    <br />
+                    <div class="ui-bar-a" style="padding: 0 1em;"><h3>Pending Invitations</h3></div>
+                    <div class="itemsContainer pending" style="text-align:left;"></div>
+                </div>
+            </div>
+
+            <div data-role="popup" id="popupInvite" data-theme="a">
+                
+                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">${ButtonClose}</a>
+
+                <div class="ui-bar-a" style="text-align: center; padding: 5px 20px;">
+                    <h3 style="margin: .5em;">${HeaderInviteUser}</h3>
+                </div>
+
+                <div style="padding:10px 20px;">
+
+                    <p>${HeaderInviteUserHelp}</p>
+                    <form class="addUserForm">
+                        <div>
+                            <label for="txtConnectUsername">${LabelConnectUserName}</label>
+                            <input type="text" id="txtConnectUsername" value="" placeholder="Username" required="required">
+                            <div class="fieldDescription">
+                                <div>${LabelConnectInviteHelp}</div>
+                                <div style="margin-top: .75em;"><a href="http://mediabrowser.tv/connect" target="_blank">${ButtonLearnMoreAboutMediaBrowserConnect}</a></div>
+                            </div>
+
+                            <br />
+                            <button type="submit" data-icon="mail">${ButtonSendInvitation}</button>
+                        </div>
+                    </form>
 
                 </div>
+
             </div>
+
+        </div>
+        <script type="text/javascript">
+            $('.addUserForm').off('submit', UserProfilesPage.onSubmit).on('submit', UserProfilesPage.onSubmit);
+        </script>
     </div>
 </body>
 </html>