diff --git a/platypush/backend/http/static/js/music.snapcast.js b/platypush/backend/http/static/js/music.snapcast.js index d87de155eb..90007b90cc 100644 --- a/platypush/backend/http/static/js/music.snapcast.js +++ b/platypush/backend/http/static/js/music.snapcast.js @@ -82,16 +82,31 @@ $(document).ready(function() { var $host = $('
') .addClass('snapcast-host-container') + .addClass('snapcast-settings-btn') + .attr('data-modal', '#snapcast-host-modal') .data('name', name) .data('host', host); - var $header = $('').addClass('row') + var $hostHeader = $('').addClass('row') .addClass('snapcast-host-header'); - var $title = $('').text(name); + var $hostTitle = $('') + .addClass('snapcast-host-settings') + .addClass('snapcast-settings-btn') + .attr('data-modal', '#snapcast-host-modal'); - $title.appendTo($header); - $header.appendTo($host); + var $hostSettings = $('') + .attr('data-modal', '#snapcast-host-modal') + .addClass('fa fa-ellipsis-v'); + + var $hostName = $('') + .attr('data-modal', '#snapcast-host-modal') + .html(' ' + name); + + $hostSettings.appendTo($hostTitle); + $hostName.appendTo($hostTitle); + $hostTitle.appendTo($hostHeader); + $hostHeader.appendTo($host); for (var group of status.groups) { var groupName = group.name || group.stream_id; @@ -274,8 +289,27 @@ $(document).ready(function() { var groupId = $(this).parents('.snapcast-group-container').data('id'); var groupName = $(this).parents('.snapcast-group-container').data('name'); var $modal = $($(this).data('modal')); + var $clients = $(this).parents('.snapcast-host-container').find('.snapcast-client-container'); + var groupClients = $(this).parents('.snapcast-group-container') + .find('.snapcast-client-container') + .map((i, client) => $(client).data('id')); + var $clientsList = $modal.find('.snapcast-group-clients'); $modal.find('.modal-header').text(groupName); + + for (var client of $clients) { + var $row = $('').addClass('row'); + var $input = $('').attr('type', 'checkbox') + .attr('name', $(client).data('id')) + .prop('checked', $.inArray($(client).data('id'), groupClients) >= 0); + var $label = $('') + .attr('for', $(client).data('id')) + .text($(client).data('name')); + + $input.appendTo($row); + $label.appendTo($row); + $row.appendTo($clientsList); + } }); $container.on('click touch', '.snapcast-client-settings', function(evt) { @@ -305,7 +339,6 @@ $(document).ready(function() { $modal.find('form').find('[name=delete]').prop('checked', false); }; - console.log($modal); clearModal(); }); diff --git a/platypush/backend/http/templates/plugins/music.snapcast.html b/platypush/backend/http/templates/plugins/music.snapcast.html index 7b9105b04d..94881a0474 100644 --- a/platypush/backend/http/templates/plugins/music.snapcast.html +++ b/platypush/backend/http/templates/plugins/music.snapcast.html @@ -13,11 +13,28 @@ } +