Add ability to unregister mobile devices

data/interfaces/default/css/plexpy.css

@@ -2405,6 +2405,22 @@ a .home-platforms-list-cover-face:hover
 .stacked-configs > li.add-notification-agent {
     cursor: pointer;
 }
+.stacked-configs > li.registered-device > span,
+.stacked-configs > li.registered-device > span:hover,
+.stacked-configs > li.registered-device > span:focus {
+    background-color: #282828;
+}
+.stacked-configs > li.registered-device > span > a.toggle-left,
+.stacked-configs > li.registered-device > span > span.toggle-left {
+    color: #999;
+    padding-right: 8px;
+}
+.stacked-configs > li.registered-device > span > span.delete-mobile-device {
+    cursor: pointer;
+}
+.stacked-configs > li.registered-device > span > span.delete-mobile-device:hover {
+    color: #c9302c;
+}
 .accordion {
     width: 100%;
     max-width: 900px;

data/interfaces/default/mobile_devices_table.html

@@ -0,0 +1,46 @@
+<%doc>
+USAGE DOCUMENTATION :: PLEASE LEAVE THIS AT THE TOP OF THIS FILE
+
+For Mako templating syntax documentation please visit: http://docs.makotemplates.org/en/latest/
+
+Filename:           mobile_devices_table.html
+Version:            0.1
+
+DOCUMENTATION :: END
+</%doc>
+
+% if devices_list:
+<ul class="stacked-configs list-unstyled">
+    % for device in sorted(devices_list, key=lambda k: k['device_name']):
+    <li class="registered-device" data-id="${device['device_id']}" data-name="${device['device_name']}">
+        <span>
+            <span class="toggle-left mobile-device-tooltip edit-mobile-device" data-toggle="tooltip" data-placement="top" title="Rename Device"><i class="fa fa-lg fa-pencil"></i></span>
+            <span class="mobile-device-name">${device['device_name']}</span>
+            <input type="text" class="edit-mobile-device-name hidden" value="${device['device_name']}" />
+            <span class="toggle-right delete-mobile-device"><i class="fa fa-lg fa-times"></i></span>
+        </span>
+    </li>
+    % endfor
+</ul>
+
+<script>
+    $('.mobile-device-tooltip').tooltip();
+
+    $('.delete-mobile-device').click(function () {
+        var device_id = $(this).closest('li').data('id');
+        var device_name = $(this).closest('li').data('name');
+        var msg = 'Are you sure you want to unregister the device <strong>' + device_name + '</strong> from PlexPy?';
+        var url = 'delete_mobile_device';
+        confirmAjaxCall(url, msg, { device_id: device_id }, null, getMobileDevicesTable);
+    });
+</script>
+% else:
+<ul class="stacked-configs list-unstyled">
+    <li class="registered-device">
+        <span>
+            <span class="toggle-left"><i class="fa fa-lg fa-mobile"></i></span>
+            No devices registered
+        </span>
+    </li>
+</ul>
+% endif

data/interfaces/default/settings.html

@@ -1112,6 +1112,16 @@
                                 <span style="color: #eb8600; padding-left: 10px;" id="generate_qr_msg">The API must be enabled under <a data-tab-destination="tabs-access_control" style="cursor: pointer;">Access Control</a> to use the app.</span>
                             </div>
                         </div>
+                        <div class="form-group">
+                            <label>Registered Devices</label>
+                            <p class="help-block">List of devices currently registered with the PlexPy server.</p>
+                            <div class="row">
+                                <div id="plexpy-mobile-devices-table" class="col-md-6">
+                                    <div class='text-muted'><i class="fa fa-refresh fa-spin"></i> Loading registered devices...</div>
+                                    <br>
+                                </div>
+                            </div>
+                        </div>
 
                     </div>
                 </div>
@@ -2451,6 +2461,17 @@
         });
     }
 
+    function getMobileDevicesTable() {
+        $.ajax({
+            url: 'get_mobile_devices_table',
+            cache: false,
+            async: true,
+            complete: function(xhr, status) {
+                $("#plexpy-mobile-devices-table").html(xhr.responseText);
+            }
+        });
+    }
+
 $(document).ready(function() {
 
     // Javascript to enable link to tab
@@ -2489,6 +2510,7 @@ $(document).ready(function() {
         getConfigurationTable();
         getSchedulerTable();
         getNotifiersTable();
+        getMobileDevicesTable();
         loadUpdateDistros();
         settingsChanged = false;
     }
@@ -2553,6 +2575,7 @@ $(document).ready(function() {
     getConfigurationTable();
     getSchedulerTable();
     getNotifiersTable();
+    getMobileDevicesTable();
 
     $('#changelog-modal-link').on('click', function (e) {
         e.preventDefault();